로그인 여부를 SSR로 잘 처리하기 (+ hydration-error)

현재 올해도 아좌좌 서비스의 디자인을 한번 갈아 엎고 다시 만들고 있습니다.지난 11월과 달리 모바일로 사용하는 유저가 더 많을 것이라 생각되어 모바일 중점으로 변경했습니다!그래서 새로 네비게이션바를 만들게 되었는데 로그인 여부만 판단해서 변경해주면 간단하게 해결될거라 생각했는데 이게 생각보다 골치가 아프네요.😂목적로그인 여부에 따라 로그인이 되어있다면 마이페이지를, 되어있지 않다면 로그인하기를 네비게이션바에 보이게 하고싶었습니다. 발생한 에러저에게 발생했던 에러는 다음과 같습니다.로그인 한 뒤 로그인하기 -> 마이페이지로 변하지 않는 문제가 있었고 f5를 눌러 직접 새로고침해야만 변경되는 문제가 있었습니다.hydration에러hydration에러는 next.js를 사용하며 가장 많이 맞닥뜨리고있는 에..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

비동기 처리 고찰

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 영상을 보며 내 코드를 어떻게 잘 수정할 수 있을지 고민하고있다.현재 axios를 이용해 API에 요청처리를 하고 있는데현재 내가 작성한 코드이다.import { axiosInstanceClient } from '../axiosInstanceClient';export const getAllPlans = async () => { try { const { data } = await axiosInstanceClient.get('/plans', { authorization: false, }); console.log(data); return data; } catch (error) { console.l..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

JWT 쿠키에 저장하기

왜 쿠키를 사용하는가?올해도 아좌좌 프로젝트를 진행하던 중 기존 리액트 프로젝트 처럼 JWT 토큰을 로컬스토리지에 저장했다. 하지만 Next.js로 프로젝트를 만들고있기 때문에 로컬스토리지에 저장된 토큰은 서버 컴포넌트에서 접근하지 못했다...!그리고 추가적인 문제가 있는데, 만약 자동 로그인 기능을 사용하려 한다면 로컬 스토리지에 접근해 토큰을 가져와야 로그인이 되어있다는 것을 알 수 있다. 하지만 Next가 렌더링시 window에 바로 접근이 불가능한데 이 때 Recoil에 토큰의 기본값을 null로 설정해 놓은 상태에서 API를 불러오면 Authorization에 들어가는 토큰값이 null로 들어가는 문제가 생긴다 😭(+ 서버 컴포넌트에선 로컬스토리지에 접근할 수 없다. Recoil에 저장한 전역..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

팀 프로젝트 회고 : 괴발개발

괴발개발 깃허브  |  괴발개발 바로가기  |  팀노션  |  괴발개발 기획서  |  컨벤션안녕하세요. 9월도 벌써 끝나버렸네요.제가 데브 코스에 합격하고 공부한지 벌써 4개월이 지났습니다.이번달 회고는 이번 프로젝트에선 어떤것을 배웠지?를 중점으로 회고하겠습니다.🍁9월의 시작9월 첫 주부터 저는 너무 바빴습니다. 일단 Typescript 사용이 능숙해지고 싶어서 이펙티브 타입스크립트 스터디를 진행했고 어떻게든 3주라는 시간동안 모든 챕터를 읽었습니다. 다 읽었다는 사실은 있지만 머리에 많이 남았나를 물어본다면 그렇게 많이 남지는 않는 것 같습니다. 하지만 책을 고작 한번 읽어서 마스터 할 생각은 없었고, 퀴즈를 제출하기 위해 생각해보고 이 부분이 오늘 읽었던 분량에서 중요한부분인지 판단하는 과정에서 ..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

스크롤시 다른 영역도 스크롤 되는 문제 해결

무슨 문제가 생겼나?왼쪽의 사이드바 스크롤을 움직일 때 오른쪽의 컴포넌트 영역이 스크롤 되는 현상 발생!위의 css를 적용해주면 문제가 해결됩니다.https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms

리액트 에디터 개발 기록

현재 나는 무엇을 하고있는가?저는 현재 프로젝트로 개발자 커뮤니티를 제작중입니다.여기서 특징은 게시글과 댓글 모두 마크다운 문법을 사용할 수 있는 에디터를 이용한다는 것인데 직접 만들어 사용하기로 결정했습니다.왜 에디터를 직접 만드려고 하는가?기존에 존재하는 에디터를 가져와도 되지 않나?라는 의문이 충분히 드실 수 있는데, 일단 기존에 존재하는 WYSIWYG(위즈윅: What you see is what you get) 에디터를 사용하기 위해 여러가지 패키지들을 다운받아봤지만 원하는 기능(코드 블럭을 사용할 수 있는가?)을 충족시키는 에디터가 별로 없었고 찾았더라도 업데이트가 되어있지 않아 사용하고있는 리액트 버전에선 동작하지 않는 경우가 많았습니다. 그나마 CKEditor를 끝까지 사용해보려했지만 제가..

• format_list_bulleted 프로젝트/개발괴발
• · 2024. 8. 6.
• textsms