프론트엔드 개인프로젝트 및 협업시 초기세팅

Seju·2023년 7월 4일
project
14

Project

목록 보기
1/1
post-thumbnail

Project initial setting


✍ 들어가기에 앞서..

개인프로젝트 및 협업 시에 어떤것을 꼭 미리 세팅해둬야하는지의 정확한 가이드라인을 찾아보고 정리할겸 이글을 작성하게 되었습니다🤝

🚨 만약 루트 바깥에 package.json 파일이 생성안되어 있다면

//package.json 파일 생성 ➡️ -y는 실행시 모든 설정에 대한 기본 설정값을 사용하겠다는 의미
$ npm init -y

🚥 Initial Setting List

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

📂 .gitignore 파일 세팅

🤷 .gitignore 파일이란?
git repository에 추가되지 말아야하는 폴더나 파일을 정의하는 파일이다
.ignore파일은 루트 최상단 즉 가장바깥에 위치해야한다

.gitignore 파일 폴더에 추가하기

//프로젝트 루트 폴더 기준
$ npx add gitignore
  • 터미널에서 시작되면 내가 .gitignore에서 추가해야할 요소들(intellij, macos, node, visualstudiocode, webstorm, windows 등등..)을 추가후 enter 입력시 .gitignore 파일에 포함된다

npx add gitignore 후 실행 터미널 1

npx add gitignore 후 실행 터미널 2

gitignore 터미널 종료 후 생성된 .gitignore 파일

🙋 추가로, gitignore.io 페이지를 이용해 프로젝트에 맞는 gitignore 파일을 생성할 수 있다

gitignore.io 페이지


gitignore.io 페이지를 통해 생성한 .gitignore 파일


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

프로젝트 시 폴더 구조를 미리 설계해두고 해당 폴더에 파일을 추가하는 방식은 프로젝트의 능률도올라가고 매우 중요❗
쓰는 프레임워크에 따라 디렉토리 구조는 달라지는데
프론트엔드에서 현재 가장 많이 쓰이는 React로 프로젝트 빌드시 폴더구조를 예를 들어서 설명해보겠다

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

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

😓 프로젝트 협업 시 초기세팅에서 코딩 컨벤션 및 스타일의 기준을 정하고 가는건 아주 중요하다 표준이 있으면, 나와 협업자가 작성하는 코드의 구조에 대한 이해도 한결 더 쉬워지고 유지보수성도 좋아지기 때문이다

🚀 ESLint

❓ ESLint란?
린팅이란 코드내에서 에러를 찾아내 명시하는 작업인데,
ESLint는 Ecma Script와 Lint를 합친것으로,
자바스크립트 코드의 에러를 표시해준다

  • 먼저 루트에서 eslint 파일의 구성을 어떻게 할것인가를 설정해보자
$ npm init @eslint/config
  • 해당 명령어를 입력하면 터미널에 이런 창이 로드되는데
    협업시 해당 경우들에서 협의 후 단계별로 고르면 된다

eslint/confing 첫번째 화면

eslint/confing 두번째 화면

eslint/confing 세번째 화면

eslint/confing 네번째 화면 : 타입스크립트를 쓸 것인가?

eslint/confing 다섯번째 화면 : 자바스크립트를 어느 환경에서 실행할것인지? 보통 node, Browser 두개다 선택한다

eslint/confing 여섯번째 화면 : (선택사항)

  • 해당 단계를 걸쳐서 설정이 완료되면

eslint를 최신화 할 것인가? ✅ Yes

최신화한 eslint 파일을 어떤것으로 설치할 것인가?

  • 설치완료시 eslintrc.js 파일이 생성되고 package.json 파일의 dependencies에 eslint가 추가된다

eslintrc.js 파일

package.json에 eslint가 추가된 모습

🛫 airbnb-eslint


🦋 Prettier

포멧팅이란?
prettier와 같은 자동화 도구를 사용하여 코드를 일관성 있게 코드를 강제하는 작업

  • package.json내 prettier 설치
$ npm i -D prettier

