JavaScript 및 공통

• 변수명은 가리키는 것이 무엇인지 한 눈에 알아볼 수 있게 짓는다. 변수명은 내 코드를 설명하는 방식이다.

• className BEM vs camelCase : 팀 내에서는 하나의 컨벤션으로 통일

• 로컬 경로를 쓸 때 localhost:3000은 생략하는 것이 좋다. 3000 포트가 안 열리고 3004 포트가 열려 있을 수도 있기 때문이다. public에 접근할 때는 항상 절대경로로 쓴다.

• a ? a : b와 a || b는 같다.

short circuit evaluation 단축 평가

• &&: 첫 번째 falsy를 찾음

console.log( 1 && 0 && null ); // 0 (0은 falsy임)

• ||: 첫 번째 truthy를 찾음

console.log( null || 0 || 1 ); // 1 (1은 truthy임)

• !!: truthy값을 true로, falsy값을 false로 바꿔준다.

  • !를 한 번 쓰면 반대 boolean으로 바꿔주고, 한 번 더 쓰면 다시 원래 boolean으로 바꿔주는 원리.

• !(not)을 굳이 안 써도 될 때는 안 쓰는 것이 좋다.

• if ... else 를 반복해서 쓰는 것보다 early return을 쓸 수 있으면 쓰는 것이 indent가 깊어지지 않아 가독성이 좋다.

• 주석은 웬만하면 없는 것이 좋지만 쓰려면 주석에 Prefix를 붙여주는 것이 좋다.

// TODO: API 개발 완료되면 주석해제 후 기존 코드 치환
// FIXME: 지금 못 고치지만 나중에 고칠 부분

React

• state는 최소한으로 사용한다.

  • 컴포넌트가 리렌더링 될 때는 props가 바뀔 때와 state가 바뀔 때이다.
  • 따라서 다른 props나 state를 통해 계산될 수 있는 값은 state로 줄 필요 없다.

• setState() 인자에 변수 대신 함수를 써야 하는 이유:
  setState()를 실행할 시점의 state값이 제일 최신의 state값이라는 것을 보장할 수 없기 때문이다.

setState(state) // 이 코드를 실행하는 시점의 state 값이 최신 값이 아닐 수 있다
setState(prev => prev + 1) // 언제나 최신 state값에 +1을 해준다

• state vs ref: state로 쓸 수 있는 경우 state. ref는 필요한 경우에만 사용한다.

Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

• map()으로 컴포넌트를 뿌려줄 때, key는 반드시 써야 한다. react는 리렌더링을 할 때, 리렌더링 전과 후의 key값이 같으면 같은 컴포넌트임을 인식하고 불필요하게 리렌더링하지 않는다. 그러나 key값을 써주지 않으면 리렌더링 전후에 같은 컴포넌트인지 비교할 수가 없으므로 모두 리렌더링을 해버리게 된다.

key 값의 필수 조건

1. 고유해야 한다.
2. 변하지 않아야 한다.

• key값으로 index를 쓰지 말아야 하는 이유:
  index는 계속 변할 수 있기 때문이다.
  삭제 기능을 만들 때, 하나의 index가 삭제되면 다른 index들이 재정렬되어 key값이 변할 수 있다.

• map() 메서드를 쓸 때 파라미터 이름을 단순히 data로 하기보다는 구체적으로 써주는 것이 좋다.

map() 메서드에서의 props 전달

feedData.map(feed => (
  <Feed
    key={feed.id}
    userName={feed.userName}
    content={feed.content}
    isLiked={feed.isLiked}
    comments={feed.comments}
  />
))

필요한 props가 많은 경우 props를 하나씩 써주는 대신 통째로 넘겨줄 수도 있다.

feedData.map(feed => (
  <Feed
    key={feed.id}
    feed={feed}
  />
))

필요한 props가 적은 경우 구조분해할당을 하는 것이 더 깔끔한 경우도 있다.

feedData.map(({id, userName}) => (
  <Feed
    key={id}
    userName={userName}
  />
))

• 상수 데이터

  • 리렌더링 방지를 위해 컴포넌트 안에서가 아니라 전역에서 선언한다.
  • 네이밍 컨벤션: UPPERCASE + snake_case

• window, body, scroll 등에 addEventListener()를 걸 경우에는 useEffect() 안에서 써야 하고, clean up(removeEventListener())도 반드시 해 줘야 한다. 그렇지 않으면 리렌더링될 때마다 매번 윈도우나 스크롤에 EventListener가 계속 걸리는 상황이 발생한다.

• react는 단방향성이다. fetch()는 상위에서 한 번 호출하고 데이터를 하위에 뿌려준다.
  source of truth: 진리는 한 곳으로부터. 여러 곳에서 fetch()를 호출하면 유지·보수가 굉장히 곤란해진다.

SASS

• tag 선택자는 지양. (Nesting 하더라도) className 부여해서 쓰기.
• 컴포넌트 안에 id 선택자 사용 X. 컴포넌트는 재사용성이 핵심인데 id는 document 전체에서 고유해야 하기 때문이다.
• 속성 순서 컨벤션: position 다음 display