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

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

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

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

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) React 개발 도구 설치React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다. 정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다. 현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다. React 개발 도구 활용하기 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다. Com..

[목차]시작하며...프로젝트 선정 이유 및 목적프로젝트 초기 세팅컨벤션깃허브내가 구현한 기능프로젝트 회고 시작하며...코드잇 스프린트 6기 - 파트2 에서 기초 프로젝트를 진행하였다. 프로젝트 주제는 제공된 4가지 중에서 하나를 선택해서 약 2주 동안 진행하고 주어진 주제에서 기본 요구사항은 지키면서 그 외 디자인이나 추가적인 기능을 추가할 수도 있었다. 프로젝트를 끝난지 시간은 조금 지났지만 내가 어떤 걸 맡았고 어떻게 구현했는지 상기시키고 정리하기 위해 회고록을 작성하게 되었다. 프로젝트 선정 이유 및 목적선정 이유주제는 총 4가지가 있었으며 가장 난이도가 높은 프로젝트가 바로 Fandom-k 라는 프로젝트였다.그래서 이왕 하는 김에 어려운 프로젝트를 하면 좋을 것 같고 다른 프로젝트와 비교해 보았..

React 에서의 SVG그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲 반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다! Next.js 에서의 SVGNext.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다. @svgr/webpack 설치SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.npm install @svgr/webpack 웹팩 설정 추가next.config.js 에 웹팩..

시작하기 앞서...React 에서 get 요청을 할 때, 로딩여부인 isLoading, 에러 객체 정보가 저장된 loadError, 데이터를 로드하는 함수인 handleLoad 를 반환하는 useFetch 라는 커스텀 훅을 만들어 사용하였다.import { useState } from 'react';const useFetch = (getData) => { const [isLoading, setIsLoading] = useState(false); const [loadError, setLoadError] = useState(null); const handleLoad = async (...arg) => { try { setLoadError(null); setIsLoading(tr..

시작하기 앞서기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다. 마이그레이션 방법1. TypeScript 설치타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest2. tsconfig.json 작성기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.나는 아래 코드에 있는 내용을 작성했다.{ "compilerOptions": { "baseUrl": "src", "target": "es5", "..

시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하기 위해 글을 작성하게 되었다. Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com  Framer motion 적용Framer motion 을 사용한 다섯 가지 애니메이션을 적용할 것이다.버튼 애니메이션모달 애니메이션스크롤 애니메이션화면 전환 애니메이션 우선 Framer motion 을 사용하기 위해 해당 라이브러리를 설치한다.npm install framer-moti..