typescript
-
[webpack] resolve alias 절대경로 설정 ( javascript / typescript )frontend/bundler 2022. 3. 28. 16:34
오늘은 webpack의 절대경로 설정에 대해서 알아보겠습니다. 절대경로 설정이 자바스크립트와 타입스크립트가 조금 다르게 설정 해야됩니다. 타입스크립트에서 설정할게 더 있다고 볼 수 있습니다. 간단한 설명과 함께 진행해보겠습니다. 자바스크립트 우리는 절대경로를 사용하기 위하여 webpack의 resolve옵션을 사용하게 될 것입니다. resolve는 모듈해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있습니다. //webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "./src/"), }, } }; 위와 같이 한다면 src를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습..
-
[ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료)frontend/react&next 2022. 3. 22. 17:45
[2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않고 직접 프로젝트 초기 설정 하는 방법에 대해서 알아보겠습니다. 정말 간단한 사이드 프로젝트를 진행할 때에는 REACT CRA나 VUE CLI 등을 사용해서 진행할 수도 있지만, 내가 원하는 방향으로 정확히 설정하여 진행하기 위해서는 이러한 초기 설정을 보다 정확하게 알 필요가 있다고 생각합니다. 글 마지막에 boilerplate가 첨부되어있습니다. 1. 모듈 설치 가장 먼저 필요한 모듈을 설치해보겠습니다. 저는 주로 사용하는 yarn으로 설치를 진행해보겠습니다. npm install을 이용해 동일 작업..