React로 프로젝트를 시작 할 때

1. 프로젝트 구조

먼저, 프로젝트의 구조부터 살펴 보겠습니다.

아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!

https://github.com/WantedTeam17/Project-Starter-With-JS

GitHub - WantedTeam17/Project-Starter-With-JS: WebPack, Babel, JS를 이용한 리액트 프로젝트 세팅

이 외에도 깃헙에 'react starer' 등과 같은 검색어로 공유하면 여러 템플릿이 있다.

그렇기 때문에 꼭 이 프로젝트의 구조를 따르지 않아도 된다.

또는 구글에 'react 폴더 구조', 'react 프로젝트 구조' 등 검색어를 통해서 어떤 구조와 템플릿이 있는 지 살펴 본 뒤,

자신(팀)에게 맞는 구조를 세팅해도 전혀 무방하다.

하지만 일단은 내가 사용하고 있는 이 프로젝트의 구조를 기반으로 설명하겠다!

 

*GPT가 만들어준 폴더 구조

https://chatgpt.com/share/ff1779e4-7a95-495f-8211-1b9b3709c06d

ChatGPT

 

 

 

폴더 구조

일단 root에서 볼 수 있는 프로젝트 구조는 이렇게 되어 있는데 처음 보면 babel이 뭐지...?? husky가 뭐지...?? (웅성 웅성) 

이런 생각이 드는게 당연하다! 

 

1) husky

 

깃과 관련된 이벤트(commit, push 등)이 있을 때 트리거가 발생해서 처리를 도와주는 툴인데 나도 거의 사용하지 않는다 ^^;

과감히 설명 생략...

궁금하신 분은 아래 포스팅 참고해 주세용

https://library.gabia.com/contents/8492/

가비아 라이브러리

 

2) babel

babel은 javascript의 컴파일러(프로그래밍 언어를 기계가 이해할 수 있는 언어로 변환해 주는 것)로

*사실 javascript는 컴파일러가 아닌 인터프리터라는 프로그램으로 동작한다. 그렇기 때문에 컴파일러인 babel을 별도로 사용하는 것!

모든 브라우저의 버전 환경에서 javascript가 실행 될 수 있도록 도와주고 (최신 문법으로 쓰인 js를 어떤 브라우저는 이해하지 못할 수도 있는데 그것을 변환 시켜준다)

 

더 자세한 내용은 공식 홈페이지의 문서에 잘 나와 있지만 영어로 되어 있으므로 한국어 포스팅을 원한다면 아래 포스팅을 읽어보면 된다.

https://velog.io/@suyeon9456/Babel

Babel 직접 적용하며 이해하기

 

 

3) webpack

webpack이란 javascript의 번들러다!

 

*번들러란?

번들러(Bundler)는 웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, JS 등의 파편화된(모듈화된) 자원들을 모아서, 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구입니다.
그리고 결합을 위해 프로젝트를 해석하는 과정에서, 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본적인 작업뿐만 아니라, 최신 문법이나 기타 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행할 수 있도록 확장되었습니다.
결국, 현대의 번들러는 개발자의 작업 효율성을 높이고 브라우저의 호환성이나 성능 등을 개선하는데 크게 도움을 줍니다.

출처: https://www.heropy.dev/p/x8iedW

번들러를 사용하는 이유에 대해서 알기 위해선 '모듈화'를 이해 할 필요가 있다.

javascript는 import와 export 구문을 사용해서 모듈로서 코드를 작성하고, 모듈을 불러와서 사용한다.

이러한 여러 모듈을 하나의 파일(output)으로 합쳐서 어떠한 브라우저 환경에서도 사용 할 수 있도록 하기 위해 번들러가 필요하다!

 

더 자세한 이야기는 아래 포스팅에서 확인 할 수 있다.

https://ingg.dev/webpack/

[JS] Webpack을 쓰는 이유

 

사소하지만 미리 이야기 하고 싶은 것은 webpack과 관련된 의도치 않은 오류들이 종종 발생할 때가 있다.

구글링 하면 해결 방법이 많이 나오므로 내 프로젝트에 webpack을 사용하고 있고, 영문 모를 오류가 발생한다면

