Next.js 5

Next. JS 글을 작성해보자 (2)

서버 기능별 status 종류처리 성공 시: status(200)처리 실패 시: status(500)처리 실패 시(유저의 잘못으로 인해): status(400)서버 쪽 소스작성app 폴더 외부에 pages라는 폴더를 만들고 /pages/test.js 파일을 작성한다.예시 서버 소스는 다음과 같다.export default function handler(request, respond) { console.log(123); respond.status(200).json("Success");}handler는 두개의 instance를 받을 수 있는데, '응답'과 '결과'이다. 위 코드에서는 request와 respond로 받았음.만일 같은 서버 소스인데, GET으로 받은 것과 POST로 요청 받은 것을 구분하고..

IT/Javascript 2024.06.18

[Next.JS] useRouter에 대해서 알아보자

useRouter에 대해서 알아보자Next.JS에는 페이지를 이동하는 방법이 두가지가 있다.Link 태그를 이용한 방식useRouter를 이용한 방식Link 태그를 이용한 방식의 예{a.title}1월 1일useRouter를 사용하는 방법일단 useRouter는 '클라이언트 컴포넌트'에서만 사용 가능하다.사용 예시'use client'import {useRouter} from 'next/navigation' # navigation에서 따오는 것.export default function DetailLink(){ let router = useRouter() return ( { router.push('/') }}>버튼 #router.push를 통해 페이지 이동 )}그럼 Link 태그가 있는데 굳이..

IT/Javascript 2024.06.18

Next. JS 글을 작성해보자 (1)

글 작성 기능 만들기글을 작성하고 저장하는데 있어서 사용자가 작성한 글이 바로 DB에 저장되면 위험 요소가 많다. ex.) 값을 입력하지 않고 null로 DB에 저장하려고 하는 경우따라서 DB에 저장하기 전에 중간에 서버에서 사용자가 작성한 글을 한번 거치고 저장해야 한다. (3 tier architecture)서버개발자는 각각의 기능마다 고유의 url과 method를 작성한다.method는 총 5가지 종류가 있다.GET (유저에게 데이터 전송시)POST (새로운 데이터 추가시)PUT (DB에 있는 데이터 수정)DELETE (DB에 있는 데이터 삭제)PATCH (DB에 있는 데이터 수정)서버기능은 app 안에 api이름의 폴더를 만들거나 pages라는 폴더를 root위치에 만들어서 안에 api폴더를 만들..

IT/Javascript 2024.05.29

Next.JS Dynamic Route

Dynamic RouteDynamic Route를 사용하면 비슷한 페이지를 여러개 만들 필요가 없다.Dynamic Route 만드는 방법폴더명을 지을 때 [] 를 붙여서 이름을 짓는다.ex.) [Register]하위에 page.js 생성DB에서 게시물 1개만 가져오는 방법import { connectDB } from "@/util/database"const db = (await connectDB).db("forum")let result = await db.collection('컬렉션이름').findOne({찾을 document정보})유저가 URL에 입력한 내용 가져오는 방법export default async function Detail(props) { console.log(props) (생략)

IT/Javascript 2024.05.27

Next.JS를 사용해보자

Next JS 프로젝트 생성 방법npx create-next-app@latest잠깐!! 여기서 React 프로젝트를 생성하는 방법npm init react-app '프로젝트 명'프로젝트 파일 구조page.js가 메인 파일이다.app 폴더: 코드를 작성할 폴더layout.js: 메인페이지 감싸는 용도의 페이지public 폴더: 이미지나 static 파일 보관용api 폴더: 서버기능 만드는 폴더next.config.js: nextjs 설정 파일node_modules 폴더: 설치한 라이브러리 보관용 폴더package.json: 설치한 라이브러리 버전 기록용 파일npm run dev // locathost에서 실행하는 명령어

IT/Javascript 2024.05.22