대파양파애비
ilikezzi

Backend dev?

Nope, 말하는 감자입니다만.
Project/SeoulSync82

[SeoulSync82] HTTPS와 SameSite로 해결한 서로 다른 도메인의 Cookie 전송 이슈

오늘은 이전에 만들었던 소셜로그인에 이슈가 생겼는데 2주정도 머리 쥐어뜯다가 해결을 해서 관련 내용을 포스팅 해보려고 한다. https://ilikezzi.tistory.com/65 [Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 2 소셜로그인 1편에 이어서 바로 2편을 포스팅하려 했는데 refresh_token과 JWT 전략에 대해서 이것저것 머리싸매면서 고민하느라 늦어졌다.. 정말 다양한 JWT 전략과 고민할 사항이 많았다. 한 계정으 ilikezzi.tistory.com 소셜로그인 전략을 어떻게 구성했는지는 위의 포스팅을 참고하길 바란다. 일단 소셜로그인 전략에 대해 간략하게 얘기해보자면, 소셜로그인 전략 1. 첫 로그인 시 access_token / refresh_token 발급 2...

Participation

[해커톤] AWS Rookie Championship 심사위원 참여 후기

올 한해 운 좋게 AWS 멘토진에 들어가게 되면서 다양한 해커톤 멘토로 참석을 했었다. 열정 넘치는 학생들과의 만남은 정말 영광스러운 경험이였다. 어찌보면 지금 개발중인 프로젝트를 하게 된 계기도 멘토링을 하면서 부족한 부분을 느껴 시작한 것이다. 2023년을 회고하며, 멘토링 활동은 나 자신의 성장에도 크게 기여했다고 생각한다. 너무나 감사하게도 AWS 이사님께서 초대를 해주셔서 지난주 금요일(29일) AWS Rookie Championship 심사위원으로 참석하게 되었다. 2023년 해커톤에서 뛰어난 결과를 낸 학생들을 초대해 발표하고 시상까지하는 자리였다 ! 장소는 AWS 본사라서 센터필드로 갔다. AWS 본사는 역시나 멋있더라.. 귀여운 스티커도 받았다..ㅎㅎ 총 12개 팀이 참여해 기능소개 및..

Programming Language/Javascript

[Javascript] 비동기의 핵심, 이벤트 루프(Event loop) 파헤치기

메리 크리스마스 🎄 크리스마스인데도 포스팅을 하는 이유는 백엔드파트 리더님과 대화중에 JS 이벤트루프를 설명해보라고 하셨는데 어버버대다가 제대로 설명을 못해서 당황했었다.. 리더님은 면접을 보러 들어가면 주니어, 시니어 상관없이 JS 이벤트 루프에 대해서 설명해보라고 질문을 던진다고 하셨다. 그만큼 JS에서 가장 기본적이고 비동기 동작원리를 알려면 무조건 알아야하고 설명을 할 수 있어야 한다. 그래서..! 내일 출근하기전에 제대로 알고 가서 설명을 드리려 포스팅을 해본다. Event Loop 시작하기에 앞서 간단히 JS에 대해 알아보자. JavaScript는 싱글 스레드 프로그래밍 언어로서, 한 번에 하나의 작업만 처리할 수 있다. 싱글 스레드인 자바스크립트의 작업을 멀티 스레드로 돌려 작업을 동시에 처..

Project/SeoulSync82

[SeoulSync82] Mysql DB에 이모지 저장하기 - Nest.JS

정말 오랜만에 하는 포스팅이다 ! 최근에 프로젝트, 회사업무, 코딩테스트 준비때매 너무 정신없이 바빴다. 프로젝트는 기획이 어느정도 나오고 한달 넘게..? 걸려서 모든 API 개발을 완료했다. 처음에는 간단하게 하려고 했는데 점점 욕심이 생겨서 API도 50개 넘게 생겨버렸다...^^ 예비군 동미참 가느라 3일 빼고 전부 달렸네.. 따흑 그래도 내꺼를 만드니깐 확실히 재밌긴하다 ! 프로젝트에서 "테마" 를 고르는 부분이있는데 각각의 테마에 이모지가 붙어있어서 해당 이모지를 "코스이름"을 만들어줄때 붙혀주기로 했다. 이런식으로 코스이름에 이모지를 붙여 줘야 한다. 그래서 API 로직을 짜고 실행을 시켰더니 에러가 나왔다. 엥 이게 뭐지 싶었다. 그래서 ChatGPT 와 구글링을 해봤다. 이모지를 저장하려면..

Web/TypeOrm

[TypeOrm] loadRelationCountAndMap() - 관계된 데이터의 갯수를 쉽게 세는 방법

회사에 백엔드파트 리더로 전 야놀자 리더분께서 오셨다. 오셔서 코드품질과 성능개선에 대해서 설명해주시는데, 그동안 내가 쓰레기같은 코드들만 빨리 짜고 있었구나 싶었다..🥲 그래서 요새는 기존 코드들을 하나씩 리팩토링에 들어가고있다. TypeOrm을 좀 효율적으로 잘 쓰자고 강조하셨다. 그래서 오늘은 TypeOrm의 loadRelationCountAndMap() 메서드에 대해서 포스팅을 해보려한다. 우선 기존 코드를 먼저 확인해보자. 기존 Code 사진속 코드에 대해서 설명을 하자면 투표 댓글 작성 API 인데, 존재하지 않는 투표거나, 종료된 투표가 내가 참여한 투표가 아니면 댓글을 못달게 에러를 return하는 로직이였다. vote Repository / voting Repository로 두번 DB C..

