[카카오프로젝트100] 기술아티클 10일차

[카카오프로젝트100] 기술아티클 10일차

카카오프로젝트100 - 하루에 한 개, 기술 아티클 읽기에 참여하며 인증한 글들을 10일차씩 끊어서 블로깅합니다.

1일차: React 컴포넌트를 커스텀 훅으로 제공하기 - LINE Engineering

요약

• 일반적으로 체크박스가 있는 리스트를 구현한다면 컴포넌트를 분리하더라도 그에 대한 상태값은 props로 계속 전달되는 불편함이 있습니다.
• 커스텀 훅을 사용하게 되면 ‘컴포넌트 로직 자체를 분할하거나 재사용’할 수 있기 때문에 상태값을 관리할 때 더 간단하게 처리할 수 있게 됩니다.

느낀점

• 재사용 컴포넌트를 만들 때도 custom hook을 사용하면 로직을 더 분리해서 사용할 수 있을 것 같습니다. 컴포넌트를 분리할 때 불편함을 느꼈던 지점이었는데 이런 아티클을 볼 수 있어서 좋았고 앞으로 활용할 부분이 많을 것 같네요!

2일차: React v17 Release Candidate 톺아보기

요약

• 늘어난 선택지: Gradual Upgrades: 한 페이지 안에 두 개의 리액트 버전을 사용해도 됩니다. (이로 생겼던 버그가 이벤트 위임 관련 업데이트가 이루어지면서 고쳐졌습니다)
• 이벤트 위임 변경: Changes to Event Delegation: 아래와 같은 경우에 더 안전하게 사용할 수 있습니다.

1. 한 HTML 에서 여러개의 React가 상존하며 dom 을 생성하는 경우
2. 다른 기술로 빌드 된 앱 일부에 React 를 새롭게 적용하는 경우

• 브라우저 최적화: Aligning with Browsers
• 이벤트 풀링 최적화 제거: No Event Pooling
• useEffect 사용 시 컴포넌트가 언마운트 되면 화면이 업데이트 된 후 cleanup 이 실행 되도록 변경
• 동기적 실행의 경우 useLayoutEffect 사용 가능
• 잠재적 문제와 해결법: 캡쳐링 => useEffect cleanup 변경에 따라 캡처링하여 null이 들어가지 않도록 변경해야 합니다.
• Returning Undefined 에 대한 일관된 에러
• 브라우저 에러 메시지 개선: Native Component Stacks

느낀점

• 메이저 업데이트지만 큰 틀의 변경은 없는 것 같습니다..! useEffect의 변화에 관련해서는 직접 사용해 봐야겠다는 생각이 드네요~

3일차: CORS A to Y

요약

1. CORS 는 무엇인지
   • 현재 오리진에서 다른 오리진의 리소스에 접근할 수 있도록 브라우저에 알려주는 것입니다.
2. CORS 가 브라우저에서 확인되는 방법

• 요청과 응답 헤더의 오리진이 같은지 확인합니다. 다르면 에러가 발생합니다.

3. CORS 요청이 가는 방법의 종류

• 헤더 종류에 따라 요청: Simple request와 Preflighted Request
• 쿠키 값이 있을 때 요청: Credential

4. 실제 프로덕션에서의 CORS - cors 라이브러리로 상황에 맞게 헤더 설정되게 진행합니다.
5. Chrome SameSite Policy - samesite 권한을 적절하게 주어야 합니다.

느낀점

• CORS 에 관련해서는 에러 발생시 해결법 위주로 알고 있었는데, CORS 요청의 종류가 다양해서 에러 문구도 다 달랏던 이유를 더 정확히 알게 되었네요!

4일차: 1px 보다 얇은 디자인 - 라인 편

요약

• 브라우저 환경에서 1px보다 작은 디자인은 현재 불가능합니다. 이유는 1인치에 물리적으로 표현 가능한 픽셀 수인 픽셀 밀도 때문입니다. 픽셀 밀도는 PPI = 인치 당 픽셀 수로 측정하는데, 브라우저는 보통 1PPI로 되어 있습니다.
• 해결법은 아래와 같이 5가지입니다.

1. scale: CSS의 transform 속성 중 scale을 1보다 작게 하여 1px보다 작은 크기가 표현 가능합니다.
2. opacity: 일종의 착시 현상으로 불투명도를 높이면 얇게 느껴지게 됩니다.
3. Linear Gradients: 그래디언트를 투명한 색과 구분되는 색으로 나누어 얇게 표시되도록 합니다.
4. Box Shadow: 그림자의 위치, 색상 등을 조정하여 얇은 선으로 표시되게 합니다.
5. Border Image: 얇은 선을 이미지로 하여 border-image 속성으로 넣습니다.

• 해결법은 공통적으로 의미를 가지지 않으므로 가상 요소인 ::before나 ::after에 사용할 것을 권유하고 있습니다.

느낀점

• 저는 주로 opacity나 linear Gradient를 사용해서 얇은 선을 표현했었는데 이렇게 다양한 방법과 왜 이런 방법을 써야 하는지를 다시 알 수 있었습니다!

5일차: useRef()가 순수 자바스크립트 객체라는 의미를 곱씹어보기

요약

