2023.05.29 TIL

0

TIL

목록 보기
28/37
post-thumbnail

오늘의 나는 무엇을 잘했을까?

투두 리스트 프로젝트와 크립토미터 프로젝트를 복습했다. 코드를 복기하면서 잘 작성한 점도 보이고 문제점도 보여서 배우는 것이 많았다. 또한 블로그로 핵심 내용들을 정리하면서 복습효과도 있고 문서화 효과도 있어서 좋은 것 같다.

오늘의 나는 무엇을 배웠을까?

Next.js

  • Next.js의 특징

    • 프리렌더링: csr의 단점인 느린 초기 로딩속도를 보완하기 위해 일부를 렌더링하는 것
    • vercel 서버로 호스팅
    • 파일 시스템 기반 라우팅
  • 보일러 플레이팅

    • npx create-next-app [폴더이름]
    • /pages: 라우팅이 구현 되어있는 폴더
    • /apis: 백엔드 api 구현할 수 있는 폴더
    • pages/_documents: 공통된 html문서가 있는 곳
    • pages/index.js: index 페이지
    • pages/_app.js: 리액트의 app.jsx와 같음
  • 파일 시스템 기반 라우팅

    • 폴더 안의 파일이 곧 페이지가 되는 라우팅 구조

    • 다이나믹 라우팅

      • 위와 같이 pages폴더 안에 [id].js와 같은 페이지를 만들면, 다이나믹 라우팅을 구현할 수 있다. products라는 라우트 안에 100개의 제품이 각각의 페이지안에 들어있다고 하면, 페이지를 1.js. 2.js, .. 이렇게 100개를 만드는 것이 아니라 [id].js라는 하나의 페이지가 동적으로 각 제품에 맞는 페이지로 동작하게 할 수 있다.
  • Link 컴포넌트

    • Next.js에서는 Link컴포넌트를 next/link 모듈에서 기본으로 제공한다.
    • 페이지 이동 시 전체 페이지 재로딩 없이 페이지 이동을 가능하게 해준다.
    • React router dom과 다르게 href속성을 이용한다. (to 아님 주의)
  • useRouter훅

    • next/router 모듈에서 제공하는 useRouter훅을 사용하면 url에 들어온 쿼리 값을 이용하여 다이나믹한 페이지를 만들 수 있다.
      // /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달안에 만들어야 하는데, 시간이 많이 없다는 것을 새삼 깨달았다.

내일의 나는 무엇을 해야할까?

  • 알고리즘 3문제 풀기
  • next.js 강의 듣기

0개의 댓글