Web/NestJS

[Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 2

소셜로그인 1편에 이어서 바로 2편을 포스팅하려 했는데 refresh_token과 JWT 전략에 대해서 이것저것 머리싸매면서 고민하느라 늦어졌다.. 정말 다양한 JWT 전략과 고민할 사항이 많았다. 한 계정으로 여러 디바이스에서 로그인을 할 수도 있고, access_Token 만료시 refresh-API 실행 타이밍을 백엔드에서 만료를 체크해서 할 지, 아니면 프론트엔드에서 access_Token "exp"로 만료 체크해서 API 요청할지 등등... 바로 본론으로 들어가기전에 소설로그인 1편을 꼭 보고오시길 ! https://ilikezzi.tistory.com/64 [Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 1 진행중인 사이드 프로젝트에서 기획이 끝나서 화면기획서가 나오고, 디자인쪽도..

Web/NestJS

[Nest.JS] 구글, 네이버, 카카오 소셜로그인 구현 - 1

진행중인 사이드 프로젝트에서 기획이 끝나서 화면기획서가 나오고, 디자인쪽도 피그마로 UI/UX 디자인을 시작하고, 개발쪽도 DB ERD 설계, 서버설계, Stg서버 등등.. 기본적인 개발하기 위한 준비를 마치고 온보딩, 메인페이지 부터 드디어 Api 작업에 들어갔다. 막상 개발은 큰 어려움이 없을텐데, 역시나 처음해보는 기획이나 DB/서버 설계에서 시간이 많이 걸리고, 제대로 처음 해보는거라서 어렵더라.. 따로 Local 이메일 로그인은 제외하고 구글 / 카카오 / 네이버 로그인 세가지를 넣기로 했다. NestJS에서 소셜 로그인을 붙히기 위해서는 순서에 대한 이해가 필요하다. 하나씩 차근차근 살펴보자. 소셜 로그인 순서 내가 이해한 순서를 이해하기 쉽게 그림으로 만들어 보았다. (디자인 감각 Zero ..

Programming Language/Javascript

[Javascript] 클로저_코어 자바스크립트

오늘은 5단원인 "클로저" 를 포스팅 할 것이다. 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나지만, 사실 이번에 처음 제대로 파본다... 실행 컨텍스트에 대한 사전지식이 없으면 분명 이해가 안 갈 것이다. 마침 2단원에서 실행컨텍스트를 다뤘으니 꼭! 꼭! 보고 오길 권장한다. https://ilikezzi.tistory.com/55 [Javascript] 실행 컨텍스트_코어 자바스크립트 저번에 포스팅한 "데이터 타입" 에 이어서 다음 챕터인 "실행 컨텍스트"를 포스팅 할 것이다. https://ilikezzi.tistory.com/52 [Javascript] 데이터 타입_코어 자바스크립트 계획했던대로 자격증 취득도 다 ilikezzi.tistory.com 05. 클로저 클로저의 의미 및..

Participation

[해커톤] 숙명여대 Bigdata/AI Streamlit 해커톤 멘토 참여후기

저번주에 숙명여대에서 Bigdata/AI Streamlit 해커톤을 진행했다. 나는 AWS 멘토로 참여하게 되어서 간략하게 후기를 써보려고 한다. 저번 인하대 해커톤 AWS 멘토로 참여했을때, 멘토진들이랑 거의 동일해서 반가웠다ㅎㅎ 이번 해커톤은 오뚜기가 후원사여서 오뚜기의 상품 판매 데이터와, 제품 리뷰 데이터를 받아서 진행했다. 해당 데이터와 생성형 AI를 활용하여 Streamlit or Cloud native app을 개발을 하였다. Streamlit에 대해서 이번기회에 처음 접하게 되었는데, Streamlit은 데이터 사이언티스트나 백엔드 개발자처럼 프론트엔드에 익숙하지 않은 사람들도 쉽게 데이터 시각화나 웹 앱을 만들 수 있도록 해주는 파이썬 라이브러리이다. 코드 몇 줄만으로도 인터랙티브한 대시..

Web/NestJS

[Nest.JS] Nest.JS에서 cache-manager를 활용한 캐싱 방법

운영중인 서비스에서 응답시간이 느려진 부분이 있어서, 이를 개선하고 싶었다. 마침 유저 구분이 필요 없고, 수정이 거의 없는 페이지라서 캐싱 전략을 사용하기 적합해 보였다! 해당 페이지에 대해 간략하게 설명하자면, 당일 새벽시간의 뉴스데이터를 전부 분석을 해서 아침 8시에 그날의 뉴스를 한눈에 정리해서 보여주는 페이지다. 따라서 유저별로 개인화가 들어가는 페이지도 아니고, 웬만해서는 수정이 이뤄지지 않는 API 이다. 그럼 바로 캐싱작업을 시작해보자. 설치 해당 프로젝트로 이동해서 필요한 패키지를 몇가지 설치해주자. npm install cache-manager cache-manager: 캐싱을 담당할 라이브러리다. npm install @nestjs/common nestjs의 CACHE_MANAGER:..