프린세스 다이어리

1. Uncaught ReferenceError: __exports__ is not defined 오류 시나리오: vscode 상으로는 웹팩 데브 서버 실행해서 컴파일되고 서버 실행 잘 되는데, 브라우저에서 확인해 보면 자바스크립트 파일 읽는 도중에 __exports__가 undefined라 함 해결법: node_modules 모두 삭제, yarn.lock이나 package.json 비슷한 패키지 정보 모두 삭제 후 재실행. 문제 발생 이유는 모르겠으나 소스 수정하고 머지하는 과정 중에 패키지가 꼬인 게 아닐까 싶음 해결하는 데 소요된 시간: 3시간ㅎㅎ 2. Vscode에서 주석 처리하고 save 하면 주석이 모두 사라짐 (Vue 파일만 해당함) 오류 시나리오: git pull 받고 평소처럼 소스 수정하..

웹팩의 핵심 구성 요소 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, ... 등의 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물로 번들링하는(빌드하는) 도구임. 모듈 번들러가 필요하게 된 이유는 최근 복잡한 웹 애플리케이션의 등장과 관련이 있음. - 거대한 자바스크립트 소스코드와 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 ..

오류의 종류를 나누는 이유 오류를 최대한 빨리 고치기 위해서. - 어디서 오류가 났는지 알면 빠르게 대처할 수 있음. 논리 오류가 난 소스에서 구문이 잘못되었는지 볼 필요는 없다. 1. 컴파일 에러(Compile Error) 문법오류(Syntax Error) 등이 해당됨. 파싱 에러(Parsing Error)라고도 불림. 컴파일하는 동안에 발생하기 때문에 다른 스레드에는 전혀 영향 주지 않음. - 컴파일러/인터프리터가 소스 코드를 바이트 코드로 변환하면서 발견한 오류를 출력함 - 컴파일 시에 에러 메시지로 오류의 위치를 알려주기 때문에 찾기 쉬운 에러임 - 수정되지 않으면 프로그램은 컴파일되지 않음 - 해당 오류 코드가 포함된 동일 쓰레드 상에만 오류 처리가 되고, 다른 쓰레드의 코드는 오류가 없는 것처..