Carrot market 정복 노트 [1] - "Setup"

Velog 의 시작..

먼저, Carrot market 수업(by Nomad coders)을 한번 다 듣고, 모르는것, 알아야 될것 등 모든걸 내 것으로 만들겠다는 마음에 시작 하게 되었다. 이 Carrot market 정복 노트 게시글들은 내가 잊지 말아야할 내용들을 나중에 개인 프로젝트를 하게 될때 Referance 로 사용 할수 있게 정리 해 놓은 곳이다.

Setup

NextJs ?

SSR, SEO, TypeScript, API, automatic routing등 개발에 있어 편리성과 생산성을 높일수 있는 많은 장점들과 기능들을 제공하고 있는 React Framework 이다.

• npx create-next-app@latest --typescript
  nextjs 와 typescript를 install.

• npm i next@latest react@rc react-dom@rc
  react의 rc(release candidate) 버전을 사용하고 싶다면 이 커맨드를 이용해 install 한다.

TailwindCSS ?

utility-first CSS framework 이며, className 속성에 스타일을 지정 할수 있다.
VSC 에서 Tailwind CSS Intellisense 이라는 extension 을 설치하여 자동 완성 기능을 추가할수있다

• npm install -D tailwindcss postcss autoprefixer
  tailwindcss, postcss, autoprefixer를 install.

• npx tailwindcss init -p

postcss.config.js 와 tailwind.config.js 파일이 생성 된다.
그리고, tailwind.config.js 파일내에 tailwind가 적용 되어지게 설정하는 코드를 넣어 주어야 된다.

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    // pages 또는 components폴더 안에 어떠한 폴더든 그 속에 있는 파일의 extension 이 js,jsx,ts,tsx인 
    곳에 tailwind를 적용 할것 이라고 지정 해주는 코드
   ],
  

아래의 코드는 tailwind의 global style을 지정 하기 위한 코드

// styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;