투두 리스트 프로젝트와 크립토미터 프로젝트를 복습했다. 코드를 복기하면서 잘 작성한 점도 보이고 문제점도 보여서 배우는 것이 많았다. 또한 블로그로 핵심 내용들을 정리하면서 복습효과도 있고 문서화 효과도 있어서 좋은 것 같다.
Next.js의 특징
보일러 플레이팅
npx create-next-app [폴더이름]
/pages
: 라우팅이 구현 되어있는 폴더/apis
: 백엔드 api 구현할 수 있는 폴더pages/_documents
: 공통된 html문서가 있는 곳pages/index.js
: index 페이지pages/_app.js
: 리액트의 app.jsx와 같음파일 시스템 기반 라우팅
폴더 안의 파일이 곧 페이지가 되는 라우팅 구조
다이나믹 라우팅
Link 컴포넌트
useRouter훅
// /pages/[id].js
import { useRouter } from "next/router";
export default function Product() {
const router = useRouter();
const { id } = router.query; // [id].js이므로 id라는 이름의 프로퍼티를 가짐
return <div>Product {id}페이지</div>;
}
import { useRouter } from "next/router";
export default function Search() {
const router = useRouter();
const { q } = router.query;
return (
<div>
<h1>Search 페이지</h1>
<h2>{q} 검색결과</h2>
<div>Search 페이지</div>
</div>
);
}
앞으로 남은 부트캠프 기간이 생각보다 짧은데 어떻게 배분할 수 있을지 고민하는 시간을 가졌다. 아무래도 알고리즘과 코딩테스트 연습을 해야겠다는 생각이 들었다. 프로젝트 경험은 하나 둘 씩 많아지는데, 코딩테스트 준비를 너무 안하다 보니까 불안감이 커졌다. 앞으로 하루에 3문제는 풀어야겠다. 남은 시간중 프로젝트 기간을 빼면 2달이 채 안된다. 백준 플래티넘 수준 정도를 2달안에 만들어야 하는데, 시간이 많이 없다는 것을 새삼 깨달았다.