'webpack (~~ 오류 내용 ~~)' 이런 식으로 검색해 보면 해결법을 얻게 될 수도 있다.

 

4) prettier, eslint

prettier와 eslint는 코드를 예쁘게(?) 해주는 역할이다.

javascript는 사실 좀 지멋대로인 경향이 있다.

ex) ;를 붙여도 되고 안붙여도 됨, 타입도 없음(선언 할 때 지정해 줄 필요 없음)

 

그렇기 때문에 prettier와 eslint를 통해 코드 스타일, 문법을 통일해준다!

처음 사용해 본다면 다른 사람이 사용하는 포맷을 그대로 가져와서 써도 좋지만

*대표적으로 airbnb의 eslint가 있다. 그러나 규칙이 많고 복잡해서 매번 eslint 규칙을 어긴 곳을 찾아서 고치다가 시간이 다 갈 수 있다.

 

어느 정도 취향이 생긴 후라면 팀원들과 상의하여 포맷을 커스텀 해봐도 좋다.

참고를 위해 저는 이렇게 사용합니다.

 

eslint

rules: {
    "no-var": "error", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { allow: ["warn", "error", "info"] }], // console.log() 금지
    "eqeqeq": "error", // 일치 연산자 사용 필수
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
  },

 

prettier

module.exports = {
  printWidth: 100, // printWidth default 80 => 100 으로 변경
  singleQuote: false, // "" => ''
  semi: true,
  arrowParens: "avoid", // arrow function parameter가 하나일 경우 괄호 생략
  tabWidth: 2,
  bracketSpacing: true,
  bracketSameLine: false,
  quoteProps: "consistent",
};

 

prettier의 경우 어떤 옵션이 어떤 걸 의미하는 지 공홈에 잘 설명 되어 있다.

https://prettier.io/docs/en/options

Prettier · Opinionated Code Formatter

 

그리고 이건 eslint 관련해서 읽어보면 좋을 것 같은 글 (우아한 형제들의 기술 블로그)

https://techblog.woowahan.com/15903/#toc-0

우리 팀을 위한 ESLint, Prettier 공유 컨피그 만들어보기 | 우아한형제들 기술블로그

 

 

5) package.json

package.json은 npm 패키지들의 버전을 관리하고 프로젝트의 버전이 명시되어 있는 등 프로젝트의 명세서라고 볼 수 있다.

`npm install`을 실행하면 package.json에 적힌 것을 기반으로 패키지들이 설치 된다.

 

https://hoya-kim.github.io/2021/09/14/package-json/

알고 쓰자 package.json

 

2. 폴더 구조

src안의 폴더와 파일들

 

3. 그래서 우리는 무슨 구조와 형식을 따라야 하고 무슨 라이브러리를 사용해야 하나요..

react는 프레임워크가 아닌 라이브러리기 때문에 (1학기 때 배운 vue가 프레임워크이다.)

사용자에 따라 커스텀이 자유롭고 그만큼 재밌고 활용도가 높지만 어떻게 보면 귀찮게 느껴질 수도 있다.

그래서 지금껏 설명한 구조와 완전 다르게 프로젝트를 진행해도 전혀 무방하다

(구글링 또는 깃헙에서 다양한 인사이트를 얻을 수 있을 것이라고 생각한다!)

 

몇 년 되진 않았지만 지금껏 지켜본 바로는 새로운 기술이 계속해서 생겨나고 트렌드가 계속 변한다.

webpack을 소개했지만 vite라는 것이 나왔고, 많은 사람들이 트렌드에 따라 vite를 사용하고 있다

https://enjoydev.life/blog/frontend/4-module-bundler

모듈 번들러란? - Webpack vs Vite 무엇을 써야 할까요?

 

그 외에도 상태관리, CSS 라이브러리도 다양한 라이브러리들이 있다.

상태관리 라이브러리로는 redux, recoil, react-jquery 등이 있고,

https://redux.js.org/

Redux - A JS library for predictable and maintainable global state management | Redux

 

https://recoiljs.org/

Recoil

