NextJs와 TypeScript를 시작했습니다. +tailwind

 

안녕하세요~ 프론트 개발자 겸 UIUX 디자이너 허수진(코지)입니다!

 

앞서 쓴 글인 "swift를 배워보자." 을 이후로 한달 동안 너무 바빴어서 😭 (취업과 프리랜서 일로) 

 

잠시 뒤로 미루고 요새 트렌드라고 하는 언어인 NextJS와 TypeScript로 앱을 하나 만들어보기로 하였습니다. 

 

UI 콤포넌트와 다크모드를 쉽게 만들수 있다는(?) Tailwindcss도 함께 사용합니다. (디자이너로서 벌써 기대가 되네용 호홓😝)

 

백엔드까지 풀스택을 혼자서 해야 하는 과정인데요, 서버를 필요하지 않는 ServerLess의 형태로 만들 예정입니다. 

 

저는 Mr. Nico 니꼬 선생님의 강의인 캐럿 마켓 클론 강의를 들으면서 풀스택 개발자 남자친구와 함께 이번 상반기까지 완강할 계획입니다. 

 

1. SETUP

## 01.  NextJs, TypeScript Setup! 👒

 

아이맥에서 터미널창을 열고, 아래처럼 입력해준 뒤 (NextJS와 TypeScript를 한번에 세팅하고 싶으신 분들만)

 

❯ npx create-next-app@latest --typescript

 

프로젝트 명을 입력해줍니다. (저는 carrot-market이라고 하였습니다. 니코 선생님 말 잘듣는 수강생)

 

What is your project named? › carrot-market

 

그럼 생성된 carrot-market 프로젝트 폴더를 VScode로 열어줍니다. 

 

 

VScode 터미널 창을 열어 React를 최신 버전으로(18, 2022년 2월 기준) 업그레이드 해주는 작업을 해줍니다. 

 

npm i next@latest react@rc react-dom@rc --legacy-peer-deps

 

그리고 git에다가 버전 관리, 백업 관리를 해야 하므로 git에 새로운 프로젝트를 만들고 git remote add origin 해줍니다.

 

git remote add origin (주소)

 

(나중에 개발할) 필요 없는 파일들(api, tailwind css파일 등)을 우선 지우고, index.tsx 파일을 아래와 같은 코드로 바꿔줍니다.

 

 

return 아래의 긴 코드를 지워주고, null로 둡니다.

 

import type { NextPage } from "next";

const Home: NextPage = () => {
  return null;
};

export default Home;

 

## 02. Tailwindcss Setup! 🐳

 

npm install -D tailwindcss postcss autoprefixer

❯ npx tailwindcss init -p

 

 

설치가 완료된 뒤에 package.json파일로 이동하셔서

 

 

depen아래에 tailwindcss가 버전 3.x.x 로 설치 완료된 것을 확인할 수 있습니다. 

 

 

 

 

감사합니다. :)