Express에서 Nest로 마이그레이션 중, 예상치 못한 오류가 생겼다.프록시 부분을 제일 마지막에 진행하게 되어서 마이그레이션 테스트 중, 웹에서 400 Bad Request가 뜨는 것. ping을 날려보면 서버는 잘 켜져 있다. data form이 잘못 전달된건가 하고 프론트에서 Axios 세팅을 수정해보던 중… “Express에선 잘 되더니, Nest로 마이그레이션하니까 안 되는 거야? 프론트는 그대로인데 왜?”정확한 에러 상황 파악하기 NestJs 기반의 서버 앞단에 Gateway(proxy server)가 있고 프론트에서 /login 경로로 POST 요청을 Gateway로 보낸 후, Gateway가 http-proxy-middleware를 통해 이 요청을 NestJS서버의 /login endp..

요즘 실무에서 node.js express를 사용하여 백엔드 역할까지 하고 있는데 그 중 이슈를 해결한 부분에 대해 깊이 파보려 한다. 개인적으로 실무에서는 이해 없이 구현을 해버리는 경우가 많아서 아쉬움이 큰데, 이렇게 짚고 넘어감으로써 넓게 이해해보고 싶었다. 이슈 내용파일 이름에 UTF-8 문자가 포함되어 있으면 파싱을 실패하는 이슈 원인Multer has nothing to do with it, Busboy has changed something. 꽤 모듈을 파고 파고 들어가야하는 문제였다. express ➡︎ multer ➡︎ busboyexpress의 multer 미들웨어가 의존하고 있는 busboy라는 모듈 때문인데, 해당 모듈의 속성 중 `defParamCharset`의 Default가 `..

엑셀 데이터를 바이너리로 전달해드릴거에요. 엑셀 데이터를 바이너리로..? 사수분께서 엑셀 파일로 변환된 데이터를 바이너리로 전달해준다고 하셨다. 구현하면서 배운 부분이 많아, 해당 부분을 공유하고 싶었어서 이 기회로 더욱 깊이 공부해보고 정리해보았다. 예를 들어 간단한 설문조사 결과가 담긴 데이터를 관리하는 사용자가 데이터를 출력하기 위해 Excel 파일을 필요로 한다고 가정한다. 사용자는 내보내고 싶은 결과를 선택할 수 있어야하고 해당 데이터를 서버로 요청을 보내고, 응답으로 Excel 파일을 다운 받을 수 있어야한다. 이때 응답을 바이너리 데이터로 받는다는 말이다. 어떻게 해야할지 천천히 알아보자. Blob : Binary Large Object 하나의 Entity로서 저장되는 바이너리 데이터의 모임..

Axios Interceptors로 내가 필요한 부분을 잘 반영할 수 있었고 성능의 향상도 이끌었다. 내가 느낀 장단점을 알려주고 싶었고 가상 페이지를 예시로 인터셉터 기능을 설명해볼까한다. AXIOS Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. 동형 애플리케이션 isomorphic application 동형성(isomorphic). 즉, 동일한 형태. 웹 개발에서 동형 애플리케이션은 코드가 서버와 클라이언트 사이드에서 ..

어제 test repo에 27번 시도 끝에 성공했다고 신난 나머지 프로젝트 레포에 그대로~ 복붙했다가 3시간 걸린 이야기..를 풀어보겠다. 이전 포스팅의 마지막 줄에 내가 써놓은 멘트에 내가 당했다..! 2023.11.11 - [Problem Drilling] - Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm Github Action를 사용해서 테스트 자동화를 해보게 되었다. 우선 Github에 있는 node.js.yaml 템플릿으로 어찌저찌 구현하다가 pnpm 이라는 난관.. 그리고 working-directory 쪽에서도 헤맸고. 전혀 다른 곳에서 nami-socket.tistor..

Github Action를 사용해서 테스트 자동화를 해보게 되었다. 우선 Github에 있는 node.js.yaml 템플릿으로 어찌저찌 구현하다가 pnpm 이라는 난관.. 그리고 working-directory 쪽에서도 헤맸고. 전혀 다른 곳에서 테스트되기도 했다. 그래도 처음인데도 몇 시간내로 바로 구현했고 27번의 시도만에 성공했다. 이 과정을 공유하고 내가 쓴 워크플로우도 공유하겠다! Github Actions Github Actions는 repository에서 바로 소프트웨어 개발 workflow를 자동화하여 실행할 수 있다. 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼! 레포에 대한 모든 PR을 build 및 테스트하는 workflow로 만들거나 병합된 PR을 프로덕션..

프로젝트에 쓰이는 MIT 라이센스를 무의식적으로 "다들 이걸로 세팅하던데..."하고 업로드 하려는 스스로를 보고 아차 했다! 오픈소스 라이센스를 고를 때 고려해야될 방법과 가장 흔히 쓰이는 MIT 라이선스는 무엇인지도 알아보고 만약 라이선스를 넣지 않을 경우엔 어떻게 되는지도 알아보겠다! 저작권? Copyright 저작권은(Berne 협약 이후) 저작자가 저작물을 만들 때 자동으로 생성된다. 모든 저작물은 저작권에 의해 보호되며, 저작권 보유자에게 저작물에 대한 독점적인 권한이 부여된다. 따라서 당신의 저작물(소스 코드, 텍스트, 이미지, 기타 미디어 등)을 다른 사용자가 사용할 수 있게 하려면 그들에게 라이선스를 부여해야 한다. 라이선스 License 특정 권리를 실행하기 위해 자격이 있는 기관으로부터..

Vite로 TypeScript + React 프로젝트 세팅을 하던 중 pnpm run dev 를 사용하여 로컬 서버를 실행했을 땐 잘되었는데 빌드를 하고 배포 파일(dist)에 저장된 정적파일은 404 오류가 떴다. 백엔드 분께서 배포 파일을 확인해달라고 하셔서 확인해보았는데 dist폴더 내 assets폴더(dist/assets) 안에 있는 파일들을 읽어내지 못했고 경로 설정의 문제가 있음을 확인했다! 절대경로로 되어있는 파일들을 상대경로로 바꿔주어야 했다. 그런데 dist 파일의 경우 수동적으로 상대경로를 설정해주어도 빌드를 실행하면 어차피 똑같이 절대경로로 된다. 그렇기에 빌드시 적용되는 Default Path로 `/`로 되어있는 것 같은데 이것을 `./` 이렇게 바꿔주고 싶어서 Vite config..