tailwind, postcss, autoprefixer 설치 npm install -D tailwindcss postcss autoprefixer tailwind config 파일 생성 npx tailwindcss init -p tailwind.config.js 파일 설정 tailwind 를 적용할 파일들의 path 설정 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], } global.css 파일 설정 @tailwind base;..

설치 해당 명령어로 설치, 선택지는 취향껏 선택해주되 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..

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