[Toy Project] 토이 프로젝트 시작

by 호쌤(이광호) on August 17, 2023

지난주에 끝마친 웹 사이트 외주 작업을 Next.js + Express 형태의 Fullstack으로 혼자 진행했었다. 전에는 혼자서 진행해야 하는 외주 작업일 경우 PHP기반의 Codeignitor3를 채택했었지만 워낙 노후된 Framework이기도 하고 Codeigniter4나 Laravel로 전향하면서 겪어야 하는 러닝커브가 효율적이지 않을것 같아서 자주 관심을 두고 있던 Next.js와 Express의 조합으로 결정했다.

하지만 내가 너무 쉽게 생각했던것인지… 국내 웹 호스팅 환경에서 이 조합을 사용하기 위해서 겪을 수 밖에 없었던 시행착오들이 너무 많았다.

프로젝트를 마무리하고 겪었던 시행착오와 코드상에서 아쉬웠던 부분들을 보완하여 나만의 Framework 템플릿을 구성하고자 한다. 해당 작업에서의 경험을 하나씩 연제해 보려고 오랜만에 포스트를 작성한다.

#01. 개발환경 구성

1. Node.js 버전 결정

일단 Node.js 버전은 중요하지 않다. Mac 실리콘 CPU라면 Node18 이상만 설치 가능하지만 막상 국내 웹 호스팅에서는 가장 최신의 버전을 제공하는 곳이 가비아가 제공하는 16버전이다.

업체	Node Version	비고
cafe24	v14, v12	버전변경 불가, github 연동 가능
가비아	v12, v14	mvn으로 v16으로 변경 가능, github 연동 불가

2023년 08월 17일 기준으로 Next.js를 설치할 수 있는 최소 버전이 16.14.2이기 때문에 개발 장비에 설치되어 있는 Node.js의 버전을 16.14.2으로 맞춰 놓고 진행하였다.

Next.js 자체만으로는 16.13이지만 아래에서 설정하는 yarn berry에서 16.14 이상의 버전을 요구한다.

가비아 웹 호스팅의 경우 접속을 자주 한다 싶으면 SSH, FTP 접속을 차단하고, 서버 차원에서 github의 도메인을 인식하지 못하도록 설정해 놓았기 때문에 사용하기가 매우 지랄맞았다.(정말 다신 안쓴다.)

그래서 구동 가능한 웹 호스팅은 추후 좀 더 찾아보기로 했다.

2. NVM

NVM은 여러 개의 Node.js를 설치하고 필요할 때 마다 사용 버전을 변경할 수 있게 하는 도구이다.

강의실에서 사용중인 운영체제(windows)node 버전을 무작정 낮은 버전으로 설치할 경우 다른 사이드 이펙트가 발생할지도 모르기 때문에 nvm을 설치하여 node의 버전을 상황에 맞게 결정할 수 있도록 했다.

window에서 사용할 수 있는 nvm은 아래 URL에서 내려 받을 수 있다.

https://github.com/coreybutler/nvm-windows/releases

NVM을 통한 Node.js 설치

아래 명령으로 필요한 버전을 설치할 수 있다. 여기서는 타겟 버전인 16.14.2을 설치했다.

$ nvm install 16.14.2

Node.js 버전 변경하기

아래 명령으로 설치되어 있는 버전 중에서 특정 버전을 사용하도록 지정할 수 있다.

nvm use 16.14.2

3. 기타 도구 설치

yarn

$ npm install -g yarn

#02. 프로젝트 생성 및 설정

1. Next.js 프로젝트 생성

다음의 명령으로 next.js 프로젝트를 생성하였다.

$ yarn create next-app myweb

아래와 같이 프로젝트 생성 과정이 진행된다.

yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@13.4.16" with binaries:
      - create-next-app
√ Would you like to use TypeScript? ... No / Yes    # No 선택
√ Would you like to use ESLint? ... No / Yes        # Yes 선택
√ Would you like to use Tailwind CSS? ... No / Yes  # Yes 선택
√ Would you like to use `src/` directory? ... No / Yes  # No 선택
√ Would you like to use App Router? (recommended) ... No / Yes  # Yes 선택
√ Would you like to customize the default import alias? ... No / Yes    # No 선택
Creating a new Next.js app in C:\Users\leekh\myweb.

타입 스크립트에 대한 생각

타입스크립트를 사용하는 것이 Javascript 쪽에서는 거의 국룰이지만 Javascript보다는 유연함이 떨어진다.

데이터 타입을 선언하는 것이 큰 프로젝트에서는 분명히 유리한 부분이지만 자신이 작성한 코드에서 변수 타입을 알아볼 수 없다는 것도 이상한 일이거니와 Express와 Next.js를 강제로 결합하는 과정에서 발생하는 수 많은 설정 이슈때문에 타입스크립트의 적용은 추후 고도화 과정에서 고려하기로 하고 일단 Javascript 버전으로 채택했다.

생성 결과 확인

생성된 결과를 보고 잠시 당황했다.

기존의 next.js 라우팅 방식은 파일단위로 이루어졌었다. 예를 들어 http://localhost:3000/hello/test 라는 URL이라면 /pages/hello/test.js 파일이 대응되는 형식이다.

하지만 내가 프로젝트를 진행하는동안 Next.js가 버전업 되면서 폴더 단위로 라우팅 방식이 변경되었다고 한다.

