fetch() 함수 { fetch('/URL', { method : 'POST', body : '안녕' }) }}> 이 전에는 태그를 사용해서 서버로 값을 전달했었는데, 이 fetch()라는 함수를 사용하게 되면 GET, POST뿐만이 아니라 PUT, DELETE요청도 추가로 할 수 있다. PUT은 보통 값을 수정할 때 보내는 용도이고 DELETE는 값을 삭제할 때 보낸다. => 근데 가끔 에러가 나는 경우가 종종 있다, POST로도 다 해결할 수 있으니 POST 사용을 권한다. 그리고 두 번째 차이점은 태그 방식은 서버로 보낼 때 브라우저가 새로고침이 되는데, fetch() 방식은 새로고침이 없이 보낼 수 있다는 점. 이러한 fetch() 함수를 사용하는 방식을 Ajax라고 칭한다. 예외처리 fetch..
destructuring 문법 => 구조화된 배열이나 객체를 분해하는 방법 (부모 컴포넌트) import Child from "./Child"; export default function Home() { let item = "test" return ( ); } 보통 props를 전달하기 위해서, 부모는 자식함수 호출과 동시에 props를 보내주는 형식을 사용한다. (자식 컴포넌트 ) export default function Child(props){ return( {props.item} ) } 자식은 부모의 props를 받고 부모 객체에 접근할 수 있다. (자식 컴포넌트 ) export default function Child({item}){ return( {item} ) } 하지만, destructur..
SEO란? 웹사이트의 구조를 작업하여 검색 엔진 상위에 노출될 수 있도록 최적화하는 과정 HTML과 자바스크립트의 관계 # 자바스크립트 문법 => useEffect를 예를 들자면 html이 로드가 된 후, 안에 있는 코드가 실행되는 로직을 가지고 있다. => 즉 데이터가 없는 html이 먼저 보이고, 데이터가 천천히 채워지는 셈. 그래서 페이지로드가 느린 것이고, 사람입장에서도 답답할 수 있지 않은가? 자. 그럼, 검색엔진 봇 입장에서 생각을 해보자. 필요한 자료를 수집하러 온 검색 봇이 우리 사이트에 방문을 했다. 하지만, html에는 아무런 정보가 없다. 왜냐하면 useEffect를 실행하기 전이기 때문이다. 이는 큰 문제로 연결된다. 왜냐하면 봇은 빠르게 정보가 없음을 판단하고 떠나버린다. => 쉽..
서버 만드는 법 1. /pages/api 폴더를 생성한다. 2. 원하는 이름의 js파일을 생성한다. => 필자는 /pages/api/test.js로 생성하였다. 클라이언트가 요청을 하면 적절히 응답하기 위한 서버코드를 이곳에 작성할 것이다. 클라이언트 > 서버 (app/write/page.js) export default function Write(){ return ( 버튼 ) } 1. form태그를 연다. 2. action: 서버 경로를 기입한다. 3. method : GET, POST 방식을 기입한다. - GET요청: URL의 주소 끝에 파라미터를 포함하여 전송하는 법. (qurry string) - POST 요청: 전송할 데이터를 HTTP메시지 body부분에 담아서 서버로 전송하는 법. 4. sub..
useRouter란? 1. 태그나 태그처럼 페이지 이동하는 방법 2. 자바스크립트 문법을 사용하므로 client component에서 사용할 것. import {useRouter} from 'next/navigation' 우선 import를 해준다. => 단 자동완성의 경우 next/router로 설정되는데, navigation으로 변경할 것. let router = useRouter() 편하게 변수에 담아준 뒤, { router.push('/') }}>버튼 이벤트 처리를 위해 버튼태그에 onClick을 사용한다. - push()는 경로로 이동을 하는 함수이다. { router.back() }}>버튼 - back()은 페이지 뒤로 가기 기능이다. { router.forward() }}>버튼 - forwa..
dynamic routing란? => 동적라우팅 게시판의 상세페이지는 보통 /detail/?(parameter) 이런 식으로 글 번호가 파라미터방식으로 라우팅이 된다. 하지만 next.js에서는 폴더 라우팅 방식이기 때문에 게시글의 개수만큼 폴더를 만들어야 하는지 의문이 들 것이다. 이때 array처럼 폴더 이름을 [ ] 안에 작명을 하게 된다면 어떤 문자가 안에 들어가도 page.js를 보여주게 된다. 즉, /detail/1234를 통해 접근해도 /detail/[폴더명]/page.js의 html이 랜더링이 된다는 뜻! 폴더 라우팅방식은 보면 볼수록 매력 있는 친구 같다. 조금 궁금하긴 했었는데 그냥 함수 같은 게 있을 줄 알았더니?! 이게 무슨 일 폴더를 리스트처럼 작명하는 방법일 줄이야 하하.. 볼 ..
1. 라이브러리 설치 npm install mongodb 2. DB 연동용 js파일 생성 => 필자는 root/util/database.js를 만들었음. 3. next.js용 mongoDB 공식코드 입력 import { MongoClient } from 'mongodb' const url = 'URL' const options = { useNewUrlParser: true } let connectDB if (process.env.NODE_ENV === 'development') { if (!global._mongo) { global._mongo = new MongoClient(url, options).connect() } connectDB = global._mongo } else { connectDB =..
server component export default function Home() { return ( test ); } 평소처럼 사용하는 컴포넌트들은 server component이다. 장점: 페이지 로드가 빠르다. 단점: 리액트문법처럼 html안에 { }를 사용해 자바스크립트 문법을 사용하지 못한다. => useState, useEffect, onClick 불가능 client component 'use client' export default function Home() { return ( test ); } 차이가 없어 보이지만 상단에 'use client'를 붙이면 client component가 된다. 장점: 리액트 문법과 동일하게 html에 자바스크립트를 넣을 수 있다. 단점: 페이지 로드가 ..
