본문 바로가기

Project29

로그인 여부에 따른 접근 제한 처리하기 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.
🌟SSAFY 우수 프로젝트, 비대면 팬사인회 서비스 <스타게이트>회고 1. Why?삼성 청년SW아카데미 첫 프로젝트가 마무리 되었다. 처음으로 팀장을 맡은 프로젝트인데, 팀원들과 함께 열심히 한 결과 현직 개발자분에게 심사를 받아 우수 프로젝트로 선정될 수 있었다. 또 개인적으로도 베스트 멤버(싸피에서는 매주 10팀 중에 최고의 멤버를 뽑는다)에 뽑히기도 했다.  하지만 처음 기획했던 추가 기능 부분들을 구현하지 못하는 등 아쉬운 점들도 많았다. 이러한 부분들을 더욱 발전시키기 위해 이번 글에서는 프로젝트를 회고하고, 계속해서 이어나갈 것과 보완해야할 점을 정리해보고자 한다. 프로젝트 요약🌟프로젝트 Github🌟관리자 관점 시연영상🌟팬 관점 시연영상기간 : 23.07.04 ~ 23.08.18(7주간)팀원 : 6명(Frontend 3인, Backend 3인)역할 : F.. 2024. 1. 23.
💳 카드 혜택, 기프티콘 서비스 <모익> 회고 1. Why? 모익도 삼성 SW아카데미에서 7주동안 기획과 개발을 진행한 프로젝트다. 주제를 선정해서 하는 특화 프로젝트로 핀테크 도메인을 선택해 진행되었다. 또한 처음으로 내가 회원관리쪽을 맡은 프로젝트이기도 하다. 이번 글에서도 프로젝트를 회고하면서 Keep, Problem, Try를 정리해보자. 프로젝트 요약 💳프로젝트 Github 💳시연영상 기간 : 23.08.21~23.10.06(7주간) 팀원 : 6명(Frontend 3인, Backend 3인) 역할 : Frontend 개발자 사용 기술 Frontend : Next.js, TypeScript, Tailwind CSS, React Query Collaboration : Notion, Figma, Git, GitLab 2. 기획 우리의 주제는 "카.. 2024. 1. 21.

티스토리툴바