[우테코 6기] 프로젝트 환경 세팅 및 기술 스택 정하기

** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다.

 

프로젝트를 시작하기 앞서 주어진 요구사항에 맞게 기본 프로젝트를 세팅해야 했다.

진행해야 하는 것은 다음과 같았다.

 

1. 프로젝트 환경 세팅
2. 개발 컨벤션 정하기
3. 스타일링 방법 선택 등 사용할 기술 스택 정하기
4. 타겟 환경 정하기

---

 

프로젝트 환경 세팅

가장 먼저, 프로젝트 환경 세팅에서는 기존에 Vite나 CRA를 주로 사용했던 것과 달리, 이번에는 Webpack을 기반으로 React와 TypeScript 환경을 세팅하기로 결정했다. Webpack은 자바스크립트 모듈을 번들링 하는 도구로, 다양한 로더와 플러그인을 사용해 코드 최적화와 빌드 환경을 구성할 수 있다.

 

webpack을 선택한 이유는, 물론 요구사항이기도 했지만, Webpack이 모듈 번들러로서 다양한 플러그인과 로더를 통해 깊이 있는 커스터마이징을 제공하기 때문이다. 최근 Vite와 같은 새로운 도구들이 도입되는 사례가 늘어나고 있지만, 여전히 많은 프로덕션 환경에서는 Webpack을 기반으로 한 프로젝트가 많다는 점도 고려했다. 따라서 Webpack을 사용해 직접 빌드 환경을 구성하고, 프로젝트를 진행하며 발생할 수 있는 문제를 해결하는 경험을 쌓는 것도 좋다고 생각했다.

 

사실 이 기회가 아니었다면 Vite나 CRA를 계속 사용하면서 프로젝트 세팅에 크게 고민할 기회를 놓쳤을 것 같다. 이번 기회에 어떤 환경을 선택할 것인지 고민하고 논의하는 과정을 거쳤다.

 

 

 

우리가 가장 먼저 고민한 부분은 설치 패키지였다.

우리가 선택한 패키지는 yarn이다. yarn을 선택한 이유는 yarn이 다운받은 패키지 데이터를 캐시에 저장해, 중복된 데이터는 다운로드하지 않고 캐시에 저장된 파일을 활용함으로써 npm에 비해 패키지 설치 속도가 빠르기 때문이다. 또한 여러 패키지를 병렬로 설치해 성능과 속도가 향상되기 때문에 yarn을 사용하기로 했다.

 

 

다음으로 트랜스파일러로 ts-loader를 선택했다.

선택한 이유는 ts-loader가 babel-loader보다 TypeScript 컴파일러를 사용해 더 정확하게 타입을 검사하기 때문이다. 다만, 엄격한 타입 검사가 이루어져 상대적으로 트랜스파일링 속도가 느리다는 단점이 있었다. 하지만 우리 팀은 엄격한 타입 검사가 중요하다고 판단해 ts-loader를 선택했다.

 

테스팅 도구로는 Jest와 스토리북을, CI/CD 파이프라인으로는 GitHub Actions를 사용해 코드 품질을 유지하고 자동화된 빌드 및 배포를 설정했다. 관련 사항은 팀 위키에 작성해 두었다.

 

FE Webpack 기반의 React & TypeScript 환경 세팅

FE Webpack 기반의 React & TypeScript 환경 세팅

 

---

 

컨벤션 정하기

이후 팀 전체 회의를 통해서 Git 컨벤션과 개발 컨벤션을 정했다.

자세한 문서는 팀 위키에 작성되어 있다.

 

🚥 Git 컨벤션

🚥 깃 컨벤션

 

🛠️ FE 코드 컨벤션

🛠️ FE 코드 컨벤션

 

---

 

스타일링 방법 - Emotion

스타일링 방법으로는 Emotion을 선택했다.

당시 우테코 내부에서 여러 스타일링 방법론이 논의되고 있었지만, 우리 팀은 새로운 CSS 라이브러리 대신 모두가 사용해 본 Emotion을 선택해 러닝 커브를 줄이기로 했다. 이는 프론트 작업 페이지 양이 많다고 판단했기 때문이다.

 

---

 

타겟 환경

유저 타겟 환경으로는 모바일 웹으로만 진행하기로 했다.

이유는 서비스의 주요 사용자가 자주 이동하면서 데이터를 확인할 가능성이 크기 때문이다. 물론 PC 환경에서도 적당한 UI/UX를 제공하기 위해 최대 600px까지의 UI를 반응형으로 제공하기로 했다.

 

이러한 선택에는 최근 PC 사이트 제공을 중단하고 모바일 환경만 제공하는 무신사의 영향도 조금 있었다.

---

 

이렇게 우리 팀의 초기 프로젝트 세팅을 마쳤다.

한동안 매일 기획과 디자인 작업에 집중하다가, 오랜만에 코딩을 하니 정말 재미있었다.

((사실 코딩보다는 환경 세팅이긴 했지만, 아무튼...))