2023년 5월 첫째주 주간 회고

1. 유지보수하기 좋은 CSS 습관

요소A 내부에 다른 요소들이 포함된다면 (혹은 포함 될 예정이라면) 정적인 Width 나 Height 대신 Padding 값을 활용하여 높이와 넓이를 설정하기
- 추후에 다른 요소가 추가 된다면 정적인 Width 나 Height는 변경되어야 한다.
- 이 변경을 최소화 하기 위해서는 정적인 숫자로 높이와 넓이를 정하는게 아니라 상대적으로 높이와 넓이를 늘려주거나 줄여줄 수 있는 Padding으로 높이와 넓이를 정하자.
position:absolute 은 피치못할 때에만 이용하기
- 해당 요소를 사용하여 CSS를 조작 할 경우 추후에 해당 요소 내 또 다른 엘리먼트가 추가 되면 또 다시 position:absolute를 사용하여 포지셔닝을 해주어야 한다.
- 이는 당연히 CSS 코드만 읽었을 때 직관적으로 이해하기 어렵다. 따라서 최대한 부모 엘리먼트를 추가+활용하여 포지셔닝을 하는 편이 추후에 유지보수에 용이하다.
매직넘버는 위험하다.
- 우린 자바스크립트에서 매직넘버를 방치하지 않는다. 그런데 CSS에선 그래도 된다고 생각하곤 한다. 😩

.element1 > .element2 {
  position: absolute;
  top: 10px;
  left: 0;
}

위와 같은 예시를 살펴보자. 저 top:10px은 아마 부모 요소인 element1의 height에 의존적일 것이다.
그런데 저 10px은 부모 요소가 특정 height를 유지할 때에만 작동하는 숫자이다.
만약 새로운 요구사항이 element2나 element1의 Padding 값이나 Font 바꿔야한다면 ? 개발자는 element2의 top 값을 모두 변경해야한다는걸 인지하고 있어야한다.
따라서 top:100% 와 같이 정의한다면, 추후에 부모요소가 갱신되어도 자식요소의 해당 스타일 값을 변경 할 필요가 없으니 훨씬 유지보수에 용이하다.
결론 : 매직넘버는 위험하고 유지보수 할 때 도움이 되지 않는다. 그리고 CSS는 마땅한 디버깅 툴이 없기 때문에, 다른 개발자가 이 CSS 파일을 이어받아서 작업 할 때 쉽게 건들이지 못하는 레거시가 된다.

Client-Side Navigation - Navigate Between Pages | Learn Next.js

Next.js의 Link컴포넌트를 활용하면 자동으로 Client-Side-Navigation이 적용된다.
페이지 전환이 브라우저에 의해서가 아니라, 자바스크립트에 의해서 일어나는 것.

Next.js는 기본적으로 코드스플릿팅을 제공한다.

각각의 페이지가 필요한 시점에서만 로드된다.
즉, 홈페이지가 렌더되었을 때, 다른 페이지를 위한 코드들은 served 되지 않는다는 것

프로덕션 빌드 환경에서는 어떻게 처리하는가?

Next.js는 Link 컴포넌트가 브라우저 뷰포트내에 노출 되면, 백그라운드에서 자동으로 Link 컴포넌트와 연결된 페이지를 prefetch 한다.
따라서 사용자가 해당 Link를 클릭 하는 시점에 해당 페이지에 대한 코드는 이미 백그라운드에 로드 된 상태이다.

2. 초기 로드 속도 최적화 - CSS 파일 조건부 로딩하기

출처 - Conditionally adaptive CSS. Browser behavior that might improve your performance — Vadim Makeev

CSS파일을 가져오는 link 태그의 media 프로퍼티를 사용하여 CSS 파일을 조건부 로딩 할 수 있다.
즉 media 프로퍼티에 일치하는 경우만 해당 로딩 할 수 있다.

예를들어 기본 CSS 파일이 있고, 모바일/태블릿/데스크탑 뷰포트에 따른 CSS파일을 분할 할 수 있다면 아래와 같이 적용 할 수 있다.

<link
	rel="stylesheet" href="base.css"
>
<link
	rel="stylesheet" href="mobile.css"
	media="(max-width: 767px)"
>
<link
	rel="stylesheet" href="tablet.css"
	media="(min-width: 768px) and (max-width: 1023px)"
>
<link
	rel="stylesheet" href="desktop.css"
	media="(min-width: 1024px)"
>

그러면 mobile 뷰포트일 때는 base.css와 mobile.css 만 요청할까?

대답은 No 이다.

모든 파일을 요청하되, 다만 요청의 우선순위가 달라진다.
현재 브라우저의 조건과 media 어트리뷰트가 일치하는 경우, 해당 파일은 가장 높은 우선순위로 요청된다.
반대로 현재 브라우저의 조건과 media 어트리뷰트가 일치하지 않는 경우, 해당 파일은 가장 낮은 우선순위로 요청된다.

3. 컴퓨터 시스템 설계를 위한 힌트

