calendar2 님의 블로그

작은 회사의 SM 업무를 담당하게 됐는데 덕분에 다양한 형태의 이슈들을 만나볼 수 있는 경험이 되고있다. 앞으로는 머릿 속에 강렬히 남았던 이슈들을 블로그에 정리해보려고 한다.원인아이폰과 같은 Apple 생태계에서는 사진 촬영 시 기본 확장자가 heic로 저장된다고 한다. 필자는 갤럭시 유저라 전혀 모르겠지만 아마 사진 설정을 따로 하지 않을 경우 기본적으로 heic 형식으로 이미지 파일이 저장되는 것 같다. 그리고 이 확장자명 때문에 업로드한 이미지의 문제가 발생했다. 업로드 자체는 서버에 해당 이미지를 저장하기에 문제가 없었으나 사이트에서 해당 이미지를 불러올 때 이미지가 보이지 않고 깨져 나오는 현상이 발생했다.찾아보니 브라우저에서는 아직까지 heic 형태의 이미지 파일을 지원하지는 않는다고 한다...

지난번 OCP 정리에 이어 이번에는 의존 역전 원칙인 DIP에 대해 간단히 정리하겠다.정의우선, 책에 정리되어 있는 정의는 다음과 같다.자신보다 변하기 쉬운 것에 의존하던 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것의 변화에 영향받지 않게 하는 원칙 말을 굉장히 어렵게 써놨는데 쉽게 풀어서 설명하면 "구현체가 아닌 역할군에 의존관계를 가져야 한다"는 원칙이다.역할과 구현체위 말도 무슨 말인가 싶을 수 있는데, 객체지향 프로그래밍을 공부해보면 무슨 말인지 바로 이해가 될 것이다.우선, 객체지향 설계를 할 경우 다음과 같은 방식으로 진행된다.해당 기능을 담당하는 역할을 설계(인터페이스)해당 기능을 담당하는 역할을 상속받아 실제로 구현체를 구현(클래스)다음 사진을 한번 보자. 로미오와 줄리엣..

객체지향 프로그래밍을 설계할 때 아래와 같이 5가지 원칙을 지켜야한다라는 말을 들어본 적 있을 것이다.단일 책임 원칙(SRP)개방 폐쇄 원칙(OCP)리스코프 치환 원칙(LSP)인터페이스 분리 원칙(ISP)의존 역전 원칙(DIP)CS를 공부하면서 배웠을 SOLID 원칙인데 솔직히 이론적인 설명만 읽어서는 온전히 이해가 되지 않는 원칙들이 몇 개 있었다. 이번에 김영한님의 spring 강의를 들으면서 개방 폐쇄 원칙을 잘 지킨 사례를 발견하여 블로그에 기록해두려 한다.개방 폐쇄 원칙(OCP)이론적인 설명은 다음과 같다.코드의 수정에는 폐쇄되어 있지만 확장에는 개방되어 있어야 한다. 즉, 유지 보수할 때 코드의 수정은 최대한 지양하면서 확장은 용이하게 할 수 있도록 설계해야 한다. 언뜻 이해되는 듯 하면서도 ..

타입스크립트에 대한 강의도 끝났고 알아야 할 대부분의 문법들을 배웠다. 역시 강의 구성이 굉장히 좋다고 느꼈는데 단순히 타입스크립트를 적용하기보다는 JS에서 TS로 마이그레이션하는 과정을 강의에 넣은 것이 꽤 놀랍게 느껴졌다.어쨌든 제 블로그를 보신 분들을 위해 저도 마이그레이션 과정을 정리하려 한다. 이미 많은 프로젝트가 TS로 구축되어 있겠지만 아직 FE 웹 개발을 배운 지 얼마 안된 분들이나 혹은 굉장히 레거시한 환경에서 업무하신 분들의 경우 JS로 구축된 프로젝트를 TS로 변환해야 하는 경우가 있을 수 있다. 또는 프로젝트 생성을 JS로 잘못 진행했다든가. 하여튼 차근차근 따라가보자.1. 구축 환경구축 환경은 CRA + JS로 프로젝트를 생성하려 한다. CRA 의 업데이트가 중단되었고 Vite의 ..

이번에는 또 다른 유틸리티 타입인 Pick, Omit, Record에 대해 알아보자.Pick객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입 초창기 게시판을 만들 때 게시판 객체를 다음과 같이 설정했다고 가정하자. 근데 서비스를 제공하다보니 게시판에 변화가 생기면서 게시판 객체가 다음과 같이 업그레이드 되었다. 그런데 게시판 객체를 업그레이드 하고보니 다음과 같이 옛날에 작성된 글에는 태그가 없는 상태가 발견됐다. 이럴 경우 옛날 게시판과 현재 게시판 객체 두 가지를 모두 만드는 것이 아니라 Pick이라는 유틸리티 타입을 적용하면 편하다. Pick 타입 역시 맵드 타입과 인덱스드 엑세스를 활용하여 쉽게 구현할 수 있다.Omit객체 타입으로부터 특정 프로퍼티를 제거하는 타입 Pick이 특정 프로퍼티를 골..

