티스토리

Übermensch Dev

검색하기

블로그 홈

Übermensch Dev

cksxkr5193.tistory.com/m

철학 학사의 개발블로그

구독자: 5

방명록 방문하기

주요 글 목록

런타임을 고려해 타이머 구현하기 0.TL;DR Next.js에서 setInterval을 동작시키니, 오차가 누적되는 현상을 발견 Next.js가 node.js 환경을 전제로 구현된 프레임워크라는 점을 원인으로 추측 기본적인 오차 누적 문제는 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현해 해결 비활성화 문제는 탭 비활성화 시간 기록 -> 재활성화 시, 기록한 시간을 기반으로 남은 시간 재계산 1. Why? 나는 핀테크 프로젝트 에서 회원관리 및 보안 처리를 담당했는데, 그 중에서 아래의 타이머 부분에 setInterval을 사용했다. 에서 setInterval을 사용한 글을 보고 왔다면 알겠지만, Js의 setInterval은 정확하게 동작하지 않는 문제가 있기 때문에 이를 고쳐보고자 한다. 2. 뭐가 문젠데? 우.. 공감수 0 댓글수 0 2024. 1. 29.
로그인 여부에 따른 접근 제한 처리하기 0.TL;DR 로그인 여부에 따라 접근제한 처리를 해야했음 우선 하단 Navbar에 검증 로직을 넣어 로그인 상태에 따라 리다이렉트 처리 이후 쿠키에 담긴 Refresh Token의 여부를 확인하고 곧바로 리다이렉트 하도록 개선 1. Why? 프로젝트 을 진행하며, 로그인 여부에 따라 접근제한 처리를 할 필요가 있었다. 로그인을 완료한 유저 메인 페이지를 비롯한 다른 페이지 접근 가능, auth 관련 페이지 접근 불가능 로그인을 하지 않은 유저 splash & auth 관련 페이지만 접근 가능, 나머지 페이지들 접근 불가능 2. How? 처음 떠올린 방법은 Layout에 검증 로직을 넣는 것이였다. 장점 모든 페이지에 손쉽게 접근 제한 처리를 할 수 있다. 관리도 쉬워진다. 단점 Layout에 useEf.. 공감수 0 댓글수 0 2024. 1. 29.
유저 인증 상태 관리하기 1. Why? 프로젝트 에서 회원 관리 및 프론트엔드에서의 보안을 담당하게 되었는데, 그 과정에서 JWT와 OAuth를 사용해서 유저의 인증 상태를 관리했다. 이번 글에서는 어떻게 백엔드와 데이터를 주고받았는지, 그리고 왜 이런 방식으로 구현했는지에 대해서 설명하고자 한다. 만약 네트워크에 대한 배경지식이 없으시다면 아래 링크의 글부터 읽는 것을 추천드립니다. 쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 cksxkr5193.tistory.com 2. How? 어떤 선택지가 있는지 1) 세션 기반 인증 인.. 공감수 0 댓글수 0 2024. 1. 8.
Next.js 13 App Routing PWA 적용하기 / Next.js 1. Why? 핀테크 프로젝트 모익에서 PWA(Progressive Web App)를 적용시킬때의 기록이다. 모익은 모바일을 메인으로 하는 웹앱서비스로 기획되었기에 모바일 환경에서 유저의 경험을 향상시키기 위해 도입했다. PWA를 도입하면 웹앱을 앱처럼 설치할 수 있게 되고, 이번에는 사용해보지 못했지만 서비스 워커를 사용한 캐싱과 웹 푸시 메시지로 알람을 전송하는 것 등 많은 장점을 가지게 된다. PWA는 모두의 지하철을 만들며 한 번 도입해본적이 있었기도 했고, Trade off에 비해 얻을게 많다고 판단했기에 쉽게 결정을 내릴 수 있었다. 2. 도입 모익은 Next.js 13 App Routing 방식을 기반으로 하고 있었고, Next.js에서 PWA 도입을 위해 사용되는 next-pwa라이브러리는.. 공감수 0 댓글수 0 2023. 11. 30.
Atomic 패턴과 react-hook-form으로 재사용성을 고려한 로그인&회원가입 컴포넌트 만들기 1. Why?로그인, 회원가입 등 회원관리와 프론트엔드에서의 보안, 토큰 처리 등을 해보고 싶었었다. 그런데 마침 프로젝트 파트 분배 과정에서 하고 싶은거 없냐길래 냉큼 회원관리 부분을 가져왔다. 유효성 검사와 form의 데이터 처리를 쉽게 할 수 있고, 최소한의 리렌더링만을 일으켜 성능면에서도 우수한 react-hook-form 라이브러리를 도입하기로 결정했고, 이와 함께 atomic 패턴도 사용해서 공통적으로 사용할 수 있는 form 컴포넌트를 만들고, 이를 이용해서 재사용성이 뛰어난 회원 관리 기능을 구현하는 것을 목표로 삼았다. 2. atomic하게 atom과 molcule부터 만들어보기그런데 막상 찾아보니 TypeScript로 react-hook-form + Atomic 패턴을 사용한 사람이 없.. 공감수 0 댓글수 0 2023. 11. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.