본문 바로가기
728x90

자바스크립트14

실무에서 인증 에러로 로그인 자주 풀리는 문제 트러블 슈팅... JWT는 절대 간단하지 않다 + 자바스크립트 비동기적 처리 웹 서비스 개발 스택 - Node.js - MongoDB - Nuxt3 최근 업무를 보면서 우리 웹서비스의 인증 관련 이슈가 있었다. 특별한 이벤트를 하지 않았음에도 불구하고 지속적으로 401에러가 발생하면서 세션이 만료되는 문제가 있었다. 인증은 서비스의 가장 기반이 되는 영역이기 때문에 해당 이슈가 고객에게 큰 불편함을 줄 수 있어서 이 문제를 해결하기 위해 많은 시간을 할애했었다. 이 트러블 슈팅을 정리하는 김에 간단하게 JWT에 대해서도 정리해봤다. JWT 웹 개발자, 특히 백엔드 개밸자로 커리어를 쌓기 시작하면서 필수적으로 배우는 지식 중 하나는 인증이고, 요즘은 토큰을 기반(주로 jwt)으로 한 인증 방식을 많이 선호하고 있다. 실제로 백엔드 관련 부트 캠프에서도 JWT를 많이 가르치고 있고,.. 2024. 4. 3.
TypeScript | 강의 메모 | 타입 추론, 타입가드 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입 추론(Type Inference) 정적 타입 언의 단점은 타입을 정의하는데 많은 시간과 노력이 들기 때문에 생산성이 저하될 수 있다는 점이다. 하지만 타입스크립트의 경우 다양한 경우에 대해 타입 추론을 제공하기 때문에 꼭 필요한 경우에만 타입 정의를 할 수 있다. 여기서 말하는 타입 추론이란, 타입을 프로그래머가 따로 정의하지 않아도 자동으로 타입을 추론해주는 기능을 말한다. 타입 추론 덕분에 코드를 덜 작성하면서도 같은 수준의 타입 안정성을 유지할 수 있다는 점이 타입스크립트의 장점! export {}; let v1 = 123; let v2 = "abc"; v1 = 'a'; // number 형식에 string .. 2022. 4. 5.
TypeScript | 강의 메모 | 제네릭(Generic), 맵드 타입(Mapped Type), 조건부 타입(Conditional Type) ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 제네릭(Generic) 제네릭은 타입 정보가 동적으로 결정되는 타입을 말한다. 제네릭을 통해 같은 규칙을 여러 타입에 적용할 수 있기 때문에 타입 코드를 작성할 때 발생할 수 있는 중복 코드를 제거할 수 있다. export {}; function makeNumberArray(defaultValue: number, size: number): number[] { const arr: number[] = []; for (let i = 0; i < size; i++) arr.push(defaultValue); return arr; } function makeStringArray(defaultValue: string, size: .. 2022. 4. 1.
TypeScript | 강의 메모 | 타입 호환성 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입 호환성 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것을 의미한다. 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것이다. 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른 변수의 타입에 할당 가능해야 한다. 할당 가능을 판단할 때는 타입이 가질 수 있는 값의 집합을 생각하면 이해하기 쉽다. export {}; function func1(a: number, b: number | string) { const v1: number | string = a; const v2:number = b; // 타입 number | s.. 2022. 4. 1.
TypeScript | 강의 메모 | 타입 정의 ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입스크립트 기본 타입 export {}; const size: number = 123; const isBig: boolean = size >= 100; const msg: string = isBig ? "크다" : "작다"; // 배열의 타입 선언 방법은 아래와 같이 두 가지 방법이 있음 const values: number[] = [1, 2, 3]; const values2: Array = [1, 2, 3]; // values.push("a"); // undefined console.log("typeof null =>", typeof null); // typeof null => object /** * js에서 und.. 2022. 3. 31.
TypeScript | 강의 메모 | 타입스크립트란? ※ 인프런 - 타입스크립트 시작하기(by 이재승) 강의를 기반으로 정리한 내용입니다. 타입스크립트 vs 자바스크립트 자바스크립트는 동적 타입 언어로, 변수의 타입은 런타임에 의해 결정된다. 반면에 타입스크립트는 정적 타입 언어이고 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원함. 정적타입 언어는 변수의 타입이 컴파일 타입에 의해 결정된다. 동적 타입 언어: Python, PHP 정적 타입 언어: JAVA, C/C++ 이 두 타입은 개발할 때 생산성 측면에서 큰 차이가 있음 정적 타입 언어 동적 타입 언어 변수를 선언할 때마다 타입을 고민해야 하기 때문에 진입 장벽이 높다. 타입에 대한 고민을 하지 않기 때문에 배우기 슆고, 진입 장벽이 낮다. 코드의 양이 많을 때 (동적 타입 언어에 비해) 생산.. 2022. 3. 30.
JavaScript | FP && ES6+ | L.flatten, L.flatMap, flatMap, 지연성/이터러블 실무 예제 L.flatten L.flatten 함수는 [..[1, 2], 3, 4, ...[7, 8, 9]] 같은 배열이 있을 때 [1, 2, 3, ... 7, 8, 9]와 같이 하나의 배열로 만드는 함수다. const isIterable = a => a && a[Symbol.iterator]; L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) for (const b of a) yield b else yield a; } }; let it = L.flatten([[1, 2], 3, 4, [5, 6], [7, 8, 9]]); console.log(it.next()); console.log(it.next()); console.log(it... 2022. 2. 16.
JavaScript | FP && ES6+ | 지연성 | 지연 평가(Lazy Evalutaion) 지연평가는 값이 필요할 때까지 평가를 미루는 것을 말한다. 즉 필요할 때, 필요한 것만 평가하여 연산을 효율적으로 하는 방식이다. 이러한 방식을 지연성이라고 하고, 자바스크립트는 ES6부터 공식적인 프로토콜로 사용이 가능하다. 자바스크립트의 지연 평가는 이터러블을 중심으로 이루어진다. 이제 range, take 등의 함수를 뜯어보면서 지연 평가에 대해 더 자세하게 정리해보자. range 파이썬할 때 사용하던 그 range 맞다. 0부터 시작해서 주어진 제한 길이까지 값을 배열로 리턴하는 메소드. const range = l => { let res = []; let i = -1; while (++i < l) { res.push(i); } return res; }.. 2022. 2. 16.
JavaScript | FP && ES6+ | map, filter, reduce map 함수형 프로그래밍은 인자와 인자 값으로 소통한다. map은 결과를 리턴해서 리턴된 값을 개발자가 이후에 변화를 일으키는 데 사용하는 함수이며, 고차 함수(함수를 값으로 다루는 함수)이다. 아래와 같은 객체가 있다고 치자. const products = [ {name: '반팔티', price: 15000}, {name: '긴팔티', price: 20000}, {name: '핸드폰케이스', price: 15000}, {name: '후드티', price: 30000}, {name: '바지', price: 25000} ]; 위의 객체에서 name의 값들을 반환하고 싶다면 어떻게 해야 할까? let names = []; for (let a of products) { names.push(a.name); } .. 2022. 1. 25.
728x90
LIST

티스토리툴바