예전에 카카오맵API를 통해 지도를 가져온 적이 있는데.. ( 해당 글 참조 ) 당시에는 Vue환경이 아닌 반푼이었다. 그냥 javascript로 가져오고 검색은 ajax나 axios를 쓰기만 하고.. 그래서 이번에 컴포넌트, 웹팩, Vuex 같은 것들 복습 하는 겸 Vue3 기반 프로젝트로 카카오맵을 만들어 보려고 한다. 아래 그림의 흐름대로 구현할 생각이다. 이 그림을 잘 기억해두자. 그럼 바로 시작해보자~~ ( API키 갖고 오고 이런 건 생략하겠다. 궁금한 사람은 위 링크에서 참조하자. ) MapHeader.vue 이렇게 원하는 html파일에 번들링 된 js파일을 넣어주기만 하면 ... 기존과 똑같이 잘 뜨는 것을 확인 할 수 있다~
잡담 예전에 웹팩에 대한 걸 다룬 적이 있는데.. ( 웹팩 글 참조 ) 당시의 웹팩은 살짝 반푼이 같은 느낌이었다. 예를 들면 js파일이 하나 추가 되면 새로 빌드를 하고 번들링을 해줘야 하는... ( 당시에 하루종일 에러가 떠서 짜증이 나서 그냥 그렇게 했더랬다. 물론 그것도 하나의 방법이니 잘못 된 것은 아니지만.. 오늘은 한번 더 정리 해보려고 한다. ) ============================================================================ 오늘 어떻게 하면 자동으로 웹팩을 빌드 할 수 있을까.. 라는 고민을 했는데. 의외로 간단히 해결 되었다. 바로 "웹팩 감시 옵션" 을 scripts에 추가만 해주면 된다는 사실. 우선 현재 상황은 이렇다 sou..
저번 글에서 웹팩 라이브러리 다운로드 및 기초를 알아봤다. ( 아래 링크 ) https://bongra.tistory.com/107 [기타] webpack(웹팩)에 대한 정리 : 웹팩 라이브러리 다운로드 및 기초 (1) 주말에 공부를 하는데 VScode 에러 잡는다고 시간 날리고, 웹팩 공부하는데 에러나서 4시간 날리고 겨우 정리한다.. https://bongra.tistory.com/105 [기타] VScode : Error: Cannot find module 'vue-template-co.. bongra.tistory.com 근데 웹팩은 기본적으로 javascript파일만 가져 올 수 있다. 만약 가져오는 파일중에 .js가 아닌 다른 형식의 파일이 있으면 에러가 난다.. 이렇게 js파일만 있다면 웹팩..
개발을 하다보면, javascript파일이 많아지기 마련이다.. 다음 HTML파일을 보자. 보면 test.js를 순서대로 4개를 가져온다. 근데 보통 프로젝트를 하면 js파일이 적어도 100개에서 수백개까지 늘어난다. 그럼 어떻게 될까? 코드도 길어지고, 정리하기도 힘들 것이다. 그래서 개발을 하다보면 common.js와 같이 js를 모아놓은 js파일을 만들어 쓰는 경우가 많다. 여기를 보면 4개의 js파일들을 testCommon.js다른 곳에서 import하여, HTML에서 쓰고 있다. 그렇다면 네트워크에서는 testCommon.js 하나만 가져올까? 정답은 '땡'이다. testCommon.js까지 해서 5개를 다 가져온다.. 이런 걸 모듈화라고 하는데, 실제로 내가 진행했던 프로젝트도 이렇게 js를 ..
주말에 공부를 하는데 VScode 에러 잡는다고 시간 날리고, 웹팩 공부하는데 에러나서 4시간 날리고 겨우 정리한다.. https://bongra.tistory.com/105 [기타] VScode : Error: Cannot find module 'vue-template-compiler' 에러 ( feat. 웹팩 ) 오늘 webpack 사용법을 공부하고 있는데, npm run build 명령어를 통해서 웹팩을 실행하려는데 아래와 같은 에러가 발생하였다. 실행 명령어 npm run build vue-template-complier 모듈을 찾을 수 없다는 말 같은 bongra.tistory.com 이 에러 때문에 4시간 날렸다... 결국 위의 방법으로는 vue파일을 import해서 웹팩으로 output 할 ..
오늘 webpack 사용법을 공부하고 있는데, npm run build 명령어를 통해서 웹팩을 실행하려는데 아래와 같은 에러가 발생하였다. 실행 명령어 npm run build vue-template-complier 모듈을 찾을 수 없다는 말 같은데... 분명 npm 명령어를 통해 설치를 한 상태.. package.json을 보면 이렇게 설치가 된 것을 확인할 수 있다.. 그래서 구글링을 때려보니 크게 2가지 해결방법이 있었다. 1. html문법이 잘못 된 것. 예) value="2"여야 하는데 value=""2 와 같이 값이 "" 밖에 있는 것. 2. html태그에 있는 lang이 문제이니 지울 것. 물론 나는 2가지 방법으로 해결이 되지 않아, 뭐가 문제지... 하면서 찾던 와중, 프론트단이 문제일 ..