🔖오늘 읽은 범위 : 5장 코드 형식
🙂 책에서 기억하고 싶은 내용을 써보세요.
코드 형식은 의사소통의 일환이다.
1. 하나의 파일에 200줄 이하, 한 줄에 코드는 120자가 적당하다.
2. 개념은 빈 행으로 분리하자.
- 생각 사이는 빈 행을 넣어 분리해야 마땅하다.
- 빈 행은 새로운 개념을 시작한다는 시각적 단서다.
3. 서로 밀접한 개념은 가까이 두자.
- 변수는 사용하는 위치에 최대한 가까이 선언하기.
- 한 함수가 다른 함수를 호출한다면 두 함수를 가까이, 가능하다면 호출하는 함수를 먼저 배치 ( 자연스럽게 고차원에서 저차원으로 내려가는 코드 구조가 된다. 하지만 javascript로 코딩 시 보통 함수 표현식을 많이 사용하기 때문에 호출하는 함수를 먼저 배치하는 것이 불가능하지. )
- 유사한 개념을 가진 코드들을 가깝게 배치하기.
4. 들여쓰기를 무시하지 말자.
🤔 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요.
팀 규칙 중 하나. 한 줄짜리 if문에도 중괄호를 써주기.
// 🙅🏻♀️
if(isActive)
return blabla;
if(isActive) return blabla;
// 🙆🏻♀️
if(isActive) {
return blabla;
}분명 모두가 문제없이 잘 돌아가는 코드이지만 추후 if문 안에 코드 추가 시 어차피 중괄호를 추가해줘야 하며, 이 과정에서 실수가 발생할 확률이 높다. 중괄호를 넣는 것이 안정적이다.
+
대부분이 prettier를 사용하여 자동으로 코드 형식을 맞추겠지만, prettier로는 설정할 수 없는 각자의 스타일들이 존재한다. 책에서 언급했던 서로 밀접한 개념을 가까이 두는 방식이 그중 한 가지일 테고. 우리 팀은 React를 주로 사용하는데 자식 컴포넌트로 props를 넘길 때도 각자 스타일이 다르다. 나 같은 경우에는 자식 컴포넌트에 필요한 data를 말 그대로 data 라는 명으로 한 번에 보낸 후 자식 컴포넌트 내부에서 const {title, content, tag, author } = data; 로 사용하는 방식을 선호한다. 팀원 한 명은 props로 넘길 때 <Book title={title} content={content} tag={tag} author={author} /> 와 같이 데이터를 세분화하여 넘기는 것을 좋아한다. 이렇게 코딩 방식에 차이점이 생긴다면 각각의 장단점을 찾아보며 한쪽으로 통일해가는 과정을 거치는데, 이 과정이 나에게 큰 공부가 된다.