본문 바로가기

설정3

[Vue-cli]개발모드와 빌드모드 구분하기

개요 개발 작업에 비효율적인 문제가 있었습니다. 브랜치를 매번 새로 만들어서 작업을 할 때마다, 개발 호스트를 변경해 줘야 하는 문제가 있었습니다. 효율적이지 않았고 자동화가 필요한 부분이라고 생각했습니다. 코드 베이스에 ip가 들어가 있는 경우는 조금 기형입니다. 개발된 코드 베이스에 ip가 있을 이유도 없고 있어선 안 된다고 생각했습니다. 그래서 vue-cli의 빌드 종류(개발/빌드)에 따라서 잡히는 환경변수를 이용해서 웹의 호스트를 자동으로 설정해 보겠습니다. 요약 Vue-CLI는 커스텀 설정을 하지 않으면 빌드할 때 자동으로 process.env.NODE_ENV에 값을 주입해 줍니다. 저는 코드 레벨에서 조건문을 사용해서 process.env.NODE_ENV의 값에 따라서 개발 환경일 때와 빌드 .. 2021. 6. 16.

vscode prettier 설정하기

prettier는 여러 사람이 함께 코드를 작성할 때, 코드의 띄어쓰기, 개행 또 뭐,... 컨벤션이나 format을 자동으로 맞추기 위해서 사용하는 에디터 확장 플러그인입니다. 이번에는 ESLint와 Prettier를 함께 사용하기 위한 설정도 포함되어 있으니 쭉 따라가시면, ESLint+Prettier설정을 모두 마치실 수 있을 겁니다. 일단, VSCode에 eslint에 대한 아무런 설치나 설정이 안되어 있다면, 다음 링크를 참고하시고, 글을 읽으시길 바랍니다. ESLint 설정하기 VSCode에서 prettier plugin을 설치해야 합니다. 설치가 끝난 후에는 약간의 설정을 해주어야 합니다. 이제, ESLint와 함께 사용하기 위해서 vue-cli로 생성한 프로젝트 폴더에서 .eslintrc... 2021. 1. 23.

ESLint 설정하기

확장 플러그인인 ESLint를 소개하고, 사용하는 방법을 알아보겠습니다. ESLint는 Javascript 문법을 검사해주는 에디터 확장 프로그램입니다. 사용법 Vue-cli가 3.x대 버전에서 ESLint를 사용해보겠습니다. 일단, app.vue에서 다음 코드를 입력하고, vue-cli를 실행해보았습니다. 터미널과 브라우저 모두 아래와 같이 ESLint의 에러로그가 발생합니다. 브라우저에는 overlay되어서 에러로그가 보이게 됩니다. 이럴 경우에는 개발을 할 수가 없게 됩니다. 브라우저의 에러로그 오버레이를 없애주는 설정을 하겠습니다. 설정 순서 1. 프로젝트 홈 경로 바로 밑에 vue.config.js라는 파일을 생성합니다. 2. 다음 코드를 작성합니다. module.exports = { devSe.. 2021. 1. 23.

티스토리툴바