Nest.js 카카오 REST API 로그인 구현하기 | access token, refresh token 이전 게시물 access token, refresh token 토큰 기반 인증 방식 | JWT, HTTP header카카오 로그인을 구현하면서 토큰 기반으로 로그인 상태를 유지시키는 기능을 구현해보려고 합니다. 이전에는 계속 세션 기반으로만 직접 구현해 봤고, 토큰 기반으로는 이미 구현된 로직을 활kyung-a.tistory.com 이제 토큰 개념을 알았으니 카카오 로그인 API를 활용해서 로그인을 진행하고 자체 토큰을 발급해서 로그인 상태를 유지하는 로직을 짜보려고 합니다. 이 전에 제 고민들을 먼저 나열해 볼까 합니다(카카오 API 시작하기에 대한 내용은 다루지 않고, 비즈니스 로직만 다루겠습니다) 구현 하면서 했던 고민카카오 측에서 액세스, 리프레시 토큰을 발급해 주는데 내가 따로 발급을 할 필요.. access token, refresh token 토큰 기반 인증 방식 | JWT, HTTP header 카카오 로그인을 구현하면서 토큰 기반으로 로그인 상태를 유지시키는 기능을 구현해보려고 합니다. 이전에는 계속 세션 기반으로만 직접 구현해 봤고, 토큰 기반으로는 이미 구현된 로직을 활용했던 경험밖에 없었습니다. 그래서 토큰 기반으로 구현을 하다 보니 왜 액세스 토큰을 저장 안 해도 되는 거지?라는 의문이 들더라고요. 지금은 로직을 다 구현한 상태인데, 다 구현하고 생각해 보니 그냥 내가 비즈니스 로직만 알았고, 인증 방식의 개념 정의를 몰라서 생긴 의문이었던 것 같더라고요... 3년 전에 한번 공부했던 적이 있었는데.. 또또또 다 잊고 말았지 뭐야뭐야... 그래서 다시 한번 상기 겸! 블로그에 정리합니다. 세션 기반 vs 토큰 기반세션 기반사용자가 로그인할 때 서버에서 고유한 세션 ID를 생성해서 이를.. Nest.js 시작하기 Nest.js란?Node.js 기반의 TypeScript용 백엔드 웹 프레임워크. 제어 역전성을 가지는 프레임워크적 성향이 강하다제어 역전성이란?객체의 생명 주기, 메서드의 제어를 모두 외부에 위임하는 설계 원칙애플리케이션의 제어 책임이 프로그래머에서 프레임워크로 위임되므로, 개발자는 핵심 비즈니스 로직에 더 집중할 수 있다. Nest.js는 java spring, angular의 영감을 받았다 (어쩐지 겁나 비슷하드라) 장단점[장점]일관된 API구조화된 아키텍처 (Provider, Controller, Module)CRUD 컨트롤러, 서비스, 유닛 테스트, DTO, 엔티티 정의까지 한방에 만들어주는 CLI완벽한 타입스크립트 지원[단점]러닝 커브가 있음. 앵귤러 같다고 생각하면 된다 (앵귤러는 생각보다 .. Jenkins와 Docker를 이용한 Next.js 프로젝트 배포 어느 정도 개발 짬바가 쌓이면(그래봤자 3년인데 ㅎㅋ) 처음부터 내가 만들고 배포를 하는 과정은 생각보다 쉽습니다. 가장 어려운 건 이미 모든 게 구축된 상황에서 내가 중간에 투입돼서 추가 개발할 때, 레거시 코드를 개선해야 할 때, 기존 프로세스를 그대로 유지하고 무언가를 해야 할 때 등등.... 내가 중간에 하게 되었을 때가 가장 힘들고 어렵습니다.특히나 아직 주니어이기 때문에 제가 잘 모르는 분야인데, 심지어 내가 알고 있는 3~4가지 방법이 안된다면 정말 멘붕입니다. 바로 이번 배포 과정이 그랬습니다. 저는 지금까지 제 개인 프로젝트를 배포한 경험만 있었고, 늘 해당 원격 서버에 프로젝트를 clone해서 pm2로 프로젝트를 무중단 상태로 만들었습니다. 거기에 최근은 github actions를 이.. 앵귤러 angular 핫 리로드, 빌드 시간 개선 (HMR) 프로젝트 스펙angular : v9.1node : v16.17프로젝트 번들 크기 : 335GB 예상 앵귤러가 느린 이유?양방향 데이터 바인딩과 변경 감지 매커니즘을 사용하는데 이는 특히 대규모 애플리케이션에서는 성능 오버헤드가 될 가능성이 매우 큼변경이 감지되면 모든 구성 요소를 확인하기 때문에 비효율적꼭 앵귤러 탓만이 아니라 프로젝트 규모가 너무 큰게 1순위일수도 있음오래된 버전 9라는 부분도 무시 못함 시도해본 것들angular.json에 "aot" true로 변경효과 없었음package.json 시작 명령어에 --source-map=false 추가해당 명령어는 브라우저가 번들된 자바스크립트 코드를 원래의 소스 코드(TypeScript)와 연결해 디버깅을 쉽게 해준다이걸 false할 경우 브라우저에서.. 디자인 시스템 세팅하기 | 디자인 시스템 구축하기 - 1 디자인 시스템은 왜 필요할까?구글에 디자인 시스템이 필요한 이유를 검색하면 매우 많은 내용들이 검색됩니다. 제가 생각하는 디자인 시스템이 필요한 이유는 6가지입니다편리한 컴포넌트 재사용서비스의 브랜드성 확보일관된 디자인독립적인 관리명확한 UI 로직, 컴포넌트 분리개발자와 디자이너의 효율적인 커뮤니케이션 상승물론 그 외에 다양한 이유가 더 있습니다. 근데 저는 이 6가지가 디자인 시스템을 구축해야 하는 이유에 엄청난 근거가 된다고 생각합니다. 물론 이제 막 시작한 스타트업에서 디자인 시스템을 갖추기란 시기상조일 수 있다고 생각합니다. 그래서 많은 스타트업 개발팀은 UI 컴포넌트를 한땀한땀 만들기보다는 유명한 UI 라이브러리를 사용하고 이걸 조금씩 커스텀해가며 씁니다. 하지만, 좀 더 우리 서비스의 브랜드를.. useCallback의 오남용 그동안 React 내에서 함수, 또는 값을 의미하는 로직을 쓴다고 하면 useMemo, useCallback hook을 쓰는게 습관처럼 되었습니다그러나 이번에 FSD 아키텍처로 리팩토링 해보면서 props로 넘겨야하는 값들이 많아졌습니다export async function fetchData( menuType: string | undefined, reviews: IReview[] | null, mapData: IMapData | undefined, cafeDataRef: { current: ISearchData[]; }, setMarkers: React.Dispatch>, clusterer: IClusterer | undefined, navigate: NavigateFunction, .. 프론트엔드 FSD 아키텍처 적용하기 | Map Service 구축하기 - 3 사이드 프로젝트인 myCafe에서 현재 모바일용 라우트도 파서 작업하고 있고, 기능이 하나둘씩 늘어가고 있는 중입니다프론트엔드에게 좋은 로직이란 무엇일까?라는 고민을 늘 하는데요. 사실 정말 정답이 없는 분야이고, UI와 엮여있다 보니, 마냥 이상향을 쫓기란 쉽지 않은 영역이라고 생각합니다. 그렇다 보니 점점... 관심사 분리도 모호해지고, 기능 분리도 모호해지고, 상태 분리도 모호해지고... 모호함의 연속을 모호하니까~라며 내버려두다가는 진짜 똥 될 수 있는데요(?) 아무튼 정말 어려운 게 프론트엔드의 클린 코드라고 생각합니다이전에도 FSD 아키텍처를 적용해볼까 하다가 개념이 굉장히 크길래(?) 아직은 적용할때가 아니라고 생각해서 일단 기본틀만 잡아놓고 기능구현부터 했습니다. 이젠 공통된 부분이 점점 .. 이벤트 리스너(event listener)를 제거 해야하는 이유 React 개발을 하다 보면 useEffect문 안에 작성한 이벤트 리스너를 제거해줘야 하는 경우가 있습니다 useEffect(() => { const handleBeforeUnload = () => { console.log("액션") }; // 이벤트 리스너 등록 window.addEventListener("beforeunload", handleBeforeUnload); // 컴포넌트 언마운트 시 이벤트 리스너 제거 return () => { window.removeEventListener("beforeunload", handleBeforeUnload); }; }, []);이런 걸 클린업이라고 하고, 메모리 누수 방지라는 개념은 알고 있었습니다.. aws EC2 인스턴스 유형 변경 및 github action을 이용한 자동 배포 | Web IDE 구축하기 - 7 현재 프로젝트는 aws EC2를 이용하여 배포하고, 변경 사항이 있을때마다 해당 서버에 접속해 git pull을 받아 다시 반영하는 형태였습니다. 여기서 늘 문제점이 front 코드가 원격 서버에서는 build가 되지 않는 문제가 있었습니다. 이전에도 이슈에 대해 언급을 한적이 있었는데 이유를 알게되었습니다. 바로 메모리 부족으로 JavaScript heap out of memory 이슈였습니다. 초기에 프리티어를 쓰려고 t2.micro를 사용했었는데 t2.micro같은 경우에는 메모리가 1GB밖에 안되는거였습니다. 사실 하드웨어 지식이 부족한 저인데, 이전에 사이드 프로젝트 백엔드 팀원분이 프리티어는 구멍가게 수준이다라는 말을 왜 했는지 이제서야 이해가 가더라고요... 사실상 하나의 기능만 있는 게시판.. Socket.io 오버헤드 최적화하기 | Web IDE 구축하기 - 6 제가 개발한 Web IDE 서비스는 Socket을 통해 클라이언트의 코드를 받아 실시간으로 테스팅해 결괏값을 반환해주고 있습니다. 여기서 제가 발견한 한가지 문제점은 액션을 취하지 않아도 polling이 뜨면서 불필요한 요청이 많아지는 것입니다. 이런 불필요한 요청이 많아지면 오버헤드가 과도하게 발생될 수 있고, EC2 리소스 비용에 영향을 끼치는 것 같아 리팩토링을 해보려고 합니다 HTTP polling 요청이 많이 발생하는 이유최초 접속 시 http polling이 발생하는 이유socket.io는 초기 핸드쉐이크 과정을 거치는데, 웹소켓을 사용하여 연결을 시도합니다. 클라이언트에서 웹소켓 사용이 가능하다면 socket.io가 웹소켓으로 업그레이드 하는 초기 연결 단계에서 long polling방.. React Query와 Redux의 차이, 장단점 요근래 몇 없는 면접이지만, 두 라이브러리를 써왔어서 그런지 늘 받던 질문입니다. 정확히는 Redux를 써보다가 React Query를 쓰게된 이유가 무엇인가요? 였는데, 다시한번 두 라이브러리의 차이점을 고찰해보려고 합니다이전에 제가 처음으로 React Query를 사용했을때 블로그 글이 있어서 링크 남깁니다https://kyung-a.tistory.com/40 React Query란?서버 상태를 패칭, 캐싱, 동기화, 업데이트 하는 작업을 쉽게 해주는 라이브러리저는 React Query가 Tanstack (오픈 소스 소프트웨어) Query로 되기 전에 사용했습니다둘 차이점은 무엇이지? 했더니 원래부터 같은 회사의 라이브러리였던 것 같고 단지 v4 버전이 나오면서 이름을 바꾼 것 같습니다제가 Reac.. 이전 1 2 3 4 5 다음
