KHCDS 성공 기원 1일차

24/07/15 - 이든/ 켄트 벡의 tidy first? + 리액트 컴파일러 이해하기

Tidy First?

1. 코드 정리법

0. 코드 정리와 동작 변경에 대한 commit은 분리

1. 보호 구문

if(조건1){
	if(조건1){
		...code...
	}
}

=>

if(!조건1) return
if(!조건2) return

...code...

하지만 남용하지 말 것

2. 안 쓰는 코드

지우자! 필요하다면 git에서 가져오자!

3. 대칭으로 맞추기

코드에 일관성을 유지하자! 한가지 패턴을 정해서 사용하자

4. 새로운 인터페이스로 기존 루틴 부르기 (?)

기존 인터페이스때문에 복잡하거나 혼란스러워지면 인터페이스를 새롭게 구현한다

기존 인터페이스를 호출하는 곳 ⇒ 새로운 인터페이스 호출로 변경

비슷한 예시

• 거꾸로 코딩하기 : 루틴의 마지막 줄부터 시작 → 필요한 것들을 만들어가기
• 테스트 우선 코딩 : 테스트 먼저 짜고 시작 → 테스트에 맞게 코딩
• 도우미 설계 : 필요한 루틴이 있다고 가정하고 시작 → 필요한 루틴 만들기

5. 읽는 순서(?)

내 코드를 읽을 독자의 입장이 되어 코드내용을 만났을 때를 가정하자.

읽기 좋은 순서로 정렬하자(큰 그림을 파악하기 좋은 순서로 정렬하자?)

6. 응집도를 높이는 배치

변경해야 할 동작이 여러 곳에 흩어져 있으면 불편하고 가독성 떨어진다

• 코드의 순서를 바꿔 변경할 요소를 가까이 둔다 (toss- clean code 내용에서도 나옴)
• 두 루틴이 결합도가 있다면 서로 옆에 둔다
• 결합도가 있는 파일들을 같은 디렉토리에 둔다
• 결합도가 있는 코드를 같은 코드 저장소에 넣은 후 변경한다
• 결합도를 제거할 수 있다면 그게 베스트다

7. 선언과 초기화를 함께 옮기기

선언과 초기화는 함께!

8. 설명하는 변수

표현식은 점점 커진다.(가독성 저하)

복잡한 코드의 표현식을 이해했다면 의도가 들어나가 변수 이름을 지어 할당하자

9. 설명하는 상수

리터럴 상수는 지향하고 상징적인 상수로 변경한다

함께 이해해야하는 상수는 한 곳에 모아두고,

다른 이유로 묶인 변수들은 분리한다

⇒ 결합도와 응집도 상승

10. 명시적인 매개변수

일부 데이터가 명시적으로 전달되고 있지 않다면? ⇒ 따로 빼서 명시적으로 만들고 매개변수로 전달한다

const params = {a:1, b:2}
foo(params)

function foo(params){
	...params.a...
	...params.b...
}

=>

const params = {a:1, b:2}
foo(params)

function foo(params){
	foo_body(params.a, params.b)
}

function foo_body(a,b){
	...a...
	...b...
}

=> 근데 구조분해 할당으로 사용하면 되지 않나?
const params = {a:1, b:2}
foo(params)

function foo({a,b}){
	...a...
	...b...
}

11. 비슷한 코드끼리

긴 코드를 읽으며 구분이 될 때 빈 줄을 넣어 분리하자

관련있는 코드를 뭉쳐두자(6번과 비슷한 결)

12. 도우미 추출

코드 중 목적이 분명하고 나머지 코드와 상호작용이 적은 코드 블록을 만나면

도우미로 추출 후 작동 방식이 아닌 존재목적에 따라 네이밍한다 (함수형 프로그래밍의 계산과 동일해보임)

‘메서드 추출’ 이라는 리펙터링 개념과 일치함

13. 하나의 더미

1. 필요한 만큼의 코드를 하나의 더미로 느껴질 때까지 흩어진 코드를 모은다.
2. 이해하기 어려운 부분을 추출해서 새롭게 정리한다.
   • 길고 반복되는 인자 목록
   • 반복되는 코드, 반복되는 조건문
   • 도우미에 대한 부적절한 이름
   • 공유되어 변경에 노출된 데이터 구조

14. 설명하는 주석

복잡한 코드, 완성되기 전 코드, 결함 있는 코드에는 주석 달기

(다음에 읽을 사람이 이해하는 시간 절약)

15. 불필요한 주석 지우기

코드가 클린 해 졌을 때, 주석이 있는 코드를 수정 했을 때, 주석내용이 변경 되었을 때 주석 제거

3줄 요약

습관적으로 하고 있던 것들을 정리한 듯한 내용

코드를 만들때 가장 큰 비용은 작성할때가 아니라 코드를 이해할 때임(ㅇㅈ)

코드 정리를 선행하면 더 작은 조각 단위로 결합을 제거하는 길을 제시하여 응집도를 높일 수 있다

