Presigned URL이란? => 클라이언트 > 서버에게 Presigned URL만 요청. => 클라이언트가 직접 > S3에 업로드하는 방식 클라이언트 > 서버 (/test/page.js) 'use client' export default function Test(){ return ( { let file = e.target.files[0] let fileName = encodeURIComponent(file.name); let res = await fetch(`/api/post/image?file=${fileName}`); res = await res.json() } }> ) } => 태그를 통해 클라이언트가 이미지 선택 => 서버에게 Presigned URL을 달라고 GET 요청 서버 > 클라이언트 ..
loading.js (loading.js) export default function Loading() { return 로딩페이지 } 리액트의 컴포넌트랑 같은 기능으로, => Next.js에서는 loading.js로 작명을하게 되면, 페이지로딩 중에 해당 페이지를 출력해 준다. error.js (error.js) 'use client' export default function Error({error, reset}){ return ( 에러페이지 { reset() }}>다시시도 ) } 서버 에러나, DB에러 등등의 에러발생 시, error.js로 작명을 하게 되면 해당 페이지를 출력해 준다. => 단, client component로 만들어야 함. => props 기능 중 error, reset 파라미터가..
보안작업 1. 우선. env파일을 프로젝트 폴더에 생성한다. 2. 코드 작성 NEXTAUTH_SECRET='1234' 작명은 편한 대로 하면 된다. => 변수명 = "보관할 문자" 3. 사용 방법 ([...nextauth].js 파일) secret: process.env.NEXTAUTH_SECRET process.env. 변수명을 통해 env파일에 있는 값을 접근할 수 있다. api 키 값이나, 보안이 필요한 값을 env파일에 넣어서 사용하면 보안상 문제가 되지 않는다! 앞으로는 코드에 바로 키 값을 넣지 않고 env파일을 따로 작업하여 사용해야지. 하하 난 이제 초짜가 아니 라궁~
패스워드 암호화 1. 라이브러리 설치 npm install bcrypt 2. import 라이브러리 import bcrypt from "bcrypt"; 3. 패스워드 암호화 const hash = await bcrypt.hash(req.body.pw, 10); => 회원가입 시 pw를 해쉬 작업 4. DB에 넣기 req.body.pw = hash; await db.collection("user").insertOne(req.body); 5. DB 확인 => DB관리자도 클라이언트의 pw를 확인할 수 없게 해쉬화 하는 용도 => 클라이언트가 원래 pw로 로그인을 하면 정상적으로 로그인 가능. Credentials provider 설정 1. import 라이브러리 import CredentialsProvide..
DB adapter 설정 => session방식은 DB에 데이터를 저장해야 함. 1. 라이브러리 설치 npm install @next-auth/mongodb-adapter 2. auth 파일에 코드 추가 ([...nextauth].js 파일) import { connectDB } from "/util/database"; //추가 import { MongoDBAdapter } from "@next-auth/mongodb-adapter"; //추가 import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github"; export const authOptions = { providers: [ GithubProvider..
깃허브 OAuth 설정 1. github 로그인을 한다. 2. setting을 들어간다. 3. 왼쪽 메뉴에서 젤 아래 있는 Developer settings에 들어간다. 4. OAuth Apps 버튼을 누른다. 5. 새로운 어플리케이션을 만든다. 6. 앱 이름과 URL을 기입한다. => URL의 경우 배포하지 않은 개발 중인 사이트라면 아래와 같이 기입한다. 7. Client ID/PW 발급 =>PW 발급은 Generate a new clint secret을 누르면 된다. 소셜로그인 구현 1. 라이브러리 설치 npm install next-auth 2. 폴더 생성 후 js파일 생성 pages/api/auth/[...nextauth]. js 파일을 만든다. 3. 코드 작성 => github가 아닌 다른 소..
서버 배포 1. Next.js 서버를 배포하기 위해서 아래와 같은 명령어를 입력한다. npm run build => 서버에 올릴 html을 미리 만들어주는 작업이다. static rendering / dynamic rendering build 작업을 거치면 해당 화면을 볼 수 있는데, =>ㅇ기호 : static rendering 방식이고, => λ기호 : dynamic rendering 방식이다. fetch와 같이 데이터를 주고받는 함수의 유무에 따라서 빌드작업 이후 각각 static / dynamic 으로 랜더링 방식이 정해진다. static rendering 의 경우는 데이터의 변화를 감지하지 못한 채 정적페이지로 남게 된다. 반대로 dynamic rendering은 데이터의 변화를 감지하면, 동적으..
URL parameter 문법 1. dynamic routing방식을 생각해 보면 => 폴더 이름을 [ ] array로 작명을 하게 된다면 어떤 URL로 접근을 하여도 그 page.js를 보여줬었다. 이번에는 js파일도 [ ] array로 작명을 해보자. [test]. js를 하면 어떤 점이 좋을까? query string 우선 클라이언트가 서버에게 GET방식을 사용하여 값을 전달하면 /URL?name=hong&age=20 이런 식으로 파라미터가 같이 전달됨을 확인할 수 있다. => 이것을 query string이라고 한다. 클라이언트 > 서버 메시지 전달 1. api/test/[id]. js를 만들어보자. 2. 클라이언트가 GET이나 POST방식을 통해 api/test/원하는 데이터로 요청을 하면 =>..
