세줄코딩

for of 구문 for (variable of iterable) { statement } for...of 명령문은 반복가능한 객체 Array, Map, Set, String, TypedArray, arguments 객체 등에 대해서 반복하고 개별 속성값에 실행문이 있는 사용자 정의 루프를 생성한다. Array 예) let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 String 예) let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o" Map 예) let itera..

React.StrictMode( Strict 모드 ) create-react-app 설치 후 index.js 를 살펴 보면 라는 것을 볼 수 있다. 처음엔 이게 먼가 싶었는데... 딱히 머 실행시 문제될 거는 없었기에 신경을 안쓰고 있었는데... 테스트시 devtools 에 콘솔 로그 값이 두번씩 찍히는 것을 발견 할 수 있었다. 검색해서 찾아봤더니 React.StrictMode 라는 것 때문에 그런 현상이 나타나는 것이라는.... 해서 공식 홈에 해당 부분을 찾아 봤더니...아래와 같은 내용들이 있었다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화. 주의 Strict 모드는 개..

React 에서 import 시 경로 설정. jsconfig.json 파일을 이용해 경로를 지정할 수 있다. 1. jsconfig.json 파일을 root 경로에 만든다. 2. 아래 코드 내용을 jsconfig.json 에 입력하고 저장. // jsconfig.json { "compilerOptions": { "baseUrl": "src" } } "baseUrl": "src" 를 작성하면 루트폴더가 src 폴더로 설정. import시에 ../../ 등의 상대경로 부분을 생략 가능하게 됨..

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 오류 Switch 를 찾을 수 없다 라는 오류가 나서 먼가 하고 봤더니 react-router-dom 이 버전 6로 업그레이드되면서, Switch 를 더이상 지원을 하지 않는다는 ㅠㅠ. Switch -> Routes 로 변경해서 쓰면 된다. 속성 중에 component 도 element 로 바꾸어서 사용해야 한다. 공식문서( https://reactrouter.com/docs/en/v6/upgrading/v5 ) 참조 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactr..

평소에 자주 쓰던 유틸용 타입스크립트 ?? ( 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..