그러므로 이제 http://localhost:3000/hello/test라는 URL을 위해서는 /app/hello/test/page.js 파일로 생성되어야한다. (Typescript인 경우 tsx 확장자)

이대로라면 무수히 많은 폴더가 생성될 것이 자명하기 때문에 src 폴더를 가져가는 형태로 프로젝트를 다시 생성하였다.

$ yarn create next-app myweb

yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@13.4.16" with binaries:
      - create-next-app
√ Would you like to use TypeScript? ... No / Yes    # No 선택
√ Would you like to use ESLint? ... No / Yes        # Yes 선택
√ Would you like to use Tailwind CSS? ... No / Yes  # Yes 선택
√ Would you like to use `src/` directory? ... No / Yes  # Yes 선택
√ Would you like to use App Router? (recommended) ... No / Yes  # Yes 선택
√ Would you like to customize the default import alias? ... No / Yes    # No 선택
Creating a new Next.js app in C:\Users\leekh\myweb.

나는 CSS framework를 사용하는 것을 그다지 좋아하지 않지만 Tailwind CSS가 워낙 유행이고 Next.js에서 기본으로 지원하기 까지 하기 때문에 한번 사용해 보기로 했다.

2. Yarn Berry 적용하기

프로젝트를 진행하면서 가장 골치아픈 부분이 node_modules 폴더의 용량 문제 였다.

프로젝트가 종료되었을 때 무려 4.2기가의 크기로 불어난 것을 보고 호스팅 비용을 꽤나 잡아 먹겠다고 생각했다.

찾아보니 Yarn Berry라는 것을 설정하면 node_modules 폴더 없이 프로젝트를 진행할 수 있다는 것을 알 수 있었고 프로젝트 생성과 함께 바로 적용해 보았다.

자세한 적용 방법은 아래의 URL을 참고했다.

https://nukw0n-dev.tistory.com/37

Yarn Berry 적용

터미널 상에서 프로젝트의 루트로 이동한 뒤 yarn berry로 변경해준다.

$ yarn set version berry

➤ YN0000: Retrieving https://repo.yarnpkg.com/3.6.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.6.1.cjs
➤ YN0000: Done in 0s 810ms

그리고 아래 명령을 실행하면 필요한 설정이 구성된다.

$ yarn install

➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍

➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0000: └ Completed in 16s 806ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ wrappy@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:2.3.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zod@npm:3.21.4 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 1s 752ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 54s 719ms
➤ YN0000: Done with warnings in 1m 14s

pnp 모드 설정

.yarnrc.yml 파일을 열었을 때 nodeLinker: node-modules 라는 구문이 있다면 node_moduels라는 값을 pnp로 수정하고 다시 yarn install 명령을 수행해 보자.

node_modules 폴더가 삭제된다.

프로젝트를 실행해도 정상적으로 실행된다.

#03. Github에 등록

1. 저장소 생성

Github에 신규 저장소를 하나 생성했다.

https://github.com/leekh4232/myweb

당분간은 public으로 열어둘 생각이다.

2. New Line 경고 제거

윈도우 환경에서 git add 명령을 수행하면 아래와 같은 경고가 발생한다.

warning: in the working copy of '파일명', LF will be replaced by CRLF the next time Git touches it

이 경우 프로젝트 폴더 위치에서 아래 명령으로 해결할 수 있다.

$ git config core.autocrlf true

만약 프로젝트에 상관 없이 현재 컴퓨터 전역으로 설정하고자 한다면 아래와 같이 사용한다.

$ git config --global core.autocrlf true

윈도우만 해당되는 사항이다.

3. 저장소에 올리기

gitignore 편집

yarn berry를 적용하고 나면 더이상 node_modules 폴더는 존재하지 않지만 .yarn 폴더가 생성된다.

node_modules 폴더에 각종 패키지 파일들이 개별적으로 존재했다면 .yarn/cache 폴더에는 패키지들이 압축된 형태로 존재한다고 보면 된다.

이 폴더를 .gitignore 파일에 등록해야 한다.

그 밖에 기타 사항들을 포함하여 설정을 변경한다.

.gitignore 파일을 열고 아무 위치에나 아래와 같이 행을 추가하면 된다.

.yarn/*
!.yarn/releases

공식 레퍼런스에서는 .gitignore에 등록해야 하는 내용을 아래와 같이 소개하고 있다.

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

이 경우 cache 폴더에 존재하는 패키지의 압축 파일들이 함께 git에 업로드 되는것 같다. 초기 push 시에 시간도 오래 걸리거니와 자체 서버를 대상으로 auto build를 처리하는 형태도 아니고 어디까지나 웹 호스팅을 대상으로 하는 코드를 작성할 것이기 때문에 cache 관련 항목들은 모두 제외하도록 했다.

대신 git에서 clone을 받은 후에는 yarn install을 한 번 수행해야 한다.

github에 push

next.js 프로젝트를 생성하면 기본적으로 로컬 저장소가 함께 생성된다.

이 로컬 저장소와 github을 연결하고 push 하면 된다.

$ git branch -M main
$ git remote add origin git@github.com:leekh4232/myweb.git
$ git add -A
$ git commit -m "next app init"
$ git push --force --set-upstream origin main

push 할 때 --force --set-upstream 옵션을 적용하면 github에 어떤 내용이 들어 있더라도 기존의 내용을 싹 밀어버리고 로컬 저장소의 내용을 덮어 쓴다.

이제 프로젝트 초기 생성이 완료 되었다.