원래는 도커를 제대로 공부해보고 그 다음에 사용해보려 했었다. 근데 노트북 데탑을 왔다갔다하면서 개발할때마다 자꾸 에러를 뿜는다.... 홧김에 세팅해보았다. 일단 미리 말하자면 나는 도커이미지로 개발환경 세팅만 해놓고 이미지 내부에 구현코드는 존재하지 않게 만들었다. 준비된 개발환경은 다음과 같다. node + vite + vue 이번에 할 것은 1. Dockerfile 작성 2. docker compose 파일 작성 3. 핫 리로딩 개선 이 정도를 해보려고 한다. 배포환경 세팅은 다음에 따로 글을 작성해야겠다. 1. Dockerfile 작성 프로젝트 경로 최상단에 Dockerfile을 작성해준다. # 만들려고 하는 image의 베이스가 되는 image FROM node:lts-alpine # base ..
Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다. javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다. 이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다. Javascript vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } }) Typ..
Vite는 Vue 3 를 기반으로 작동합니다. 그러므로 Vue 3를 사용하면 별다른 설정 없이 사용할 수 있습니다만... Vue 2는 설정을 좀 만져줘야 합니다. 저와 같이 Vue 2에서 Vite를 사용하고 싶은 분들을 위해 이 글을 바칩니다... Vite 프로젝트를 생성해보신분들은 프로젝트 생성 부분은 건너뛰시면 됩니다. Vite 프로젝트 생성 방법 방법은 아주 간단합니다. 일단 Vite 설치부터 진행하겠습니다. 프로젝트 폴더를 만들 경로에서 아래 명령어를 입력하면 됩니다. ex) abc 라는 폴더 내부에 프로젝트 폴더를 생성할 경우 abc 폴더에서 아래 명령어를 실행하면 됩니다. npm npm init vite@latest Yarn yarn create vite 이후에는 프롬프트 창에 출력된 메시지를..
