#들어가기 이번에 IE8을 지원하는 웹사이트 만들기 프로젝트를 받고 깜짝 놀랐다. 지금까지 들은 강의에서는 JQuery는 이제 필요없다. 바닐라 자바스크립트는 ES6으로 배우면 된다고 했는데, 설마 JQuery를 배우게 될 줄은 몰랐다. 그런데 기존 레거시 코드를 React나 ES6 자바스크립트로 옮길 때 JQuery와 IE8에 대한 ...

git revert와 reset의 차이 reset: 이전 상태로 돌려버림 (타임머신) revert : 과거 특정한 사건들만 없던 일로 돌려 버림 Web 폴리필(polyfill) : 웹 개발에서 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 말함. 이미지 스프라이트 로고, 아이콘 등의 파일을 한 개의 이...

pre 내용 상의 enter, space 등이 그대로 유지되는 태그 <pre> 그대여 그대여 오늘은 우리 같이 걸어요 </pre> fit-content html의 넓이가 100%인데 밑에 있는 content가 100% 이상의 값을 가지고 있어서 가로 스크롤할 때 네비게이션이 끊겨 버리는 경우에 사용하는 스타일...

Debounce 연속으로 발생하는 이벤트를 제어하기 위해서 사용함. 이번 프로젝트에서 onChange로 검색 창을 구현하는데 실시간으로 변하는 값의 최적화 때문에 사용. useDebounce라는 커스텀 훅을 만들어서 값이 입력된 후 일정 시간이 지났을 때 처리하는 방식으로 만들 수 있음. typeScript import { useEff...

NEXT pages에는 component를 import만 (컴포넌트들이 한 눈에 들어올 수 있도록) components에 페이지의 모든 컴포넌트를 정리. API 호출할 때 SSR, CSR 어디에서 할 지 고민해보고 구현하면 좋음. useSWR 이미 가져온 것은 캐시에서 응답하고 아니면 새로 가져오는 것인데 이 훅은...

스타일드 컴포넌트 매크로를 쓰면 cra에서 컴포넌트의 파일명을 볼 수 있어서 디버깅하기에 좋다. next에서는 babel 설정 파일에서 해줄 수 있다. (pure) styled component와 typescript를 같이 쓸 때 theme의 타입 설정에서 타입 대신 해당 값을 써주면 나중에 테마를 볼...