해당 글에서는 CRA(Create-React-App)를 사용하지 않고 개발 환경을 구축하는 방법에 대해서 공유합니다. 더불어서 선택적으로 설치해야 할 사항까지 함께 공유합니다. 1) 개발 환경 💡 개발 환경 구축을 위해 이용한 IDE, Package Manager, Package를 정리 한 내용 입니다. 분류 버전 설명 Visiual Studio latest 개발 IDE 툴로 VSCode를 사용하였습니다. node 16.16.0 자바스크립트를 수행하는 용도로 사용하였습니다. yarn 1.22.19 패키지 매니저로 사용하였습니다. react / react-dom 18.2.0 웹 프레임워크 React와 React-dom을 사용하였습니다. typescript 4.8.4 타입스크립트를 사용하였습니다. webpa..

해당 글에서는 Module 번들과 Webpack에 대해 이해하고 webpack에 주요 옵션에 대해서 이해를 목적으로 작성한 글입니다. 1) 취지 💡 이전 React 프로젝트를 초기에 구성하고자 할 때 CRA(Create-React-App)를 통하여 프로젝트를 구성하였습니다. 해당 구성을 사용하게 된다면 초기의 webpack이나 babel에 대한 설정이 사전에 구현되어 신경을 쓸 일이 없었습니다. 💡 그런데 직접적으로 webpack을 설정할 필요가 생김에 따라서 이해하고 적용 방안에 대해 알아봅니다. 💡 참고로 CRA 환경에서 webpack과 babel을 구성하는 방법 또한 존재하여 아래에 [참고]로 공유를 합니다 1. [참고] CRA(Creat-React-App)으로 webpack / bable을 구성하..

해당 글의 목적은 캐시 무효화란 무엇이고 어떠한 해결 방법이 있는지에 알아보기 위한 목적으로 글을 작성하였습니다. 1) 문제점 발생💡 웹 브라우저에서 새로 배포를 하였는데도 이전 파일을 바라보고 있는 문제가 발생하였습니다. 이 문제는 브라우저 내에서 ‘강력 새로고침’ 혹은 ‘캐시 초기화’를 수행해야지만 이전 버전에 캐시가 사라지고 새로운 버전을 바라보아서 해결이 되었는데, 매번 변경 때마다 사용자 들이 ‘캐시 초기화’를 수행해야 하는 번거로움이 생겨서 이러한 작업 없이 수행 할 수 있도록 Cache Busting을 적용합니다. 2) Cache Busting💡 Cache Busting 이란? - Cache를 Busting(부수다, 고장내다) 라는 의미에 Cache Busting은 이전에 남아 있는 캐시로 ..