웹 개발 프론트엔드 - 프로젝트 생성

---

서론

웹 프로젝트를 시작하는데 필요한 도구와 프로젝트를 생성하는 방법을 정리했다.

---

1. 빌드 도구 - 번들러 + 개발 서버 : Vite

빌드 도구는 소스 코드를 사용자에게 배포할 수 있는 형태로 변환하는 데 도움을 주는 소프트웨어이다.

빌드 도구와 번들러에 대한 설명은 다음 포스팅에 잘 정리되어 있었다.
[ebokyung.log] - 프론트엔드 개발 도구에 대한 이해 - 빌드 도구와 모듈 번들러 (feat. 모듈의 탄생)

Vite는 2020년에 출시된 현대 웹 개발을 위한 빌드 도구로, Vue.js의 창시자인 Evan You가 만든 오픈 소스 프로젝트이다.

[Vite] - Vite를 사용해야 하는 이유

import와 export 키워드를 사용하여 모듈을 정의하고 불러오는 방식의 nativeES modules를 활용해 코드 변경 시 전체 페이지를 새로 고치지 않고도 수정된 모듈만 업데이트하는 Hot Module Replacement를 지원한다.
이외에도 Vite 문서를 들여다 보면 HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높이는 등 빠른 빌드를 위해 많은 노력을 기울인것을 볼 수 있다.

추가적으로, React,Vue,ts,js 등 다양한 플러그인, 커뮤니티가 제공하는 템플릿으로 기본적으로 필요한 설정을 자동으로 처리해주어 빠르게 프로젝트를 시작할 수 있다는 장점이 있다.

Vite 프로젝트 생성

# npm v7 이상에서는 `--` 를 반드시 붙여주세요:
$ npm create vite@latest 프로젝트이름 -- --template react

---

2. UI 프레임워크 / 라이브러리 - React

React는 UI 개발을 위해 Facebook에 의해 개발되어 2013년 5월 오픈소스로 공개된 JavaScript 라이브러리이다.
JavaScript 또는 TypeScript와 HTML을 결합한 문법인 JSX, TSX를 사용하여 HTML과 JavaScript를 한 곳에서 관리할 수 있게 해준다.

상태와 속성을 가진 컴포넌트로 UI를 나누어 구성할 수 있어 독립적이고 재사용 가능하도록 복잡한 UI를 관리하기 쉽다.

변경된 부분만을 가상 DOM에서 비교하고 필요한 부분만 실제 DOM에 반영해 성능을 높이는 가상 DOM이 큰 특징이다.
상위 컴포넌트에서 하위 컴포넌트로만 (Context API 제외) 데이터의 흐름이 이루어져 이해와 디버깅이 쉽다.

필요에 따라 다음 플러그인들을 사용한다.

1. 디버깅용 크롬 확장

개발자 도구에 화면에 렌더링된 컴포넌트 요소를 표시해주는 등 기능을 추가한다.

2. VSCode 스니펫 확장

직접 타자 칠거 아니면 추가하자.
ES, Redux, ReactNative, TS문법에서 틀린 부분을 체크해주고, rafce를 입력하면 React의 화살표 함수 컴포넌트 스니펫이 자동으로 삽입되는 등의 자동완성 기능을 제공한다.

---

3. CSS 프레임워크 - TailwindCSS

Tailwind는 반응형 디자인 클래스 등 미리 정의된 유틸리티 클래스를 통해 자주 쓰이는 다양한 스타일을 조합해 사용할 수 있어 코드의 시각적인 변경을 신속하게 적용 가능하다. 설정 파일을 통해 테마, 색상, 간격 등 디자인을 프로젝트에 맞게 커스터마이즈할 수 있다.

추가로 JIT(Just-in-Time) 모드를 지원하여, 사용자가 실제로 사용하는 클래스만 포함된 CSS를 생성하므로 파일 크기를 줄일 수 있다고 한다.

다음과 같이 다양한 프레임워크 환경에서 사용 가능하다.

공식 페이지를 참고해서 Tailwind 환경 설정을 한다.

Vite 환경에서 Tailwind를 사용하려면 다음과 같이 사용해야 한다.

# npm create vite@latest my-vue-app -- --template vue
$ cd my-project
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

명령어로 생성된 tailwind.config.js 파일에 다음과 같이 content 항목에 경로를 추가한다.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이는 index.html 파일 및 src/ 디렉토리와 그 하위에 있는 JavaScript, TypeScript, JSX, TSX 파일을 스캔해서 사용되는 클래스만 포함하도록 하는 최적화 과정 트리 쉐이킹에 사용된다.

다음 내용을

./src/index.css 파일에 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS는 PostCSS를 사용하여 CSS를 동적으로 생성하는데, CSS파일을 처리할 때 @tailwind 지시자를 찾아 기본 스타일(base), 구성 요소(components), 유틸리티(utilities)를 최종 CSS에 포함하게 한다.

---

4. 프로젝트 폴더 구조

my-app
├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets         // 이미지, 폰트 등 정적 자산
│   ├── components     // 재사용 가능한 컴포넌트
│   ├── pages          // 페이지 컴포넌트
│   ├── services       // API 호출 및 비즈니스 로직
│   ├── hooks          // 커스텀 훅
│   ├── context        // Context API 관련 파일
│   ├── styles         // 전역 스타일 및 CSS 파일
│   ├── utils          // 유틸리티 함수
│   ├── App.js          // 최상위 컴포넌트
│   └── index.js        // 진입점
├── package.json
└── README.md

커뮤니티에선 주로 위와 같은 파일 구조를 사용한다고 해서 따라 해보려 한다.

