소셜로그인 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 ..
오늘은 5단원인 "클로저" 를 포스팅 할 것이다. 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나지만, 사실 이번에 처음 제대로 파본다... 실행 컨텍스트에 대한 사전지식이 없으면 분명 이해가 안 갈 것이다. 마침 2단원에서 실행컨텍스트를 다뤘으니 꼭! 꼭! 보고 오길 권장한다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 ilikezzi.tistory.com 05. 클로저 클로저의 의미 및..
저번주에 숙명여대에서 Bigdata/AI Streamlit 해커톤을 진행했다. 나는 AWS 멘토로 참여하게 되어서 간략하게 후기를 써보려고 한다. 저번 인하대 해커톤 AWS 멘토로 참여했을때, 멘토진들이랑 거의 동일해서 반가웠다ㅎㅎ 이번 해커톤은 오뚜기가 후원사여서 오뚜기의 상품 판매 데이터와, 제품 리뷰 데이터를 받아서 진행했다. 해당 데이터와 생성형 AI를 활용하여 Streamlit or Cloud native app을 개발을 하였다. Streamlit에 대해서 이번기회에 처음 접하게 되었는데, Streamlit은 데이터 사이언티스트나 백엔드 개발자처럼 프론트엔드에 익숙하지 않은 사람들도 쉽게 데이터 시각화나 웹 앱을 만들 수 있도록 해주는 파이썬 라이브러리이다. 코드 몇 줄만으로도 인터랙티브한 대시..
운영중인 서비스에서 응답시간이 느려진 부분이 있어서, 이를 개선하고 싶었다. 마침 유저 구분이 필요 없고, 수정이 거의 없는 페이지라서 캐싱 전략을 사용하기 적합해 보였다! 해당 페이지에 대해 간략하게 설명하자면, 당일 새벽시간의 뉴스데이터를 전부 분석을 해서 아침 8시에 그날의 뉴스를 한눈에 정리해서 보여주는 페이지다. 따라서 유저별로 개인화가 들어가는 페이지도 아니고, 웬만해서는 수정이 이뤄지지 않는 API 이다. 그럼 바로 캐싱작업을 시작해보자. 설치 해당 프로젝트로 이동해서 필요한 패키지를 몇가지 설치해주자. npm install cache-manager cache-manager: 캐싱을 담당할 라이브러리다. npm install @nestjs/common nestjs의 CACHE_MANAGER:..
얼마 전 회사 프론트직원분께서 staging admin에서 504에러가 뜬다고 찾으셨다. 그래서 바로 staging Swagger에서 관련 API를 날려보니 다음과 같이 나왔다. 확인해보니 504 Time-out 에러가 나왔다. 이제 차근차근 해결을 해보자 ! 해결 1 - axios timeout 설정 해당 API 부분은 axios로 코드를 불러와서 파싱한 후 리턴하는 코드다. axios 할 때 일정 시간을 초과하면 504에러가 뜰 수 있다는 얘기가 있어서, 우선 time-out 시간을 늘려주기로 했다. 갑자기 504에러가 뜬 이유는 axios로 받아오는 chatGpt 관련 처리시간이 늦어진듯 하다. 그래서 timeout 을 10분으로 넉넉히 변경하였다. timeout : 600000 로컬에서 코드를 돌..
오늘은 4단원인 "콜백 함수" 를 포스팅 할 것이다. 중간에 "콜백 함수 내부에서의 this" 에 대해서 깊게 다루니 이전 포스팅인 "this" 에 대해서 필수적으로 알고 있어야 한다. https://ilikezzi.tistory.com/58 [Javascript] this_코어 자바스크립트 오늘은 3단원인 "this" 를 포스팅 할 것이다. 지난번 포스팅한 "실행 컨텍스트" 도 읽어보면 도움이 될 듯하다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅 ilikezzi.tistory.com 04. 콜백 함수 콜백 함수란? 콜백 함수는 쉽게 말해 함수 안에 함수다. 즉, 다른 함수의 인자로 전달되는 함수이다. 비동기 작업이 끝..
오늘은 3단원인 "this" 를 포스팅 할 것이다. 지난번 포스팅한 "실행 컨텍스트" 도 읽어보면 도움이 될 듯하다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 ilikezzi.tistory.com this.... '이것' 이라는 단어 그 자체로의 뜻을 가지지만, 가끔씩 어디를 가르키는건지 헷갈렸는데 이제 그 헷갈리던 this에 대해서 제대로 잡아보자. 03. this 전역 공간에서의 this 브라우저 ..
오늘 할 내용은 코드로 바로 확인 해보자. 단순히 axios로 불러온 데이터를 파싱해서 쓰려고 했는데, 모든 depth의 데이터가 나오지 않았다. 예전에도 이런적이 한 번 있었는데 이번에 또 같은 케이스여서 포스팅을 해본다. 이렇게 사진처럼 comments: [Array] 라고 나오는데 나는 그 값을 필요로해서 보고싶었다. 자바스크립트에서 객체를 콘솔에 출력하면, 기본적으로 일부 깊이까지만 출력되고, 그 이상의 깊이는 [Array]나 [Object] 형태로 간략하게 표시되는 경우가 있다. 이때 console.dir() 을 쓰면 해결 가능하다. 자주 사용하는 console.log()와 console.dir()를 비교해 보면서 뭔지 알아보자. console.log()와 console.dir() - conso..
오늘은 배열에서 중복값을 제거하는 방법에 대해서 포스팅을 해보려한다. 위 코드는 간략하게 얘기하면 투표항목을 클릭하면 하위depth의 투표 항목까지 전부 불러오는 코드중 일부분이다. 아무튼 하위항목들을 찾아서 기존dto에 push하다가 console.log 창을보니 중복된 값도 같이 쌓이고 있었다. 하위 항목 찾을 때 기존항목 if문으로 비교 후 제거하거나, 정 안되면 for문으로 돌려서 비교후 제외시켜도 되지만 Array에서 바로 처리하는 방법이 있나 궁금해서 찾아보다가 "new Set()" 이라는 방법을 찾게 되었다. new Set() - Set 객체는 자바스크립트에서 유일한 값의 집합을 표현할 수 있다. - 배열의 중복 값을 제거하려면 Set을 이용하면 정말 쉽게 할 수 있다. 사용 방법은 다음과 ..
