Sign in

dev

it dev nextjs redux

[Next.js 14] Redux, Redux-toolkit 환경세팅, 사용법

안녕하세요.Next.js와 TypeScript를 사용하며 Redux-toolkit 및 Redux를 세팅하는방법이 조금 까다로운 부분이 있어 포스팅하게되었습니다.Next.js의 버전은 14버전을 기준으로 하니, 참고해주세요. Redux우선 Redux를 알아보기전에 '상태'를 먼저 간단히 알아보겠습니다.React에서 State는 Component 안에서 관리되는 것입니다.자식 컴포넌트들 간 데이터를 주곱다을 때는 상태를 관리하는 부모컴포넌트를 통해 주고받습니다.하지만 이러한 상태를 관리하는 상위 컴포넌트에서 Props의 형식으로 계속 내려받아야 하는 특성상, 자식컴포넌트가 많아진다면 상태관리가 매우 복잡해지기 마련입니다.또한, 자식컴포넌트측에서 props로 받아온 state를 변경한다고 해도, 부모컴포넌트에..
wono | discuss |
it dev edge cdn

웹 생태계의 변화를 가져다 줄 Edge Computing

최근 웹 서비스 운영 생태계의 변화를 가져다 줄 운영 매커니즘으로 Edge Computing이 많이 거론되고 있다. 아직은 일반적인 웹 서버의 운영이, 동적인 데이터 변경과 Dynamic한 Server Side Rendering 처리로 인해 기존의 Origin Server가 위치한 곳까지 네트워크 요청을 하며 느린 응답을 받는 형식을 띄고 있다. 그나마 퍼포먼스 향상을 위해 정적인 컨텐츠 파일들은 CDN 서버와 캐싱 처리를 통해서 빠르게 전송을 할 수 있다. 특히나 이미지 또는 영상 같은 컨텐츠는 용량 사이즈가 매우 커서, 이러한 문제를 해결해주는 CDN이 가져다주는 퍼포먼스 효과는 굉장하다. 그러나 동적인 컨텐츠 영역을 위해 Original Server까지 요청이 다다라야 하는 문제는 여전히 해결되지 ..
wono | discuss |
it dev nextjs

[React] Next.js에 대해 알기 2부 (TailWind CSS, Shadcn UI)

들어가기에 앞서 Next.js 1부에 이어 2부를 써본다. 1부에서 놓친점이 있다면 Next.js가 버전마다 큰 차이가 있다는 것을 늦게 확인했다는 점이다. 1부와는 다르게 이번엔 Next.js 14버전을 기준으로 디렉토리 구조를 다시 이해하고 튜토리얼부터 차근차근 따라가보려고 한다. 출처 : Next.js 14 가이드 한글 깃허브 주소 튜토리얼을 마치고나면 앞으로 있을 프로젝트에 있어 Front쪽을 맡았기 때문에 Front쪽을 중점적으로 공부해보려고한다. 그래서 Next.js 안에서 TailWindCss을 중점적으로 사용해볼것이다. Next.js 14 버전 디렉토리 구조는 어떻게 바뀌었을까 /app: 애플리케이션의 모든 경로, 컴포넌트 및 로직을 포함하며, 대부분 여기서 작업한다. /app/lib: 애..
wono | discuss |
it dev nextjs jwt

[NextJS 14] NextAuth 를 사용해서 로그인 구현하기

App Router 방식에서 NextAuth를 사용해 로그인을 구현하기 위해 여러가지 글들을 찾아보았는데 해당 방식보다 대부분의 글들이 Page Router 방식이 많았기 때문에 어렵다고 느꼈다 어쨌든 NextAuth가 뭘까 인증을 구현하는 데 쓰이는 패키지이고 쉽고 간단하게 인증을 추가할 수 있다 그리고 다양한 인증 Google, Naver, Facebook 등으로 로그인하는 기능들도 쉽게 추가할 수 있다고 한다. 공식 사이트(https://next-auth.js.org/)에 들어가서 사이드 메뉴의 Provider 부분을 지원하는 사이트들을 확인할 수 있다. 이 글에서는 자체적인 사이트의 인증을 개발했다고 할때 NextAuth를 어떻게 사용해야 하는지 작성할 것이다 하지만 서버로부터 토큰을 받는 부분은..
wono | discuss |
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 |