프로젝트 개발 환경 구성하기(FE)

들어가기 전에...

최근 Main Project의 사전 연습 단계인 Pre-Project에 진입했습니다.

 

혼자 파일을 생성하고 곧바로 구현에 돌입하던 평소와 달리, 무엇을 하든 팀원들과 회의를 거쳐 결정해야 한다는 게 많이 어색하고 어렵습니다. 특히 '기술 스택은 어떻게 할까요?' 라는 질문에서부터 막히고 말았습니다. 여태껏 필요한 라이브러리가 있으면 그때그때 생각나는 순간마다 추가했는데, 막상 초기화 작업을 진행하려니 머리가 복잡해졌습니다. 어떤 것부터 말해야 하지? 종류별로 뭐가 있더라?

 

게다가 아직 써보지 못 한 라이브러리가 너무 많아서 토의하기가 어려웠습니다. 친절한 팀원 분이 먼저 a,b,c 안을 내어줘도 외계어 같이 들릴 뿐 알아듣질 못 했습니다. 자꾸만 '그건 언제 쓰는 거예요...?' '뭐가 좋은 거예요...?' 묻는 자신이 부끄러워졌습니다.😭

 

그래서 이번 Pre-Project 경험을 일삼아 프로젝트를 시작하기 전 개발환경을 구성하는 법을 정리해보고자 합니다.

 

 

 

개발 환경 구성하기

개발 환경 구성을 시작하기 전, 아래와 같은 상황에 빠지지 않도록 조심해야 합니다.

 

• 어떤 기술 스택을 사용할지 고민 하다가 개발 기획을 제대로 시작하지 못 함
• 개발 프로젝트에 별로 필요하지 않은 과도한 기술 스택 설치

 

저의 경우 기술스택? 개발환경? 그런 말만 마주치면 멘붕이 와서 이것저것 알아 보다가 머릿속에 뒤죽박죽 섞여 정리 되지 않는 경우가 많았습니다. 그래서 프론트엔드 개발에 필수적으로 필요한 항목부터 차근차근 골라보고자 합니다.

 

 

필수 항목

• Node.js
• Node.js 패키지 매니저
• 버전 관리 시스템/형상 관리 시스템 + 원격 레포지토리 서비스
• 프론트엔드 프레임워크(라이브러리)
• CSS 도구
  • CSS 프레임워크(라이브러리)
  • CSS 네이밍 컨벤션
• 프로젝트 설치 방법
• 린터(정적분석도구)

 

 

1) Node.js

JavaScript를 브라우저 외의 환경에서 실행할 수 있도록 도와주는 런타임입니다. Node.js를 설치하면 JavaScript로 백엔드 개발은 물론 번들링이나 최적화 등 많은 개발 작업을 수행할 수 있습니다. 당연히 필수 설치해야 합니다. 다른 Node.js 오픈소스 소프트웨어와의 호환성 보장을 위해 Node.js LTS 버전 사용을 권장한다고 합니다.

 

 

2) 패키지 매니저

여러 소프트웨어를 설치, 업그레이드, 설정, 삭제할 수 있는 도구입니다. 대표적으로 npm과 yarn이 있다. 모든 패키지 매니저의 기능은 대부분 비슷하다고는 하지만 여기 좋은 분석글이 있네요. 읽어보고 상황에 맞게 판단하여 고르면 좋을 것 같습니다.

 

• npm
• yarn
• pnpm

 

 

3) 버전 관리 시스템/형상 관리 시스템 + 원격 레포지토리 서비스

특별한 경우가 있지 않다면 주로 Git을 사용하는 편입니다. 사실 이거 외에 사용해본 적도 없고, 저장소 또한 자연스레 Github을 씁니다.

 

• github
• gitlab
• bitbucket

+ .gitignore 파일을 입맛따라 만들어주는 사이트 gitignore.io

 

 

4. 프론트엔드 프레임워크