이번에는 TypeScript에 내장된 유틸리티 타입을 알아보자.오늘 볼 유틸리티 타입은 Partial, Required, Readonly 세 가지로 전부 맵드 타입 기반으로 만들어진 타입이다.Partial특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입 전체적인 예시를 게시판으로 들어보자.우선, 다음과 같은 게시글 객체를 만들었다. 그런데 우리는 이 게시판에 임시 저장이라는 기능을 만들고자 한다.그리고 임시 저장 기능을 만들자니 내용이나 태그가 없는 상태로 글을 저장해야 하는 경우가 발생한다. 어쩌면 제목이 없는 상태로 임시 저장이 필요할 수도 있다.이때, 임시 저장을 위한 타입을 새롭게 생성하지 않고 다음과 같이 유틸리티 타입을 적용해서 해결할 수 있다. Partial 타입을 맵드 타입..

타입을 추론해주는 문법이 존재한다. 아래 코드를 살펴보자. FuncA와 FuncB라는 메서드 타입 두 개가 존재한다. 그리고 infer 문법을 사용해서 반환 타입을 추출하는 ReturnType을 만들어서, 각각 타입 A, B, C에 반환 타입을 정의해주었다. C의 경우 T 위치에 메서드 타입이 아닌 원시 타입이 들어가 never 타입이 추출된 것을 볼 수 있다.infer는 extends와 같이 사용해야 한다. T가 확장될 수 있도록 슈퍼타입이 가능한 타입을 추론해주는 역할이기에 extends infer 추론할 타입(대체로 R)로 작성하여 사용을 해준다.한 가지 예시를 더 살펴보자. 보면 extends 뒤쪽으로 Promise 타입이 들어오고 해당 Promise에 들어가는 타입이 T의 슈퍼 타입이 되도록 추..

이전 조건부 타입에서 string과 number 타입을 서로 뒤바꾸는 타입을 정의한 적이 있다.그 타입에 아래와 같이 유니온 타입을 지정하니 출력되는 타입도 유니온 타입이 되었다. 이 특징이 이번에 정리할 조건부 타입의 분산성이다.StringNumberSwitch 타입은 T에 들어온 타입이 number 타입을 확장하고 있으면 string, 그렇지 않으면 number 타입으로 변환해준다.그렇다면 T가 number | string과 같이 유니온 타입으로 되어 있을 경우 number 타입에 확장되지 않기 때문에 number 타입이 도출돼야할 것 같다.하지만, 조건부 타입의 분산 특징 때문에 타입 정의가 다음과 같이 이루어진다. 과정을 살펴보면 T에 정의된 유니온 타입이 각각 분산되어 타입 스위치가 일어나고 이..

JS 문법을 다룰 때 이런 코드를 사용한 경험이 있을거다.return a > 10 ? a * 2 : a; 삼항연산자를 이용한 분기인데, 타입에서도 이를 이용해 조건부 타입을 설정할 수 있다. type A의 경우 number 타입이 string 타입을 확장하는 경우라면 string 타입, 그렇지 않다면 number 타입으로 설정해라 라는 코드이다.대충 예시를 보여준거라 코드가 많이 낯설 수 있다. 조금 더 현실적인 객체 타입에 대해서 살펴보자. 타입 B의 경우 ObjB가 ObjA를 확장하는 타입이라면 number 타입, 그렇지 않다면 string 타입으로 정의하였다. ObjB가 ObjA의 프로퍼티를 포함하고 있으므로 ObjA의 확장 타입이고 조건이 성립하여 타입 B가 number 타입으로 정의된 모습이다...

이번에 살펴볼 것은 템플릿 리터럴 타입이다. 빈도 수가 높진 않다고 생각되는데 우선, 다음과 같이 타입을 조합해야하는 경우가 있다고 가정해보자. Color 타입에 3가지 색이 있고, Animal 타입에 3마리 동물이 있다. 그래서 색깔과 동물로 조합을 하고 싶은데 3가지씩만 있어도 9개의 타입이 생성된다.코드를 보는바와 같이 9개 적기도 힘든데, 동물이 4마리로만 늘어나도 12가지 타입으로 바뀌어 타입 정의가 상당히 힘들다. 이럴 때 사용할 수 있는 좋은 방식이 템플릿 리터럴 타입이다. 문법은 아주 쉽다. 다음 코드와 같이 작성해주면 두 타입을 결합한 새로운 타입이 생성된다. 우선 문법 자체는 굉장히 쉬우니 익히는데는 어렵지 않을 것 같다. 다만, 실제로 사용할 경우가 많이 있을지는 잘 모르겠다.참고자료..