nextjs13 Next.js로 SNS x.com 클론코딩하기 - 6 무한 스크롤링 무한 스크롤링을 위해선 특정 지점까지 마우스 스크롤을 내리면 서버에서 데이터를 받아오게끔 처리해줘야 합니다. 로직 자체는 서버에서 데이터를 받아옴 -> 받아온 데이터를 React Query에 담아서 관리 -> 무한 스크롤링 -> 반복 이 순서를 따릅니다. React Query 왜 리액트 쿼리인가? 먼저 리액트 쿼리와 리덕스의 차이를 보면, 리액트 쿼리의 경우 서버에서 데이터를 가져오는 것이 중점이고 리덕스의 경우 데이터를 컴포넌트간 공유한다는 차이가 있습니다. 특히나 리액트 쿼리의 장점으로는 캐싱을 잘해준다는 점이 있는데, 요청이 많아지면 트래픽 관리가 중요합니다. 즉 캐싱을 최대한 많이 해둬서(재사용 가능하게) 트래픽을 관리해주는 것이 중요해짐에 따라 리액트 쿼리를 사용하게 된다고 합니다.. 2024. 1. 30. Next.js로 SNS x.com 클론코딩하기 - 4 섹션 3 지난 시간까지 최대한 x와 일치하게 클론 코딩을 진행하였습니다. 이번 섹션은 디자인 부분을 마쳤지만 API 명세서가 아직 없을 경우를 가정하고 진행됩니다. MSW 로 임시 API 만들기 https://mswjs.io/ Mock Service Worker API mocking library for browser and Node.js mswjs.io 그간 API는 직접 서버 안에 간단히 만들어서 Postman 으로 확인하거나 공공API만 사용했는데 해당 사이트에선 임시로 API를 만들 수 있다고 합니다. DB를 거치지 않고 요청에 대한 응답을 간단하게 예측하여 만드는 것이라 빠른 작업이 가능할 것 같습니다. 작업 전에 백엔드 개발자와 간단하게 소통하여 json 형태로 어떻게 올 것인지 얘기를 나눠보.. 2024. 1. 24. 코딩애플 - 로그인 / 회원기능 NextAuth 로 소셜로그인 구현하기 1. 아이디/비밀번호 관리가 필요 없음 2. 코드 짤 것이 없음 github 소셜로그인 1. 깃헙 측에 permission 얻기 settings > developer settings > oauth app url쪽에 현재 개발 중인 url을 가져다가 써준다. 이때, 해당 url 이 이미 있다면(다른 어플을 만들때 사용했다든가) 그걸 그대로 사용해줘야 에러를 만나지 않을 수 있음 만들면 나오는 클라이언트ID와 비밀번호를 가지고 있어야 유저 정보를 달라고 요청이 가능하다. 2. next-auth 설치하기 npm install next-auth@4.21.1 3. next-auth 세팅하기 pages > api > auth 폴더 생성 해당 폴더 안에 [...nextauth].. 2023. 7. 2. 코딩애플 - Nextjs 로 게시판 글 작성하기 게시판 내용 목록 불러오기 먼저 /list 로 라우팅 처리를 해준다. 폴더 list 를 app 폴더 안에 만들고 -> list 폴더 안에 page.js 를 만들어준다. 해당 page.js 안에 몽고DB를 연동하고 게시글 목록을 불러와준다. import {connectDB} from '@/utils/database' const client = await connectDB; const result = await client.db('forum').collection('post').find().toArray(); MongoDB를 connect 시켜둔 코드를 import 하고 client 에 db, collection 에 접근해준다. 잘 불러와진다. 그 다음으론 게시글의 상세페이지 이동을 처리 -> Dynamic.. 2023. 6. 25. 이전 1 2 3 4 다음
