개발새발 로그

eslint설정 방법 1. npm i -D eslint eslint-plugin-vue 2. 루트 경로에 .eslintrc.json 파일 생성 (.js로 만들어도 됨) 3. .eslintrc.json에 설정 작성 - env : 브라우저에 전역 API, nodejs의 전역 API 대한 eslint 규칙을 확인 시켜줌 - browser : false => 전역 API(window,document) eslint로 확인하겠다는 의미 - node : false => 전역API(required,module.exrport, __dirname 등) eslint로 확인하겠다는 의미 - eslint:recommanded : eslint에서 추천되는 JS 규칙을 그대로 사용 - plugin:vue/vue3-recommand..

webpack 개발용 로컬 서버오픈하는 방법 계속 dist폴더의 index.html에서 open with Live Server을 이용해 결과를 확인하는 것은 너무 번거롭다 그래서 webpack에서 지원하는 webpack-dev-server를 이용해보자 HMR 지원 - 실시간 변경 1. npm i -D webpack-dev-server 2. pakage.json에 scripts에 아래와 같이 추가 - mode를 development로 지정해서 개발용 코드가 난독화가 안되게 한다. (여러모로 코드 보기에 편함) 포트 변경하는 방법? - webpack.config.js에 위와 같이 추가해준다. - 없으면 기본설정으로 8080으로 열린다. Vue에서 style태그를 추가해 스타일을 작성해줬는데 에러가 떠요 we..

웹팩은 parcel과 다르게 웹팩 옵션을 설정해줘야한다. entry - 진입점 - 웹팩이 어떤 파일로 들어가서 연결된 내용들을 읽어나가면 되는지 설정 output - 결과물 출력 - path : 결과물이 출력될 경로(--dirname: 현재 경로, path.resolve : 경로 합치기) - filename : 어떤 파일 네임으로 결과가 반영될 것인지 Webpack 기본 시작(no vue) 1. npm init -y 2. npm i -D webpack webpack-cli 3. scripts에 빌드하는 명령어 추가하기(개발서버 오픈이 아님) 4. webpack 사용을위한 구성옵션 webpack.config.js 파일 생성하기 5. 아래와 같이 기본 설정하기 6. npm run build 후 결과 확인하기..

1. npm init -y 2. npm i vue@next 3. import 하기 - 패키지를 가져오는 것이므로 상대경로를 명시하지 않는다. 주의점 vue의 index.js를 보면 module.export로 nodejs의 모듈방식을 사용하고 있다. - commonJS 방식 우리가 사용하는 방식은 import 이다. - ESM 방식 nodejs에서는 ESM방식을 사용할 수 없다. npm으로 설치했으므로 commonJS방식으로 되어있다. export default 방식이 아니므로 import를 아래와 같은 방식으로 사용해야함 3. App.vue 파일 만들기 - 위와 같이 작성하면 하나의 컴포넌트가 완성되는 것이다. 4. 컴포넌트 사용하기 - App.vue 파일을 사용함 5. index.html 생성하기 - ..

nvm : 노드 버전 매니저 현재 사용하고 있는 노드 버전을 바꿔줄 수 있다. 설치 링크 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod... gi..