https://tanstack.com/query/latest/docs/framework/react/overview

Overview | TanStack Query React Docs

 

CSS 라이브러리는 tailwindcss, emotion, styled-components 등이 있다.

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

https://emotion.sh/docs/introduction

Emotion – Introduction

https://styled-components.com/

styled-components

 

다양한 라이브러리를 팀원들의 상의를 통해 결정해서 기술 스택을 정하면 된다.

보통은 팀원 중 한명이 "어떤 라이브러리를 써봤다." 또는 "쓰고 싶다"라고 이야기 하면 그 라이브러리가 채택 되는데

딱히 그런게 없다면 관심 있는 회사의 기술 스택을 참고하면 좋다!

 

프론트엔드 기술 스택 트렌드에 관련해서 읽어보면 좋을 글

https://yozm.wishket.com/magazine/detail/2625/

2024 프론트엔드 기술 스택 트렌드 이야기 (1) | 요즘IT

 

npm 라이브러리의 다운로드 횟수를 비교해서 트렌드를 확인 할수도 있다.

https://npmtrends.com/

npm trends: Compare NPM package downloads

redux vs recoil vs rmobx 비교 그래프

 

트렌드와 구현 가능성 (러닝커브가 너무 높으면 프로젝트에 적용하기 전에 공부만 하다가 끝날 수도 있다)을 고려해서 프로젝트의 기술스택을 잘 정하길 바란다 :)

 

2. 컨벤션

JS 코딩컨벤션으로 가장 유명한건 airbnb의 style guide인데 큰 회사이다보니 지켜야 할 규칙이 엄청 많다.

https://github.com/apple77y/javascript/tree/master/react

javascript/react at master · apple77y/javascript

우리의 프로젝트에 적용하기 어려울 수 있으므로 간단한 컨벤션을 정하길 추천한다!

 

https://sh-tg.notion.site/393cb6d0dfb547ce90ad854c468a4811?pvs=4

코딩컨벤션 | Notion

 

3. 컴포넌트 쪼개기에 대해서 고민해 보면 좋습니다.

디자인이 정해졌다면 각 컴포넌트가 재사용이 가능한 컴포넌트인지, 어떤 컴포넌트가 어떤 컴포넌트의 내부에 들어가 있는 지 등을 고려해서 컴포넌트를 작게 쪼개고 화면의 구조를 생각해 보면 좋다!

 

컴포넌트를 쪼개는 기준 역시 다양한데, 보통은 다른 곳에서도 사용할 수 있는 컴포넌트라면 별도의 컴포넌트로 분리해서 사용하는 것 같다. 너무 작게 쪼개면 코드의 복잡성이 증가하고 불필요한 리렌더링을 발생 시킬 수 있어서 팀내 상의를 통해 적절히 정하는 것이 중요하다.

 

https://velog.io/@skyoffly/%EA%B0%9C%EB%B0%9C-%EC%A7%80%EC%8B%9D-React.js%EC%97%90%EC%84%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EB%B6%84%EB%A6%AC%ED%95%98%EB%8A%94-%EA%B2%83

React.js 지식 - React.js에서 컴포넌트를 분리하는 것.

 

4. 기타 하고 싶은 이야기 (사소함)

- 최대한 공식 문서 참고하기

- 팀원들과 이야기 많이하고 상의없는 독단 행동 하지 말기, 내 코드 아니라도 꼼꼼히 보고 문제 없는 지 확인하기

- 피그마 웹 버전으로 쓰지 말고 다운 받아서 쓰세용 (로컬 폰트를 사용하는 등 더 많은 기능 사용 가능)

- 무료 폰트 사이트 눈누 (허용 범위별, 폰트 형태별 정리가 잘 되어 있고, 무료 저작권 폰트가 많아서 좋음)

https://noonnu.cc/

눈누

- 색 조합 사이트 - color hunt, color space 

https://colorhunt.co/

https://mycolor.space/ 

- emmet : HTML 쓸 때 아주 편한 단축키

https://docs.emmet.io/cheat-sheet/

Cheat Sheet

- ctrl + shift+ c : 페이지 검사 단축키