이 페이지의 영어 번역이 없습니다.
English posts(2022-03-04 업데이트: webpack-dev-server, babel, jest 관련 설정 코드가 수정됐습니다.) 파트 1에서는 기본 자바스크립트 개발 환경을 러나와 함께 구축해봤어요. 기본 환경만으로 충분하신 분들도 계시겠지만 보통은 그렇지 않을 겁니다. 이제 두 가지 개발 환경을 추가할 건데요. 타입 스크립트와 리액트 개발 환경이에요. 우선 타입스크립트 환경을부터 추가할 거예요.
(2022-03-04 업데이트: webpack-dev-server, babel, jest 관련 설정 코드가 수정됐습니다.) 개발을 하다 보면 특정 환경에서 빠르게 코드를 작성하고 그 결과를 확인해보고 싶을 때가 있어요. 라이브러리나 프레임웍 혹은 언어를 공부할 때나 아이디어를 빠르게 실험하거나 프로토타입 해보고 싶을 때 그렇지요. 바닐라 자바스크립트로 충분한 환경이라면 디렉터리 하나 만들고 js 파일 하나 html 파일 하나 만들어서 에디터를 열고 브라우저를 열어서 html 파일을 불러오는…
언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 바벨을 사용하는 프로젝트들이 많다 보니 간접적으로 혹은 직접적으로 브라우저스리스트까지 사용하게 되는 것이죠. 사실 좋아요 좋은 도구라고 생각합니다.
이벤트 핸들러는 UI를 개발할 때면 항상 사용된다. 웹뿐만 아니라 네이티브 어플리케이션에서도 약간의 차이가 있을뿐 거의 동일한 추상이 사용된다. 자주 사용되는 만큼 중요하지만 사실 너무 자주 사용되다 보니 가볍게 생각하며 습관적으로 고민 없이 좋지 않은 코드를 만들곤 한다. 자주 사용된다는 건 코드의 양적인 비중도 크다는 것이고 그만큼 조금만 더 신경 쓴다면 큰 효과를 볼 수도 있다.
레이지 로딩이란? 좋은 기회로 2019년 구글I/O에 참석했다. 웹 기술 세션 중에는 크게 눈에 띄는 세션은 없었지만, 일부 세션에서 소개된 웹과 관련 기술 몇 가지는 흥미로웠다. Native Lazy Loading, Portals, Duplex, Rich Results 정도가 나의 관심을 끌었다. 그중 키노트에서 시작해 몇 개의 세션에서 두루두루 언급한 네이티브 레이지 로딩이 제일 기대됐다.
