이제 초기 개발 세팅을 해보자.

전에도 얘기했지만 기획부터 디자인, UI/UX는 피그마에 돼있어서 그 기획된 기능을 프론트 팀원 5명 서로 나눠서 구현하기로 했다. 일단 5명 브랜치 파기 전에 develop 브랜치에 기본 개발 세팅부터 하자.

폴더 구조, 파일명 설정

전에 얘기했듯이 폴더 및 파일 구조가 정해지지 않아서 중구난방이었다.

그래서 위 사진과 같이 폴더를 짰다. modules빼고 다른 걸 모두 만들었다. 네트워크 호출 코드 관련 api, ui 구현하는 components, pages, 색상 관련 theme파일이 있는 styles 등이 있다.
잘게 분리하면 좋은게 추후 리팩토링이나 유지보수시에 도움되니까 이렇게 나눴다.

폴더 및 파일명 네이밍도 통일돼있지 않아서 lowerCamelCase로 하기로 했다.

S-dot 사용

우리는 CSS 라이브러리를 Styled-Components로 쓴다. 보통 const로 태그를 가져와 CSS 코드를 입력하는 식이다.

const Wrapper: styled.div`
  padding-left: 24px;
  padding-right: 24px;
  `,

이렇게 말이다. 그런데 S-dot 방식이라고 다르게 입력하는 방식이 있다. 중괄호를 이용하여 props를 이용한 스타일링하는 것이다.

const S = {
  Wrapper: styled.div`
    padding-left: 24px;
    padding-right: 24px;
  `,
};

이렇게 사용하고 JSX 부분에는

<S.Wrapper>
  S-dot
</S.Wrapper>

이렇게 입력한다.

왜 이렇게 하느냐

1. 조건부 스타일링: S-dot을 사용하면 props를 통해 컴포넌트의 스타일을 조건부로 변경할 수 있습니다. 이를 통해 코드를 간결하게 유지하고, 컴포넌트를 재사용하기 쉽게 만들 수 있습니다.
2. 유연한 스타일링: S-dot을 사용하면 스타일을 동적으로 조작할 수 있습니다. props를 변경함으로써 컴포넌트의 스타일을 변경할 수 있습니다. 이를 통해 컴포넌트를 더욱 유연하게 만들 수 있습니다.
3. 가독성: S-dot을 사용하면 CSS 속성과 값을 한눈에 알아볼 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있습니다.

(출처: Chat GPT)

즉, props처럼 쓰면서 props의 이점을 가져올 수 있다는 것이다. 특히 가독성이 좋아지는 게 제일 좋다. 우리팀은 가독성이 좋은 것이 1번째라 그렇게 진행하도록 했다.

또 추가로 Styled 관련 코드는 그 컴포넌트 및 페이지 맨 아래에 쓰기로 통일했다.

api/axiosModul.ts

api 호출하는 것도 통일했다. axios instance를 만들어서 Server URL 및 네트워크 호출 방식을 통일했다.

import axios from "axios";


export const SERVER_URL = `https://server-prod.wingle.kr/api/v1`;

const instance = axios.create({
  baseURL: SERVER_URL,
  headers: {
    Authorization: `Bearer ~~`,
  },
});

export default instance;

이런 식으로 만들어서

import instance from "../axiosModul";
// axios도 가능
import axios from "../axiosModul";

export const getPickers = async () => {
  const response = await axios.get("/groups");
  return response.data;
};

이렇게 통일 했다. 저거 가지고 이제 리액트 쿼리에 쓰면 된다!

나중엔 인터셉터까지 사용해서 리프레쉬 토큰 재발급도 만들고 그럴 것이다!

세팅 요약: 코딩컨벤션

세팅 중 굵직한 것들만 정리를 했다. 얇은 것들은 넘겼다. 통일했던 것들은 아래와 같다.

1. Common
   - 네이밍 글자 길이 : 20자 이내(20자 이상 팀원과 상의)
   - 유형별 네이밍 규칙

   Default : camelCase
   Folder, File names : lowerCamelCase
   Component Function names : PascalCase
   Function names : lowerCamelCase, verb + noun(ex: getUserInformation)
   Constant names : CONSTANT_CASE

2. React
   • 메모이제이션 권장
   • 함수 선언 : 화살표 함수로 선언
     • 함수형 컴포넌트 작성시 → export default function Example() {}
     • 컴포넌트 내부에 있는 함수 작성 시 → const Example () ⇒ {}
       • 이벤트 함수 네이밍 : handle + event / const handleOnClickAlarm = () => { ... }
3. Styled-Components
   • 해당 컴포넌트 파일에 정의
   • 네이밍(S-dot)
4. Recoil
   • 무분별한 전역상태 사용 금지 : 다수의 컴포넌트간에 상태 의존성이 높아질때만 전역상태로 데이터 관리(일반적인 경우 지역상태로 관리)
   • 네이밍 : StateAtom 추가 / export const imgModalStateAtom = atom({...})
5. TypeScript
   • naming : PascalCase 사용, I/T prefix 사용 금지
   • type alias + interface(API Data)
   • 충돌성 오류로 둘 중 하나의 방식만 → type 방식으로 쓰기로 결정
   • interface 로 되어 있는 코드 type 으로 수정해주기

이런 식이다!