WIL - 실전 프로젝트 3주차

1. 중간 발표회 피드백

1. 메모이제이션이 사용된 곳이 LikeCount 외에는 하나도 없습니다. 메모이제이션이 무엇이고 왜 해야 할까요?
   • 메모이제이션은 결과를 저장하고, 저장한 것들을 다음 작업에서 재사용하는 것
   • 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거
   • ⇒ 무거운 작업의 속도를 높이는 기술이다
   • 사용 이유
     • 리액트는 props와 state의 변화에 따라 컴포넌트를 리렌더링을 시키는데, 이 때 값이 바뀌지 않은 state들도 부모의 state가 변화하게 되면 모두 다 리렌더링이 일어나 불필요한 계산이 필요한데, 이를 메모이제이션으로 state와 props의 변경을 최소화 해 불필요한 하위 컴포넌트의 리렌더링을 최소화 하여 작업을 최적화해 속도를 높여야 하기 때문
2. 프론트엔드 성능 최적화를 위해서 개발자 도구의 프로파일링 등을 사용해본 경험이 있나요? 이걸 사용하면 뭘 알 수 있고 어떤걸 개선할 수 있나요?
   • 웹의 성능을 파악할 수 있습니다. 실행 시간, 메모리 사용량, 렌더링 성능 등 관련된 세부 정보를 확인할 수 있습니다. 이러한 것을 토대로 성능에 영향을 미치는 메모리 문제를 찾을 수 있는데, 메모리 누수, 메모리 팽창 등의 정보를 찾아 성능 문제를 개선할 수 있습니다.
3. styled-component를 선택한 이유가 있나요? 장단점을 말해보세요. 스타일링에 CSS, SCSS, CSS Module, CSS in JS, CSS in TS를 알고 있고 설명 할 수 있나요?
   • 스타일드 컴포넌트
     • 장점
       • SCSS라이브러리 설치 없이 SCSS 문법을 사용할 수 있음
       • 자유로운 CSS 커스텀 컴포넌트를 만들 수 있음 → 컴포넌트의 의존성이 낮음
       • 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩할 수 있음
       • 자바스크립트로 처리하기 때문에 상태 처리 하는 css 역할로 매우 우수
     • 단점
       • 빠른 페이지 로드에 불리함
       • 작성할 때 css를 줄 태그는 다 컴포넌트로 만들어야하는 번거로움과 가독성이 떨어짐
       • css 수정할 때마다 해당하는 컴포넌트 파일 위치를 찾아야 한다는 번거로움 존재
   CSS
   • 장점
     • 브라우저 호환성이 높습니다.
     • 쉽게 배울 수 있고 사용하기 편리합니다.
   • 단점
     • 글로벌 스코프(global scope)를 가지므로, 이름 충돌이 발생할 수 있습니다.
     • 코드 재사용이 제한적입니다.
   SCSS
   • 장점
     • 변수, 믹스인, 중첩 등의 기능으로 코드 재사용성이 높아집니다.
     • 조직화 된 구조를 가지므로 유지 보수성이 좋습니다.
   • 단점
     • CSS와 호환성이 없으므로, Sass 컴파일러가 필요합니다.
     • 추가적인 언어를 배워야 합니다.
   CSS module
   • css 클래스 이름을 고유한 값으로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩되지 않게 할 수 있다
   • 클래스 명이 충돌되지 않고, 컴포넌트 단위로 스타일을 적용할 때 유용
   • 컴포넌트별로 스타일을 관리할 수 있습니다.
   • 단점
     • 프로젝트 소스 안에 css 클래스 이름이 중복 되어도 새로운 이름이 입혀져 중복 및 관리의 위험성이 적고 css 네이밍 규칙이 간소화되지만 한 곳에서 모든 것을 작성하지 않기 때문에 별도로 많은 css 파일을 만들어 관리해야 하는 단점 존재
     • 설정이 복잡할 수 있습니다.
     • 글로벌 스타일을 적용하기 어려울 수 있습니다.
   CSS in JS
   • 장점
     • 자바스크립트 코드에서 CSS를 작성하는 방식
     • js 환경을 최대한 활용하여 js와 css 사이의 상수와 함수를 공유
     • 동적 스타일링이 용이합니다.
     • 컴포넌트 기반으로 스타일을 적용할 수 있습니다.
   • 단점
     • 런타임에 추가적인 비용이 발생할 수 있습니다.
     • JavaScript에 CSS를 작성해야 하므로, 분리가 되어있지 않습니다
4. CSS의 확장으로, 변수, 중첩, 믹스인(mixin), 상속 등과 같은 기능을 제공합니다
5. 웹 페이지의 스타일을 정의하기 위한 언어입니다. HTML과 분리되어 구조와 스타일을 분리함으로써 유지 보수성과 가독성을 높입니다.

맨토님 피드백

• 저도 스타일드 컴포넌트를 사용하지만 요즘은 성능 혹은 렌더링 이슈로 다른 대안책도 많이 나와있습니다. 앞으로 면접을 보시거나 실무로 나가실 때 면접에 대한 준비를 하시거나 다른 프로젝트를 진행할 때 신경을 써보시면 좋을 것 같습니다. 요즘 CSS in JS가 오버 헤드 같은 것들이 많이 발생해 자주 사용을 안 하는 편이기도 해서 찾아보면 좋을 것 같습니다.