• 리액트에서 useRef는 보통 DOM 노드나 React 엘리먼트에 접근하기 위한 방법으로 알려져 왔습니다.

• 그런데 react-redux에서 useSelector에서 useRef가 쓰이는 것을 볼 수 있었습니다. 왜 그럴까요?

• 공식 문서에 따르면 useRef는 어떤 값이든 저장할 수 있는 일반적인 자바스크립트 객체라고 합니다.

• useRef가 함수형 컴포넌트에서 가지는 장점을 설명하고 있습니다.

  useRef 를 통해 선언된 변수는 리렌더링을 유발하지도 않고, 리렌더링될 때도 이전의 값을 기억하고 있으며, 컴포넌트마다 각각의 값을 가질 수 있습니다.

느낀점

• useRef의 개념과 쓰임에 대해 명확히 이해하기 어려웠었는데 이 글을 보고 이해에 도움이 많이 됐습니다!
• useState와 함께 상황에 따라 많이 쓰일 수 있을 것 같네요 🙂

6일차: React Redux vs Context API

요약

• Redux, Context API 모두 상태의 중앙 관리를 위한 상태 관리 도구, 전역 상태를 관리하는 데에 쓰입니다.
• Redux는 리액트 외에 다른 프레임워크에도 쓰일 수 있는 라이브러리지만 Context API는 리액트 내장 기능으로 리액트에서만 쓰입니다.

아래는 결론입니다.

• 오직 전역 상태 관리를 위한다면 Context API를 사용하라.
• 상태 관리 외에 여러 기능이 필요하다면 Redux 를 사용하라.
• high-frequency한 어플리케이션의 경우 Context API를 사용하면 성능상 이슈가 있을 수 있다.

느낀점

• Redux와 context API의 차이점이 와닿지 않아 찾아봤습니다. 전역 상태관리 외에 디버깅이나 로컬스토리지 상태 저장 등 다른 기능과 redux thunk, saga 등 부수적인 비동기 처리를 하기 위해서는 Redux를 사용하는 게 이점이 클 것 같네요!

7일차: TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

요약

• Tree Shaking은 사용하지 않는 코드를 삭제하는 것을 말합니다. 사용하지 않는 번들을 삭제해 번들 크기를 줄이고 로딩 시간을 단축시키는 것입니다.
• enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능입니다.
• 하지만 TS에서 enum을 사용하면 Tree Shaking이 되지 않습니다. 그 이유는 enum 코드를 트랜스파일했을 때 IIFE(즉시실행함수)로 실행되어 번들러에서는 사용하지 않는 코드라고 판단할 수 없기 때문입니다.
• 대체제는 Union Type입니다. 타입 정의 이점과 IIFE 미생성으로 Tree Shaking을 진행할 수 있습니다.

느낀점

• 타입스크립트를 볼 때에도 트랜스파일링되고 번들링되는 상황을 인지하면서 사용해야겠다는 생각이 드네요~!

8일차: [JS] 자바스크립트의 The Execution Context (실행 컨텍스트) 와 Hoisting (호이스팅)

요약
📎 Execution Context

• Types of Exection Context
  📎 Execution Stack (호출 스택)과 함수 실행 순서
• Execution Context in Detail
  (1) Creation Phase
  (2) Execution Phase

느낀점

• 호이스팅이 일어나는 이유가 무엇인지 모르겠어서 찾아보다가 도움이 많이 된 자료입니다!
• 간단히 말하면 var는 실행되기 전 선언 부분이 실행 컨텍스트에 스캔되서 undefined가 할당되고, let, const는 실행 컨텍스트에 할당되기 전에 에러를 내게 되는 것 같습니다.
• 사실 봐도 봐도 잘 이해가 가지 않아 지속적으로 공부해야겠다는 생각이 드네요 😥

9일차: jbee님의 이직기록

저는 요즘 주니어 개발자가 되기 위해 구직활동을 하고 있는데 jbee님의 블로그를 보다가 공감할 부분과 면접 전에 봤으면 좋았을 내용들이 많아 공유합니다! 저도 이런 기록을 해야겠다는 생각도 하구요 ㅎㅎ

10일차: 리액트 useEffect: 개발자가 알아야 할 네가지 팁

요약

• 하나의 useEffect는 하나의 목적을 위해 사용되어야 합니다.
• 가능하다면 커스텀 훅을 사용합니다.
• 조건이 있다면 early return을 사용해 의도치 않은 useEffect의 실행을 제한합니다.
• useEffect 안에서 사용하는 모든 변수들을 디펜던시 배열에 추가합니다.

느낀점

• useEffect는 React를 사용하면서 빼놓을 수 없는 훅인데, 제가 잘못 사용하던 부분이 많다는 것을 알게 되었습니다!
• early return같은 경우에는 모든 로직에서 필요한 부분인 것 같네요 :)

10일차 회고

• 매일 오후 10시에 아티클을 찾고 정리하는 것을 목표로 했습니다. 따로 재미있게 보았던 아티클은 올리는 것이 쉬웠지만 그렇지 않은 날에는 알맞은 아티클 찾는게 힘들기도 했습니다 😔
• 100일이 끝나도 습관이 되도록 좋은 글을 발견하면 메모장을 사용해야겠습니다!