TIL101

• [TypeScript] 이펙티브 타입스크립트 item 38~44 item38 any 타입은 가능한 좁은 법위에서만 사용하기 any는 매우 강력한 힘 가짐 (큰 힘에는 큰 책임이...) // 1 function f1(){ const x: any = f3(); f4(x); } // 2 function f1(){ const x = f3(); f4(x as any); } 1번 보다 2번 케이스가 더 나음, 왜냐하면 any 타입이 f4() 의 매개변수로만 들어가고 다른 곳엔 영향을 끼치지 않았기에 함수에서 any를 반환하면 영향력이 더 퍼져나감 => 반환 타입 any로 하는 것 지양할 것 + 반환 타입을 명시하는 것이 좋음 item39 any를 구체적으로 변형해서 사용하기 // 1: any 타입의 값 그대로 넣기 function getLength(array: any){ ret.. TIL/TypeScript 2022. 8. 5.

• [TypeScript] 이펙티브 타입스크립트 item 32~37 item 32 유니온의 인터페이스보다는 인터페이스의 유니온 사용하기 // 유니온의 인터페이스 interface Layer{ layout: LineLayout | PointLayout paint : LinePaint | PointPaint } //인터페이스의 유니온 interface LineLayer{ layout: LineLayout paint : LinePaint } interface PointLayer{ layout: PointLayout paint : PointPaint } type Layer = LineLayer | PointLayer item 33 string 타입 보다 더 구체적인 타입 쓰기 // string 남발된 모습 interface Album { artist: string; releas.. TIL/TypeScript 2022. 8. 4.

• [TypeScript] 이펙티브 타입스크립트 item 28~31 item 28 유효한 상태만 표현하는 타입 지향 유효한 상태와 무효한 상태를 둘다 표현하는 타입은 혼란을 초래하기 쉬움 // 유효한 상태와 무효한 상태를 둘다 표현하는 타입 interface State{ a: string; b?: string; c?: string; } // 유효한 상태만 표현하게 바꾼 모습 interface StateCase1{ a: string; } interface StateCase2{ a: string; b: string; } interface StateCase3{ a: string; c: string; } interface StateCase4{ a: string; b: string; c: string; } type State = StateCase1 | StateCase2 | St.. TIL/TypeScript 2022. 8. 3.

• [Nest.Js] 미들웨어 미들웨어란? 미들웨어는 클라이언트로부터 들어온 요청을 각 컨트롤러의 요청 핸들러(라우터)가 처리하기 전에 코드를 실행할 수 있는 기능. Pipes 파이프는 요청 유효성 검사 및 페이로드 변환 담당, 데이터를 직렬화한다 Filters 오류 처리 담당, 특정 오류 처리기를 사용할 경로와 경로 주변의 복합성을 관리하는 방법 Guards 인증 담당, 지정된 경로로 통과할 수 없는 사람과 있는 사람을 서버에 알려줌 Interceptors 응답 매핑 및 캐시 관리와 함께 요청 로깅과 같은 전후 미들웨어, 각 요청 전후에 실행 실행 순서 미들웨어 -> guard -> interceptor(전) -> pipe -> controller -> service -> controller -> interceptor(후) -> f.. TIL/BackEnd 2022. 8. 2.

• [TypeScript] 이펙티브 타입스크립트 item 24~27 item 24 일관성 있는 네이밍 const test = [10,20] const test2 =test test2[0] = 1 // test = [1,10] 이 된다 별칭의 남발은 제어 흐름 분석을 어렵게 만듬 별칭은 타입스크립트가 타입을 좁히는 것을 방해함 function isPointInPolygon(polygon: Polygon, pt: Coordinate) { const box = polygon.bbox; // 타입이 BoundingBox | undefined if(polygon.bbox){ polygon.bbox // 타입이 BoundingBOx box // 타입이 BoundingBox | undefined } } 비구조화 문법(동일한 키 값 사용하여 자동으로 할당)을 사용하여 일관된 이름 사용.. TIL/TypeScript 2022. 8. 1.

• 

  [BE] preSignedUrl을 활용한 업로드 다운로드 구현 중 고민 [BE] 이미지 업로드, 다운로드 시의 고민 (feat. preSigned URL) — Registro (tistory.com) [BE] 이미지 업로드, 다운로드 시의 고민1 (feat. preSigned URL) 이미지나 동영상을 업로드하고 다운로드하는 경우가 많음 이러한 작업을 서버단에서 처리해줄 때 EC2에 띄워져 있는 서버에 이미지를 받아서 이를 S3에 저장하는 방법이 있을 것이고 유저가 바 lackofwillpower.tistory.com 이전에 작성했던 글을 내용을 실제로 구현하면서 느꼈던 고민과 과정을 기록하고자한다. 우선 구현하면서 느꼈던 고민에 대해서 이야기해려고 한다. 정확히는 나의 경우는 게시글과 이미지/동영상 등을 처리할 두 테이블을 따로 만들어 게시글 하나에 여러개의 이미지/동영상.. TIL/BackEnd 2022. 7. 31.

