소셜로그인 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:..
오늘은 백엔드 개발에 있어서 필수적이라 생각하는 페이지네이션에 대해서 포스팅을 해보려고 한다. 우선 페이지네이션에 대해서 간략하게 설명하자면, 흔히 페이지수(쪽수)를 매기로 정렬할 떄 쓰이는 개념으로써 웹에서 자주 다루게 된다. 나도 마찬가지도 이번 프로젝트 개발을 하면서 페이지네이션을 상당히 많이 사용하였다. 댓글 목록 투표 목록 팔로잉 목록 차단 목록 북마크 목록 선물함 목록 포인트 내역 목록 이벤트 목록 내가 본 뉴스 목록 알림 목록 등등.. 이 처럼 거의 대부분에 목록(@GET) 에서는 페이지네이션을 사용하였다. 우선 알림쪽을 사진으로 간략하게 보자. 해당 사진은 알림 목록 쪽 사진인데, 아래로 스크롤하면서 10개씩 끊어서 로딩해서 보여주게끔 해준다. 즉, 한번에 많은 양을 로딩해서 보여주는것이 ..
벌써 일주일이나 포스팅을 하지 못했다. 개발중인 서비스 런칭일이 한달도 남지않아서 UnitTest랑 QA랑 협업업체 대응 하느라 정신이없다... 한달전에 내가 개발한 코드를 보면 왜 이렇게 짰나 어질어질하다. 그만큼 가파르게 성장하고 있다는 반증인 것 같아서 내심 뿌듯하기도 하다 ^__^ 본론으로 돌아와서 프로젝트를 하면서 자주 사용하지만 그 차이점을 제대로 모르고 사용했던게 있다. 바로 DTO 와 Interface 이다. 두개가 비슷하다고 생각해서 이 케이스에서는 둘중에 뭘 쓰는게 맞는거지? 하고 고민했던적이 많았다. 오늘 두개의 비슷한 점과 명확히 다른점에 대해 알아보고 제대로 이해를 해 볼 것이다. DTO란? 말그대로 Data Transfer Object, 계층간 데이터 교환을 위해 사용하는 객체..
오늘은 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을 사용하고 경로에다가 추가를 안해버렸던 ..
이 문제를 해결하려 최근들어 가장 머리를 쥐어뜯었던 것 같다. 이틀가량 문제해결과 포스팅준비에 시간을 쏟았다는 Tmi... 우선 어떤 상황인지부터 알아보자. 쿼리스트링으로 구독여부를 Boolean타입으로해서 해당 DTO를 파라미터로 넘겨줘야 하는 상황이었다. 처음에 보고 금방 개발할 수 있겠다 싶었는데 Boolean타입이 이상하게 찍히기 시작했다. 분명 사진처럼 Boolean으로 타입 지정해줬는데 혹시나해서 typeof 로 console을 한번 찍어보기로 했다. 어라.. dto타입이 string으로 나오는걸 확인했다. query string은 항상 string 타입으로 요청이 들어오기 때문에 transform을 통해 타입 변환을 해줘야 했다. ValidationPipe설정을 바꿔줘야지 데이터 타입이 변환..
NestJS로 개발을 하다가 값이 안나오고 Promise { }이 나와서 포스팅 해보려 한다. 정말 단순한 문제고 비동기함수 - Promise, async/await에 대해서만 이해를 하고있어도 간단히 해결 할 수 있다. 비동기 함수에 대해서는 다음에 제대로 정리해서 포스팅을 하겠다. 우선 어쩌다가 이런 상황이 발생했는지 보자. 간단한 내용말고는 service부에서 로직을 짜야하는데 포스팅을 위해 급하게 짠거니 감안하고 봐주시길. 꾸벅.. 자, 해당코드를 돌렸더니 Promise { } 오류가 발생했다. "const vote_ data =" 부분을 보면 서비스 부에서 값을 받아오는데 앞에서 async로 비동기를 선언했기 때문에 반드시 Promise로 반환한다. Promise는 3가지 상태가 있는데 pend..