일단 저의 경우 당연히 리액트를 사용하곤 한다. Vue도 사용 해봤지만 딱히 리액트를 놔두고 선택할 만큼 만족스럽진 않았습니다. 근데 이것도 야매로 급하게 책 한 권 사서 따라 써본 게 전부라 제대로 알면 달라질지도 모르겠습니다. 어쨌든 아래 대표적인 프레임워크(라이브러리)들이 있습니다.

 

• React
• Vue
• Angular

 

 

5. CSS 도구

이런 걸 통틀어 뭐라고 말해야할지 몰랐는데 참고 블로그에서도 뭉뚱그려 'CSS도구' 라고 네이밍 한 걸 보고 여기도 그렇게 표기합니다. 사실 CSS 관련은 너무 다양하고 광범위한 것 같습니다. 아무것도 몰랐을 시절, 첫 웹 프로젝트 때 팀원과 함께 'MUI 쓰실래요 Bootstrap 쓰실래요?' 질문 하나로 일단락 됐던 기억이 납니다. 이것저것 배우고 나니까 스타일 컴포넌트를 사용할지말지, MUI, Bootstrap, Tailwind, 확장 언어(Sass, Stylus 등)는 사용할건지... 어지러워졌습니다.

 

이제 아래와 같이 정리해서 보면 간편하고 쉽게 구상할 수 있습니다.

 

• CSS 관리 방법
  • CSS-in-JS : Styled-Component, Emotion
  • CSS 파일을 따로 분리하여 관리
• CSS 확장 언어
  • SASS
  • Stylus
  • LESS
  • PostCSS
• UI 프레임워크
  • MUI (비추천. css 공부에 방해된다. 고정 틀에서 벗어나기 어려움)
  • Bootstrap (비추천. 마찬가지.)
  • 그 외 Semantic UI, Ant Design...
  • Tailwind CSS(이건 아직 안 써봐서 Pre-Project에서 써볼 예정!)
• CSS 네이밍 컨벤션
  • BEM(Block__Element__Modifier 로 구성된 네이밍)
  • Utility-First(Tailwind 등)

 

 

6) 프로젝트 설치 방법

리액트 라이브러리를 사용하여 개발한다고 가정했을 때, Create React App을 사용하면 React SPA를 개발할 수 있는 여러 오픈소스(번들링, 배포, 테스트를 위한 기본설정까지)가 자동으로 설치 되어서 편합니다.

 

사실 여태 CRA을 사용하여 리액트 프로젝트를 설치해왔습다. 그냥 이유는 없고 처음 배울 때 그렇게 설치해서 여태까지 어떤 의문도 가지지 않고 사용했습니다... 이러면 안 되는 거였네요. 이번 회의에서 처음으로 Vite에 대한 걸 알게 되었는데 조금 충격이었습니다.

 

Vite란 Vue 프레임워크 제작자가 만든 툴 체인으로, CRA보다 훨씬 속도가 빠르고 메모리도 적게 사용됩니다.

설치 방법은 여기를 참고하면 좋아요.

 

 

 

7) 린터(정적 분석 도구)

소스코드를 분석해서 문법 에러나 코드 스타일 규칙에 맞지 않는 부분을 찾아주는 툴입니다. 대표적으로 ESLint, Prettier가 많이 쓰입니다.

 

• ESLint
• Prettier

 

 

이제부터 선택 항목에 대해 알아보겠습니다.

 

 

선택 항목

• HTTP 요청
• 상태 관리
• TypeScript
• 번들러
• 컴파일러
• 테스트 프레임워크

 

1) HTTP 요청

HTTP 요청에는 다양한 방법이 있는데, 개발자간 이를 혼용하여 사용하지 않도록 미리 한 가지를 정해두고 개발하는 게 좋습니다.

 

• Fetch API & isomorphic-fetch
• Axios
• React Query(TanStack Query)
• SWR

 

 

2) 상태 관리

상태 관리에도 여러가지 방법이 있는데, 개발자간 이를 혼용하지 않고 하나를 정해두는 게 좋습니다.

 

• Redux (redux-toolkit)
• Recoil
• Zustand
• React Context API
• Mobx

 

 

