ice rabbit programming

이전 글에서 WebPack에서 dotenv 패키지를 활용하여 환경변수를 사용하는 것을 다루었었다. 이번 프로젝트에서는 Vue-Cli를 활용하였고, 여러 모로 편리함이 증가하였다. 편리했던 것 중 하나는 dotenv의 활용이었다. WebPack에서 dotenv 패키지를 사용해봤거나, 이전 포스팅을 읽어보신 분들은 아시겠지만, 외부 패키지를 깔고 webpack 설정 파일에서 직접 코드를 수정해주어야 했다. 하지만 vue-cli에서는 그럴 필요가 없다. 실행 script에서 실행 인자 넘겨주기 우선 가장 큰 차이점은 vue app을 실행하는 script이다. package.json의 실행 script에서 webpack을 활용할 경우에는 "webpack-dev-server .... "로 이어지는 script인데..

이전 글에서 vuetify 설치에 대해 다루었다. vuetify에는 여러 기능이 있는데, 그 중에 theme 적용 및 색상 지정에 대해서 다루려 한다. 공홈 설명은 v2.vuetifyjs.com/en/customization/theme/를 참고하자. Theme — Vuetify.js Setup your application's theme and supplemental colors in a flash. v2.vuetifyjs.com vuetify를 설치한 직후라면 src/plugins/vuetify.js가 단순히 new Vuetify()를 export하는 상태일 것이다. 별도의 설정을 해주지 않아도 light theme가 적용되며, primary, secondary, error, success 등 기본적인..

기본적으로 웹 페이지에서는 CSS를 적용하여 스타일을 입힐 수 있다. 우리가 보는 세련된 페이지들도 궁극적으로는 CSS를 태그에 적용한 것이다. Vue.js에서는 UI 프레임워크를 적용하여 이러한 CSS 적용에 대한 수고를 덜 수 있다. (단, 2020년 12월 현재 기준으로 Vue 3.0 버전에 대하여는 아래 UI 프레임워크가 지원하지 않는다!!!) 여담으로, 필자가 typescript의 공식적인 적용을 위해 Vue 3.0으로 새 프로젝트를 시작하려 했다가, UI 프레임워크들이 지원하지 않아 2.6대로 회귀했다. 프론트엔드 경험이 많은 것도, 디자인에 자신이 있는 것도 아니기에.. UI 프레임워크 많이 쓰는 UI 프레임워크들은 아래와 같은 것들이 있다. - BootstrapVue : bootstrap-..

최근 Vue.js를 사용하며 WebPack을 사용했는데, local에서 proxy table의 사용을 환경 변수에 따라 다르게 설정하고 싶었다. (webpack이 아닌 vue-cli를 활용한다면 이 글을 참고) dotenv 패키지 적용 그러던 중에 dotenv 패키지를 찾아서 적용하였다. npm install dotenv dotenv 패키지는 여러 프레임워크에 존재하는데, .env 파일을 통해 환경 변수를 설정해주는 패키지이다. const dotenv = require('dotenv'); dotenv.config(); 이렇게 간단하게 사용할 수가 있는데, dotenv.config 내에 아무 것도 명시해주지 않으면 루트에 있는 .env 파일을 찾아 적용하게 된다. 경로를 지정해주고 싶으면 아래와 같이 적으..

webapp과 webapi를 분리하여 개발하다보면, webapi 호출이 CORS 이슈로 인해 제대로 불리지 않는 경우가 많다. CORS는 Cross Origin Resource Sharing로, 도메인 또는 포트가 다를 경우에 호출을 허용하지 않는 정책을 말한다. 보안을 위해 고안된 정책으로, SPA를 기반으로 호출할 때에는 번거로운 것이 사실이다. 물론 개발 서버나 운영 서버에 올리고 나면 백엔드에 render를 붙이든, 따로 구성했지만 nginx를 통해 내부 호출을 구성하든간에 CORS 이슈를 위반하지는 않게 되어 운영상에 문제되지는 않는다. 다만 local에서 개발할 때 API 호출을 통해 테스트가 되어야 코드를 올리고, 빌드를 하고 배포가 될 것이다. CORS를 해결하기 위해 크게 두 가지 방법이..