세줄코딩

command line 으로 설정하기는 크게 2가지 정도인데.... 결론은 내가 알기론 차이가 없다. 1번째 방법( npm, yarn 각자 기호에 맞게 사용하면 된다 ) # npm 으로 설치시 npm create vite@latest # yarn 으로 설치시 yarn create vite - 위 명령어를 치면 아래와 같이 선택할 수 있는 옵션이 나오는데 그 중에 Customize with create-vue 옵션을 선택하면 vue-router, pinia 등 좀 더 다양한 옵션을 선택 할 수 있다. ( 두번째 설치 방법과 똑같은 선택 옵션 사항들이 나온다. ) 2번째 방법 npm init vue@latest - 두번째 방법은 위 명령어를 치면 바로 처음부터 typescript, vue-router, pi..

지원하는 기능들 Hot Module Replacement vite는 기본적으로 ESM를 통해 HMR API를 제공합니다. HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않고 즉각적이고 정확한 업데이트를 제공할 수 있습니다. vite는 Vue Single File Components, React Fast Refresh 또는 @prefresh/vite과 같은 First-party HMR* 모듈을 제공하고 있습니다. (* Vite에서 직접 제공하는 HMR 모듈) 물론, create-vite에서 제공하는 템플릿 안에는 HMR 모듈이 포함되어 있기 때문에 굳이 위와 같은 방법을 따르지 않아도 됩니다. TypeScript vite는 .ts 파일에 대한 컴파..

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능하다. import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드 import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정. import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부. import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값 import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부. 혹은 .en..

평소에 자주 쓰던 유틸용 타입스크립트 ?? ( js 가 짬뽕된 ) 클래스를 정리해 본다. utils.ts export class Utils { /** * 모바일 번호 정규식 */ public static getMobileRegx(): RegExp { return /^\d{3}\d{3,4}\d{4}$/; } /** * 특수문자 / 한글 제외 - 영문 / 숫자만 가능 문자 정규식 */ public static getEnWordRegx(): RegExp { //x(?=y) 오직 'y'가 뒤따라오는 'x' 에만 대응 //x(?!y) - 'x' 뒤에 'y'가 없는 경우에만 'x' 일치. return /^(?=.*[a-zA-Z])(?!.*[^a-zA-Z0-9_])+[a-zA-Z0-9]/; } /** * 특수문자와 ..

axios interceptors 를 활용한 vue + ts + jwt ( token/refreshToken )정리 axios 라이브러리의 interceptors 를 이용해 연동했다. 요청( interceptors.request )에서는 token 이 localStorage 에 존재하는 경우에만 headers.Authrization 에 token 을 담아 전송하도록 했다. 응답( interceptors.response ) 에서는 token 이 expire 되어서 갱신해야 하는 경우 refresh token 을 전송 및 token 을 갱신 혹은 만료되는 상황을 처리 하도록 했다. 상세한 부분은 각 코드에 주석으로 처리해 두었다. jwtService.ts import store from '@/store'; ..

vue 정리 - login (로그인) part2 login par1. 에 이어서 jwt 즉 json web token 설정에 대해서 정리해보고자 한다. 이제 vue 에서 token 정보 저장 후 바로 headers 의 Authorization 에 token 을 담아서 사용자 정보 호출하는 것을 살펴 보자. 우선 보통은 axios 로 통신할 때 headers 설정을 아래와 같이 하게 된다. axios.post(`통신할 api 주소`, { id, password }, { headers: { 'Authorization': `Bearer 토큰값` }); 하지만 통신할 api 들이 많은데 매번 저렇게 headers 부분을 삽입해서 전송하기엔 좀 거시기 하다... 그래서 axios 의 intercepters 를 활..

Vue-router 예전에는 아래처럼 별도로 설치해서 사용했지만 지금은 vue-cli 에서 아예 설치를 해준다. 터미널에 아래와 같은 구문으로 라우터를 추가 - ( TypeScript 사용자는 vue-router@3.0+와 vue@2.5+를 사용 ) npm install vue-router 설치한 라우터 사용( 라우터를 명시적 추가 및 선언 ) import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', componen..

vue 정리 - login(로그인) part1 vue.config.js 설정을 끝낸 후 여러 가지 것들을 셋팅해야 하지만 우선 로그인 부분을 먼저 다루어야 vuex / vue-router 등을 자연스럽게 한번에 세팅 할 수 있다. 대체적으로 아래 이미지와 같은 비즈니스 로직으로 처리 된다. 사항요약해 보면 다음과 같다. 1. login call ---> 로그인 화면에서 특정 아이디/패스워드로 로그인 시도.-> 서버측에 로그인 요청 2. token 처리 ---> 요청한 아이디/패스워드가 멤버가 맞다면 jwt(json web token) 값을 client 측에 전송 전송받은 jwt(json web token) 을 client 측에서 localstorage 에 담아 두고 요청 headers 의 Authoriz..