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 파라미터가..
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/원하는 데이터로 요청을 하면 =>..
fetch() 함수 { fetch('/URL', { method : 'POST', body : '안녕' }) }}> 이 전에는 태그를 사용해서 서버로 값을 전달했었는데, 이 fetch()라는 함수를 사용하게 되면 GET, POST뿐만이 아니라 PUT, DELETE요청도 추가로 할 수 있다. PUT은 보통 값을 수정할 때 보내는 용도이고 DELETE는 값을 삭제할 때 보낸다. => 근데 가끔 에러가 나는 경우가 종종 있다, POST로도 다 해결할 수 있으니 POST 사용을 권한다. 그리고 두 번째 차이점은 태그 방식은 서버로 보낼 때 브라우저가 새로고침이 되는데, fetch() 방식은 새로고침이 없이 보낼 수 있다는 점. 이러한 fetch() 함수를 사용하는 방식을 Ajax라고 칭한다. 예외처리 fetch..
SEO란? 웹사이트의 구조를 작업하여 검색 엔진 상위에 노출될 수 있도록 최적화하는 과정 HTML과 자바스크립트의 관계 # 자바스크립트 문법 => useEffect를 예를 들자면 html이 로드가 된 후, 안에 있는 코드가 실행되는 로직을 가지고 있다. => 즉 데이터가 없는 html이 먼저 보이고, 데이터가 천천히 채워지는 셈. 그래서 페이지로드가 느린 것이고, 사람입장에서도 답답할 수 있지 않은가? 자. 그럼, 검색엔진 봇 입장에서 생각을 해보자. 필요한 자료를 수집하러 온 검색 봇이 우리 사이트에 방문을 했다. 하지만, html에는 아무런 정보가 없다. 왜냐하면 useEffect를 실행하기 전이기 때문이다. 이는 큰 문제로 연결된다. 왜냐하면 봇은 빠르게 정보가 없음을 판단하고 떠나버린다. => 쉽..
