프린세스 다이어리

1. Vue로 개발 시 프록시를 설정해주는 이유 일반적으로 프록시 또는 프록시 서버는 클라이언트와 서버 간의 중간다리 역할을 한다. 프록시에 대한 글에 프록시의 개념과 종류에 대해 정리해 두었다. Vue 개발 시에는 개발 환경에서 프록시를 설정하여 사용한다. Vue CLI 서비스(웹팩 개발 서버)를 사용하여 개발 모드에서 앱을 실행하는데 개발 환경에서 /api/reservations/:id로 요청을 하면 자동으로 http://localhost:8080/api/reservations/:id로 호출이 된다. 이렇게 되면 localhost:8080는 백엔드 서버에서 허락한 도메인이 아니기 때문에 브라우저에서 CORS 오류가 난다. 배포를 하고 나면 미리 설정한 도메인으로 바뀌니 상관이 없지만 로컬에서 개발 도..

웹팩의 핵심 구성 요소 1. entry - 웹 애플리케이션이 App.js라는 파일 내부에 선언된 여러 모듈들로 실행이 된다면, App.js 가 웹팩의 Entry 파일인 것. 즉 각 모듈들이 바라보는 최상위 자바스크립트 파일(App.js)을 중심으로 번들링 된다고 보면 됨. - 선언 방법은 어플리케이션의 루트 경로(node_modules 있는 경로)에 webpack.config.js 파일을 만들고 그 내부에 정의하면 됨. module.exports = { entry: './src/index.js' } 또한 엔트리 포인트가 2개 이상일 경우도 있음. entry: { login: './src/LoginView.js', main: './src/MainView.js' } - React나 Vue 프레임워크로 작업한..

실무에서 Vue를 이용해서 개발하다 보니 프로젝트 생성 시부터 웹팩이 이미 포함되어 있었고, 기초를 모르니 원하는 설정을 인터넷에서 찾아 짜깁기하는 수준에 그치게 되었다. 그래서 추후 연관된 문제해결을 위해 웹팩 기초를 처음부터 공부하고자 한다. 웹팩이란 여러 개 파일을 하나의 파일로 합쳐주는 모듈 번들러. - 모듈 번들러란 html, css, js, json, svg, ... 등의 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물로 번들링하는(빌드하는) 도구임. 모듈 번들러가 필요하게 된 이유는 최근 복잡한 웹 애플리케이션의 등장과 관련이 있음. - 거대한 자바스크립트 소스코드와 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 ..