☘️ 문제점React 에서 컴포넌트의 틀을 직접 코드로 작성하다 보면 번거롭고, 복붙을 하게 되면 실수하는 경우가 발생한다.그래서 이러한 문제점을 해결하기 위해 코드 스닛펫을 사용하여 간편하게 코드의 틀을 만들 수 있어 시간을 절약할 수 있다. ☘️ 코드 스닛펫 Extension코드 스닛펫을 간단하게 익스텐션(Extension)을 이용해 사용할 수 있다.다양한 익스텐션이 있는데 그중에서 내가 사용하는 익스텐션은 Reactjs code snippets 이다. 해당 익스텐션의 스니펫의 종류는 Reactjs code snippets 에서 자세히 볼 수 있다. 코드 스닛펫 익스텐션 - 사용 방법다양한 스니펫 중에서 내가 제일 많이 사용하는 건 rsc 이다.아래처럼 키워드를 입력하고 엔터를 누르면 자동으로 코드가..

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

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

Vite 사용 이유Vite 란 무엇일까? Vite빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정을 제공[출처] Vite 공식 문서 ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev Create-React-App 단점우리가 기본적으로 React 프로젝트를 만들 때, Create-React-App(일명 CRA)를 사용한다.CRA에는 다음과 같은 단점들이 있다. 1. node_modules 용량 큼CRA로 만든 프로젝트에는 node_modul..