Sub's playground

서버 기능별 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로 요청 받은 것을 구분하고..

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 태그가 있는데 굳이..

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 사용자 정의 클래스를 사용하여빠르고 효율적으로 스타일을 적용할 수 있도록 설계되었다.  Tailwind CSS는 미리 정의된 클래스를 제공하여, CSS를 작성하지 않고도 다양한 스타일을 적용할 수 있다. Next.JS에서의 사용 예시export default function LoginBtn() { return ( { signIn(); }} > Login );}위에 있는 className 안에 들어있는 값이 Tailwind CSS이다. class자체로 고유한 디자인 값을 갖고 있는 것이기 때문에 별도의 css파일 작성이 필요하지 않은 장점이 있지만, 코드의 가독성이 복잡해지는 단점이 있다.

글 작성 기능 만들기글을 작성하고 저장하는데 있어서 사용자가 작성한 글이 바로 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폴더를 만들..

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) (생략)

import { connectDB } from "@/util/database"const db = (await connectDB).db("forum")let result = await db.collection('컬렉션이름').find().toArray()object 자료형이란?let data = { name: 'kim', number : 20} // array랑 비슷한데 모든 자료마다 이름을 부여해준 차이가 있다.console.log(data.name)데이터를 console.log로 출력해봤는데 시작괄호가 '['라면 array 자료형임

프로젝트 배포하기npm run build클라우드에 올린 다음에 클라우드 cmd에서 다음 명령어 실행npm run startNext.js에서의 페이지 종류static rendering pagedynamic rendering page기본적으로 Next.js에서 페이지를 생성할 경우 디폴트는 static rendering page이다.static rendering page는 npm run build 할 때 만든 html 페이지를 그대로 유저에게 보낸다. (O 기호)dynamic rendering 페이지는 유저가 페이지를 접속할 때마다 html을 새로 만들어서 보낸다. (람다 기호)static rendering page를 dynamic rendering page로 바꾸는 방법해당 페이지의 코드로 가서 다음을 추..

Map 함수 사용 방법 (HTML에서 반복문 사용하기)let array = [2,3,4];array.map(()=>{ console.log('안녕')});let array = [2,3,4];array.map((a,i)=>{ console.log(a) // 어레이에 있는 값들을 출력해준다.});HTML에 적용해보자반복생성 예시export default function List() { let 상품 = ['Tomatoes', 'Pasta', 'Coconut'] return ( 상품목록 { 상품.map((a,i)=>{ return ( { a } $40 ) ..

Props 문법함수 파라미터랑 비슷하다.막간을 이용한 Javascript 개념function 안에 만든 변수는 function 안에서만 사용 가능하다.props 문법부모함수에서 자식함수는 ()안에 (props)처럼 props 변수를 받고, 데이터가 필요한 곳에 props.작명 으로 기입.

Component란?길고 복잡한 html을 한 단어로 축약한 것.Component를 작성하는 방법function 작명(){} //보통 영어 대문자로 시작한다.return (축약할 긴 html)여기서 주의할 것: return안에는 여러개의 html태그를 넣을 수 없다. 사용Component의 단점Component간 데이터 공유가 어렵다.Next.JS의 컴포넌트 종류server component아무데서나 만드는 컴포넌트는 기본적으로 server component이다.html에 자바스크립트 기능 넣는 것이 불가능하다.React에 있는 useState, useEffect등 사용이 불가능하다.로딩 속도가 매우 빠르다. (페이지를 로드할 때 자바스크립트 기능이 없기 때문)검색엔진 노출에 유리하다.client co..