세줄코딩

평소에 자주 쓰던 유틸용 타입스크립트 ?? ( 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]/; } /** * 특수문자와 ..

웹스톰에서 TypeError: this.cliEngineCtor is not a constructor 오류 리엑트를 설치하고 ESLint 를 설정하려는데.... 웹스톰에서 자꾸만 ESLint 를 설정하라고 한다... ㅠㅠ 웹스톰에서 아래와 같은 오류시 ESLint 버전이 낮아서 그런 것..... TypeError: this.cliEngineCtor is not a constructor 결론은 그냥 웹스톰을 최신 버전으로 업데이트 시키면 된다..

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'; ..

git branch 관련 명령어 git branch 현재 로컬 브랜치 목록 보기 git branch -r 현재 원격 저장소 목록 보기 git checkout temp 브랜치 이동 git checkout {새로운 로컬 Branch 이름} git checkout -b develop master master을 기준으로 로컬에 새로운 브랜치를 생성합니다 git checkout -b develop origin/develop 브랜치 생성 및 체크아웃(이동) 원격 브런치가 이미 존재 할 경우 원격 브런치를 기준으로 로컬 브랜치를 만드는 방법 checkout 명령에 -b 옵션을 넣으면 브랜치 작성과 체크아웃을 한꺼번에 실행 git checkout -b {새로운 로컬 Branch 이름} {원격 저장소 별칭}/{원격 Br..

git 원격 저장소 연결 git status 현재 진행 상태 git log —oneline 간단한 커밋해시와 제목만 보고 싶을때 git log —oneline —graph —decorate HEAD와 관련된 커밋들을 조금 더 자세히 보고 싶을 때 git log —oneline —graph —all —decorate 모든 브랜치들을 보고 싶을때 사용하는 명령 git log —oneline -n5 내 브랜치의 최신 커밋 5개만 보고 싶을때 사용 git blame note 특정 파일의 수정 이력을 확인할 수 있다. 각 라인별로 누가, 언제 마지막으로 수정 했는지 알 수 있다. git blame test.txt test.txt 파일의 수정 이력을 확인 git blame -L 5,10 test.txt test.t..

git 원격 저장소 연결 git remote add origin - 브랜치 이동 git checkout {새로운 로컬 Branch 이름} git clone [새로운 폴더명] 복제하려다 실패하는 대부분의 이유는 폴더명을 생략하면 자동으로 프로젝트 이름과 같은 이름의 폴더가 새로 생성되는데 보통 이름이 이미 존재할 경우라 그런다. 에러 fatal: destination path ‘폴더명’ already exist and is not an empty directory.

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..