서론최근 새로운 사이드 프로젝트를 시작했다. 프로젝트 이름은 "맨유허브"로, 맨체스터 유나이티드 축구팀의 팬 페이지이다. 팀은 BE 2명, FE 1명(나) 이렇게 3명으로 구성되어 있는데, 처음에는 Designer 1명을 포함해 4명이었다.진행은 처음부터 순탄치 않았다. 기획 자체는 BE 2분이 주도적으로 진행하는데, Designer 분이 회사 일정으로 인해 시간적인 여유가 없었다. 그러다가 어쩔 수 없이 회사 일정이 빠듯해져 프로젝트에서 하차하는 결정을 내리셨다.와이어프레임도 채 완성되지 않은 상태에서 디자인 업무가 나에게 인수인계되었다. 백수 상태이지만 디자인부터 프론트까지 모두 혼자 담당하는 것이 부담스러웠다. 나 또한 기획에 참여하긴 했지만, 축구에 대한 관심이나 배경지식이 없는 상태에서 시작하여..

반응형 레이아웃에서 뷰포트 너비가 바뀌는 순간, 렌더링할 요소 개수가 늦게 재계산됐다. 브레이크포인트를 넘는 순간 잠깐이지만 이전 개수의 요소가 그대로 노출되는 현상이었다.성능 문제는 아니었다. 하지만 상태 계산 시점이 렌더링과 맞지 않는 구조적인 문제였고, 그냥 두기엔 사용자 눈에 직접 보이는 오류였다. 이 글은 그 원인을 찾고 해결한 과정을 기록했다. 문제무엇이 문제였는가반응형 환경에서 뷰포트 너비를 변경하면 약 0.1초 정도 요소가 추가되는데 시간이 걸렸다.원래라면 뷰포트 786px(Tablet size)을 기준으로 보다 클 때 8개, 작을 때 6개가 렌더링 되어야하는데 아래 사진과 같이 렌더링 지연 시간이 보이는 것을 확인할 수 있다. 가설원인을 어디서 찾았는가가장 먼저, 네트워크 환경에 따라 ..

더보기포트폴리오 프로젝트 몰아보기 안녕하세요! 전부터 프론트엔드 개발자라면자신의 포트폴리오 페이지정돈 있어야지!... 라고 생각만 하고실천은 없었지만 이번에는 진짜로 만들어볼 예정입니다 :) 기획 먼저, 포트폴리오에서어떤 내용을 강조할까?, 어떤 형태로 보여줄까? 를 많이 고민했으며혼자 생각하는것보다 다른 레퍼런스를 찾아보며 고민했습니다. 레퍼런스 리스트 ⬇️더보기송진경님의 포트폴리오 송진경 | 프론트엔드 개발자프론트엔드 개발자 송진경의 포트폴리오입니다. React, Typescript, Next.js 기반의 웹 프론트엔드를 개발합니다.www.meganmagic.com 이정민님의 포트폴리오 이정민 - Leejeongminjeongmin's dev portfolio siteleejeongmin.ver..

개발 환경- Next.js 14 (page router)- TailwindCSS- Axios 문제 상황 BE에서 API를 통해 JWT을 보내주어 AccessToken을 통해 사용자 인증을 하는 방식을 사용하고 있으며, 코드잇 부트캠프 내에서 하는 프로젝트이기에 BE API를 변경할 수 없었고, RefreshToken 없이 AccessToken만을 사용해 인증을 하고, AccessToken의 주기가 짧아 자주 로그인을 해야했습니다. 또한, 현재 웹스토리지(LocalStorage)를 사용하여 SSR(서버사이드 렌더링) 시 로그인(사용자 인증)이 필요한 서비스(API)는 사용할 수 없었습니다. 문제점 요약짧은 토큰 수명때문에 API 통신에 있어 401(UnAuthorized)에러가 자주 발생SSR 방식을 사..