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 에서는..

☘️ useRef 란?useRef 는 React Hook 중 하나이며, 공식 문서에 따르면 useRef 를 다음과 같이 설명한다. useRef.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지[출처: React 공식문서] useRef 는 DOM 요소에 직접 접근하기 위해 사용되며, 변하는 값을 유지하기 위해 사용된다.그래서 버튼을 눌러 원하는 요소로 스크롤하기 위해 Dom 요소에 직접 접근하는 useRef 가 사용된다. ☘️ 구현하기화면 만들기먼저 기본적인 화면을 만들어 준다.// App.jsximport './App.css';function App() { return ( ..

Zod 에 대해서Zod 정의Zod 란 무엇일까? ZodTypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고Zod 이 정적 TypeScript 유형을 자동으로 추론한다[출처] 공식문서 GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com Zod 장점공식문서에 따르면 장점은 다음과 같다.의존성 없음Node.js 및 모든 최..

+) next.js 에서 Zustand persis 사용하기 (feat. Hydration error)https://jjang-j.tistory.com/124 [Next.js] Zustand persist 사용하기 (feat. Hydration 에러 해결)시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되jjang-j.tistory.com 시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경우stat..

☘️ 시작하며...React 18 의 기능으로 Suspense 가 있다. 그러면 Suspense 가 무엇일까? Suspense하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩을 나타낼 수 있도록 해주는 것[출처]: 공식문서이러한 Suspense 를 서버 상태관리 라이브러리인 TanStack Query(React Query) 와 함께 안정적으로 사용할 수 있다. 그래서 어떻게 사용하지는 지 알아볼 예정이다. ☘️ Suspense만약 TanStack Query 에 대해 잘 모를 경우 해당 게시물에서 이에 대한 내용을 확인할 수 있다. Suspense 세팅React 에 내장된 Suspense 을 import 해주고import React, { Suspense } from 'react';Su..

시작하며...내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다.그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이 외에도 Vue 등에서도 사용이 가능해지면서 TanStack Query 로 이름을 바꿨다고 한다. 그래서 더 자세히 공부할 겸 새로운 내용들을 알기 위해 글을 작성하기로 했다. TanStack Query V5정의TanStack Query 란 무엇일까? TanStack Queryit makes fetching, caching, synchronizing and updating server state in your web applications a breeze.웹 애플리케이션에서 서버..

개발 프로젝트를 진행하기 앞서 고려해야 될 것이 있다.바로 CSS Reset(리셋) 과 CSS Normalize(노멀라이즈) 중에서 어떤 것을 선택할 지 이다. ☘️ CSS Reset / Normalize 사용 이유그렇다면 CSS Reset 과 CSS Normalize 는 왜 사용하는 것일까? 브라우저 간 일관성 확보우리가 사용할 수 있는 브라우저는 크롬, 사파리, 엣지, 파이어폭스 등 매우 다양하다.하지만 이러한 브라우저는 자체 기본 스타일을 가지고 있어 브라우저마다 다르게 보일 수 있다는 것이다.그래서 이러한 일관성 확보하고, 브라우저 간 차이를 줄이기 위해 사용한다. ☘️ CSS Reset vs CSS Normalize그렇다면 둘 중에 어떤 것을 사용해야 할까? CSS ResetCSS Reset 은..

시작하기 앞서...(참고로 react + vite + typescript 프로젝트)프로젝트를 진행하다 보면 경로가 길어져서 코드가 지저분해 보이고 한 눈에 들어오지 않게 된다.import LoginComponent from './components/LoginComponents/LoginComponent';그래서 path alias 를 설정하여 import 경로를 간단하게 줄일 수 있다. tsconfig.json 수정tsconfig.json 에서 원하는 경로 별칭을 설정한다.나는 src/ -> @/ 그리고 src/components/LoginComponents/ -> @/LoginComponents 로 설정하였다.{ "compilerOptions": { ... /* Path Alias */ ..