# Today I Learn - 2022.05.15

# Pre Onboarding Course

  1. 텍스트 드래그 막기 : 드래그 앤 드롭 기능 구현 시 타겟 css에 use-select:none을 주면 텍스트가 드래그되는 것을 막을 수 있다. 사용자 경험이 좋아진다.
  2. 커스텀 훅의 state : 커스텀 훅으로 재사용 시 복사 붙여넣기와 같은 개념이라 커스텀 훅 내부에서 사용한 state가 초기화 될 수 있다. 이럴 때 전역 상태 관리 툴을 사용하면 된다.
  3. 한 가지 조건 ??연산자 : 한 가진 조건만 사용할 경우 ?? 연산자를 사용한다. (ex "a면 b이다.")
  4. 네트워크 탭에 api 노출 : api 통신시 개발자 도구에서 네트워크 탭에 Header탭을 확인해보면 환경 변수로 적용하여도 api key가 노출된다. AJAX 방식으로 request를 보내는 것이라 이 정보를 숨길 수는 없다고 한다. 이 정보를 숨기기 위해서는 서버리스 백엔드를 이용하는 방법이 있다고 한다. 백엔드가 api와 직접 통신하고 프론트는 백엔드와 통신해 그 정보를 받아오는 것이다. (ex "서버리스 서비스(netlify)")
  5. 국문과 영문의 폰트 적용 순서 : 폰트 적용 순서를 고려해야한다. 국문을 먼저, 영문을 나중에 넣는 것이 좋다. 영문은 국문이 지원안되는 경우가 많기 때문이다.
  6. 이미지 태그의 onError : 이미지 태그의 onError를 사용하여 이미지가 없는 경우 에러 처리를 할 수 있다. (ex "api로 이미지 주소 불러올 때 이미지 주소가 N/A로 오는 경우")
  7. backdrop-filter속성과 브라우저 지원 범위 : backdrop-filter 속성을 활용하여 블러처리를 할 수 있다.
  8. 브라우저 지원 범위 : backdrop-filter와 같이 생소한 css의 경우 can i use(https://caniuse.com/)에 검색해보며 지원하는 브라우저 범위를 확인해봐야한다.
  9. 웹팩의 prefix처리 : prefix로 크로스 브라우징 이슈를 해결하고는 했는데 웹팩은 auto prefixer가 들어가 있기 때문에 알아서 해결해준다.
  10. 쿼리 스트링 활용 : 검색 기능 구현 시 쿼리 스트링을 활용하면 사용자가 검색 결과를 다른 사용자들과 공유할 수 있다.
  11. promise의 finally 활용 : 기본적인 자바스크립트 문법을 잊어버리지 말자. 비동기 통신 후 성공 실패 여부 관계없이 finally의 콜백 함수를 활용할 수 있다.
  12. 로컬스토리지 유지를 위한 아톰의 recoil-persist : atom 사용 시 로컬스토리지에 데이터를 저장 후 새로고침 및 재접속 시 데이터를 유지하기 위해 recoil-persist를 사용할 수 있다.
  13. text-align의 start는 미사용 : text-align의 start보다는 left를 사용하는 것이 권장된다.
  14. 무한 스크롤 구현을 위한 react-intersection-observer : 무한 스크롤 구현 시 react-intersection-observer 라이브러리를 사용할 수 있다.
  15. react 프로젝트의 git 배포 : react 프로젝트의 git 배포 시 404에러가 나타날 수 있다. git 배포는 spa를 지원하지 않기 때문이다. 이러한 에러 사항들을 404.html을 생성하여 우회하는 방법으로 해결할 수 있다.