ChatGPT 의 API을 사용한 토이 프로젝트 여정기 - (1) 계획 및 환경

BinaryWoo_dev·2023년 4월 21일
0

토이프로젝트

목록 보기
1/1

서론

작년 말부터 ChatGPT에 대한 관심과 반응이 매우 뜨겁다는 것을 몸소 느끼고 있는 요즘, 나도 이 흐름을 이용하여 무언가를 해봐야겠다는 생각이 문득 들었다. 그래서, 가볍게 무엇을 해보면 좋을까 생각하다가 하나의 아이디어가 떠올랐다.

ChatGPT API을 이용하여 사용자가 입력한 재료들과 설정 필터들을 기반으로 추천 레시피 정보들을 제공해주는 일명 '냉장고를 부탁해'

따라서, 이번 토이 프로젝트를 진행에 사용해볼 언어 및 환경들은 아래와 같다.

  • Typescript
  • NextJS (React 프레임워크)
  • TailwindCSS (CSS 프레임워크)
  • reactstrap (UI 프레임워크)
  • babel (자바스크립트 컴파일러)
  • ESLint (문법 자동 관리)
  • Prettier (가독성 자동 관리)
  • webpack5 (소스코드 번들 관리)
  • Jest (테스팅)
  • React Testing Library (테스팅)

본론

1. 개발 환경 세팅

git init

프로젝트를 생성할 경로를 지정 후, git init -y 명령어를 통해 루트 경로의 package.json 을 생성한다.

workspace 구성

	/
      /client
      	(Next create app 파일들)
      /server
      	(node server 파일들)

그 다음, Server 와 Client 소스 코드를 따로 관리하기 위해 workspace 를 각각 세팅하기로 했다. 이렇게 하면 각각에 필요한 dependencies 들을 효율적으로 관리할 수 있을 것 같다.
따라서, 루트 경로의 package.json 에 아래와 같이 workspaces, scripts 를 정의해준다.
(workspaces를 정의하려면 private: true 설정이 필수라고 한다.)

package.json

	{
      (...)
 +    "private": true,
 +    "workspaces": [
          "client",
          "server"
      ],
      "scripts": {
 +        "client": "yarn workspace client start",
 +        "client:dev": "yarn workspace client dev",
 +        "client:build": "yarn workspace client next build",
 +        "server": "yarn workspace server start"
      }
	}

또한, 불필요한 git commit 방지를 위한 .gitignore 도 생성해준다.

# /.gitignore

# dependencies
/node_modules
./client/node_modules
./server/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build
/client/.next


# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

패키치 설치 및 환경 설정

그다음 먼저 client 폴더 경로에서 Next 프로젝트 생성 후 필요한 패키지들을 추가적으로 설치한다.

Nextjs + typescript 프로젝트 생성

	$yarn create next-app --typescript

Typescript

	$yarn add typescript @types/node @types/react @types/react-dom

tsc --init 명령어를 통해 typescript 환경 설정 파일을 생성한다.

# client/tsconfig.json
{
	"compilerOptions": {
		"target": "ES5",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": false,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"incremental": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"types": ["react/next"],
		"baseUrl": ".",
		"paths": {
			"@/*": ["./*"],
			"@/styles": ["./styles/*"],
			"@/components": ["./components/*"],
			"@/pages": ["./pages/*"],
		}
	},
	"include": [
		"next-env.d.ts",
		"**/*.d.ts",
		"**/*.ts",
		"**/*.tsx",
		"**/*.js",
		"**/*.jsx"
	],
	"exclude": ["node_modules"]
}

tailwindCss

	$yarn add tailwindcss postcss autoprefixer
	$npx tailwindcss init # tailwind.config.js 환경설정 파일 생성

client 경로에 post.config.js 생성 후, 아래와 같이 설정

// `post.config.js`

	module.exports = {
    	plugins: {
        	tailwindcss: {},
          	autoprefixer: {}
        }
    }
// `tailwind.config.js`
	module.exports = {
      content: ["./src/**/*.{html,js}"],
  	  theme: {
  	    extend: {},
  	  },
  	  plugins: [],
    }

eslint & prettier

	$yarn add prettier eslint eslint-config-next eslint-plugin-prettier

axios

비동기 통신을 위한 라이브러리이다.

	$yarn add axios

webpack5 && babel

	$yarn add --dev webpack@5 babel-plugin-module-resolver @babel/core babel-loader @babel/preset-env

설치 후, cleint 경로의 next.config.js next 환경파일에서 아래와 같이 설정한다.

// client/next.config.js

{
  	(...)
+	webpack: (config) => {
+      config.module.rules.push({
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      });
+      return config;
+	}
}

2. 앱 실행 확인

루트 경로로 이동한 후, yarn client:dev 명령어를 통해 정상적으로 client 앱이 실행되는지 확인한다.

드디어 프로젝트 시작을 위한 환경이 어느정도 구성되었다.

결론

  • 🔥 프로젝트 과정에서 환경 설정하는 것도 적지 않은 일이다.
  • 📦 다음 단계 때 Jest + React Testing Library 패키지 설치가 추가로 필요하다.
profile
매일 0.1%씩 성장하는 Junior Web Front-end Developer 💻🔥

0개의 댓글