JH 기술 블로그

서론지난 주에는 사이드 프로젝트에서 사용할 라이브러리를 선택하고 공부하는 시간을 가졌다. 이제 본격적으로 프로젝트를 세팅하고 있는 중인데, Axios를 세팅하는 김에 블로그에 정리하며 깊이 있게 공부하면 좋을 것 같아 이렇게 글을 작성한다.Axios란?Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. HTTP 요청(GET, POST, PUT, DELETE 등)을 손쉽게 처리할 수 있도록 도와주며, 주로 RESTful API와 통신하기 위해 사용된다.쉽게 말하자면, 백엔드와 프론트엔드 간의 통신을 쉽게하기 위해 존재하는 라이브러리라고 할 수 있다.설치$ npm install axios // npm$ yarn add axios // yarnAxios의 주요 특징P..

최근 진행하고 있는 프로젝트에서 초기 세팅할 때 yarn berry를 사용하기로 결정하였다. node_modules 디렉터리를 제거하고, 의존성을 의존성을 ZIP 파일 형태로 저장하며 성능을 대폭 향상 시켰다는 이야기를 듣고, 이번 프로젝트에서 적극적으로 도입해보기로 하였다. 기존에 npm과 yarn을 위주로 사용하였기 때문에 차이점을 몸소 느낄 수 있는 좋은 기회라는 생각이 든다. 우선, 패키지 매니저에 대해서 간략하게 알아본 뒤에, yarn berry 설치를 위한 가이드를 끝으로 글을 마무리해보겠다.🤔 패키지 매니저란?패키지 매니저는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이다.패키지 매니저의 주요 기능은 다음과 같다. 1. 패키지 설치 - 필요한 라이브러리를 지정된 저장..

Jotai에 대한 글을 쓰는 이유최근 사이드 프로젝트를 시작하게 되면서 상태관리 라이브러리를 선정해야 하게 되었다. 정말 다양한 상태관리 라이브러리 중에 Jotai가 눈에 들어왔다. 프로젝트 규모를 생각했을 때 jotai가 괜찮을 거라는 생각이 들어 Jotai에 대해 알아보는 글을 작성해보고자 한다.상태(state)란?리액트에서 이벤트에 의해 변경되는 동적인 값웹 애플리케이션을 렌더링 하는 데 있어서 영향을 미칠 수 있는 값상태 관리 라이브러리의 필요성React에서 제공하는 기본적인 상태 관리 방식만으로는 복잡한 애플리케이션의 상태 관리를 완전히 해결하기 어렵다. 이러한 어려움으로부터 상태를 전역적으로 관리할 수 있는 상태 관리 라이브러리의 필요성이 대두되었다. 1. 리렌더링 최적화상태 관리 라이브러리를..

도입 계기현재 재직 중인 회사에서 QA 분들이 연달아 퇴사를 하게 되어, 앞으로는 QA가 없이 개발을 진행해야 하는 상황에 직면하게 되었다.그러다보니 자연스럽게 팀 내에서는 테스트 코드를 작성하는 것에 대한 논의가 이루어졌다. 그러나 설상가상으로 우리 팀에서 작성했던 테스트코드라고는 약 2년 전에 작성했던 코드만 남아있는 상황이었다... 이러한 상황에서, E2E 테스트 라이브러리인 Cypress가 눈에 들어왔다. Cypress를 도입하는 것을 적극적으로 건의하였고, 현재 내가 cypress 환경을 구축하고 있는 중이다. 준비하면서 기록을 해두면 좋을 것 같아 이렇게 블로그에 글을 남겨둔다.Cypress 도입의 이유Cypress는 주로 엔드투엔드(E2E) 테스트에 사용되는 강력한 프레임워크로, 테스트 작성..

유틸리티 타입TypeScript의 유틸리티 타입은 코드의 가독성과 재사용성을 높여주는 하나의 도구입니다. 대표적으로 Pick, Omit, Patial, Record가 있으며, 이러한 유틸리티 타입을 통해 코드 작성과 유지보수를 더 쉽게 할 수 있습니다. 유틸리티 타입은 이미 정의되어 있는 타입 구조를 변경하여 재사용 하고 싶을때 주로 사용됩니다.  다양한 유틸리티 타입 알아보기1. PickPick은 주어진 타입에서 특정 속성만 선택하여 새 타입을 생성하는 유틸리티 타입입니다. 객체의 일부 속성만 사용할 때 유용합니다. 아래의 예제에 있는 UserName 타입은 User에서 name 속성만 선택해 새로 만들어진 타입입니다.type User = { id: number; name: string; emai..

우리는 지금까지 Provider와 Controller에 대해서 알아보았습니다. 이전 장까지 보셨다면, Controller는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 일을 담당한다는 것을 알 것입니다! 그리고 Provider는 서비스, 리포지토리, 팩토리 등과 같은 의존성을 주입(Dependency Injection)하고 관리하는 객체를 의미한다는 것도요!이번 시간에는  Express에서도 익히 봐왔던 middleware에 대해서 알아보는 시간을 가지도록 해보겠습니다.혹시 이 말이 이해가 안 되시는 분들이 있다면 이전 장을 확인해보면 좋을 것 같습니다. :) Nest.js에 대해서 알아보자 - Provider편 (tistory.com) Nest.js에 대해서 알아보자 - Provider편이전 ..

이전 장에서는 Controller에 대한 개념을 다뤄보았고, 이번에는 Provider에 대해서 다뤄볼 예정입니다.혹시 Contorller에 대한 이해가 부족하신 분들은 이전 포스트를 확인해보시면 Provider에 대한 이해에 도움이 되실 것이라고 생각합니다.Nest.js에 대해서 알아보자 - Controller편 (tistory.com) Nest.js에 대해서 알아보자 - Controller편개인적인 공부를 위해 공식문서를 읽고 저의 해석을 곁들였습니다.틀린 부분이 있다면 언제든 피드백 환영입니다.컨트롤러의 정의컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답humor12.tistory.comProvider저희는 이제 Controller는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 일을 담..

개인적인 공부를 위해 공식문서를 읽고 저의 해석을 곁들였습니다.틀린 부분이 있다면 언제든 피드백 환영입니다.컨트롤러의 정의컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 일을 담당합니다. 컨트롤러는 바로 응용프로그램에 대한 특정 요청을 받는 것으로 자신의 역할을 시작합니다. 라우팅Controller는 경로를 지정해주는 라우터라고 생각하시면 편할 것 같습니다.class 상단에 @Controller() 라는 데코레이터만 작성해주시면 Nest.js가 Controller라는 것을 알아차리게 됩니다.또한 @Controller('user')와 같이 Contorller 데코레이터 소괄호 안에 prefix를 넣으면 경로 집합을 쉽게 그룹화도 가능합니다.자세한 내용은 아래 예제와 같이 살펴보도록 하겠습니..