토이 프로젝트 2 - 그룹 멘토링 (1)

 

• 질문 1. 커밋 컨벤션 템플릿을 쓰는게 좋을까요?

컨벤션은 너무 꼼꼼하게 잘 정한 것 같다고 하셨고

커핏 type은 좀 줄이는 것이 좋을 것 같다고 하셨다.

 

Q. 주석도 맞추는 경우가 있다던데?

자바스크립트의 타입을 알려주는 jsdoc이라는 것을 알려주셨다.

(타입스크립트를 쓰면 필요 없음!!)

/**
 * @param {any[]} arr
 */
function compact(arr) {
  if (arr.length > 10) return arr.trim(0, 10);
  //                              ~~~~
  // 'any[]' 형식에 'trim' 속성이 없습니다.ts(2339)
  return arr;
}

 

주석을 쓰는 경우

 

1. 내가 구현했어도 모르는 코드

- 지피티에서 가져왔는데, 동작은 되고 근데 실제로 내가 코드 흐름을 모를 때

- 설명용

2. 당장은 문제가 없지만 고쳐야 할 부분이 존재하는 코드 -> FIXME, TODO

 

▶ 컨벤션을 하는게 문맥 파악하는 것에 도움을 준다.

 

 

• 질문 2. SCSS랑 styled component 함께 사용할 때 효율적인 팁이 있을까요?

scss로 공통 스타일링을 하고,

styled component 로 컴포넌트 단위의 스타일링을 하려고 했는데

우선순위나 다른 이유들로 꼬이는 경우가 있다고 들어서 한 질문.

 

createGlobalStyle을 사용하면 styled component로 공통 스타일링을

할 수 있다고 하셨다.

 

멘토님은 scss로 페이지 단위 스타일링을 하면

클래스 네임을 추적하기가 어려워서 굳이 사용하고 싶지 않다고 하셨다.

 

반면에 styled component는 클릭하면 타고 들어가기가 가능해서 어떤 스타일이 적용되었는지 찾는게 쉽다고 하셨다.

props로 조건 넘겨서 동적 랜더링하기 때문에 리액트에서! 좋다.

 - codesandbox

ex) react-toggle button - codesandbox 이런식으로 검색해서 활용해보기

https://codesandbox.io/s/pricing-z2vxo

pricing - CodeSandbox

 

- 타입스크립트와 리액트 함께 쓸 때 활용해보기

https://react-typescript-cheatsheet.netlify.app/

React TypeScript Cheatsheets | React TypeScript Cheatsheets

 

• 추가 TIP

1. redux가 너무 복잡해서 redux-toolkit 활용하기

    - recoil은 관리가 안되는 프로젝트

    - mobX

    - zustand, jotai, valtio -> 동일한 사람이 만들었다. zustand 나중에 한번 활용해보기

 

2. 리덕스 쓰는 이유: 전역 상태 관리

     - 전역 상태 관리가 왜 필요한가?

     - 리액트는 단방향 데이터 구조 -> 데이터를 props로 계속 내려주는데 프로젝트 크기가 커지고 복잡해질 수록

        데이터 공유와 상태관리를 효율적으로 처리 가능

 

3. context API - props 드릴링을 막기 위해서

    - useReducer 전역 상태관리

    이거 두개가 redux와 역할이 비슷해요

 

 

꼼꼼히 답변해주시는 멘토님 ..🙉 

항상 많은 인사이트를 얻게 되는 멘토링 시간