본문 바로가기

Web Study124

코딩애플 - 로그인 / 회원기능 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.
코딩애플 - 배포와 최적화에 대해, 회원가입에 대한 기초 Next.js 의 특성 리액트는 CSR으로 처음에는 브라우저가 빈 html 파일 받고 후에 렌더링이 진행되면서 내용이 채워진다. 하지만 Next 는 모든 페이지를 미리 렌더링하는 SSR 이므로 각 페이지의 html 을 미리 생성하게 된다. 차차 css 와 js 와 연결되고 브라우저에 의해 페이지가 로드되면 자바스크립트 코드가 실행되어 유저와 상호작용이 가능해지는 것이다. 이러한 과정을 hydration 이라고 한다. SSG (Static Site Generation) : 빌드 타임에 html 에 생성되어 매 요청마다 이를 재사용 SEO 에 유리 데이터가 바뀌지 않는 페이지에 사용 SSR (Server Side Rendering) : 유저의 요청마다 html 을 생성 배포를 위한 빌드 Next.js 로 작.. 2023. 6. 28.
코딩애플 - Next.js 로 게시판 수정/삭제 구현 게시글 수정 Dynamic route 기능으로 각 게시글의 수정 페이지를 만들어주기 게시글의 각각의 id 는 /modify/[id] 에 들어가므로, props.params.id 로 접근이 가능하다! 해당 id는 new ObjectId() 로 접근해서 findOne() 해준다. 찾아온 글을 input의 defaultValue 속성 안에 넣어주면 원래 글 내용이 잘 들어가진다. Next.js 에선 value 대신 defaultValue 를 사용하는게 오류가 적다고 한다. 몽고DB로 원래 내용을 수정해주기 updateOne({ 조건 }, {$set : { 수정해줄 내용 }}) 형태로 만들어 준다. 이때, 전에 배웠던 3계층 구조 원리에 의하여 클라이언트 딴에서 DB를 직접 건드리는게 아닌, 서버에 먼저 보내고.. 2023. 6. 27.
코딩애플 - 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.

티스토리툴바