• [백준]3197 백조의 호수 3197번: 백조의 호수 (acmicpc.net) 3197번: 백조의 호수 입력의 첫째 줄에는 R과 C가 주어진다. 단, 1 ≤ R, C ≤ 1500. 다음 R개의 줄에는 각각 길이 C의 문자열이 하나씩 주어진다. '.'은 물 공간, 'X'는 빙판 공간, 'L'은 백조가 있는 공간으로 나타낸다. www.acmicpc.net 문제 두 마리의 백조가 호수에서 살고 있었다. 그렇지만 두 마리는 호수를 덮고 있는 빙판으로 만나지 못한다. 호수는 행이 R개, 열이 C개인 직사각형 모양이다. 어떤 칸은 얼음으로 덮여있다. 호수는 차례로 녹는데, 매일 물 공간과 접촉한 모든 빙판 공간은 녹는다. 두 개의 공간이 접촉하려면 가로나 세로로 닿아 있는 것만 (대각선은 고려하지 않는다) 생각한다. 아래에는 세 가지 예가 있.. TIL/SW&백준 문제 리뷰 2022. 7. 31.

• [TypeScript] 이펙티브 타입스크립트 item 21~23 item21 상수를 사용해서 변수를 초기화할 때 타입을 명시하지 않으면 타입체커는 타입을 유추하여 결정 즉 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추함, 이를 타입 넓히기라고 함 const mixed = ['x', 1]; //후보: ('x' | 1)[] // ['x', 1] // [string, number] // readonly [string, number] // (string|number)[] // readonly (string|number)[] // [any, any] // any 정보가 충분하지 않으면 어떤 타입으로 추론되어야 하는지 모름 이러한 넓히기를 제어할 수 있는 것이 const : 재할당을 막기에 타입스크립트가 더 좁은 타입으로 추론할 수 있다 interface Vector.. TIL/TypeScript 2022. 7. 28.

• [ML] Face Recognition 보통 우리가 사람의 얼굴을 보고 누구인지 인식하는데 어려움을 겪을 일이 없다. 우리의 뇌가 너무나 자연스럽게 여러가지 절차를 거쳐서 다른 사람의 얼굴을 인식하고 머릿속에 있는 정보와 매치하여 누구라고 답을 내놓기 때문이다. 이러한 일을 컴퓨터가 할 수 있게 해주려면 위에 말한 우리의 뇌가 너무나 자연스럽게 진행한 절차들을 분리하여 순서대로 해결해 나가면서 답을 찾아나가야 할 것이다. 그 과정에 대해서 알아보고 정리고자 한다. 전체 이미지에서 사람의 얼굴을 찾는 것(Face Detection), Histogram of Oriented Gradients(HOG) 방식 사용 이미지를 흑백으로 바꿈 (얼굴 찾는데 색상 데이터는 필요 없기 때문) 주변 픽셀에 대한 gradient, 즉 주변 픽셀들에 비해 밝은지 .. TIL/TIL 2022. 7. 27.

• 

  [BE] 이미지 업로드, 다운로드 시의 고민 (feat. preSigned URL) 이미지나 동영상을 업로드하고 다운로드하는 경우가 많음 이러한 작업을 서버단에서 처리해줄 때 EC2에 띄워져 있는 서버에 이미지를 받아서 이를 S3에 저장하는 방법이 있을 것이고 유저가 바로 S3에 이미지를 업로드하고 받아오는 방법이 있을 것이다. 그냥 바로 성능적인면을 보면 상식적으로 생각하면 두번 이동해야하는 방법보다 한번에 바로 업로드하는 방법이 효율적일 것이다. 또한 서버가 이미지가 들어오는 트래픽을 처리해야 하는 점에서 서버에 부하가 걸리는 것까지 비용이 될 것이다. 그렇다면 바로 S3에 저장하는 것이 무조건 옳은 것인가?? 라고 하면 걱정이 되는 부분은 보안이다. S3에 접근하기 위해 AWS 관련된 키라던지 보안적으로 위험한 요소를 클라이언트 쪽이 들고 있게 될 것이다. 이러한 점을 보완하기에 .. TIL/BackEnd 2022. 7. 26.

• [TypeScript]이펙티브 타입스크립트 Item 16~20 item16 자바스크립트에선 객체란 키/값 쌍의 모음, 키는 보통 문자열 복잡한 객체를 키로 쓰려고 하면 문자열로 변환함, 숫자는 사용 불가 { 1: 2, 3: 4 } { '1': 2, '3': 4 } // 변환됨 배열에선, 인덱스들을 문자열로 변환해서 사용 뭔소리냐 arr = [1, 2, 3] arr[0] // 1, 당연하게 숫자 인덱스 사용 가능 arr['1'] // 2, 문자열 키 사용 가능한 모습 Object.keys(x) // ['0','1','2'] // 키 찍어보면 문자열로 출력됨 타입 스크립트에선 이러한 어지러운 상황을 개선하고자, 숫자(number) 키 허용, 문자열 키와 다른 것으로 인식함 (이는 버그를 잡기 위한 타입 스크립트 코드) 인덱스 시그니처 에 number를 사용하기 보다는 .. TIL/TypeScript 2022. 7. 26.

• [TypeScript]이펙티브 타입스크립트 Item 11~15 item11 타입이 명시된 변수에 객체 리터럴 할당할 때 타입 속성 체크함 => interface Menu { price: number; } const a: Menu = { price: 100, name: 'a 세트' }; // 에러 발생 const obj = { price: 100, name: 'a 세트' }; const a: Menu = obj; // 정상 const a: Menu = { price: 100, name: 'a 세트' } as Menu; // 정상 1번째는 속성체크를 통해 오류를 잡아낸 모습 2번째는 앞서 나온 구조적 타이핑, 즉 obj가 Menu 타입의 부분 집합을 포함하므로 a에 할당 가능하고 타입 체커도 통과 즉 오류 없다 판정 3번째는 단언문을 사용해서 속성 체크를 피해간 모습 .. TIL/TypeScript 2022. 7. 24.