프로젝트 초기 세팅하는 법

발등에 불 떨어져서 허겁지겁 과제하던 지난 날의 나,,

 

벌써 시간이 빠르게 지나서 합동세미나를 해야 하는데 프로젝트 초기세팅 하는 법을 제대로 알고 시작해야겠다는 반성의 의미로 이번 아티클을 작성하려고 한다.

 

⚙️ 초기 설정 목록

1. 프로젝트 디렉토리 구조 설계
2. 코드 가이드라인 및 스타일 가이드 설정
3. 프레임워크 및 라이브러리 설정

 

 

📂 프로젝트 디렉토리 구조 설계

프로젝트를 진행할 때 초기에 폴더 구조를 설계해두고 해당 폴더에 파일을 추가하면서 진행해야 효율적이다. 어떤 폴더에 코드가 위치해있는지 명확하게 예측 가능하며 같은 성격의 코드들이 하나로 모여있기 때문에 그러하다. 어느 프레임워크를 사용하는지에 따라 디렉토리 구조가 달라지는데, 프론트엔드에서 현재 가장 많이 사용되는 React로 프로젝트 빌드할 때 사용되는 디렉토리 구조를 설명하려고 한다. 

project/
  ├─ public/           --> 정적 파일 및 HTML 파일이 저장되는 폴더
  ├─ src/              --> 앱의 소스코드가 저장되는 폴더
  │   ├─ api/          --> API 요청과 관련된 코드를 저장하는 폴더
  │   ├─ styles/       --> 이미지,CSS,글꼴과 같은 리소스를 저장하는 폴더
  │   │   ├─ images/  
  │   │   └─ css/      
  │   ├─ components/   --> 리액트 컴포넌트가 저장되는 폴더 ➡️ 내부에 기능별로 하위 디렉토리를 구분하거나, 컴포넌트 별로 디렉토리를 구분한다
  │   │   ├─ App/
  │   │   ├─ Header/
  │   │   └─ Footer/
  │   ├─ containers/   --> 상태관리와 같은 로직이 포함된 컨테이너 컴포넌트를 저장하는 폴더
  │   ├─ constants/    --> 공통적으로 사용되는 init value나 상수들을 정의한 파일들이 위치하는 폴더
  │   ├─ hooks/        --> 사용자 Custom Hook코드를 저장하는 폴더
  │   ├─ pages/        --> 각각의 페이지에 대한 레이아웃이나 특정 페이지 관련 로직을 담당하는 컴포넌트를 저장하는 폴더
  │   ├─ utils/        --> 유틸리티 함수 등 여러 곳에서 자주 사용될것같은 코드를 저장하는 폴더
  │   ├─ routes/       --> 라우팅 정보를 저장하는 폴더
  │   └─ store/        --> 상태 관리를 위한 (예시 : Redux, Mobx등등..) 과 관련코드들이 저장되는 폴더
  │       ├─ actions/
  │       ├─ reducers/
  │       └─ types/
  ├─ .env
  ├─ .gitignore
  ├─ package.json
  └─ README.md

위에 예시에서 내가 헷갈렸던 utils와 hooks를 자세히 알아보려고 한다. 

 

utils(유틸리티) - utils 폴더는 프로젝트 전반에 걸쳐 재사용 가능한 함수나 유틸리티를 모아두는 폴더로 사용된다. 여기에 속하는 코드는 대체 순수 함수(입력값에만 의존하고, 외부의 상태를 변경하지 않으며 side effects가 없는 함수)로 이루어져 있어야 하며, 특정 컴포넌트의 상태나 React의 생명주기에 의존하지 않는 것이 특징이다. 즉, 어디에서든 불러와 사용할 수 있는 범용적인 로직의 코드를 포함하고 있다.

• 예시
  • 날짜를 포맷팅하는 함수
  • 이메일 주소의 유효성을 검사하는 함수
  • 숫자를 형식화하는 함수(예: 통화 형식)
• 특징
  • 순수성(같은 입력에 대해 항상 같은 출력을 반환함)
  • 재사용성
  • UI와의 독립성

 

hooks(훅) - hooks 폴더는 React의 기능을 활용하여 컴포넌트의 상태 관리나 side effect를 처리하는 등의 로직을 재사용 가능한 형태로 캡슐화한 커스텀 훅들을 모아두는 폴더로 사용된다. 커스텀 훅은 React 함수 컴포넌트에서만 사용할 수 있으며, 이를 통해 로직을 쉽게 공유하고 재사용할 수 있다. 커스텀 훅을 사용함으로써, 복잡한 컴포넌트 사이에서 중복되는 로직을 줄이고, 코드의 가독성과 유지보수성을 개선할 수 있다.

• 예시
  • API 호출을 관리하는 useFetch
  • 폼 입력과 관련된 상태를 관리하는 useForm
  • 로컬 스토리지에 데이터를 저장하고 불러오는 useLocalStorage
• 특징
  • React의 상태 관리와 side effect 처리 로직을 재사용 가능한 방식으로 캡슐화
  • 컴포넌트 간의 로직 공유 용이성

 

 

🚥 코드 가이드라인 및 스타일 가이드 설정

프로젝트 협업 시 초기 세팅에서 코드 컨벤션 및 스타일의 기준을 정하고 시작하는 건 매우 중요하다. 기준이 있으면 협업 시 작성하는 코드 구조에 대한 이해도가 높아지고 유지보수성도 좋아지기 때문이다. 

💡 ESLint 란? Ecma Script와 Lint를 합친것으로, 코드 내에서 에러를 찾아내 명시하는 작업을 하며 자바스크립트 코드의 에러를 표시해준다. 

💡 Prettier 란? 포멧팅은 Prettier와 같은 자동화 도구를 사용하여 코드를 일관성 있게 코드를 강제하는 작업을 말한다. 

 

 

 

📂 프레임워크 및 라이브러리 설정

프로젝트 시작 시 팀원들끼리 어떤 프레임워크 및 라이브러리를 쓸 것인지를 정하는 작업은 매우 중요하다. 적절한 프레임워크나 라이브러리를 선택하지 않으면, 프로젝트 진행 시 발생하는 문제점이나 제약사항이 발생할 확률이 높아지기 때문이다.

 ❓프레임워크와 라이브러리의 차이점

• 프레임워크는 개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 개발 시간을 줄이고, 코드의 재사용성을 증가 시키기 위해 일련의 클래스 묶음이나 뼈대, 틀을 라이브러리 형태로 제공되는 기술을 말한다. 프레임워크는 그 스스로 제어 흐름의 주도성을 갖는다. 대표적으로 Vue, Angular, TailWind CSS 등이 존재한다. 
• 라이브러리란 개발자가 만든 클래스들의 나열로, 다른 프로그램들에서 사용할 수 있도록 제공하는 방식이다. 라이브러리는 제어 흐름의 주도성을 개발자가 가지고 있다. 협업 시 어떤 라이브러리를 사용할 것인지는 목적에 따라 다양한데 React, Redux(상태 관리 라이브러리), Axios(HTTP 클라이언트 라이브러리), Lodash(유틸리티 라이브러리) 등이 있다.