Portfolio

Q ) 다음 주 부터 팀원들과 팀 프로젝트를 시작하게 되었습니다. 이를 위한 컨벤션 혹은 셋팅을 어떻게 해야할 지 잘 모르겠는데, 조언 부탁드립니다!

A )

코드 컨벤션

1. 코드 스타일

1 ) 라이브러리 설치 및 설정

ESLint, Prettier, Biome

javascript, typescript, react, import

참고 ) 이번 팀 프로젝트에서는 next를 사용하지 않기에, eslint-plugin-next 지워야 합니다. 또한, prettier/airbnb 룰은 비추! 너무 많이 억압적이기 때문.

2 ) 함수, 변수, 네이밍 규칙

파스칼 케이스, 카멜 케이스, 스네이크 케이스, 케밥 케이스, 한글 변수

클래스, 상수, 변수, 컴포넌트, 커스텀 훅, 유틸리티, 타입

3 ) 파일 분리

스타일 코드는 분리한다. (단, 코드가 단조롭다면 하나의 파일에서 작성)

컴포넌트가 복잡해지면 분리한다. ex ) Button - hooks.ts - types.ts - Button.ts - index.ts
커스텀 훅은 분리한다. why ? ⇒ 비지니스 로직의 집합이기 때문이다. ⇒ 이 비지니스 로직에 의해 렌더링이 제어되어야 한다. ⇒ 때문에 UI와 비지니스 로직은 분리되어야 한다. ⇒ Container & Presentional Pattern

2. 폴더 스트럭쳐

eslint-plugin-unicorn 유니콘을 활용하면 폴더명을 강제할 수 있음!

forceConsistentCasingInFileNames: ‘true’ tsconfig.json 설정으로써, true로 설정해두면 TS가 파일을 더 빨리 추론할 수 있음! 또한 깃 커밋때 파일명 대/소문자 구분을 제대로 인식해주는 역할까지.

아래 사진 참고!

3. 커밋 컨벤션

husky

commit-lint

위 방식으로 커밋을 강제해도 좋아~

4. PR 규칙

마찬가지. CI/CD로 테스트, 빌드, 스토리북 빌딩...까지 넣어두면 쉽게 정합성 판별 가능.

이러한 컨벤션 규정은 너무 많은 시간동안 하는 것 보다는, 정해진(짧은)시간 동안 자주 하는 것이 좋습니다. 또한 제의를 할 때 사전 준비를 많이 해 두는 것이 좋습니다. 본인이 아는 것을 말 하는 것도 쉽지 않지만, 이를 팀원들과 섞기는 더 힘들기 때문입니다.

Q ) 공통 컴포넌트 vs 공유 컴포넌트

A )

공통 컴포넌트

멘토님과 동건님이 어떤 프로젝트를 진행한다고 가정해 보겠습니다.

멘토님 : SNS 관련 동건님 : 핀테크 관련 서로 다른 도메인 내부에서 재사용되는 컴포넌트로써, 프로젝트 내부의 다양한 부분에서 반복적으로 사용되는 UI 요소나 기능적 요소 등을 일컫습니다.

예시로는 버튼, 테이블, 타이포그래피, 아코디언 등이 있으며 버튼이라는 컴포넌트’에’ 비지니스 로직을 ‘주입’ 하는 경우 라 볼 수 있겠습니다.

즉, 단일 프로젝트 전반에 걸쳐 일관되게 사용되는 UI 요소들이 이 범주에 속하며, 코드의 중복을 줄이고, 일관된 스타일과 동작을 유지하며, 유지 보수를 용이하게 하기 위해 사용됩니다.

공유 컴포넌트

이번에는 두 분께서 같은 프로젝트를 진행한다고 가정해 보겠습니다.

멘토님 : SNS 관련 동건님 : SNS 관련

이때 공유 컴포넌트는 <로그인 컴포넌트>라는 동일한 도메인/비지니스 로직에 사용되는 컴포넌트 입니다. shared-component라고도 불립니다. 아토믹 디자인 패턴 처럼, 본인이 사용하는 회사에서만 공용으로 사용할 수 있다고 합니다.

또한 공통 컴포넌트 보다는, 조금 더 넓은 범위의 재사용성과 호환성을 고려하여 설계됩니다. 조직 또는 여러 프로젝트 내에서 일관된 브랜딩과 사용자 경험을 제공하며, 개발 시간과 비용을 절감하기 위해 사용되며, 라이브러리나 패키지 같은 형태로도 개발된다고 합니다.

Q ) 클린 코드 관련

A )

아래는 예제 코드 입니다.


const isScrollEnded = false;

if(isScrollEnded && 
    !movieStore.searchLoading && 
    movieStore.movies && 
    movieStore.totalResults && 
    movieStore.movies.Search.length < parseInt(movieStore.movies.totalResults)) { ~ }

위 코드를 어떻게 더 보기좋게 만들 수 있을까요 ?


const isScrollEnded = (isScrollEnded, {searchLoading, movies}) =>{
    return isScrollEnded && !searchLoading && movies;
}

if(isScrollEnded(isScrollEnded, movieStore)) { ~ }

if문 안의 조건들을 밖에서 처리한, 위 코드가 조금 더 좋아보입니다.

또한, 어떤 데이터를 가져오는 함수 getData()가 있다고 가정했을때


// Data.js
const getData = () => {
	...
	return data;
}

// App.js
const data = getData();

if (!data.length) return null; // 예외 처리

위와 같은 방법보다는


// Data.js
const getData = () => {
	...
	return data ? [];
}

// App.js
const data = getData();

추상화 해주는 것이 좋다.

놓친 부분들, 잘못된 부분은 추가 및 수정 해주시면 감사하겠습니다 (__)

4회차