분류 전체보기
-
진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..
[GitHub API] repository 검색창 만들기 with debounce진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..
2023.08.28 -
지금은 로그인 방식이 OAuth만으로 되어있고 별도의 Credential은 적용하지 않고있다. 간단한 로그인 회원가입이 되길 원하는데 ... 어떻게 해야할까?? next-auth가 제공하는 callback 중에 signIn을 한 번 뜯어보자. https://next-auth.js.org/configuration/callbacks Callbacks | NextAuth.js Callbacks are asynchronous functions you can use to control what happens when an action is performed. next-auth.js.org 공식문서를 확인해보면 signIn callback만 존재하고, singUp callback은 존재하지 않는다. 따로 커스텀을 ..
[Chat App] 회원가입 (next-auth, signIn callback)지금은 로그인 방식이 OAuth만으로 되어있고 별도의 Credential은 적용하지 않고있다. 간단한 로그인 회원가입이 되길 원하는데 ... 어떻게 해야할까?? next-auth가 제공하는 callback 중에 signIn을 한 번 뜯어보자. https://next-auth.js.org/configuration/callbacks Callbacks | NextAuth.js Callbacks are asynchronous functions you can use to control what happens when an action is performed. next-auth.js.org 공식문서를 확인해보면 signIn callback만 존재하고, singUp callback은 존재하지 않는다. 따로 커스텀을 ..
2023.08.11 -
Options next-auth를 사용하여 jwt를 사용하려면 NextAuthOptions 사용하여야 한다. OAuth를 구현하면서 기존에는 GoogleProvider만 사용하였던 Option을 좀 더 사용해보자. Option은 API 경로에서 초기화할 때 NextAuth.js에 전달된다. https://next-auth.js.org/configuration/options Options | NextAuth.js Environment Variables next-auth.js.org 사용자가 로그인을 완료 하면 Authorization Server가 파라미터의 redirect_url로 authorization code를 포함하여 리다이렉팅 시키며 NextAuth는 client_id, client_secret..
[Chat app] OAuth에 JWT 적용하기 (feat. next_auth)Options next-auth를 사용하여 jwt를 사용하려면 NextAuthOptions 사용하여야 한다. OAuth를 구현하면서 기존에는 GoogleProvider만 사용하였던 Option을 좀 더 사용해보자. Option은 API 경로에서 초기화할 때 NextAuth.js에 전달된다. https://next-auth.js.org/configuration/options Options | NextAuth.js Environment Variables next-auth.js.org 사용자가 로그인을 완료 하면 Authorization Server가 파라미터의 redirect_url로 authorization code를 포함하여 리다이렉팅 시키며 NextAuth는 client_id, client_secret..
2023.08.07 -
Prisma는 Django ORM, Sequelize 등과 같은 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크이다. Prisma는 어떤 데이터베이스를 사용하든 동일한 방식으로 데이터 모델링을 할 수 있도록 자체적인 스키마 문법을 제공하고 있다. 설치 우선 라이브러리를 설치 해주고, prisma cli를 사용하여 간단한 db작업을 위한 sqlite를 사용해보자. yarn add -D prisma npx prisma init --datasource-provider sqlite 설치를 완료하고나면 .env파일과 prisma폴더가 생성된다. database 경로를 위한 환경변수인데 나는 .env파일을 삭제하고 기존에 있던 .env...
[Chat App] prismaPrisma는 Django ORM, Sequelize 등과 같은 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크이다. Prisma는 어떤 데이터베이스를 사용하든 동일한 방식으로 데이터 모델링을 할 수 있도록 자체적인 스키마 문법을 제공하고 있다. 설치 우선 라이브러리를 설치 해주고, prisma cli를 사용하여 간단한 db작업을 위한 sqlite를 사용해보자. yarn add -D prisma npx prisma init --datasource-provider sqlite 설치를 완료하고나면 .env파일과 prisma폴더가 생성된다. database 경로를 위한 환경변수인데 나는 .env파일을 삭제하고 기존에 있던 .env...
2023.08.07 -
https://wonillism.tistory.com/321 Web Socket 그리고 Socket.io 이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https: wonillism.tistory.com WebSocket에 대해 간단히 정리한 글이다. Socket.io의 공식문서를 확인하면서 Chat App 프로젝트에 연결해보자. https://socket.io/docs/v4/server-api/ Server API | Socket.IO Server socket.io 기본 코드 서버에서..
[Chat App] NextJS로 알아보는 Socket.iohttps://wonillism.tistory.com/321 Web Socket 그리고 Socket.io 이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https: wonillism.tistory.com WebSocket에 대해 간단히 정리한 글이다. Socket.io의 공식문서를 확인하면서 Chat App 프로젝트에 연결해보자. https://socket.io/docs/v4/server-api/ Server API | Socket.IO Server socket.io 기본 코드 서버에서..
2023.07.31 -
이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https://socket.io/get-started/chat Get started | Socket.IO Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introd..
Web Socket 그리고 Socket.io이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https://socket.io/get-started/chat Get started | Socket.IO Get started In this guide we’ll create a basic chat application. It requires almost no basic prior knowledge of Node.JS or Socket.IO, so it’s ideal for users of all knowledge levels. Introd..
2023.07.31 -
어느정도 구조 파악이 됐으니 구글 소셜 로그인을 구현해보자. next-auth https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next-auth는 next 전용 라이브러리로 인증 로직을 보다 쉽게 구현할 수 있도록 해준다. 마치 django의 drf 같은 녀석인가?? 설치부터 해주자. > yarn add next-auth 공식문서를 확인해보면 API route를 만들어주기 위해 pages/api/auth/[...nextauth].js 에 위와 같이 설정할 수 있다고 나와있다. 하지만 지금 나는 Next 13 버전을 쓰고 있으므로 nextjs의 공식문서를 확인해보면 app/api 디렉토리 아래의 route 파..
[NextJS] Google OAuth 연동 (feat. next-auth)어느정도 구조 파악이 됐으니 구글 소셜 로그인을 구현해보자. next-auth https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next-auth는 next 전용 라이브러리로 인증 로직을 보다 쉽게 구현할 수 있도록 해준다. 마치 django의 drf 같은 녀석인가?? 설치부터 해주자. > yarn add next-auth 공식문서를 확인해보면 API route를 만들어주기 위해 pages/api/auth/[...nextauth].js 에 위와 같이 설정할 수 있다고 나와있다. 하지만 지금 나는 Next 13 버전을 쓰고 있으므로 nextjs의 공식문서를 확인해보면 app/api 디렉토리 아래의 route 파..
2023.07.25 -
https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com 앞서 보았던 app Routing Conventions 에 있던 Routing File을 자세히 알아보자. 확실히 프레임워크라 그런지 React에서는 일일이 해야했던 작업들을 미리 정의해둔 기능들이 많았다. 이전에 Nest 튜토리얼을 맛봤을 때는 이게 왜 이렇게 작동하는지 왜 필요한지 감이 잘 안왔었는데, React를 쓰다가 Next를 써보니 확실히 느낌이 왔다..
[NextJS] NextJS Routing Fileshttps://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com 앞서 보았던 app Routing Conventions 에 있던 Routing File을 자세히 알아보자. 확실히 프레임워크라 그런지 React에서는 일일이 해야했던 작업들을 미리 정의해둔 기능들이 많았다. 이전에 Nest 튜토리얼을 맛봤을 때는 이게 왜 이렇게 작동하는지 왜 필요한지 감이 잘 안왔었는데, React를 쓰다가 Next를 써보니 확실히 느낌이 왔다..
2023.07.25