노마드코더의 캐럿마켓 클론코딩 강의를 수강하며 배운 내용을 간단하게라도 정리해보려고 한다.

SUMMARY

언어

• Next.JS + Prisma + Typescript
• Tailwind
• Serverless

Deploy

• Vercel

구현 기능

나만의 당근 마켓

• 서버리스 마켓 플레이스, 소셜 SNS, 라이브 쇼핑

프로젝트 Setup

NextJS Setup

NextJS 프로젝트를 시작하기 위해서 create-next-app을 이용한다. 또한 타입스크립트를 사용할 것이기 때문에 --typescript를 붙여준다.

npx create-react-app@latest --typescript
# or
yarn create next-app --typescript

참고 : https://nextjs.org/docs/getting-started

현재 React 18버전이 RC 버전에 있고, 아직 정식 출시가 되지 않았고 강의에서 해당 버전을 사용하려고 하기 때문에 별도의 설정이 필요하다.

	npm i next@latest react@rc react-dom@rc

소프트웨어 배포 생명 주기 (Software Release Life Cycle)
1. Alpha : 소프트웨어 테스트를 시작하는 첫 단계
2. Beta : 알파의 뒤를 잇는 소프트웨어 개발 단계
3. RC(Release Candidate) : 최종 릴리즈 후보
4. RTM : 완성된 버전

초기 실행 오류

여기까지 하고 npm run dev를 통해 실행을 해보면 에러가 발생하는 것을 확인할 수 있다.
NextJS 12버전이 나오면서 생긴 버그인 것 같다.

next.config.js 파일에서 아래와 같이 수정해주면 된다.

/** @type {import('next').NextConfig} */  /* 삭제한 라인 */
const nextConfig = {
  reactStrictMode: true,
  experimental: {    /* 추가된 라인 */
  	reactRoot: true, /* 추가된 라인 */
  },                 /* 추가된 라인 */
};

module.exports = nextConfig;

Tailwind CSS

npm i -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

위의 명령어를 실행하면 2개의 파일이 생긴다.

• postcss.config
• tailwind.config

여기서 tailwind.config 파일을 수정해준다.
Tailwind가 이 파일을 바라보고 있고, 이 파일 내에 우리는 어디(components, pages 등)에서 tailwind를 사용할 것인지를 알려줘야한다.

module.exports = {
	content: [
		"./pages/**/*.{js,jsx,ts,tsx}", //pages폴더 내의 모든 폴더와 파일.{js,jsx,ts,tsx}
		"./components/**/*.{js,jsx,ts,tsx}",
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

먼저 Global 스타일에 Tailwind를 추가한다.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

이후 잘 적용됐는지 확인해본다.

import type { NextPage } from "next";

const Home: NextPage = () => {
	return (
		<div className="bg-red-500">
			<h1 className="text-black">it works</h1>
		</div>
	);
};

export default Home;

잘 적용된 듯 하다!

여기까지 프로젝트 진행을 위한 셋업을 마쳤다.