1. 검색이 잘 되는 사람
- 자기 PR이 중요한 시대에 특히 개발자에게 있어서는 나의 이력을 수시로 관리하고 내가 어떤 사람인지 공개하는 것이 중요하다.
- 꾸준히 공부한 내용을 기록하고, 기술에 대한 고민한 것을 정리해서 블로그에 올리는 것이 나를 PR하는 것에 도움이 된다.
2. 코드 리뷰
1) Email Validation
- 사실 이번 과제를 진행할 때, 정규 표현식을 RegExr 사이트에서 직접 짜서 만들긴 했지만 이메일의 유형이 어떤게 있는지 크게 고민하지 않고 만들다보니 많은 유형의 처리를 하기에는 부족했다.
- 이번 수업에서 W3C에서 표준으로 제공하고 있는 정규 표현식이 있어서 많은 참고가 되었다.
2) Map 함수의 Key 값에 대해
- Map 함수에 index 값으로 key 값을 사용하게 되면 한 컴포넌트에서 Map 함수를 여러 번 사용하게 될 때, index 값이 중복되어 React에서 구분할 수 없게 된다.
- 따라서 이런 상황을 미연에 방지하기 위해서는 key 값을
something-${index}와 같은 형식으로 작성해서 중복되는 일이 없도록 해야한다.
3) SVG 파일 사용법
- React에서 컴포넌트 형식으로 불러와서 사용하면 보다 더 다양한 스타일링을 구사해서 이미지 튜닝에 사용하기 좋다.
- 예시
// src/assets/svgs/index.tsx
export { ReactComponent as BellIcon } from './ic-bell.svg'위와 같이 export 시킨 후에
import { BellIcon } from 'svgs'이와 같이 import 해서 적용시킨다.
4) event에 대해
- event.target은 선택된 요소를 포함해서 그 하위의 요소까지 선택해서 가져오기 때문에 정확히 내가 원하고자 하는 요소를 선택하기 위해서는 event.currentTarget을 사용하는 것이 바람직하다.
5) pointer-events
- 여러 레이어가 겹쳐있을 때, 해당 요소의 기능을 정상적으로 수행하게 하고자 z-index를 건드리는 경우가 있는데 이 css 속성을 이용하면 보다 간편하게 해결할 수 있다.
3. Tip
React use 라이브러리
- React Hook의 생산성을 높여주는 라이브러리로 자주 사용되는 것은 라이프 사이클 관련해서 useMount, useUnmount이 있고, 그 외로 useTitle, useClickAway 등이 있었다.
