[노마드] 당근마켓 클론코딩 # 초기 셋팅

NextJS 셋팅하기

npx create-next-app@12.0.7 --typescript

npm i next@12.0.7 react@18.0.0-rc.0 react-dom@18.0.0-rc.0

 

> nextJS 최신 버전이 14인데 ,

처음에 노마드코더는 nextJS 12 버전을 사용하고 있어서

폴더 구조가 좀 달라서 많이 당황했다;;

레포지토리 생성

rm -rf .git
git init
git remote add origin 원격 레포지토리 주소

Tailwind 설치하기

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

 

이렇게 입력하면
postcss.config.js와 tailwind.config.js 파일이 생김

tailwind.config.js 에 아래와 같이 적어주기

 

./pages/**/*.{js,jsx,ts,tsx}

=> pages폴더에있는 모든 폴더중에 확장자{js,jsx,ts,tsx} 중 하나를 가지는 모든 파일

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

global.css

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

 

Extension 설치

Tailwind CSS IntelliSense

=>Tailwind 자동완성 기능

 

Tailwind를 사용하면 개발 생산성을 높이고 반응형 개발을 간편하게 만들어주는 강력한 도구이지만,

클래스 기반의 스타일링 방식을 채택하기 때문에 클래스네임에 많은 css속성이 들어가서 가독성 측면에서 불편할 수 있다.

 

기억할 것!

=> sm 모바일 화면을 뜻하는 게 아님 상대적으로 sm이면 변하는 것임.

=> 처음에는 모든 클래스네임들이 디폴트로 모바일에 적용됨

=> 모바일 레이아웃을 먼저 구현한 다음 sm 화면에 적합한 변경 사항을 레이어링한 다음 md 화면 등을 적용하는 것이 좋음.

- sm
- md
- lg
- xl
- 2xl
- portrait
- landscape