React

React Emotion Error nth-child / nth-of-type

1. react emotion 사용 중 에러 발생 - The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type" 2. 차이점 - nth-child(n) : 부모의 모든 자식 중 n번째 - nth-of-type(n) : 부모의 특정 자식 중 n번째 3. 이유 성능적인 문제는 아니고 SSR할 때 안전하지 않다. 스타일을 받아야 할 요소가 SSR 시 제자리에 있지 않을 경우에 제대로 된 스타일 적용되지 않습니다. 4. EX( :first-child ) import styled from "@emotion/styled"; const Text = styled.p..

React Build Tool - vite, craco

vite 선택 이유 : build 시간의 불편을 느끼지 상대 경로에 대한 불편은 아직 없음 Bundling node_modules 용량 큼 import require 문법은 브라우저 친화적이지 않음 vite $ npm create vite@latest yarn create vite Vite 시작 프로젝트의 성장에 따라 번들링 시간이 늘어남 Webpack의 빌드 속도는 느림 빠른 이유 esbuild 를 사용하여 종속성을 미리 Bundle - 브라우저가 요청할 때 소스 코드를 변환, 제공 조건부 동적으로 가져오기에 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다. craco yarn add @craco/craco craco 시작 craco.config.js 파일 하나로 상대 경로가 아닌 ..