Sign in
it dev nextjs jwt

JWT 다루기 with Next.js app router + auth.js

👩🏻‍💻 로직로그인 -> 프론트엔드 서버 -> 백엔드 서버 요청 -> 프론트엔드 서버로 쿠키담은 response 날려줌 -> 문자열로 된 토큰을 객체로 만들어주는 쿠키 굽기 -> 브라우저에 쿠키 심기  ** 프론트 서버는 공용서버이기 때문에 쿠키를 심으면 안된다. 무조건 브라우저에 심어야한다.- next-auth는 auth.js로 이름이 바꼈다. v.4 버전- Auth.js가 해주는 일쿠키 로그인의 가장 큰 보안 위협인 CSRF를 알아서 막아준다.1. auth.js 설치yarn add next-auth@beta @auth-core공식 홈페이지를 들어가보면 아직은 v.5의 beta버전으로 사용할 수 있는 것을 확인할 수 있다. 그런데 이게 Next.js의 app router와 맞다. 2. auth.t..
wono | discuss |
it dev nextjs fsd

next.js에 FSD 폴더 구조 패턴 적용하기

Backgrounds최근 Next.js 프로젝트에 Feature-Sliced Design(FSD) 패턴을 도입하게 되었습니다. FSD는 프론트엔드 프로젝트에서 모듈들의 레이어(layer)를 명확히 구분하고, 상위 레이어와 하위 레이어 간의 의존성 방향을 명확히 하여 모듈 간 결합도를 낮추고 변경 사항이 어디까지 영향을 미칠지 예측 가능하게 만들어줍니다. 이를 통해 유지 보수성이 크게 향상된다는 장점이 있습니다.(자세한 설명은 이전 글을 참고해주세요) 하지만 Next.js와 FSD 패턴을 함께 사용하다 보니, 일부 컨벤션에서 충돌이 발생하게 되었고, 그 과정에서 몇 가지 문제점과 해결책을 찾아야 했습니다. 이번 글에서는 제가 겪었던 문제들과 이를 해결한 방법을 공유하려 합니다. 1. app 폴더 네이밍 충..
wono | discuss |
it dev react layout

React로 레이아웃 (헤더, 메뉴바, 푸터) 컴포넌트 만들기

대부분의 페이지에는 Header, 메뉴바, Footer 등이 들어갑니다. 하지만 모든 페이지에 일일이 헤더, 메뉴바, 푸터를 작성하기에는 번거롭습니다. 컴포넌트로 만들더라도 매번 세 개의 컴포넌트를 넣는 것은 깔끔하지 않죠. 그래서 보통 필요한 컴포넌트를 묶어서 Layout으로 만들어 사용합니다! 오늘은 한 번 React로 Layout 컴포넌트를 만들어보겠습니다. 1. Layout 컴포넌트 생성하기 우선, 원하는 디렉토리에 Layout 컴포넌트를 생성합니다. 저는 components 폴더 안에 Layout이라는 폴더와 파일을 생성했습니다. (개인적으로 타입스크립트를 선호해서 tsx파일로 만들었는데, jsx를 사용해도 무방합니다) // components/Layout/Layout.tsx const Layo..
wono | discuss |
it blog geo

Geohash

어떻게 하면, 위치정보를 빠르게 찾을 수 있을까 ? 지구의 지역을 해시하면 어떨까 ? 해시 이거 한번에 찾을 수 있잖아. 하지만 위치의 경우, 주변위치도 찾을 수 있어야 하는데. 우리가 알고 있는 해시로는 이런 일을 할 수 없잖아 ? 그거야 해시 함수를 잘 만들면 되지 어떻게 ?01101 11111 11000 00100 00010라는 2진수가 있다고 가정해보자. 왼쪽에 비트로 지도에서의 시작점과 해상도를 결정 할 수 있다. 이제 홀수열의 비트 0111110000000는 longitude가 되고, 짝수열의 비트 101111001001는 latitude가 된다. 위도와 경도 데이터를 2진 데이터로 만든 각 비트를 번갈아가면서 썩고, 이 값을 Base32 인코딩하면, 그 값이 해당 위치의 해시가 된다. 위 값은 대략 위도 42.6, 경도 -5.6 이 된다.
wono | discuss |