# 2024. 08.
# 08. 27.
# 실무에서 바로 쓰는 Frontend Clean Code
좋은 코드 != 짧은 코드 로직을 찾기 좋은 코드이며 읽기만해도 이해가 가야하며 유지보수하기 좋아야한다.
- 코드 응집도
- 같은 역할을 하는 코드는 최대한 묶어두자
- 최대한 묶 되, 더러운 코드는 한 곳에 라는 느낌 보다는 노출할 부분은 노출하자
- 단일책임
- 하나의 함수는 하나의 역할
- 추상화
- 상황에 따라서 추상화 정도를 정하자
- 하나의 파일 내에 추상화 레벨을 맞춰야 흐름 파악이 쉽다
TIP
JSX 문법으로 로직을 선언적으로 구현할 수 있다. 13:17 (opens new window)
# 08. 29.
# Effective Component 지속 가능한 성장과 컴포넌트
변경에 유연하게 대응하는 컴포넌트는 다음과 같이
- Headless 기반으로 추상화가 잘 일어나야함
- 한가지 역할만 하기
- 도메인을 포함하는 컴포넌트와 아닌 컴포넌트 분리
# 08. 30.
# CSS will-change는 브라우저 내부적으로 어떤 과정이 진행되는가?
.component {
will-change: transform;
}
라 가정할 때
- transform을 실제로 사용하기 전에 해당 요소를 별도의 레이어로 승격시킨다. 레이어가 생성될 때의 지연시간을 줄일 수 있다.
- 변형이 예상되는 요소에 대해 GPU 메모리를 미리 할당한다.
- 브라우저는 해당 요소에 대한 애니메이션을 예상하고, 프레임 계산 등을 최적화할 수 있다.
# 08. 31.
# react 재조정 과정에서 컴포넌트를 업데이트 대상으로 정하는 기준
- props의 변경 (얕은 비교를 통해 감지)
- 내부 state 변경
- 부모 컴포넌트의 리렌더링
- 부모 컴포넌트가 리렌더링 되면 모든 자식 컴포넌트가 리렌더링 대상이 된다
- key 변경
- hooks 의존성 변경
등이 있다.