서버 만드는 법 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에 자바스크립트를 넣을 수 있다. 단점: 페이지 로드가 ..
폴더 방식의 라우팅 지원 1. 우선 app폴더의 하위폴더를 생성 ex) app/list => 작명한 폴더이름 = url 이름이 됨. 2. 만든 폴더 안에 page.js 파일을 생성 ex) app/list/page.js => html 작성 공간 Link 태그 => 페이지 이동 태그 1. 사용할 태그를 우선 import import Link from "next/link"; 2. html 안에 작성 home list home 기준으로 url은 "/"이며, 폴더명 = url명에 따라 작성 => 페이지 이동 태그 완성 중복 레이아웃 구성법 다른 페이지에 같은 html을 구성하고 싶은 경우 ex) header(상단바) 또는 footer(하단바) layout.js는 page.js를 덮는구조를 가진다. => 위에서 작..
1. node.js 설치 => 18v 이상 권유 2. node 버전 확인 명령어 node -v 3. node.js 및 npm 삭제 1) 제어판 > 프로그램 추가/제거 > node.js 삭제 2) 아래 경로에 해당하는 디렉터리 삭제 C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs C:\Users\User\AppData\Roaming\npm C:\Users\User\AppData\Roaming\npm-cache => 파일이 없다면 건너뛰기 4. node 버전 및 npm 버전 확인 C:\Users\User>node -v > 'node.js'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. C:\Users\User>npm -v..
CSR(client-side rendering) => 브라우저에서 html을 실시간으로 만드는 방법 React, Vue.js는 이에 해당함. 장점: 1. 페이지 전환이 부드러움 2. 이쁜 사이트를 만들 수 있음. 단점: 1. 구글 검색 노출이 낮음 2. 페이지 로딩속도가 낮음 => 투자대비 수입지표가 낮아짐 SSR(server-side rendering) => 서버에서 html을 미리 만들어서 보내주는 방법 Next.js, nuxt, sveltekit, remix 등이 해당함. 장점: 1. 조금 가벼운 편 2. 구글 검색 노출이 잘 됨. 3. 일부 선택적인 CSR이 가능 4. 최적화된 HTML 랜더링 단점: 1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함. 2. 리액트의 미완성 기능을 도입해서 ..
