HTML
div, span 태그에 연결되는 지점인 인라인과 블록의 개념을 포함해서 프론트엔드에서 더 알아두면 좋은 것들은 form, input, label, text, selectarea, group 관련 태그 (header, footer, nav, main, figure, article, section) 외에 필요한 것들은 그때마다 검색해서 찾아보면 된다.
특정 브라우저에서 지원 태그인지, 현재 사용이 가능한 태그인지를 확인하기 위해서는 can i use 사이트에서 확인할 수 있다.
질문하는법
- 단순히 OO가 안됩니다.( X )
- 내가 기대하는 사항은 OO인데, 이런 부분에서 에러사항을 겪었습니다. 이 기대하는 사항을 해결하기 위해서는 어떠한 방법을 고민했고, 현재 시도한 방법은 이것이며, 현재 이런 상황에 있습니다.( O )
- 모두가 이해할 수 있도록, 질문에 필요한 자료와 내용을 모아서 대화의 시간을 줄여 상대의 시간을 아끼도록 하는 것이 필요하다. (질문의 내용이 모호해서 재질문하고, 자료를 찾는 등에서 나뿐만 아니라 타인의 시간이 많은 소모가 되기 때문에 무분별한 질문은 조심하자)
검색 잘하는 법
- 라이브러리를 사용해도 될 것인지 fork, start, issue, 커뮤니티 활성 정도 등을 보고 판단한다.
- 라이브러리는 주인이 바뀌거나 운영을 못해서 바뀌는 경우도 있고,
이미지 최적화
- 컨텐츠 화면에 있는 이미지 최적화
- 개발자도구 > 네트워크 탭 > 크기별 정렬 > 가장 큰 이미지 클릭 > 해당 이미지를 다운 받아서 저장
- https://squoosh.app/ 사이트 접속
- 색이 많은 이미지 > compress(jpg)와 resize를 조정해서 변환 해준다.
- 색상이 없는 이미지 > comporess(png), color spectrum을 조정한다.
- gif 파일은 애니메이션의 목적이 아니면 jpg를 이용하는게 낫다.
SVG
- 이미지가 통째로 들어가 있는것은 디자이너와 이야기해서 다시 svg 파일을 받을 수 있도록 한다.
Tip
- 날짜 관련 라이브러리 (momentjs, dayjs)
- momonetjs는 매우 크기 때문에, 현업에서는 dayjs를 더 찾는 편 - 검색 기능 구현 > form태그에 onSubmit 의 조합 활용
- localstorage > 매번 JSON <-> Object 변환 작업을 수행해야 함 > storejs 라이브러리
- 이미지 슬라이드 > Carousel > Slickjs 라이브러리
- Modal > React Portal
- 비동기 코드는 Mount 후 제대로 UnMount 시키기
