본문 바로가기
반응형

전체글500

추천하는 WebStorm Plugin WebStorm (웹스톰)의 경우 JavaScript 개발을 목적으로한 IDE이기 때문에 기본 환경으로도 개발하는데 충분합니다. 그렇기 때문에 플러그인이 필수는 아닙니다. 다만, 좀 더 생산성있는 개발을 위해서는 적절한 플러그인을 사용하는 것을 권장합니다. 특히 일부의 플러그인들은 거의 필수제로 사용되니, 아래 플러그인들을 확인해보시고 필요한 항목들은 설치해보시는 것을 추천드립니다. 기본적인 .env, .ignore 등의 플러그인은 다 설치되어있다고 가정했습니다. 생산성에 도움이 되는 플러그인들만 작성했습니다. 테마 / 아이콘 / progress bar / power mode 등 UX에 관한 것들은 모두 배제했습니다. String Manipulation 플러그인 링크 문자열을 다루는데 여러 편의기능을 제.. 2021. 12. 22.
DataGrip 에서 SSH 터널링으로 DB 접근하기 보안상의 이유로 운영 환경의 데이터베이스에는 직접 접근하는 경우를 거의 차단합니다. 예외적인 경우 별도의 EC2 서버를 SSH 터널링을 통해 접근하는 방식을 사용하게 되는데요. 그럼 아래와 같이 로컬 PC => EC2 서버 (ssh 접근) => Database (RDS) 로 접근해야만 합니다. DataGrip에서는 이와 같이 특정 서버를 통해 SSH 터널링 접근 기능도 지원합니다. 이 설정 방법을 알아보겠습니다. 1. SSH 설정 먼저 EC2 서버로 접근하기 위한 SSH 정보를 등록하겠습니다. Use SSh tunnel을 체크하시면 우측의 ... 가 활성화 되는데 이를 클릭합니다. 그럼 SSH 팝업창이 등장하는데, 이때 + 를 클릭해서 새로운 SSH 접속 정보를 차례로 등록합니다. 사내 인프라팀등을 통해.. 2021. 12. 19.
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.

728x90
반응형