TIL - 220508

과제가 3일이면 2일 완성 후 1일은 테스트 시간으로 잡는다.

로컬스토리지 : store.js 라이브러리 사용해보기. JSON.parse등을 사용하지 않게 도와 줌. 복잡하지 않아도됨.

검색창에 엔터 쳤을 때 검색되도록하는 방법 :

• input을 만든 뒤 이벤트리스너로 enter를 건다 -> html 모르는 사람 탈락!!!
• form태그, onSubmit 이용하면 가능하다. : HTML 코드를 작성하면 <form> 태그를 많이 쓰게 되는데, 이 때 <form> 태그 내 <input text>가 1개인 경우 엔터키를 누르면 submit 된다.

라이브러리를 사용하는게 좋은지 로우하게 하는게 좋은지?? 코드를 짤 줄 아는 상태에서 코드가 번잡해지는 것을 막으려면 라이브러리를 사용하는 것이 좋다.

alert쓰지 말기 : alert 실행시 뒤에 자바스크립트 진행이 멈춰있기 때문.

마우스드래그 슬라이드메뉴 :: carousel(캐러셀) :: slick.js 라이브러리 사용.

리액트 훅!

• useMemo : 값을 저장
• useCallback : 함수 저장, 많이 사용하는 함수를 리렌더링 될때마다 다시 만드는게 아니라 저장된 것 사용. 빨리 구동된다. 연산량이 많으면 useCallback을 쓰지만, 퍼포먼스에 비해 메모리만 잡아먹는 경우에는 안쓰는게 좋다.

sweet alert: 예쁜 alert 쓰고 싶을때 사용하는 라이브러리

안쓰는 코드는 지우는 마무리작업 필수 ! 찌꺼기를 만들지 말자

setTimeout을 했으면 clearTimeout을 반드시 해주기!

다크모드 : :root[color-theme='dark']

HTML 기본 요소 : 프론트엔드 개발자의 간지는 다양한 html 요소를 잘 섞어쓰는 것! 시맨틱한 요소, 제목 요소, 양념 요소 등을 적절히 사용하는 것!
<header> <footer> <main> <nav> <dl> <dd> <dt> <article>

• <mark> : 검색 시 검색어 굵게 나타나기
• <sup> : 위첨자 태그
• caniuse : 특정 태그를 사용할 때 사용 가능한지 검사하는 사이트.
  • IE는 대응하지 않아도 되는 변태브라우저.
  • 크롬, 사파리 정도만 대응해도 된다.
  • 모던브라우저, 에버그린브라우저
  • 프론트엔드는 브라우저 버그때메 내잘못이 아닌데도 문제가 생김.

검색 잘하는 방법 : 네이버는 검색결과가 별로 안나온다 -> 도태되는 개발자가 된다. 구글 검색 추천! 영어로 검색하면 더 많은 자료가 나온다!

• 에러로그가 나오면 해결하기 쉬운 문제, 에러로그 없는 에러는 해결하기 어렵다.

질문하는 방법 : ~빌드를 하는데 ~에러가 나면서 안됩니다. 쓰레기같은 질문을 하면 쓰레기같은 대답만 돌아올 뿐...! 커뮤니케이션은 최대한 줄일수록 좋다. 서로의 시간낭비를 막을 수 있으므로.

라이브러리 : 오픈소스. 다른 사람도 수정 가능.

• 라이브러리 문제 검색 : issue tab
• 라이브러리 사용해도 되는지 여부 : watch, fork 수를 보고 확인
• 관리된 라이브러리 인지 확인하는 방법 : closed, issue 최신기록이 얼마나 최근인지 확인

react-beautiful-dnd : 드래그드랍 라이브러리

이미지 최적화 : 로딩속도가 길어지면 사이트는 망한다. 프론트엔드는 이미지 최적화를 챙겨야함!

• squoosh.app/editor : 이미지 최적화 사이트
• webp는 최신 브라우저만 지원하므로 jpeg 사용하기.
• 색깔 수 많은 것 : jpeg(성실압축 : 원본을 뭉개면서 용량을 줄임)
• 색깔 수 적은 것 : png(웬만하면 원본을 망가트리지 않고 용량을 줄인다. color수를 줄이면 뭉개지긴 한다.)로 만들고 color수 낮추기
• gif > png-8 : gif가 png-8이 용량이 크다.
• 프론트엔드 개발자는 이런 반복작업을 하지 않아야 한다. 이미지 압축은 서버개발자가 자동으로 압축되서 저장하여 사이즈에 맞게 뿌려주게 한다. 워드프레스같은 CMS는 자동으로 이미지를 줄여준다.
• svg : 잘 만들어진 svg인지 코드 확인하기.

프론트엔드 개발자로 산다는 것은...

프론트엔드팀은 npm, yarn중 무엇을 쓸것인지 정해놓고 통일해서 쓰자.

• yarn, npm의 차이점 ? 사용성은 2개가 비슷하다.

작업파일은 150줄이 넘지 않게 코드를 작성하는 것이 좋다.

무료로 쓰는 날씨 api 사이트 : Open Weather Map API

vscode extension : JSON to TS

날짜 라이브러리

• dayjs 사용. 모멘트js는 용량이 너무 크다.