설치 해당 명령어로 설치, 선택지는 취향껏 선택해주되 App Router 는 Yes를 선택해줍니다. npx create-next-app@latest 프로젝트명 라우팅 app 하위 경로에 입력한 폴더 명을 기준으로 라우팅 경로가 구성됩니다. 구성 요소로는 page 와 layout 두 가지가 있으며, 다음과 같이 정의할 수 있습니다. page - 경로에 접근했을 때, 사용자 화면에 보이는 페이지 layout - 페이지를 둘러싸고 있는 레이아웃 컴포넌트 next/Link 이제 하위 a 태그가 필요하지 않습니다. 기본적인 사용법은 아래 코드와 같습니다. import Link from 'next/link'; export default function Home() { return ( Home About Us Blo..

localStorage 데이터 저장하기 setItem 키-값 쌍을 저장합니다. localStorage.setItem(key, value) 문자열 형태로 저장되므로, 객체의 형태로 저장하려면 JSON.stringify() 를 통해 문자열로 변환해주어야 합니다. localStorage.setItem(key, JSON.stringify(value)) localStorage 데이터 받아오기 getItem 키에 해당하는 값을 받아옵니다. localStorage.getItem(key) 문자열 형태로 받아오므로, 객체의 형태로 받아오려면 JSON.parse() 를 통해 객체로 변환해주어야 합니다. JSON.parse(localStorage.getItem(key)) key 인덱스에 해당하는 키를 받아옵니다. local..

:has() 선택자는 해당 부모 선택자가 특정 자식 선택자를 가지고 있을 경우 적용하는 CSS의 if문입니다. 기존 CSS로는 구현할 수 없었던 것들을 구현할 수 있지만, 현재 파이어폭스에서 지원하고 있지 않아 사용 시 유의해서 사용해야합니다. 기본적인 사용법 /* div 요소가 h2를 가지고 있을 경우 */ div:has(h2) { border: 2px solid #fe4902; } /* div 요소가 h3 그리고 p를 가지고 있을 경우 (and 논리) */ div:has(h3, p) { background-color: #fe4902; } /* div 요소가 형제로 p를 가지고 있을 경우 */ div:has(+ p) { border: 2px solid #000; } See the Pen :has() -..

vite.config.ts base 를 입력하고, vite-tsconfig-paths 를 설치 후 plugins 에 추가해줍니다. // vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tsconfigPaths from "vite-tsconfig-paths"; // https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [react(), tsconfigPaths()], }); tsconfig.json baseUrl 를 입력해줍니다. // tsconfig.json { "compilerOption..

설치 명령어로 다음과 같은 패키지를 설치해줍니다. $ yarn add @emotion/styled @emotion/react TypeScript 환경에서 사용하기 위해서는 tsconfig.json에 jsxImportSource를 추가해 주어야 합니다. // tsconfig.json { "compilerOptions": { //... "jsxImportSource": "@emotion/react" } } Global Styles 우선 Globalstyle.tsx 파일을 생성하고 아래와 같이 작성해줍니다. // GlobalStyle.tsx import { css, Global } from '@emotion/react'; const style = css` /* global로 사용할 css 작성 */ ` con..

CRA 4.0 버전부터 권장하는 asset 폴더의 위치가 public 폴더에서 src 폴더로 이동하였습니다. src 폴더 (권장) 설정 // tsconfig.json { "compilerOptions": { "baseUrl": "src", ... }, "include": [ "src" ] } 해당 설정 후 서버가 실행되어있었다면, 수정 후 재실행해야합니다. img background-image div { background-image: url("images/logo.svg"); } public 폴더 img background-image