public : 정적 파일들을 포함. 주로 HTML 파일이나 아이콘 등이 위치
src : 소스 코드
assets : 이미지나 폰트 같은 정적 자원
components : 여러 곳에서 재사용되는 UI 컴포넌트
pages : 각 페이지에 해당하는 컴포넌트. 라우팅에 사용
services : API 요청 및 데이터 처리 로직
hooks : 커스텀 훅
context : 상태 관리용 Context API 관련 파일
styles : CSS 파일이나 스타일 관련 파일
utils : 자주 사용하는 유틸리티 함수
App.js : 애플리케이션의 루트 컴포넌트
index.js : 애플리케이션의 진입점

React 공식 페이지에서도기능이나 라우트 또는 파일 유형에 따른 프로젝트 구조의 예시를 보여주지만, 모든 파일을 하나의 폴더에 보관하는 방법을 사용하다가 프로젝트가 커지면 어떤 파일들을 가장 자주 묶어서 수정하는지 알게 될 테니 고민 없이 일단 만들라고 한다.🙂

---

5. Lint / Linter - ESLint

Lint(보풀)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 등에 표시를 달아주는 행위이다.
1978년 벨 연구소에서 스티픈 C. 존슨이 32비트 기기에 유닉스를 이식 하던 중 C언어 소스를 검사하면서 만들어진 말이라고 한다.

혼자 하는 프로젝트라도 나중의 유지보수나 다른 사람들이 코드를 이해하기 쉽도록 lint를 설정해보려고 한다.
JavaScript를 사용할 때 가장 많이 쓰이는 ESLint를 사용하려고 한다.

eslint를 설치하면eslint.config.js 파일이 생기는데, 이곳을 Rules에 따라 수정해 규칙을 변경할 수 있다.
off or 0 - 규칙 끄기
warn or 1 - 경고만 하기 (터미널, CI/CD파이프라인 오류 없이 진행)
error or 2 - 오류로 취급하기 (터미널, CI/CD파이프라인 오류)

// eslint.config.js
export default [
    {
        rules: {
            "no-unused-vars": "error",
            "no-undef": "error"
        }
    }
];

개발 시간은 늘어나겠지만, 대중적인 코드 스타일로 취업준비를 하는것이 목표이기 때문에,
유명한 eslint-config-airbnb 라이브러리로 규칙을 지정하기로 했다.

npm eslint-config-airbnb 에서 자세한 설치 방법을 볼 수 있다.

# vite 프로젝트를 react 템플릿으로 생성시 eslint를 설치해준다.
# npm install eslint --save-dev

# 필요시 install-peerdeps를 설치한다.
# 패키지가 필요하는 의존성이 명시된 peerDependencies속성을 찾아 설치하는 역할을 한다.
# npm install -g install-peerdeps

$ npx install-peerdeps -D eslint-config-airbnb

$ npx eslint --init

npx eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide 
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON      
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
√ Would you like to install them now with npm? · No / Yes  

eslint --init을 실행하면, 위와같이 설정한 config 타입에 따라 .eslintrc 파일이 생성된다.

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 15,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

extends 항목에
"extends": ["airbnb", "airbnb/hooks"]
와 같이 추가해준다.

마지막으로 VSCode 환경 확장을 설치해주고 잠깐 기다리면,

lint가 적용되는것을 확인할 수 있다.

airbnb 규칙은 빡빡하기로(?) 유명한데,
우아한기술블로그에 단점과 이를 회피하기 위한 공유 컨피그를 만드는 과정이 나와있어 나중에 문제가 되면 살펴보고 바꿔보도록해야겠다.

---

6. Formatter - Prettier

ESLinter에서 이미 코드 포맷팅을 해주기 때문에 다음에 사용해보기로 한다.

# ESLint와 충돌을 막기 위해 보통 eslint-config-prettier 를 사용한다.
 npm i -D prettier eslint-config-prettier

이후 Prettier Options를 보고 원하는 대로 .prettierrc 파일을 수정하면 적용된다.

+추가로 eslint와 함께 사용할 땐 eslintrc.js 파일에서 extends 부분을 prettier가 마지막에 오도록 수정해야 한다고 한다.

extends: ['airbnb-base', 'prettier'] //prettier를 마지막에 작성해야 덮어써짐.

---

7. 테스트 도구 - cypress

Cypress는 사용자 시나리오를 기반으로 전체 애플리케이션의 흐름을 테스트하는 End-to-End 테스트 도구로,
테스트 실행 중에 결과를 실시간으로 확인하고 자동으로 테스트의 스크린샷과 영상 녹화 할 수 있다.

npm으로 간단하게 설치 가능하다.

npm install -D cypress

프로젝트 막바지에 여건이 되면 사용해 보고 사용법을 정리해보기로 한다. 🤣

---

마무리

1. 프로젝트에 필요한 다양한 도구에 대해 알아보고 세팅 방법을 간단히 정리해보았다.
2. 개발을 위해 만들어진 도구가 참 많다. 개발자를 위한 개발자 분들은 언제 봐도 정말 존경스럽다.
3. 각각 특장점을 전부 알고 비교해 사용하기는 어렵겠지만, 내가 사용하는 도구의 역할은 무엇이고 왜 사용해야 하는지 이유를 알고 있으면 좋을 것 같다.

이전엔 그냥 배운대로 사용했는데, 특장점을 알아보고 설치 방법까지 정리해보니 생각보다 많은 시간이 소요됐다. 이래서 시작이 반이라는 말이 있는걸까 💖🔥