본문 바로가기
반응형

전체글474

2. 코드숨 리액트 - 2주차 1. 학습 내용 2주차의 경우 React와 그 생태계에 대해서 배우게 됐다. React & React Dom 함수형 Components & Props React Hook 선언형 프로그래밍 관심사 분리 리액트의 함수형 Components & Props를 처음 배우게 됐다. 리액트 기술을 배운것과 별개로 관심사 분리를 2주차에 바로 언급해주신게 좋았다. 특정 라이브러리 사용법 보다 더 중요한게 어떤 코드를 어디에 배치할 것인가 하는 디자인에 관한 것이라고 생각한다. 객체지향 (Object Oriented) 디자인 (Design) 그런 면에서 교육 과정 초반에 바로 코드 디자인에 관한 내용을 언급해주셔서 좋다고 생각했다. 이와 별개로 함수형 컴포넌트를 사용해 보면서 함수형 컴포넌트를 쓰는 것과 함수형으로만 코.. 2021. 12. 17.
ts-jenum 으로 응집력 있는 TS 코드 작성하기 (feat. EnumClass) TypeScript의 Enum은 딱 열거형으로서만 사용할 수 있습니다. 다른 언어에서 Enum을 Static 객체로 사용해본 경험이 있는 분들이라면 이 지점이 굉장히 답답하다는 것을 느낄 수 있는데요. Java에서 Enum을 객체로 활용하면 어떤 큰 장점을 얻게되는지는 배민 기술 블로그 를 참고해보시면 좋습니다. 저와 똑같이 답답함을 느끼신 분이 계시는지, 이미 TypeScript도 Java의 Enum과 같이 Static 객체로 Enum을 다룰 수 있도록 ts-jenum 을 만들어주셨습니다. 이번 시간에는 ts-jenum 을 이용해 응집력 있는 Enum 활용법을 소개드리겠습니다. 1. 설치 ts-jenum 은 Java의 java.lang.Enum 과 같은 사용성을 얻기 위해 제공하는 라이브러리입니다. 별.. 2021. 12. 14.
1. 코드숨 리액트 과정 회고 - 1주차 사내의 프론트엔드 팀원들과 함께 코드숨의 리액트 과정을 수강하게 되었다. 코드숨의 과정은 220만원인데 (부가세포함) 조금 자랑하자면, 사내 복지로 성장지원금(연 180만원)을 지원해서 몇몇 팀원들은 이를 활용했다. 커리어 내내 백엔드 애플리케이션을 중심으로 해서 데이터베이스 설정이나 쿼리튜닝, 서버 아키텍처 등을 위주로 해왔다. 내가 그간 해왔던 프론트엔드 개발이라고 해봐야, jQuery -> Backbone.js & Handlebar.js -> Angular 1 -> Vue.js 로 그때그때 필요한 프론트엔트 작업을 했을 뿐이다. 그래서 이 강의를 듣는다고 했을때 주변에서는 "으잉? 왜??" 라는 이야기를 하셨다. 국내에서 프론트엔드의 TDD/클린아키텍처에 관한 내용을 포함해서 알려주는 강좌가 흔하지.. 2021. 12. 8.
메세지의 템플릿 내용 단위 테스트 하기 1. 문제 서비스를 개발하다보면 특정 포맷으로 이메일을 보내거나, 문자등을 보내는 기능을 구현할때가 있다. 이를 테면 다음과 같은 경우이다. 메일/카카오톡/문자 등으로 보내는 템플릿 내용 SQS와 같은 메세지큐에 보내는 메세지 내용 비지니스 담당자가 봐야하는 로그 이런 경우 보통 메세지 내용을 검증하기가 상당히 어렵다 예를 들어 다음과 같은 sendMail 코드가 있다면 @Injectable() export class AdminService { constructor( private readonly mailerService: MailerService, private readonly htmlTemplate: HtmlTemplate, ) {} async sendMail( email: string, filePa.. 2021. 12. 5.
Mustache.js 로 이메일 템플릿 구성하기 (TypeScript) 이메일 기능 구현을 위해서 많은 고민을 하는 부분이 이메일 본문을 위한 템플릿 구성입니다. AWS SES 등 이메일 발송 자체는 이제 예전처럼 SMTP 서버 구축 등을 할 필요가 없어서 훨씬 난이도가 줄었습니다. 일반적으로 이메일의 본문은 HTML + Inner CSS로된 마크업코드를 작성합니다. 이메일 안에서는 CSS나 JS 파일 로드가 안되기 때문에 HTML 코드만으로 해결이 되어야 하는데요. 위에서 언급한 HTML 코드를 단순 문자열로만 진행할 경우 다음의 문제점들이 있습니다. html 코드에서 오타가 발생하는걸 찾을수가 없다. html 코드가 결국 문자열이기 때문에 태그가 1개 부족해도, 혹은 attribute 가 오타가 나도 IDE에선 전혀 감지할수가 없다. 렌더링 해야할 코드가 늘어나면 늘어날.. 2021. 11. 29.
TypeScript 환경에서 class-transformer 적극적으로 사용하기 요즘 같이 분산 환경이 적극적으로 도입 되고 있는 시기에는 꼭 프론트엔드가 아니더라도 백엔드 환경에서도 외부의 HTTP API를 호출하는 일은 당연한 일입니다. 그래서 HTTP API (저는 Rest API라는 단어는 선호하진 않습니다. 어차피 규약 지키고 있는 경우가 거의 없거든요) 를 통해 원격 서버에서 JSON 객체를 읽어오는 작업을 자주 하게 되는데요. 응답으로 넘어온 JSON 객체는 리터럴 객체이지 클래스의 인스턴스가 아닙니다. Axios를 비롯해서 Got 등 NodeJS & TypeScript 환경에서 자주 사용하는 HTTP API 중 어느 것도 클래스의 인스턴스를 응답으로 넘겨주진 않습니다. Spring이나 닷넷등의 다른 백엔드 프레임워크를 사용해본 분들이라면 여기서 이상한 괴리감을 느낄 수.. 2021. 11. 24.

728x90