1. 배경: 외부 API를 호출하는 서비스 구조NestJS 기반 서버에서 외부 API를 호출하는 구조를 고민하던 중,처음에는 각 서비스마다 `axios`를 직접 호출하고 에러를 처리하는 방식으로 시작했습니다. @Injectable()export class UserService { constructor(private readonly httpService: HttpService) {} async getUser(userId: string) { try { const res = await firstValueFrom(this.httpService.get(`/user/${userId}`)); return res.data; } catch (err) { ..

react 코드를 작성하던중 하나의 컴포넌트에서 자주 사용되는 로직을 분리하게 되었다. 이때 부모에서 부터 이벤트를 받아서 자식에서 사용하고 있었기 떄문에, 부모의 위치에 있는 값을 가져올 필요가 존재했다.자바스크립트의 특성상(렉시컬 스코프) 선언된 위치의 값을 가져오는것은 매우 쉽게 할 수 있었으나 이를 불러오는곳에서첨부하고자 하였을때 어떻게 해야할까 고민하게 되었다. 이때 children을 React에서 제공하는 Children객체의 map 을 통해 새로운 자식을 만들며, 필요한 변수값을 다시 넘겨주는 방식을 떠올리게 되었다.위의 코드를 작성해보면export function Test({children}) { return {Children.map(children, (child) => ..

filter 함수의 경우, 특정 어레이에, 내가 predict한 함수가 트루 값을 반환하면 이 값만 남겨주는 함수이다.결국, 앞에서 했던 map과 같은 수집하기와는 다르게, 거르는 역할을 하게 된다. 이를 코드로 구현해보면function _filter(obj, predicate) { const result = []; const keys = _keys(obj); for (let i = 0, len = keys.length; i  위의 코드를 보면 이전의 코드에서 중복되는 로직이 반복되는것을 확인 할 수 있었다.이를 추상화 하여 처리한뒤, false 한 값만 반환하도록 하는 로직을 가지는 reject함수와, truthy한 값만 남겨주는 compact 함수를 구현해보자.여기서 for 부분이 공..

자바스크립트에서 매우 자주사용되는 메서드인 map함수를 이용해서 어떤걸 만들수 있는지 공부 할 수 있었다.  map함수의 경우 결국 A 라는 데이터를 특정 행위를 통해 B라는 경우로 변환해주는 함수이고, 이를 수집하기라고 말할 수 있다.맵 메서드의 기본적인 구조에 대해 알아보자.               이러한 구조를 타고 동작하는 map 함수를 먼저 구현하도록 하자 .function _map(arr: T[], mapper: (item: T) => R): R[] { const result: R[] = []; for (let i = 0; i 이러한 간단한 구조의 map함수를 만들었다 이 함수에서, values, 와 pluck 함수를 구현해보자,values함수의 경우,인덱스의 값을 가져와야 한다.fun..

자바스크립트에서 사용 할 수 있는 go, pipe 함수  pipe 함수를 보며, c/c++ 에서 파이프를 통해 데이터를 전달하는 것을 떠올리게 된다.javascript 에서 함수를 연속적으로 실행해주는 것을 pipe함수로 사용하게 되는데이를 구현 해보자. pipe함수의 경우, 전달받은 매개변수를 다음 함수로 전달해주는 역할을 한다 여기서 매번 인자로 들어온 함수들을 매번 실행 시키고, 마지막 남은 함수를 반환하면 된다.코드로 표현해보면function _each(arr, iter) { for (let i = 0; i { init = apply(init, item); }); return init;}function pipe(...fns) { return function (arg) { retu..

cra 없이 react를 설치 하고자 할 때 절대경로 사용시 에러가 발생했다. { "compilerOptions": { "target": "es2021", "lib": [ "dom", "dom.iterable", "esnext" ], "baseUrl": ".", "paths": { "@/*": [ "src/*" ], }, "outDir": "./dist" }, "include": [ "src", ], "exclude": [ "node_modules" ] ... } 위와 같이 tsconfig 를 설정한 후 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: ..