5월3일 TIL

주요 내용

개발자로 산다는것

• 1-2년에 한번씩 이직이 일어날 수 있음
• 그러니 이력서를 pdf로 항상 들고 다닐것

검색이 잘 되는 사람이 되어야함

• 눈에 잘 띄어야 뽑아감

눈에 잘 띄는 법

• TIL 매일 작성하기 (오늘 배운 내용)
• 꾸준히!
• 길게 쓸 필요 없음

과제 리뷰

• 앞으로 module.css 방식을 사용할 것
• 드롭다운 구현 사항 중 바깥 클릭시 닫히도록 구현한 사람들 추가 점수
• 대부분 과제에서 onClick,onChange의 경우 이벤트 핸들러로 따로 빼줄것
• managedState
• handleEmailChange,handleButtonClick등으로 함수 작성 (이름을 통일해서 작성해두면 가독성이 좋아짐)
• 오타 조심!
• 키값에 index 바로 박지 말고 가공을 해서 넣어줄 것 (string + index)이런식으로
• cx (className 라이브러리)
• js 들여쓰기 두칸이 커뮤니티 표준임
• 리액트를 다룰시 DOM을 직접 다루지 말것!!!!
• Ref는 데이터를 바꾸는데 쓰면 절대 안됨.
• email regex w3c 로 검색할것
• e.target보다는 e.currentTarget을 사용할것 (이벤트가 부착된 녀석 = currentTarget)
• setState는 비동기적으로 작동함
  • 한 함수 안에서 여러 setState를 쓸경우 신경 써야함
• react 개발시 css 선택자는 모두 className을 써야하고 id를 쓸경우엔 의도가 있어야함
  • id를 쓸일이 거의 없음
• transition 의 경우 0.2 를 넣으면 적당함
• target.className 이런 코드 절대 지양할것
• useClickOutside 라는 hook 찾아볼 것
• react-use 라이브러리 확인해볼 것 ( https://github.com/streamich/react-use)
• isEmail보단 isEmailValid 이런 식으로 쓸 것
• 컴포넌트 - 파스칼케이스 , 변수 - 카멜케이스 ,

검색하는 법

• 당연히 한국어 검색 X
• 이것 또한 당연히 구글에서 검색할 것
• 공식 문서를 위주로 찾아볼 것
  • ex) 이메일 정규식 찾는법 : email regex w3c

팁

• 최적화가 잘됐다 → 이미지 용량 줄일수록 O
  • 이미지 최적화를 찾아볼 것
• 애플은 어떻게 이렇게 잘만들까,,,
  • 패럴렉스 스크롤 굉장히 잘 씀
• CSS 관련 팁
  • • 클래스명 {} 활용 잘하면 유용
  • svg → pointer-events:none (마우스 클릭 안먹음) z-index를 설정해줄 필요가 없어짐
• z-index는 한곳에서 몰아서 관리할것
• 기본적으로 관리해야할 상수들을 모아서 관리하는 습관을 들여라

ESLint

Vscode extension

• ESLint
• Prettier
• Stylelint
• TODO highlight