프리온보딩 1일차
이력서
- 원티드, 로켓펀치, 링크드인 등 HR 플랫폼에 자기 이력서 올려두기
- 개발자들은 항상 이력서를 PDF로 가지고 다녀야 한다.
- 이를 통해 FE 개발 시장에서 나의 연봉, 시장가가 어느 정도 되는지 파악할 수 있다.
- 나의 글이 검색이 잘 되면 기회는 계속 온다.
- 아무리 잘해도 존재감이 없는 사람은 안된다.
TIL (Today I Learned) 작성
- 매일 하루의 마지막에 꾸준히 오늘 배운 내용을 요약해서 적기!
프리온보딩 사전 과제 피드백
CSS Module
.Box {
background: black;
color: white;
padding: 2rem;
}
- 리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 css 파일에 선언한 클래스 이름들이 모두 고유해진다.
- CSS Module을 이용하면 리팩토링하기 좋다.
참고
React 이벤트 핸들링
- onChange, onClick 등 이벤트를 사용할 때 이벤트 핸들러는 따로 빼놓기
- 길이가 길거나 오래걸리는 함수를 넣었을 때 좋지 않다.
- 렌더링 될 때마다 계속 생성되기 때문
- 이때 함수명은
handle~~
로 만들어두는 것도 꿀팁
이벤트 핸들러
- e.target 말고 e.currentTarget 사용하기
- currentTarget은 이벤트 핸들러가 부착된 것을 가리킨다.
Managed State 관리
- 디코에서 진행한 피드백 뿐만 아니라 오늘 라이브에서 진행한 피드백에서도
managed state
관리가 중요하다고 하셨다.
- 사실 이 부분은 아직 이해가 잘 되지 않아 좀 더 찾아봐야 할 부분이다.ㅠ
이메일 정규식
- 이메일 관련 validation은 간단한 것이 좋다.
email regex w3c
를 검색해서 확인
- 웹 표준 개발 기구에서 제공하는 validation
- 정규식 확인하는 사이트
validity
- 패턴을 이용해서 브라우저가 생각하는 이메일이 맞는지 아닌지 여부를 확인한다.
CSS 선택자 focus-within
- form 안에 css 선택자 focus-within을 사용하면, 포커스되어있을 때 아래에 있는 요소에 css를 줄 수 있다. (email validation 관련 내용에서)
키 값에 인덱스 넣지 말기
- 리액트 입장에서는 여러 곳에서 인덱스가 올라가는데, 어떤 곳의 1번 인덱스인지 모른다.
- 인덱스가 똑같이 들어가면 예상하지 못한 작동들이 일어날 수 있음
- 그러니까 인덱스를 바로 키 값에 넣어주지 말기
- 어느 namespace에 들어가는지 키 값 가공해서 넣어주기
classnames 라이브러리
참고
CSS 선택자 쓸 때는 class 사용
- id는 어떠한 의도가 있을 때만 사용한다.
- id는 재사용이 안된다.
prevState 사용하기
public이 아니라 src에 넣어서 불러오기
- 리액트에서 화면에 필수로 들어가야 할 것들은 public이 아니라 src에 넣어서 불러오기
- img는 상단에서 import를 이용해서 불러온다.
- 리액트로 코드를 짜고 웹팩으로 번들링을 할 때 너무 작으면 html에 그냥 넣어버린다.
svg 파일 사용
- svg 파일을 리액트 컴포넌트 팡식으로 가져오게 되면 svg 안에 있는 색을 바꿀 수 있다.