클라이언트(웹 브라우저) 로 부터 HTTP 요청을 받아 HTML, 이미지 등과 같은 정적인 콘텐츠 를 응답해주는 역할을 한다. 주로 WAS와 함께 구성되기 때문에 정적인 컨텐츠 요청시 : WAS를 거치지 않고 정적 컨텐츠를 제공한다.동적인 컨텐츠 요청시 : 요청을 WA

SWC(Speedy Web Compiler)

Babel ⚡️ 바벨의 공식 홈페이지에 따르면 바벨은 자바스크립트 컴파일러이다. 라고 나와있다. 모든 브라우저가 최신 문법, 기술을 지원하지 않기 때문에 보여지는 모습이 환경에 따라 다르게 보여지는 크로스브라우징 이슈 가 발생한다. 바벨은 이러한 이슈를 해결하기

Webpack 웹 어플리케이션은, 역할에 따라 여러개의 다양한 모듈 로 구성되어있다. 이러한 모듈들을 웹 브라우저에서 사용 가능한 형태로 만들어주기 위해서는 모듈 번들러 가 필요하며, Webpack 은 프론트엔드에서 가장 많이 사용하는 모듈 번들러 이다. ✅ 즉,

라우팅 방식이 page router 에서 app Router 로 전환되면서렌더링 종류에 따라 구현하는 방법이 변경되어 정리해보고자 한다.렌더링 종류에는 크게 CSR | SSR | SSG | ISR 4가지 종류가 있다.page router 에서는 getServerSid

이전 카카오 로그인 포스팅과 같이 네이버 로그인도 어렵지 않게 구현할 수 있다.네이버 개발자 센터에서 앱 등록부터 시작해보자!먼저, 네이버 개발자 센터에 들어가 앱 등록을 해야한다.홈 페이지 > 네이버 로그인 > 오픈 API 이용 신청 > 약관동의 > 본인인증 까지 완

Next-Auth란? 에서 정리한 내용과 같이, Next-Auth 는소셜 로그인을 간편하게 구현할 수 있도록 다양한 Provider를 제공해준다.먼저, 가장 많이 사용되는 카카오 아이디 로그인 부터 적용해보고자 한다.카카오 서비스를 이용하기 위해서는 카카오 개발자 사이

NextAuth는 로그인, 로그아웃, 에러 등 간단한 인증 페이지를 제공해 준다.기본으로 제공하는 화면들을 커스텀 페이지로 대체할 수 있는데, pages:{} 를 사용하면 된다./app/(beforeLogin)/signin 경로에 파일을 만들어준다.참고Next-Auth

/app/api/user/\[id] 경로에 route.ts 파일을 만들어 준다.API 에서도 페이지와 같이 Dynamic Route 를 사용할 수 있다.여기서는 \[id] 값을 slug로 사용한다.findMany 는 조건과 일치하는 데이터들을 전부 가져오는 함수이다.p

Next.js 앱에서 내부 API를 사용하려면 /app/api 경로에 로직을 구현하면 된다.13 버전부터는 API 파일은 route.js 로 명명해야 한다.app/api/user/route.ts 파일을 만들고https://localhost:3000/api/us

이전 글에서 작성했던 next-auth 내용을 바탕으로 실제 로그인 서비스를 구현해보고자 한다.프로젝트 생성에서부터 Prisma 설정, Email & PW 로그인, 카카오 & 네이버 로그인, 쿠키설정 등 차례대로 진행 할 예정이다. https://mycodin

서론 최근 next-auth 를 사용해 로그인 기능을 구현하는 곳이 많아지고, 마침 트위터 클론 코딩에서도 next-auth를 활용하게 되면서 학습한 내용을 정리해보고자 한다. Next-Auth 란? next.js 로 개발된 페이지에서 로그인을 쉽게 구현할 수 있도

Zustand logo 서론 실무에서는 상태관리 라이브러리로 Recoil을 사용하고 있지만, 이번 트위터 클론코딩을 진행하면서 새로운 라이브러리인 Zustand를 접하게 되었다. 패키지 크기가 작고 사용법이 간단하다는 점에서 Redux, Mobx와 더불어 많이 사용

서론 타입스크립트에 대해 설명하는 것을 목적으로 하는것이 아닌, 개인적으로 공부한 내용을 정리하기 위해 작성한 글이다. 그렇기때문에 제외된 내용이 있을 수 있고 순서가 맞지 않을 수 있다는 점 양해바란다. TypeScript 필요성 타입스크립트를 사용하면, 타입을

프론트 개발자가 임시로 API를 만들 수 있도록 도와주는 라이브러리이다. 현재 Next14 버전을 완벽하게 지원하는 것은 아니지만 사용할만한 수준이다.백앤드 API가 완성되지 않은 상태에서 화면 개발을 해야하거나, API 에러가 발생한 경우를 만들어 테스트 할 때 주로

홈 화면 구성 로그인에 성공하면 가장 처음 보여지는 화면이다. 크게 3개의 섹션으로 나누어져 있으며, 좌측에서 메뉴 변경을 할 경우 중앙 섹션만 변경되는 구조이다. 홈 화면 Left & Right 영역은 고정되어 있어 바뀌지 않지만, Center 부분은 {child

회원가입 화면main 페이지에서 계정 만들기 버튼을 클릭하면 /signup 페이지로 라우팅 이동 시키고 /signup 페이지에서 @modal/(.i)/flow/signup 으로 Parallel Routes & Intercepting 시켜야 한다.하지만 서버 컴포넌트(/

로그인 화면 로그인 화면 로그인 기능은 Next-Auth 라는 라이브러리를 사용해 개발했다. 로그인에 성공하면 Cookie 에 authjs.session-token 이 추가되며 인증 정보는 next-auth 의 훅을 통해 클라이언트에서 사용할 수 있다. main 페

폴더 구조 설명 폴더 구조 이번 프로젝트에서는 Group Folder를 사용해 로그인 전/후 화면들을 분리하고 Private Folder를 만들어 페이지에서 사용하는 컴포넌트들을 넣어두었다. 또한, Parallel Routes와 Intercepting Route 를

⬅️ App Router (2/3) Route Handlers page Router에서 /api Routes와 비슷한 개념이다. Web Request와 Response API를 사용해 특정 route에 대해 Custom Handler를 작성할 수 있게 해준다. Co