발생한 문제검색어를 입력하고 검색 버튼이나 엔터를 눌렀을 때 검색이 되는 기능을 구현하고 있다. 위에 코드를 실행해 보니 엔터를 눌렀을 때 값이 두 번 찍히는 현상을 발견하게 되었다. (검색 버튼 눌렀을 땐 한 번) 그래서 혹시 reactStricMode 때문일 수도 있어 주석처리 했는데도 변함이 없었다. (참고로 Next.js 임)  문제 이유구글링을 통해 이러한 문제가 발생한 이유를 살펴보니 바로 한글 때문이였다.영어와 숫자와 달리 한글은 자음과 모음을 조합해서 만드는 언어라서 조합 중인 문자를 처리하는 과정에서 keydown 이 두 번이나 발생하는 것이라고 한다. 그래서 문자가 조합 중이면 keydown 이벤트가 발생하지 않도록 처리해야 한다. 문제 해결문제를 해결하기 위해 다음과 같이 절차를 진행..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) package.json 생성하기create-next-app 없이 next.js 프로젝트를 만들기 위해 먼저 package.json 을 만들어야 한다.먼저 npm init 를 입력해서 package.json 을 생성한다. react, react-dom, next 설치그 다음으로 Next.js 프로젝트를 실행하는데 필요한 핵심 라이브러리인 react, react-dom, next 를 설치한다. devDependencies 에 필요한 패키지 설치typescript 와, 타입스크립트 타입 지원에 필요한 @types/react, @types/react-dom, @types/node 그리고 ESLint 에 필요한 eslint, eslin..

시작하며...팀 프로젝트를 하다 보면 커밋 메시지 컨벤션을 정하게 된다.그런데 이렇게 규칙을 정했음에도 실수로 커밋 메시지를 잘못 작성하거나 지키지 않는 경우도 발생하게 된다. 😭 그래서 이러한 커밋 컨벤션을 지키지 않았을 때 커밋이 되지 않도록 commitlint 를 설정할 수 있다. commitlint 설정하기husky 설치하기husky 는 Git 이벤트가 발생할 때 자동으로 실행되는 스크립트로 커밋을 만들기 전에 특정 작업을 수행하거나 푸시하기 전에 작업을 할 수 있도록 도와준다. 그래서 먼저 husky 를 설치한다. npm install husky --save-devnpx husky install commit-msg 파일 작성husky 를 설치하면 프로젝트에 .husky 라는 폴더가 생기게 된다..

기본 배경컴공은 아니지만 유사 학과 4년제 졸업한 전공자SQLD 자격증 취득웹 프론트엔드 개발자 취준생 지난 시험들...처음 정보처리기사를 본 건 2023년 2회차였다. 2023년 2회차필기는 거의 1~2일 동안 기출 계속 돌려서 바로 합격했고, 그 당시 실기 시험은 계절학기로 6학점 듣고 있어서 실기 시험에 큰 시간을 쏟지 못해 아쉽게 58점을 맞고 떨어졌다. 2023년 3회차막학기였고, 학점도 4학점 밖에 안 들었는데 지난 2회차보다 점수가 더 떨어져서 56점 정도였던 걸로 기억을 한다. 지금 생각해 보니깐 공부를 덜 했던 것 같다. 2024년 1회차 시험 결과올해 1회차 시험 준비 기간엔 부트캠프랑 동시에 병행하고 있어서 공부할 시간이 부족했는데도 최대한 시간을 잘 활용하고 한 달 전부터 미리 공부..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위해 여러 가지 방법이 있는데 그 중에 정적 코드 분석이 있다. 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사전에 수정하는 것 자바스크립트에서 가장 많이 사용되고 있는 정적 코드 분석 도구가 바로 ESLint 이다. ESLint 살펴보기ESLint 는 어떻게 자바스크립트 코드를 읽어서 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.2번에서 구조화한 트리를 AST(Abstract..

시작하며...프론트엔드에서 React, Axios 를 사용하면서 로그인/회원가입 기능을 구현할 때 서버에서 쿠키로 refresh token 과 access token 을 받아 유저 기능를 하는 방법에 대해 알아볼 것이다. 로그인 기능 구현React 와 axios 로 서버에 로그인 요청을 하는 코드를 작성해서 실행을 하면응답으로 서버에서 쿠키로 access token 과 refresh token 를 보내주게 된다.서버에서 전달해준 쿠키를 클라이언트 측에서 저장하기 위해 withCredentials 를 true 로 설정한다.다시 로그인 요청 후 개발자 도구 → 애플리케이션 탭 → 쿠키 를 확인해보면 서버에서 전달받은 토큰이 쿠키에 제대로 저장되는 것을 확인할 수 있다. 그러면 이제 서버에 요청을 보낼 때도 ..

1. 두 개 뽑아서 더하기[프로그래머스 1단계 - 두 개 뽑아서 더하기] 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1-1. 내 풀이for 문을 사용하여 모든 결과의 경우를 만들고 오름차순으로 정렬한 후, Set 을 사용하여 중복을 제거하였다.function solution(numbers) {    let arr = []    for(i=0; i a - b));    return [...result];}1-2. 다른 사람 풀이다른 사람도 나와 같은 방법으로 풀었다.function solution(numbers) {    const temp = []    f..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) 크롬 개발자 도구란?개발자 도구란 무엇일까? 개발자 도구웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 강력한 개발 도구 도구 더보기 → 개발자 도구 를 눌러 확인하거나, 마우스 오른쪽 버튼 클릭 → 검사 를 눌러 개발자 도구를 볼 수 있다.( Mac 단축키: cmd + option + i ) 만약 웹사이트를 제대로 디버깅 하고 싶다면 시크릿 모드에서 하는 걸 추천한다. 왜냐하면 각종 확장 프로그램이 깔려 있지 않아 순수하게 웹페이지와 관련된 정보를 확인할 수 있기 때문이다. 요소 탭크롬 개발자 도구의 첫 번째 탭은 바로 요소 탭이다. 여기서 현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.왼..

시작하기 앞서...React Hook Form 을  공통 컴포넌트에 사용을 하는데 다음과 같은 오류가 발생하였다. 바로 FormInput 이라는 컴포넌트가 ref 를 받을 수 없기 때문이다. 그래서 이를 해결하기 위해 forwardRef 를 사용해야 한다.  React Hook Form 에서 ref 받아야 되는 이유FormInput 이라는 input 공통 컴포넌트를 사용하고 있다. React Hook Form 은 내부적으로 ref 를 등록하여 각 폼 요소의 값과 상태를 추적하는 원리로 동작한다. 그래서 React Hook Form 은 register 함수를 사용하여 ref 로 등록하는데 FormInput 컴포넌트에서는 ref 를 전달받지 못해 위에 에러가 발생하는 것이다.  그래서 부모 컴포넌트로부터 자..

시작하며... memo, useMemo, useCallback 사용해서 렌더링 최초화 하기!!시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하jjang-j.tistory.com지난 게시물을 보면 이미지가 계속 렌더링 되어 깜박거리는 현상을 useMemo 를 사용하여 해결하였다. 그러나 이미지 미리보기 URL 을 만들기 위해 사용했던 URL.createObjectURL() 의 MDN 문서를 보니 더 이상 사용하지 않을 땐  URL.revokeObjectURL() 를 사용해서 하나씩 해제해줘야 한다고 적혀있는 것을 발견했다.  그래서 리액트 Side Effect 의 Clea..