[Day 57] 2022-0909: Next.js , 알고리즘

🐈오늘 공부한 것

✔️Next.js

Next.js 란 리액트 라이브러리의 프레임워크이다. 프레임워크란 그것을 사용하기 위해서 정해진 규칙이 있어서, 그에 맞춰 코드를 작성하면 프레임워크가 이를 정상적으로 동작하도록 관리하는 것이다. 리액트는 라이브러리이기 때문에 제공하는 기능을 내가 직접 가져다 쓰면서 구조와 흐름을 개발자가 제어하지만, 프레임워크는 뼈대 위에 내가 코드를 얹으면 프레임워크가 이를 제어한다는 차이가 있다. 렌더링 같은 경우도 일반적인 리액트 코드에서는 react-dom 을 불러와서 직접 사용해야 하지만 Next.js 에서는 그럴 필요가 없다. 추상화가 되어있어서 내가 코드를 짜면 프레임워크가 그 일을 대신해준다. 

 

Next.js 설치 및 프로젝트 생성

npx create-next-app@latest
# 중간에 프로젝트 이름을 묻는다.
# 프로젝트 생성 후, 프로젝트 실행
npm run dev

Next.js 가 SEO 에 유리한 이유

일반적인 리액트 SPA 페이지는, 빈 HTML 을 먼저 받은 뒤 자바스크립트 파일을 요청해 자바스크립트, 리액트로 모든 UI를 렌더링 한다. 이 말의 의미는, 인터넷 환경이 느리거나 드물게 자바스크립트가 활성화되지 않는 상황에서 유저는 빈 HTML 을 보게 된다는 것이다. 자바스크립트를 다운받고 실행하는데 시간이 걸리기 때문이다. 

 

Next.js 는 작성된 코드를 초기 상태값을 가지고 정적인 페이지, 즉 HTML 소스코드로 만들어 '미리' 렌더링을 하기 때문에, 자바스크립트 파일이 다운로드 되기 이전에 페이지를 먼저 볼 수 있다는 장점이 있다. 

 

또한 검색엔진은 이 HTML 파일의 정보를 가지고 검색 결과 노출의 우선순위를 결정하는데, 일반적인 리액트 SPA 페이지가 HTML에 아무 내용이 들어있지 않기 때문에 검색 최적화에 불리한 반면, Next.js 를 사용해 만든 페이지는 이미 html 안에 정보를 어느정도 가지고 있기 때문에 검색 최적화 SEO 에 유리하다고 할 수 있다.

 

Pages

Next.js 에서는 별도의 라우터 모듈을 설치하지 않아도 라우팅을 사용할 수 있다. create-next-app 으로 프로젝트를 생성했을 때 만들어진 pages 폴더를 사용한다. 이 폴더 안에 페이지 컴포넌트 파일을 작성하면, 그 파일 이름을 기준으로 라우팅이 가능하다. 이 때 반드시 export default 를 사용해야 한다는 규칙이 있다. 또한 여기서는 jsx 문법을 사용할 때 react 를 import 하지 않아도 된다는 편리함이 있다. 

pages 와 페이지 컴포넌트

// index.js
// index 이름을 가진 파일은 언제나 루트 디렉토리를 의미한다. 
// url/ 

export default function Home() {
  return (
    <div>
      <NavBar />
      <h1>Hello, World!</h1>
    </div>
  );
}

클라이언트 사이드 라우팅

네비게이션 바 등을 사용해서 클라이언트에서 라우팅 - 즉 새로고침 없이 라우팅을 하기 위해서는, Next.js 에서 제공하는 Link 컴포넌트를 사용할 수 있다. 사용 방법은 아래와 같다.

// Next.js 에서 제공하는 Link 컴포넌트
// 클라이언트 사이드에서 라우팅을 할 수 있도록 한다.
import Link from 'next/link';

// ... 컴포넌트 내부 코드
// 아래와 같이 작성하면 더 이상 새로고침 되지 않음. 
<Link href={'/'}>
  <a>Home</a>
</Link>
<Link href={'about'}>
  <a> About</a>
</Link>

// a 태그로 감싸도 작동한다. 
// Next.js 에서 내부적으로 Link 태그 안의 요소를 a태그로 감싸준다.
// 하지만 여러 정보를 전달하기 위해서 내부에 a 태그를 감싸서 사용하자. (className 적용 등)
<Link href={'/'}>Home</Link>
<Link href={'about'}>About</Link>

또한 현재 접속된 위치(페이지) 정보를 얻을 수 있는 useRouter 같은 함수도 제공한다. 

import {useRouter} from 'next/router';

// ... 컴포넌트 내부
const router = useRouter();
console.log(router);
// {pathname: '/', route: '/', query: {…}, asPath: '/', components: {…}, …}

router.pathname 으로 접근하면 현재 보고있는 페이지의 경로를 컴포넌트 내부에서 참조할 수 있게 된다. 

✔️알고리즘

https://friedegg556.tistory.com/224

https://friedegg556.tistory.com/225

투포인터 알고리즘과 슬라이딩 윈도우를 사용한 알고리즘 문제를 풀었다. 두 알고리즘의 기본을 사용해 푸는 문제여서 응용할 수 있는 문제를 더 찾아서 풀어야겠음. 

🐈더 공부할 것

1. 투두리스트 정리 후 블로깅

2. Next.js 완강 후 정리

🐈오늘의 느낀 점

1. 알고리즘 강의를 5강을 듣고 정리하는 것이 오늘 목표였는데, 밖에서 다른 분들과 하다보니 + 양이 너무 많아서 몰입하며 공부하지는 못한 느낌이다. 

2. 노마드코더 캐럿마켓 강의 수강을 위해서 Next.js 기본에 대해 공부하고 있다. 리액트에서 리덕스, 리덕스 툴킷으로 넘어가게 되었을 때 신세계라고 생각했는데, Next.js 는 더 신세계인 것 같다. 이렇게 많은 부분을 프레임워크가 대신 해준다니... 이런 프레임 워크도 단점이 있을까?? 음.. Pre Rendering을 하기 때문에 서버 부하가 많고 새 html을 불러올 때 깜박인다는 단점이 있다고 한다. 이제 접한지 하루 되었기 때문에 친해져봐야겠다.