[LinkBrary] Next.js 쿠키 만들기 ( with. API Routes )

[LinkBrary] Next.js 쿠키 만들기 ( with. API Routes )

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

  • format_list_bulleted PROJECT/에러핸들링
  • · 2024. 9. 25.
  • textsms
[OPENMIND] 반응형 리스트 요소 개수 개선 - UX

[OPENMIND] 반응형 리스트 요소 개수 개선 - UX

요구 사항Tablet에서 상단 네비게이션 영역의 좌우 여백은 50px을 유지합니다, 카드 리스트 영역의 좌우 최소 여백은 32px 입니다, 카드 컴포넌트의 최소 너비는 186px 입니다, 카드 리스트 영역이 줄어드는 것에 따라 카드 크기가 작아지다가 186px보다 작아질 때 하나의 행에 4개 → 3개씩 보이도록 합니다.문제상황렌더 시에 데이터 패칭 전 과정에서 아무런 요소가 없어 사용자가 요소와 페이지네이션의 존재를 알 수 없다.반응형 요소 변화 시 요소 개수 오류(8개 -> 6개)(6개 -> 8개)적용 사항Skeleton UI를 적용하여 렌더링 시 요소 위치를 사용자에게 미리 보여줌code// before //... return ( ); }; export defaul..

  • format_list_bulleted PROJECT/에러핸들링
  • · 2024. 7. 26.
  • textsms

[개념] HTTP 메소드 정리

HTTP란HTTP(HyperText Transfer Protocol)란 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층의 프로토콜이며, 전통적인 Client - Server 모델을 따르는무상태 프로토콜로 서버가 두 요청 간에 어떠한 데이터(상태)도 유지하지 않습니다.   어려운 말인 것 같지만 이해하고 나면 별거 아닌 말입니다. 하나씩 살펴보면, HTTP는 글자에서 알 수 있듯, 하이퍼미디어 문서를 전송하기 위한 프로토콜입니다.여기서 하이퍼미디어 문서란, 우리가 흔히 사용하는 하이퍼링크와 사진, 영상 등을 문서에 담을 수 있는 문서를 말합니다. 우리가 흔하게 사용하는 유튜브라던가, 쇼핑몰 사이트를 대표적인 예로 들 수 있습니다. 애플리케이션 계층이란, 네트워크의 OSI 7계층 중 7계..

  • format_list_bulleted CS
  • · 2024. 6. 22.
  • textsms
[JS] 렉시컬 스코프(Lexical Scope) 란??

[JS] 렉시컬 스코프(Lexical Scope) 란??

스코프란?스코프(Scope)란, 유효범위란 뜻으로 자바스크립트를 포함한 모든 프로그래밍 언어에서 사용하는 중요한 개념입니다.  스코프의 개념을 잘 알아야 자바스크립트의 let, const와 var 선언자의 차이 등을 이해하는데 어려움을 덜 수 있습니다.  [추가 글 작성 예정입니다.] 스코프의 종류코드는 크게 두 가지의 스코프로 구분할 수 있습니다. 코드의 가장 바깥 영역, 전역 스코프함수 몸체 내부 영역, 지역 스코프 간단한 예제를 살펴보면,  예제 코드 내부에 위와 같은 스코프가 있는 것을 볼 수 있습니다. [추가 글 작성 예정입니다.] 렉시컬 스코프아래 코드를 예측 해보려고 합니다. 잠시 스크롤을 멈추고 생각해보길 권해드립니다.var x = 1;function foo() { var x = 10; ..

  • format_list_bulleted WEB/JavaScript
  • · 2024. 6. 22.
  • textsms
[Git] Git Flow 브랜치 전략?

[Git] Git Flow 브랜치 전략?

Git은 형상관리 도구 중 하나이며, Branch를 활용하여 파일의 변경사항을 기록 및 관리할 수 있습니다 그 중 오늘은 Git Flow 브랜치 전략에 대해 포스트하려 합니다.  Git-FlowGit-flow에는 5가지 종류의 브랜치가 존재합니다. 항상 유지되는 메인 브랜치들(master, develop)과 일정 기간 동안만 유지되는 보조 브랜치들(feature, release, hotfix)이 있습니다. master : 제품으로 출시될 수 있는 브랜치develop : 다음 출시 버전을 개발하는 브랜치feature : 기능을 개발하는 브랜치release : 이번 출시 버전을 준비하는 브랜치hotfix : 출시 버전에서 발생한 버그를 수정 하는 브랜치 위 그림의 흐름을 살펴보면,처음에는 master와 de..

  • format_list_bulleted CS/Git
  • · 2024. 6. 7.
  • textsms
[Git] 다양한 Branch 병합 방법(git merge, git rebase, git merge --squash)

[Git] 다양한 Branch 병합 방법(git merge, git rebase, git merge --squash)

Git이란?Git은 형상관리 툴 중 하나로, 파일을 작성하는데 있어, 변화하는 과정을 관리해주는 도구입니다.GitHub는 파일 관리에 있어 로컬에 있는 파일을 공유할 수 있도록 원격(remote) 저장소(repository)를 제공하는 장소이며, Branch와 커밋을 통해 파일의 변화 과정을 저장해둘 수 있습니다.Branch?가지(branch)라는 뜻으로, 하나의 파일을 관리할 때 변화하는 과정에서 서로 다른 방향으로 나아가면 이를 관리할 때 각각의 Branch로 관리할 수 있습니다자세한 사항은 여기를 통해 알아보고, 우리는 이 브랜치의 병합 방법에 대해 알아보겠습니다. 서로 다른 파일을 하나의 파일로 만드려면 어떻게 하지?  Branch는 파일의 변경사항(커밋)으로 이루어진 하나의 가지입니다. 현재 가..

  • format_list_bulleted CS/Git
  • · 2024. 6. 7.
  • textsms
반응형