[Pre Onboarding] 8월 9일

JavaScript 에서의 클린코드

경험이 중요하다 리팩토링, 많은 코드를 보고 책도 많이 읽자!!
주로 자바위주로 작성되어있다! 자바스크립트는 적음

자바스크립트로 코드를 작성할때 읽기 쉽고, 재사용가능하며 리팩토링 가능한것

Robert Martin의 책 Clean code 정리본
링크텍스트

변수

1.의미있고 발음하기 쉬운 변수 이름을 사용해야합니다.
const yyyymmdstr = moment().format('yyyy/MM/DD');

const currentDate = moment().format('yyyy/MM/DD');

2.동일한 유형의 변수에 동일한 어휘를 사용해야합니다.

함수

함수 인자는 2개 이하가 이상적입니다.
함수를 잘짜는것이 항상 중요합니다.
인자가 많으면 호출할때 기억이 안난다.
{title, body, buttonText, cancelable}하나의 객체처럼 만들어서 사용하자

함수는 하나의 행동만 해야합니다.

함수가 1개 이상의 행동을 하면 작석하는 것도, 테스트하는 것도, 이해하는 것도 어려워집니다.
하나의 함수에 하나의 행동을 정의하는 것이 가능해진다면 함수는 좀더 고치기 쉬워지고 코드들은 읽기 쉬워질 것입니다.

함수는 단일 행동을 추상화 해야합니다.

추상화된 이름이 여러 의미를 내포하고 있다면 그 함수는 너무 많은 일을 하게끔 설계된 것입니다.
함수를 나누어서....

매개변수로 플래그를 사용하지 마세요

플래그를 사용하는 것 자체가 그 함수가 한가지 이상의 역할을 하고 있다는 것을 뜻한다.
boolean 기반으로 함수가 실행되는 코드가 나뉜다면 함수를 분리해야합니다.
(플래그 : isActive isNew 여부를 확인하는 변수)

전역함수를 사용하지 마세요

전역 환경을 사용하는 것은 javascript에서 나쁜관행입니다.
그 이유는 다른 라이브러리들과의 충돌이 일어날 수 있고, 당신의 API를 쓰는 유저들은 운영환경에서 예외가 발생하기 전까지는 문제를 인지하지 못할 것이기 때문입니다.

Array.prototype.diff = function diff(comparisionArray) {
const hash = new Set(comparisinArray);
return this.filter(elem => !hash.has(elem));
};
여러 라이브러리에서 이런 패턴을 사용한곳이 많다
그래서 덮어씌어져서 쓰지못한다.
프로토타입을 사용하지말고 직접만들어서 사용해야한다.

주석

주석없이 코드로 설명하는 것이 가장 좋은 것이다.
주석 XX
clone 한뒤에 깃을 끊고 이해한 것 마다 주석을 달자
folk를 받아서 공부하자

결론

클린코드를 위해 지금 코드를 다 뒤짚을 수 없다!!
항상 코드를 지속적으로 다듬어야 한다!
리팩토링은 매일 보일때마다 해야 한다!
리팩토링은 task가 아니다!

---

React로 사고하기

참고하기 : 링크텍스트

컴포넌트를 언제 분리해야 하는가?
우리가 새로운 함수나 객체를 만들 때처럼 만드면 됩니다.
한가지 테크닉은 단일 책임 원칙입니다.
이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙입니다.
하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리해야 합니다
분리할 수 있다면 더 작은 컴포넌트로 분리해야 한다.

state

정적 버전을 만들기 위해 state를 사용하지 마세요.
state는 오직 상호작용을 위해 시간이 지남에 따라 데이터가 바뀌는 것에 사용합니다.

---

컴포넌트 내 변수 위치

// 1. import 순서도 경로(or연관)에 따라 묶어주자
// ex) 멀리 있는 것 부터 차례대로
import도 술술 읽힐 수 있도록 해야 한다.
이 파일에서는 어떤 것들이 필요하구나 알 수 있도록
가독성을 위해 import 분류별로 한줄 띄어도 괜찮다!.
import는 누구는 엔터를 써서 구분하고
style-components는 위에쓰거나 아래쓰거나 이것도 맞춰야 한다!

1. node modules 먼저
2. utils 같은 함수
3. 멀리 있는 컴포넌트
4. 근처에 있는 컴포넌트
5. style 관련한 것들

// 2. propType
ts를 있으면 좋다!
1. 타입오류를 막아주는 것도 있지만,
2. propType만 보고 컴포넌트 내에서 어떤 형식의 값을 관리하고 있는지도 알기 좋다.
(그렇지 않으면 코드를 하나하나 다 읽어야 해서)

// 3. 컴포넌트 정의
리액트는 컴포넌트 중심. 상단에 상수 설정이나 styled component 가 정의 되어있다면, 이 컴포넌트가 뭐하는지 바로 알기 어렵다. 컴포넌트부터 정의하여, 이 컴포넌트가 무슨 역할을 하는지 한 번에 알아볼 수 있도록 하자.

// 4. Styled Component
그리고 styled component 썼다면, 컴포넌트 다음에 정의

// 5. 간단한 상수 설정
간단한 상수 설정, 간단한 data 등.. 혹시 data가 객체에 너무 길면 외부 파일로 분리하자

// 6. 해당 컴포넌트에서만 사용할 함수
6. 공통으로 사용하는 utils 성 함수는 아닌 경우, 로직인 경우 밖으로 빼자.

-------> 가독성을 위해서!!!!

---

조건부 렌더링은 패턴이 아니라 가독성을 높이기 위한 팁이다.

삼항 연산자는 만능이 아니다

삼항연산자 중첩은 파악이 힘들다.

• 삼항 연산자 중첩은 파악이 힘들다.
• 삼항 연산자는 요소 길이가 길어질 때가 많아서 흐름을 놓친다. &&도 되지 않을까 한번 더 생각하기

{userData.length > 0 &&

어떻게 가독성을 높일까

삼항 연산자는 요소길이가 길어질 때가 많아서 흐름을 놓친다.
&&도 되지 않을까 한번더 생각하기

1. 담대하게 기존코드 수정하기
2. 큰그림 보는 연습하기
• 기능 추가 자체는 클린해도
3. 팀과 함께 공감대 형성하기
4. 문서로 적어보기
• 향후 어떤점에서 위험할 수 있는지
• 어떻게 개선할 수 있는지