[프로젝트 로그] 1-1. 개발환경 설정 - Monorepo편

이승준·2023년 2월 20일
0

Plog.zoop

목록 보기
2/2
post-thumbnail

참고

Editor: Visual Code
OS: OS X
Project Root Directory: mono_velog

모든 개발 과정은 위의 참고에 나온 환경에서 진행됩니다.
이미 진행해놓은 개발은 기록하지 못해서 임의로 mono_velog라는 폴더를 만들어서 처음부터 개발 및 trouble shooting과정을 그려보겠습니다.

코드들의 위치가 헷갈리지 않게, 각 코드가 적힌 파일의 위치와 파일명을 기재하겠습니다.

추가로 해당 진행 과정은 yarn, node 등이 설치되어 있다고 가정되고 진행됩니다.

🤖 개발환경 설정

🚅 모노레포 환경 설정

우선 터미널을 통해 프로젝트 루트 폴더로 이동한 뒤, yarn의 버전을 berry로 설정해 줍니다.

yarn set version berry

그렇게 되면 프로젝트 루트 디렉토리에 package.json을 포함한 몇가지 파일이 생기는데, 여기서 package.json을 열어 모노레포 설정을 간단하게 해줄겁니다.

// mono_velog/package.json
{
  "packageManager": "yarn@3.4.1"
  "workspaces":{
    "packages": [
      "apps/**"
    ]
  }
}

위와 같이 설정하게 된다면 mono_velog/apps/**의 경로의 모든 프로젝트들이 모노레포로서 관리받게 됩니다.
apps 하위의 디렉토리에서 React 앱을 만들든, Svelte 앱을 만들든, Nest js 앱을 만들든 yarn init, npm init을 통해 만들어진 생 프로젝트든 모두 모노레포의 모듈로서 관리받습니다.

이렇게 아주 간단하게 모노레포를 위한 설정을 마쳤는데요, 패키지간의 상호작용에 대해서는 이후 개발을 진행하면서 알아보는걸로 하고, 이제 프로젝트 줍줍의 개발 환경 세팅을 본격적으로 시작해 봅시다.

⚙️ 백엔드 기술 스택

NestJs, Prisma, Docker, PostgreSQL, Swagger, OAuth(Authorization code grant 방식)

우선 NestJs를 통해 API를 개발한 후, Swagger를 통해 문서화 시킵니다. Prisma를 사용해서 Postgres 데이터베이스에 대한 ORM을 생성해줄 예정이고, NestJs와 Postgres는 Docker 컨테이너로서 베포될 예정입니다.

Prisma도 container로 띄우는 경우는 잘 없지만, 컨테이너간의 상호작용을 이해하기 위해 Prisma도 Docker container로 띄우기로 했습니다.

이후 어플리케이션 내부에서 다룰 데이터들은 OAuth2.0 인증방식 중 Authorization code grant 방식을 이용해서 접근성을 제한할 예정입니다.

🖥️ 프론트엔드 기술 스택

NextJs, Tailwindcss, Storybook, Recoil, GSAP(애니메이션), React Query or SWR

Javascript 패키지 매니저인 yarn으로 모노레포를 생성 및 관리 예정이기 때문에 백엔드 프론트엔드 모두 Javascript 기반 프레임워크를 사용합니다.

NextJs와 Tailwindcss를 이용해서 기본적인 구조와 스타일을 잡은 뒤, Storybook을 통해서 디자인 및 액션들을 테스트합니다. 추가적으로 GSAP라는 애니메이션 라이브러리를 통해 간단하게 UX향상용 애니메이션들을 추가해줄 예정입니다.

상태관리로는 Recoil을 사용할 예정입니다. Redux를 쓰다가 Recoil을 쓰니 코드량이 훨씬 적어지고 boilerplate 코드량이 적어서 사용하게 됐습니다.

모노레포의 이점을 살리기 위해서 각 컴포넌트의 재사용성을 높일 수 있게 최대한 추상화 하는 것을 목표로 개발합니다.

요런 느낌...?

개발이 진행되면 약간 이런느낌으로 서로 상호작용한다고 보면 됩니다.(그림이 똥이지만 대충 요런 느낌...)

🔧 개발 단계

개발 단계에서는 Localhost 즉, 컴퓨터 내부에서 3000번 포트로 Frontend를 작동시키고, 도커와 상호작용 합니다. 도커에서는 각 컨테이너바다 적절한 포트포워딩을 시켜주고, 도커 내부에서 컨테이너들끼리 상호작용할 수 있도록 해줍니다. (그걸 표현한 그림입니다.)

⛴️ 배포 단계

프론트엔드와 백엔드가 각각 배포되면, 각 서버 설정을 통해 통신이 가능하도록 조치하고, API 서버로 배포된 NestJs서버와 Prisma, Postgres는 도커를 기반으로 한 배포이기 때문에 내부 통신은 큰 문제가 없을것으로 생각됩니다.


디테일한 부분은 묘사되어있지 않지만, 전체적인 그림은 이렇게 생각하고 개발을 진행할 예정입니다.
다음 포스팅에서는 세팅이 어려운 백엔드 세팅부터 진행하도록 하겠습니다.

내용 오류에 대한 댓글은 환영합니다 :)

profile
인터랙티브 웹부터 풀스택, web3 등 다양한 분야에 관심을 가지고 다양한 일을 이루기위한 수단으로서 개발합니다.

0개의 댓글