본문 바로가기

전체 글41

🧑‍🍳토이 프로젝트 <아워홈 사전과제> 회고 그냥 혼자서 고민한거 아까워서 적으려는 거구요,, 혹시 문제가 될 부분이 있다면 연락주시면 바로 내리겠습니다. 1. Why? 12월 29일부터 1월 3일까지 아워홈의 사전과제를 진행했다. 아워홈 사전과제 프로덕트의 사이즈가 매우 작아 코드의 퀄리티를 어떻게 높일지에 많은 고민을 해야했고, 또 제출후에도 아쉬운 점이 있어 코드를 추가적으로 수정하기도 했다. 이렇게 고민한 부분들을 작성해보고자한다. 2. 기획 일단 과제 내용은 "이 화면을 따라서 만들어봐라."로 주어졌다. 기능 명세서 작성 상당히 러프하게 주어졌기 때문에, 우선 화면을 보고 어떤 기능이 있는지 파악 이를 Notion에 정리했고, 당장 화면에는 보여지지 않더라도 구현시에 필수적인 기능도 작성 ex)장바구니 버튼 그리고 추가적으로 있으면 좋겠다.. 2024. 1. 31.
런타임을 고려해 타이머 구현하기 0.TL;DR Next.js에서 setInterval을 동작시키니, 오차가 누적되는 현상을 발견 Next.js가 node.js 환경을 전제로 구현된 프레임워크라는 점을 원인으로 추측 기본적인 오차 누적 문제는 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현해 해결 비활성화 문제는 탭 비활성화 시간 기록 -> 재활성화 시, 기록한 시간을 기반으로 남은 시간 재계산 1. Why? 나는 핀테크 프로젝트 에서 회원관리 및 보안 처리를 담당했는데, 그 중에서 아래의 타이머 부분에 setInterval을 사용했다. 에서 setInterval을 사용한 글을 보고 왔다면 알겠지만, Js의 setInterval은 정확하게 동작하지 않는 문제가 있기 때문에 이를 고쳐보고자 한다. 2. 뭐가 문젠데? 우.. 2024. 1. 29.
로그인 여부에 따른 접근 제한 처리하기 0.TL;DR 로그인 여부에 따라 접근제한 처리를 해야했음 우선 하단 Navbar에 검증 로직을 넣어 로그인 상태에 따라 리다이렉트 처리 이후 쿠키에 담긴 Refresh Token의 여부를 확인하고 곧바로 리다이렉트 하도록 개선 1. Why? 프로젝트 을 진행하며, 로그인 여부에 따라 접근제한 처리를 할 필요가 있었다. 로그인을 완료한 유저 메인 페이지를 비롯한 다른 페이지 접근 가능, auth 관련 페이지 접근 불가능 로그인을 하지 않은 유저 splash & auth 관련 페이지만 접근 가능, 나머지 페이지들 접근 불가능 2. How? 처음 떠올린 방법은 Layout에 검증 로직을 넣는 것이였다. 장점 모든 페이지에 손쉽게 접근 제한 처리를 할 수 있다. 관리도 쉬워진다. 단점 Layout에 useEf.. 2024. 1. 29.
setInterval과 Page Visibility API로 정확한 대기시간 알려주기 0.TL;DR문제팬사인회까지 남은 시간을 보여줘야 했기에 setInterval을 사용해 1000ms마다 1초가 줄어들도록 구현하였으나, 탭 비활성화로 인해 1초당 최대 60000ms까지 오차가 발생비대면 팬사인회는 연예인 1명 당 60~120초로 진행되기에, 만약 오차가 누적되어 30초 정도가 지연된다면 사용자는 불쾌한 경험을 하게 될 것고려한 해결 방안1초마다 서버에서 시간을 가져오기정확한 시간을 출력할 수 있지만, 많은 유저가 접속할 경우 서버에 부담탭이 활성화 될 때, 서버에서 시간을 가져오기서버의 리소스를 1번보다 적게 사용하지만, 변경 이전 시간이 잠깐 보여 사용자 경험에 악영향가짜 audio로 강제로 탭의 비활성화 막기클라이언트 리소스 사용 + 모바일 환경이라면 오디오 점유 이슈 발생 가능성결.. 2024. 1. 25.

티스토리툴바