본문 바로가기

분류 전체보기63

#030. CORS 에러 원인과 해결 (feat. 서버에서 CORS 테스트 하기) 개념 [CORS 원인] CORS 는 Cross-Origin-Resource-Sharing 의 약자로 "서로 다른 도메인" 간 자원을 공유하는 것을 금지하는 "브라우저의 정책"이다. 여기에서 핵심은 도메인과 브라우저이다. 먼저, 서로 다른 도메인이라면 서로 같은 지 비교할 도메인이 최소 두 가지 있어야 한다. 브라우저 정책이기 때문에 브라우저를 기준으로 두 가지 도메인이 필요함을 알 수 있다. 이를 이해하기 위한 그림은 아래와 같다. 서로 다른 도메인은 아래의 (1)과 (2) 이다. 브라우저를 기준으로 이 (1)번 도메인과 (2)번 도메인을 비교해서 도메인이 같지 않으면 CORS 에러가 발생하는 것이다. 어제 경험한 CORS에러는 서버 코드가 abc.com에, 클라이언트 코드가 localhost에 있는 경.. 2023. 4. 8.
#029. 리팩터링: any 보다 unknown 타입 사용하기 (feat. 이중 단언문) 개념 (1) any와 unknown의 차이: any는 어떤 타입 시스템에 혼란을 준다. 어떤 타입이든 any에 할당 가능하면서 any로 어떤 타입이든 할당할 수 있기 때문이다. 'a' 라는 타입은 string 타입보다 작기 때문에 'a'는 string 타입에 할당 가능하다. 그런데 'a' as any라고 하면 number라는 더 큰 타입에도 할당가능하며, boolean 을 받을 수도 있게 된다. 다시 말해 타입 체커가 무용지물이 된다. 반면 unknown은 타입을 unknown 하나의 타입으로 줄이는 기능만 한다. unknown은 오직 unknown과 any에만 할당 가능하다. unknwon 타입으로 나오는 결과가 있다면 말그래도 "무슨 타입인 지 알 수 없음" 상태이고 어떤 타입인지 확인하지 않는 이상.. 2023. 4. 5.
#028. TS 타입 좁히기(2) Brand 사용해 nominal typing 하기 개념 JS/TS는 structural typing을 한다. 그렇기 때문에 duck-typing과 같은 기능이 가능해진다. 그런데 이렇게 구조가 같다는 것으로 타입을 지정할 수 있다면 다음과 같은 문제가 발생한다. vec3D는 x,y,z가 있는데도 x,y만 가지고 있는 Vector2D에 할당 가능하게 된다. interface Vector2D { x: number; y: number; } function calculateNorm(p: Vector2D) { return Math.sqrt(p.x * p.x + p.y * p.y); } // 문제 발생 const vec3D = {x:3, y:4, z:5}; calculateNorm(vec3D); 이러한 구조적 타이핑(structural typing)의 문제를 해결.. 2023. 3. 22.
#027. TS 타입 좁히기(1) Tagged Union TS는 결국 코드 작업 or 빌드 시에 타입을 관리해주는 것이 가장 중심 아이디어이다보니 타입을 늘리거나 좁히는 작업은 그 중요성이 크다. 그래서 조금 더 자세히 적어보려고 한다. 개념 '타입 넓히기'와 반대로 '타입 좁히기'는 TS가 넓은 타입에서 좁은 타입으로 진행하는 과정을 말한다. 원하지 않는 타입(undefined, null)을 제거하거나 특정 타입만 찾는(filter, 태그된 유니온(tagged union)) 방법으로 구현할 수 있다. 이 중 타입 좁히기 첫번째로 Tagged Union을 두 가지 예시를 통해 이용해 살펴보려고 한다. Tagged Union은 타입을 좁히는 패턴 중 하나로 명시적인 '태그'를 붙여서 타입을 좁히는 방법이다. 이 타입을 줄이는 패턴은 이펙티브 타입스크립트 28장의.. 2023. 3. 8.
#026. TS 의 타입 넓히기 개념 타입스크립트가 타입을 추론할 때 사용하는 방법으로, 너무 광범위 하지 않으면서도 일단 추론된 타입이 최대한 바뀌지 않는 방향으로 추론된다. 타입 넓히기를 배우면 타입을 따로 선언하지 않은 경우 타입스크립가 어떤 식으로 타입을 추론하는 지 예측할 수 있고 적절하게 제어할 수 있다. 모든 코드는 깃헙에서 직접 실행해볼 수 있다 🐱 (https://github.com/erie0210/effective-typescript/tree/main) 적용 예시1: 아래와 같은 예시를 실행해보면 x 타입을 제대로 추론하지 못해서 에러가 발생한다. interface Vector3 { x: number; y: number; z: number; } function getComponent(vector: Vector3, ax.. 2023. 2. 7.
#025. 리팩터링: 트랜젝션 범위를 최소해 안전한 쿼리 만들기 ⛑ 개념 트랜젝션은 최소의 코드에만 적용하는 것이 좋다. 이 원칙을 지키기 위해서 다음을 확인 해봐야 한다. - 트랜젝션을 시작(데이터 베이스 커넥션을 생성)은 DBMS에 작업하는 코드부터 시작해서 가능한 빠르게 COMMIT을 해 트랜젝션을 종료하는 것이 좋다 : 일반적으로 데이터베이스 커넥션은 개수가 제한적이어서 각 단위 프로그램이 커넥션을 소유하는 시간이 길어질수록 사용 가능한 여유 커넥션의 개수는 줄어들기 때문이다. 그리고 어느 순간에는 각 단위 프로그램에서 커넥션을 가져가기 위해 기다려야하는 상황이 발생할 수도 있다. - 네트워크 작업은 트랜젝션에서 제거한다. : 네트워크 장애가 날 경우 웹 서버 뿐 아니라 DBMS까지 락이 걸릴 수 있다. - 하나로 묶어야하는 작업 단위는 하나의 트랜젝션 안에 넣는.. 2023. 1. 27.

티스토리툴바