3) TypeScript

동적 타입 프로그래밍 언어인 TypeScript 사용 유무를 정합니다. 불과 1년 전만 해도 TypeScript는 우대 조건에 있었던 거 같은데 요즘은 필수 조건으로도 많이 요구해서 해두면 무조건 좋은 것 같습니다.

 

 

4) 번들러

리액트의 경우 JSX로 작성하기 때문에 JS로 컴파일 하는 과정이 필요합니다. 여태 CRA로 프로젝트를 생성할 경우 기본 제공되는 react-scripts 번들러를 사용하게 되어서 딱히 이 외의 방법을 신경쓰지 않았는데, 이번에 vite를 알게되고부터 번들러에 대해서도 좀 더 깊이 알 필요가 있겠구나 싶었습니다.

 

일단 react-scrpts 라이브러리 내부에서 사용하는 건 Webpack 인데, 이게 참 느리고 무겁다네요. 사용할 때 많이 느리다곤 생각 했는데 그냥 6년 넘은 저의 노트북 문제인 줄 알았습니다(물론 그것도 무시 못 하겠지만요)

 

아래 다양한 번들러가 있으니 비교 후 사용하면 좋습니다.

 

• webpack
• esbuild
• vite
• parcel
• rollup
• snowpack

 

 

5. 컴파일러

webpack을 사용할 경우 Babel이 꼬리표처럼 따라와서 컴파일로도 딱히 깊게 생각해본 적이 없었습니다.(대체 뭘 알고 여태 사용한거지?) JSX나 타입스크립트를 변환하려면 컴파일러가 아주 중요한데, 신중하게 선택하여 사용하면 좋은 성능을 이끌어낼 수 있습니다. 대부분 사용되는 컴파일러는 아래와 같습니다. 프로젝트에서 쓰이는 도구와의 궁합을 생각하여 고르면 됩니다. 참, 번들러와의 호환(?)도 생각해봐야겠습니다.

 

• Babel
• SWC
• ESbuild

 

 

6. 테스트 프레임워크

아직 테스트 주도 개발 같은 걸 안 해봐서... 테스트 프레임워크를 써본 적도 없지만 만약 고른다면 아래와 같은 라이브러리를 설치할 수 있다고 합니다. 언젠가 기회가 된다면 Jest로 프론트엔드 테스트 코드를 작성해보고 싶네요. 특히나 어렵다던데...

 

• Jest
• Testing Library
• Cypress
• msw

 

 

개발 환경 설치 과정

CRA의 경우

npx create-react-app {원하는 디렉터리 경로}

 

Vite의 경우

1. npm init vite
   • Project name: 프로젝트 이름 설정
   • Select a framwork: 프레임워크 설정(vanilla, vue, react, preact, lit svelte)
   • Select a variant: TypeScript 유무 선택
2. cd 프로젝트 이름
3. npm install
4. npm run dev

 

Redux

npm install @reduxjs/toolkit react-redux

 

Styled Component

npm install styled-components@latest

 

ESlint, Prettier

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

 

.eslintrc.json, .prettierrc.json 설정 파일을 생성 및 작성한다. 아래 예시 설정이 있다.

 

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0
  }
}

// .prettierrc.json
{
  "singleQuote": true
}

 

 

이제 ESLint, Prettier VSCode 익스텐션까지 설치하면 완료입니다.

 

+ VSCode 설정으로 이동하여 editor.codeActionsOnSave 설정 확인 > Edit in settings.json 버튼 클릭

 

 

위와 같이 수정하면 소스코드 파일을 저장할 때마다 ESlint가 고칠 수 있는 에러와 코드 스타일링을 자동으로 고쳐줍니다.

 

 

 

 

 

이렇게 정리하고 나니 마음이 든든하고 앞으로 프로젝트를 준비하는 데 있어 두려움이 없어지네요.(환경 설정에 늘 겁을 먹게 되는 건 왜인지 모르겠습니다. 그냥 몰라서겠죠)

 

🎁: 프론트엔드 개발 환경 체크리스트