package.json에 prettier가 추가된 모습

  • .prettierrc.js 파일 생성
    물론 이 파일도 루트폴더 가장 외부에 생성해야한다
  • .prettierrc.js 파일 내부에서 포멧팅 규칙 작성
  module.exports = {
    // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
    arrowParens: "always",
    // 닫는 괄호(>) 위치 설정
    // ex: <div
    //       id="unique-id"
    //       class="contaienr"
    //     >
    htmlWhitespaceSensitivity: "css",
    bracketSameLine: false,
    // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
    bracketSpacing: true,
    // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
    printWidth: 80,
    // 산문 래핑 설정
    proseWrap: "preserve",
    // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
    quoteProps: "as-needed",
    // 세미콜론(;) 사용 여부
    semi: true,
    // 싱글 인용 부호(') 사용 여부
    singleQuote: true,
    // 탭 너비 설정
    tabWidth: 2,
    // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
    trailingComma: "es5",
    // 탭 사용 여부
    useTabs: false,
};

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

프로젝트 시작시 팀원들끼리 어떤 프레임워크 및 라이브러리를 쓸것인지를 설정해놓는것 또한 매우 중요하다. 적절한 프레임워크와 라이브러리를 선택하지않으면,
프로젝트 시 발생하는 문제점이나 제약사항이 발생할 확률이 높아지기 때문이다 아래 예시는 일반적인 프로젝트 초기 셋팅시 고려해야할 요소들이다.

❓ 프레임워크와 라이브러리의 차이점
집을 짓기 위한 과정을 프레임워크과 라이브러리 둘을 비교하면,

프레임워크

  • 프레임워크는 모델하우스를 짓는것에 비유할 수 있다.
  • 모델하우스의 방의 용도, 모델하우스의 가구의 배치 등 우리가 수정할 수 있는 범위는 제한적이다 사용자는 모델하우스가 제공하는 청사진 안에서만 움직일 수 있다. 즉 프레임워크가 제공하는 청사진 내에서만 즉, 틀에 따라서 코드를 작성해야한다. 통제권은 사용자가 아닌 프레임워크가 쥐고 있는것이다.

라이브러리

  • 라이브러리는 내가 이케아에서 산 재료로 가구를 DIY하는 것과 같다고 비유할 수 있다
  • 사용할 가구를 조립하거나 만들기 위해 필요한 목재를 직접 수급하고, 가죽을 얻기 위해 사냥을 하는 사람은 거의 없을것이다. 그러기에, 이케아에서 기본적인 재료를 사서 입맛대로 조립할 수 있다.
    즉, 통제권은 사용자에게 있는 것이다

1. 프레임워크 선택

  • 프로젝트 목적에 따라 적합한 프레임워크를 선택해야한다.
  • 개발 시 자주 쓰이는 프레임워크
    • 대표적으로 Vue,Angular,TailWind CSS 등이 존재한다
      • TailWind CSS
        • 쉽게 말해, 엄청나게 많은 유틸리티 클래스로 이루어진 CSS프레임워크이다.
        • Tailwind에서 제공하는 유틸리티 클래스를 다양하게 조합하면 추가적인 CSS 코드 작성없이, HTML 요소의 class 속성에 설정하는 것만으로도 스타일링이 가능해진다.
        • React와 궁합이 매우 잘맞아 같이 사용되는 비율이 높아지는 추세이다.

2. 라이브러리 선택

  • 협업 시 어떤 라이브러리를 선택할것인지는 개발목적에 따라 아주 다양해지는데,
  • 개발 시 자주쓰이는 라이브러리
    • React
      • React는 Vue, Angular.js와 달리 프레임워크가 아닌 라이브러리인데, 사용자 인터페이스를 구축하기 위한 뷰 레이어를 지원하여 효과적인 UX를 제공하는데 초점을 두고 개발되었다
    • Redux (상태 관리 라이브러리)
      • 애플리케이션의 전역상태를 관리하기 위한 라이브러리로서, React화 함께 주로 사용된다
    • Axios (HTTP 클라이언트 라이브러리)
      • 웹 브라우저와 Node.js 환경에 공통적으로 제공되는 HTTP 클라이언트 라이브러리로, API 통신에 활용된다
    • Lodash(유틸리티 라이브러리)
      • Javascript에서 범용적으로 사용되는 배열, 객체 및 문자열에 관련된 작업에 유틸리티 함수를 제공하는 라이브러리

🙋 마치며..

프로젝트 시 초기셋팅들에 대해서 궁금한게 많아서 이번에 제대로 찾아보게 되었는데,
해당 내용에서 오류가 있거나, 초기세팅에서 추가로 고려해야할 사항이 있다면 댓글로 알려주면 정말 감사하겠습니다 🙆‍♂️

profile
Seju
Talk is cheap. Show me the code.

0개의 댓글