출처 - Hints for Computer System Design By Butler W. Lampson - 기계인간 John Grib

시스템 설계에 관한 아주 좋은 논문을 번역해주셔서 읽게 되었다. 개발 할 때에도, 구조를 설계 할 때에도 읽어보면 정말 좋은 글일 것 같다. 그 중에서도 ‘기능(Functionality)에 해당하는 파트만 간략히 요약해보자면 아래와 같다.

1. Keep it Simple

완벽함은 더 이상 더할 것이 없을 때가 아니라, 더 이상 뺄 것이 없을 때 이루어진다.
한번에 한 가지만 잘 할것. 인터페이스는 추상화에 있어 최소한의 필수 요소만 포착해야 한다. 일반화 하지 말 것. 일반화는 일반적으로 잘못된 선택이다.
인터페이스가 너무 많은 작업을 커버하게 하려고 하면, 구현이 크고 느리고 복잡해진다.

2. Corollaries

빠르게 돌아가도록 만들 것.
느리지만 강력한 연산을 제공하는 것 보다, 기본연산이 빠르게 실행되는 것이 더 좋다.

3. Don’t hide power

강력함이 있다면 숨기지 말 것.
낮은 수준의 추상화를 통해 무언가를 빠르게 처리 할 수 있다면, 높은 수준의 추상화는 이런 능력을 일반화해서 파묻어서는 안된다.
추상화의 목적은 바람직하지 않은 속성을 감추기 위한 것이지, 바람직한 속성을 숨기기 위한 것이 아니다.

4. Leave it to the client

제어를 주고 받는데 드는 비용이 저렴한 한, 인터페이스는 한 가지 문제만 해결하고 남머지는 클라이언트에게 맡김으로써 단순함, 유연성 및 고성능을 결합해낼 수 있다.

5. Continuity

기본 인터페이스를 안정적으로 유지 할 것.
인터페이스는 시스템의 여러부분이 공유하는 가정을 전제로 한다. 따라서 인터페이스를 변경하지 않는 것이 적절하다.
인터페이스를 변경해야 한다면 기준점을 유지 할 것.

6. Making Implementations work

어차피 버린다고 생각하고, 하나를 버릴 계획을 세울 것.
- 시스템의 기능에 새로운 것이 있다면 만족할만한(적당히 작고 빠르며 유지보수 가능한) 결과를 덩기 위해 첫번째 구현을 완전히 다시 해야 할 수도 있다.
- 구현이 성공적이었다고 해도, 시스템이 발전함에 따라 이전 결정들을 재검토 하는 것이 유익하다.
구현을 비밀로 유지 할 것.
- ‘비밀’은 클라이언트 프로그램이 염두에 둬서는 안되는 구체적인 구현에 대한 가정이다.
- 시스템의 각 부분이 서로에 대해 가정하는 것이 적을수록, 시스템을 프로그래밍하고 수정하기 수월해진다.
- 하지만 이는 ‘강력함을 숨기지 않기’와 충돌 될 수 있다.
분할 정복 하기
- 어려운 문제를 쉬운 문제 여러개로 쪼개기.
좋은 아이디어는 일반화 하지 않고, 재사용하기
- 특정 상황에 맞춘 아이디어 구현이 일반화된 구현보다 훨씬 더 효율적일 수 있다.

5. Handling all the cases

일반적인 케이스와 최악의 케이스는 별도처리를 원칙으로 할 것.
- 두 경우의 경우 요구사항이 상당히 다르기 때문
- 일반적인 케이스는 빨라야 한다.
- 최악의 경우는 진전이 좀 있어야 한다.

4. 프롬프트 엔지니어링 배우기

딥러닝으로 유명한 앤드류 응 선생님의 프롬프트 엔지니어링 강의가 무료로 오픈되었다. 분량도 한 시간정도이고 하니 심심할 때 들으면 좋을듯 딥러닝 AI-프롬프트 엔지니어링

프롬프트 엔지니어링은 AI에게 적절한 프롬프트(입력)을 제공하여 AI의 성능과 효율성을 최적화 하기 위함이다.
즉, 한 마디로 말해 챗지피티에게 질문 잘하는 능력

‘프롬프트 엔지니어다!’라고 할 만큼 전문적으로 사용 할 필요는 없겠지만, 그래도 대부분의 개발자들은 ChatGPT를 사용하고 있고, 앞으로도 사용하게 될거니까 어느정도 배워두면 생산성 향상에 큰 도움이 될 것 같다.

1. 유지보수하기 좋은 CSS 습관
🥦 Next.js의 Link 컴포넌트는 Client-Side-Navigation을 한다.
- Next.js는 기본적으로 코드스플릿팅을 제공한다.
- 프로덕션 빌드 환경에서는 어떻게 처리하는가?
2. 초기 로드 속도 최적화 - CSS 파일 조건부 로딩하기
- 그러면 mobile 뷰포트일 때는 base.css와 mobile.css 만 요청할까?
3. 컴퓨터 시스템 설계를 위한 힌트
4. 프롬프트 엔지니어링 배우기