소셜로그인 1편에 이어서 바로 2편을 포스팅하려 했는데 refresh_token과 JWT 전략에 대해서 이것저것 머리싸매면서 고민하느라 늦어졌다.. 정말 다양한 JWT 전략과 고민할 사항이 많았다. 한 계정으로 여러 디바이스에서 로그인을 할 수도 있고, access_Token 만료시 refresh-API 실행 타이밍을 백엔드에서 만료를 체크해서 할 지, 아니면 프론트엔드에서 access_Token "exp"로 만료 체크해서 API 요청할지 등등... 바로 본론으로 들어가기전에 소설로그인 1편을 꼭 보고오시길 ! https://ilikezzi.tistory.com/64 [Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 1 진행중인 사이드 프로젝트에서 기획이 끝나서 화면기획서가 나오고, 디자인쪽도..
진행중인 사이드 프로젝트에서 기획이 끝나서 화면기획서가 나오고, 디자인쪽도 피그마로 UI/UX 디자인을 시작하고, 개발쪽도 DB ERD 설계, 서버설계, Stg서버 등등.. 기본적인 개발하기 위한 준비를 마치고 온보딩, 메인페이지 부터 드디어 Api 작업에 들어갔다. 막상 개발은 큰 어려움이 없을텐데, 역시나 처음해보는 기획이나 DB/서버 설계에서 시간이 많이 걸리고, 제대로 처음 해보는거라서 어렵더라.. 따로 Local 이메일 로그인은 제외하고 구글 / 카카오 / 네이버 로그인 세가지를 넣기로 했다. NestJS에서 소셜 로그인을 붙히기 위해서는 순서에 대한 이해가 필요하다. 하나씩 차근차근 살펴보자. 소셜 로그인 순서 내가 이해한 순서를 이해하기 쉽게 그림으로 만들어 보았다. (디자인 감각 Zero ..
운영중인 서비스에서 응답시간이 느려진 부분이 있어서, 이를 개선하고 싶었다. 마침 유저 구분이 필요 없고, 수정이 거의 없는 페이지라서 캐싱 전략을 사용하기 적합해 보였다! 해당 페이지에 대해 간략하게 설명하자면, 당일 새벽시간의 뉴스데이터를 전부 분석을 해서 아침 8시에 그날의 뉴스를 한눈에 정리해서 보여주는 페이지다. 따라서 유저별로 개인화가 들어가는 페이지도 아니고, 웬만해서는 수정이 이뤄지지 않는 API 이다. 그럼 바로 캐싱작업을 시작해보자. 설치 해당 프로젝트로 이동해서 필요한 패키지를 몇가지 설치해주자. npm install cache-manager cache-manager: 캐싱을 담당할 라이브러리다. npm install @nestjs/common nestjs의 CACHE_MANAGER:..
회사에서 협업툴로 Slack을 사용하고 있는데, 각종 통계자료 몇 로그데이터를 매일 알림으로 보내주면 좋을 것 같았다. 그래서 무슨데이터를 전송해주면 좋을지 고민하다가 1.전체 유저수 / 2.가입자수 / 3.기사 조회수 / 4.언론사별 기사 발행수 / 5.댓글수 / 6.DAU / 7.WAU 해당 7가지 데이터를 보여주기로 결정했다. Slack bot을 통한 axios와 schedule를 사용해서 자동화를 시켜줄 것이다. 우선 Slack bot을 만들자. https://api.slack.com/apps/ 해당 URL에 접속하여 슬랙봇을 생성을 하고, https://api.slack.com/methods 다음 URL에서 슬랙봇의 chat.postMessage 권한을 추가해 주도록 하자. 그 후 Install..
오늘은 백엔드 개발에 있어서 필수적이라 생각하는 페이지네이션에 대해서 포스팅을 해보려고 한다. 우선 페이지네이션에 대해서 간략하게 설명하자면, 흔히 페이지수(쪽수)를 매기로 정렬할 떄 쓰이는 개념으로써 웹에서 자주 다루게 된다. 나도 마찬가지도 이번 프로젝트 개발을 하면서 페이지네이션을 상당히 많이 사용하였다. 댓글 목록 투표 목록 팔로잉 목록 차단 목록 북마크 목록 선물함 목록 포인트 내역 목록 이벤트 목록 내가 본 뉴스 목록 알림 목록 등등.. 이 처럼 거의 대부분에 목록(@GET) 에서는 페이지네이션을 사용하였다. 우선 알림쪽을 사진으로 간략하게 보자. 해당 사진은 알림 목록 쪽 사진인데, 아래로 스크롤하면서 10개씩 끊어서 로딩해서 보여주게끔 해준다. 즉, 한번에 많은 양을 로딩해서 보여주는것이 ..
벌써 일주일이나 포스팅을 하지 못했다. 개발중인 서비스 런칭일이 한달도 남지않아서 UnitTest랑 QA랑 협업업체 대응 하느라 정신이없다... 한달전에 내가 개발한 코드를 보면 왜 이렇게 짰나 어질어질하다. 그만큼 가파르게 성장하고 있다는 반증인 것 같아서 내심 뿌듯하기도 하다 ^__^ 본론으로 돌아와서 프로젝트를 하면서 자주 사용하지만 그 차이점을 제대로 모르고 사용했던게 있다. 바로 DTO 와 Interface 이다. 두개가 비슷하다고 생각해서 이 케이스에서는 둘중에 뭘 쓰는게 맞는거지? 하고 고민했던적이 많았다. 오늘 두개의 비슷한 점과 명확히 다른점에 대해 알아보고 제대로 이해를 해 볼 것이다. DTO란? 말그대로 Data Transfer Object, 계층간 데이터 교환을 위해 사용하는 객체..
요새 외부업체들과 협업이 잦아지면서 API를 연동 시키기 위해 Axios를 많이 사용하고 있다. 그래서 이 참에 Axios에 대해서 제대로 알고 사용할 겸 포스팅을 해보려고 한다. 우선, Axios란 ? Http클라이언트 라이브러리로서, 웹 애플리케이션에서 웹 API와 통신하는 데 사용되며, 웹 브라우저와 Node.js 환경 모두에서 사용할 수 있다. 1. Promise 기반 Axios는 Promise 기반으로 작성되어 있어서, 콜백 대신 .then()과 .catch() 또는 async/await를 사용하여 비동기 작업을 처리할 수 있다 . 이를 통해 비동기 작업을 처리 시, 코드의 가독성과 유지 관리성이 향상된다. 2. HTTP 메서드 지원 Axios는 다양한 HTTP 메서드 (GET, POST, PU..
오늘은 DTO 객체의 키 이름을 @Transform 데코레이터를 사용하여 바꾸는 방법에 대해 포스팅을 할 것이다. 음,, 이렇게만 얘기해서는 무슨소린지 헷갈리니 바로 예제 코드로 보자. findBookmark=[ { target_uuid: 123, name: Blanc, ... }, { target_uuid: 234, name: Jack, ... }, { target_uuid: 345, name: Scott, ... } ] ///////////////////////////// BookmarkReadDto={ @Expose() @ApiProperty() uuid: string; @Expose() @ApiProperty( name: string; ... } 변수 findBookmark : [] 와 Bookm..
오늘은 별건 아니고, 배포중인 어플에서 뉴스 댓글 목록을 불러올때 2~3초 가량 소요되서 이 코드를 리팩토링 하였다. 리팩토링은 왜 할까 ? 1. 성능향상, 가독성 향상 2. 유사한 내용이 반복될때 코드의 중복 제거 3. 새로운 기능을 추가할 때 위 세가지 이유가 제일 핵심적인 이유다. 기존 코드를 Swagger에서 돌려 보았을때 두 눈을 의심했다. 이게 목록 불러오는 @Get API를 단 한번 실행 시킨것이다.... 물론 Response값으로 다양한 값이 필요하긴 하지만 이건 말이 안된다. 이러니 목록 불러올때 2~3초 가량 로딩시간이 걸렸던 것이다. 실행된 사진 속 쿼리문을 보니 중복된 테이블에서 SELECT가 여러번 이루어 지는걸로 보아 for문을 돌면서 그 안에서 DB커넥션이 여러번 이뤄지고 있는..
NestJS에서 오늘 개발을 하다가 너무나 허무한 실수를 해버렸다. 이참에 그간 당연시 사용하고 있었던 부분에 대해서 왜 그렇게 사용을 해야만 하는지에 대해서 포스팅 해보려한다. 해당코드를 보면 Controller에서 @Param('uuid')과 @Body() 로 파라미터를 service부 한테 넘겨주고 있는 코드다. 이상이 없다고 생각해서 계속 돌려봤는데 값이 안나오고 오류도 안뜨고 해서 뭐지 싶었다..(?) 그래서 어디서 잘못됬나 확인해보려 console.log()를 하나씩 찍어가면서 확인해봤는데 어라.. console.log(uuid)의 결과가 undefined로 나왔다. 보자마자 급하게 개발하느라 뭔가 빠뜨렸구나 싶었다. 그래서 차근차근 봤더니 @Param을 사용하고 경로에다가 추가를 안해버렸던 ..
