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

시작하기 앞서...제목, 내용, 이미지를 입력하는 페이지에서 내용을 입력할 때마다 사진이 계속 다시 렌더링 되어 깜박거리는 현상을 발견하였다.그래서 이를 해결하기 위해 렌더링을 최소화하는 방법을 찾아보았다. React Developer Tools크롬 확장 프로그램 중에서 React Developer Tools 를 설치하고개발자 도구 -> Profiler -> 설정에서 Highlight updates when components render 를 클릭하면 어디서 렌더링이 발생하는지 시각적으로 확인할 수 있게 된다. 그러면 아래 사진처럼 렌더링이 일어나는 부분에 노란색 테두리가 생기게 된다.입력되는 부분은 내용인데 불필요하게 사진이 있는 곳까지 다시 렌더링 되어 사진을 화면에 보여주다 보니 깜박거리는 현상이 ..

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..

☘️ 시작하기 앞서...나는 지금까지 프로젝트를 진행하면서 Prop Drilling 문제를 해결하기 위해 전역 상태 관리 라이브러리인 Redux, Recoil, Zustand 를 사용해 본 경험이 있었다. (완전 얕게...) 그리고 form 데이터는 React Hook Form 의 formProvider 를 사용해 보았다. 그런데 웃기게도 React 에 기본적으로 내장되어 있는 전역 상태를 할 수 있는 Context API 를 모르고 있었고 사용해 본 경험이 없었다.하지만 코드잇 강의를 들으면서 Context API 에 대해 배우게 되었고 그 이후에 프로젝트에 직접 적용해 보고 그전에 사용해 본 상태관리 라이브러리와 비교해서 어떤 점에 장단점이 있는지 알게 되었다. 그래서 이번 글에서는 Context A..

Q. 질문 1웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #8)A. 렌더링 방식 - CSR, SSR, SSG웹 페이지 렌더링 방식에는 CSR, SSR, SSG 가 있다. 1. CSR - 클라이언트 사이드 렌더링1-1. 특징먼저 CSR 은 클라이언트에서 렌더링을 하는 방식이다. 사용자가 웹사이트에 접속을 하면 브라우저는 서버에 요청을 하여 빈 HTML 과 연결된 JavaScript 를 브라우저에게 주게 된다.그러면 브라우저에서는 JavaScript 를 사용하여 동적 DoM 을 생성해 사용자에게 화면을 보여준다. 일반적으로 React 와 같은 프레임워크를 사용하여 개발이 된다. 1-2. 적합한 상황동적 ..

Q. 질문 1리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #7) A. key propsReact 에서 map 을 사용하여 배열을 렌더링 할 때엔 key 를 써야 한다.{options.map((option) => ( {option.label} ))} 만약 key 를 쓰지 않을 경우 아래처럼 콘솔창에 key 가 있어야 된다고 경고가 뜬다.그렇다면 왜 key 를 써야할까? 엘리먼트에 안정적인 고유성을 부여각 엘리먼트는 key 값을 통해 어떤 항목을 변경, 추가, 삭제할지 식별해준다.그래서 엘리먼트의 고유성을 부여하기 위해서는 key 를 지정해야 한다. 그래서 key 값으로 식별을 하여 해당 엘리먼트에 안정적인 고유성을 부여해 렌더링을 효과..

Q. 질문리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #6) A. DomDOM 이란?DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다. 하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다. 레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다. 그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다. A. Virtual DOMVirtual DOM 이란?React 에서는..