⇒ 한번에 기억해야 하는 코드 상세 내용이 줄어든다

2. 관리

코드 정리를 하는 PR을 어떤 단위로 나눠야하는지, 동작 변경 / 구조 변경을 구분해야하고 어느정도 규모로 나눌지에 대한 이야기

⇒ 팀바팀, 팀끼리 이야기 나누고 정해라

코드 정리를 할 시점 요약

코드 정리를 하지 말 상황

• 앞으로 다시는 코드를 변경하지 않을 때
• 설계를 개선하더라도 배울 것이 없을 때

코드 정리를 미룰 상황

• 정리할 코드 분량은 많은데 보상이 바로 보이지 않을 때
• 코드 정리에 대한 보상이 잠재적일 때
• 작은 묶음으로 여러 번 나눠서 코드 정리를 할 수 있을 때

동작 변경 후 코드 정리 할 상황

• 다음 코드 정리까지 기다릴수록 비용이 불어날 때
• 코드 정리 하지 않으면 일을 끝냈다는 느낌이 들지 않을 때

코드 정리 후 동작 변경을 할 상황

• 코드 정리를 했을 때, 코드 이해가 쉬워지거나 동작 변경이 쉬워지는 즉각적인 효과를 얻을 수 있을 때
• 어떤 코드를 어떻게 정리해야 하는지 알고 있을 때

3. 이론

소프트웨어 설계의 의미 ⇒ ‘요소들을 유익하게 관계 맺는 일’

요소

프로그래밍 세계에서는 토큰 → 식 → 문 → 함수 → 객체/모듈 → 시스템

관계 맺기

프로그래밍 세계에서 관계는 호출, 발행, 대기, 참조 가 있음

정리

코드 정리는 미래의 옵션을 위한 것이다.

‘오늘의 1달러가 내일의 1달러 보다 더 가치있다’

(= 지금 돈을 벌지 못하면 미래에 옵션을 행사할 여력이 없을 수 있다)

<=>

‘혼란스러운 상황에서는 어떤 물건에 대한 옵션이 물건 자체보다 낫기 때문에 불확실성에 맞서는 옵션을 만든다’

(= 지금 돈을 벌려면 미래의 옵션이 줄어들 수 있다)

이 두가지의 줄타기를 잘 해야 한다

당장 돈을 벌고 나중에 코드 정리를 해야한다

코드 정리는 옵션(= 기회비용)을 만드는 행위다

설계는 대일의 동작 변경을 ‘구매’하는 ‘옵션’에 대해 지불하는 프리미엄이다

결합도 제거

// 하나 더 보내야 한다면 send, redeive 모두 수정해야함
const send = () => {
	writeField1()
	writeField2()
}

const receive = () => {
	readField1()
	readField2()
}

=>
// 하나 더 보내야 한다면 format 만 수정하면 됨
const format = [
	{field: '1', type: 'integer'},
	{field: '2', type: 'string'}
]

const send = () => {
	writeField(format)
}

const receive = () => {
	readField(format)
}

결합도가 완전히 사라진게 아니다 ⇒ 여전히 결합도가 있지만 한 곳의 수정으로 해결 할 수 있다

변경전에는

한 종류의 코드 변경에 결합도를 줄일수록 다른 종류의 코드 변경에 대한 결합도가 커진다

⇒ 결국 절충점을 찾아야 한다

리액트 컴파일러 이해하기

리액트 핵심 아키텍처

1. 사용자가 제공한 함수(즉, 컴포넌트)를 반복해서 호출한다
2. 모든 객체는 파이버(Fiber) 트리를 만든다 ⇒ 이를 가상 DOM이라고 한다
3. 파이버 트리의 노드에는 현재상태, 진행 중 상태 두개의 분기가 있다 ⇒ 두개 분기를 비교해서 실제 DOM에 필요한 변경사항을 재조정(reconciliation)한다

메이모제이션

1. memo가 작동하려면 ‘순수 함수’여야 한다

훅 저장소

1. 리액트의 상태는 클라이언트 디바이스에 메모리에 저장하는 객체다
2. 컴포넌트에 사용된 상태는 linked list 형태로 연결되어 파이버 트리에 저장된다.
   1. 상태관리의 핵심 단위는 useState가 아니라 useReducer다..? (useState는 useReducser를 랩핑한 함수이다)

리액트 메모이제이션

useMemo는 메모이제이션과 훅 저장소를 결합한 것이다

리액트 컴파일러는 컴파일을 통해 캐싱과 추상 구문 트리(Abstract Syntax Trees, AST) 를 만든다

---

번역 : https://emewjin.github.io/understanding-react-compiler/?utm_source=substack&utm_medium=email

원글 : https://tonyalicea.dev/blog/understanding-react-compiler/

참고 글

번역글1 : https://velog.io/@eunbinn/react-compiler?utm_source=substack&utm_medium=email

번역글2 : https://junghan92.medium.com/오늘-리액트-컴파일러를-사용해-봤는데-어땠을-것-같나요-ece57f076b02