본문 바로가기

전체 글

nestjs + redis Example Repository : https://github.com/easdkr/nestjs-cachemanager-with-redis GitHub - easdkr/nestjs-cachemanager-with-redis Contribute to easdkr/nestjs-cachemanager-with-redis development by creating an account on GitHub. github.com Redis Caching official Docs : https://docs.nestjs.com/techniques/caching Documentation | NestJS - A progressive Node.js framework Nest is a framework for building e.. BackEnd/nest.js 2022. 10. 23.
Axios Wrapping 현재 프로젝트에는 전역적으로 사용하는 axios 인스턴스를 만들고, 해당 인스턴스에 request/ response 의 인터셉터를 추가한 뒤, api 호출 부분을 요청 별 함수를 만들어 export 하도록 구성되어 있다. 현재로서는 개발할 때 큰 문제점은 없었기 때문에 이런 형태의 구성으로 개발은 끝마쳤지만 의문점이 두가지 생겼다. 1. axios 인스턴스는 꼭 전역으로 애플리케이션 전체 생명주기 동안 유지되어야만 하는가? 2. 도메인별로 인터셉터 로직이 달라져야한다면 또 다른 전역적으로 유지되는 axios 인스턴스를 만들어야하는가? 이 두가지 의문점을 개선해보기 위해 axios 인스턴스를 감싸는 클래스를 만들어보기로 했다. 1. 클래스로 instance를 감싸고 생성자 함수에서 인스턴스를 create .. FrontEnd/react 2022. 10. 10.
nest.js, @nest/config, @nest/mongoose 연동 @nest/mongoose 공식 문서 를 참고하여 작성했습니다. 전체 소스코드는 github repository에서 확인 할 수 있습니다. 프로젝트에 의존성 설치 yarn add @nestjs/config @nestjs/dotenv @nestjs/mongoose mongoose env 파일 생성 .development.env DATABASE_HOST='your mongodb host' - host에 id, password, host, db 이름 까지 포함 ex) 'mongodb://{id}:{pwd}@host/{dbname} dynamic module 로드 app.module.ts import { Module } from '@nestjs/common'; import { ConfigModule, Confi.. BackEnd/nest.js 2022. 9. 28.
React 프로젝트 구조화 2 - atomic 디자인 적용의 한계와 반성 회사의 컨텐츠 관리 어드민 페이지를 react로 마이그레이션하는 프로젝트에서 컴포넌트의 구조를 atomic 디자인의 구조를 적용했었고 개발이 거의 완료되어가고 있는 이 시점에 개발 과정을 되돌아보며 반성을 해보기로 했다. 1. atomic 디자인의 도입은 현재 프로젝트의 규모에서는 올바른 선택은 아니었다. 우선 admin 페이지이기에 UI 디자인에 대한 요구사항이 없었다. 실제로 외주에서 만들어줘서 사용하고 있던 angular 로 만들어진 admin 페이지도 material UI 라이브러리를 디자인 변경없이 사용하고 있었고 마이그레이션도 React의 MUI의 컴포넌트들을 거의 대부분 변경없이 사용했다. UI 라이브러리의 기본 컴포넌트들이 필요한 대부분의 기능을 제공하다보니 atom을 정의하기가 곤란해졌다.. FrontEnd/react 2022. 9. 26.
React.forwardRef with typescript generics react-hook-form 과 mui의 컴포넌트로 form 입력 컴포넌트들을 만들던 도중 상위 컴포넌트로 부터 하위 컴포넌트로 ref 를 전달해야하는 상황이 있었다. 일반적으로 props 를 하위 컴포넌트로 전달하는 방식처럼 전달했더니 아래와 같은 warning이 발생했다 공식문서 에 따르면 key와 마찬가지로 ref는 React에서 다르게 처리하기 때문에 props 전달 방식으로는 하위 컴포넌트로 전달할 수 없다. 해당 warning을 해결하기 위해서는 warning message 에 나온 것처럼 React.forwardRef 를 사용하여 ref를 전달받을 컴포넌트를 감싸주면 된다. 컴포넌트를 React.forwardRef 로 감싸면 두 번째 매개변수로 ref 를 전달 받기 때문에 이를 통해 외부에서.. FrontEnd/react 2022. 9. 20.
flex-wrap 과 grid 프로젝트를 진행하다 화면상에 카드형태의 아이템들을 반응형으로 컨테이너의 가로길이에 따라 줄바꿈을 하기 위해서 flex-wrap 속성의 wrap 을 사용했었다. 가로길이에 따라 줄바꿈이 되긴했지만 한가지 마음에 안드는 점이 있었다. 오른쪽의 여백이 애매하게 남아 보기에 좋지 않다고 생각했다. justify-content 속성을 center로 주면 전체 아이템이 가운데로 정렬되어 왼쪽과 오른쪽 여백이 같아지지만 아래사진 처럼 가장 마지막 행에서 다른 행보다 아이템의 개수가 적은 행에서도 마찬가지로 가운데정렬이 되어 이것 또한 마음에 들지 않았다. 만들고 싶은 레이아웃을 다시 정의해보면 "카드 아이템들을 담는 컨테이너는 전체 레이아웃에서 "가운데 정렬", 각각의 아이템들은 해당하는 행 내에서 "왼쪽 정렬" 이.. Language/css 2022. 9. 17.
[8장] OCP: 개방-폐쇄 원칙 OCP(Open Closed Principle) 의 정의 소프트웨어 개체는 확장에는 열려 있어야 하고, 변경에는 닫혀 있어야 한다. 소프트웨어 개체의 행위는 "확장"할 수 있어야 하지만, 이 때 개체를 "변경"해서는 안 된다. 만약 요구사항을 살짝 확장하는 데 소프트웨어를 엄청나게 "수정"해야 한다, 그 소프트웨어 시스템의 설계가 실패한 것이다. 사고 실험 실험 예시 재무재표를 웹 페이지로 보여주는 시스템 (웹 페이지에 표시되는 데이터는 스크롤할 수 있으며 음수는 빨간색으로 출력할 수 있다.) 이 있다고 할 때 이해관계자가 다음과 같은 요청을 했다고 가정해보자 동일한 정보를 보고서 형태로 변환할 수 있어야 한다. 흑백 프린터로 출력해야 한다. 페이지 번호가 매겨져 있어야 한다. 페이지마다 적절한 머리글과.. Books/Clean Architecture 2022. 9. 15.
[7장] SRP: 단일 책임 원칙 SRP(Single Responsibility Principle) : 단일 책임 원칙 단일 모듈은 변경의 이유가 하나뿐이어야 한다. SRP와 '함수가 반드시 하나의 일만 해야한다' 라는 원칙은 다르다. Actor: 소프트웨어 시스템의 변경을 요청하는 집단 변경의 이유는 이 actor를 가리키고, SRP는 아래와 같이 재정의 할 수 있다. 하나의 모듈은 하나의, 오직 하나의 actor 에 대해서만 책임져야 한다. actor가 소프트웨어 시스템의 동작 방식이 변경 되길 원한다면, 이것이 모듈을 변경할 이유가 되는 것이다. 모듈?: 소스 파일 혹은 함수와 데이터 구조로 구성된 응집된(conhesive) 집합 단일 actor를 책임지는 코드를 함께 묶어주는 힘이 바로 응집성이다. 응집성?: 모델이 책임지는 역할.. Books/Clean Architecture 2022. 9. 8.

티스토리툴바