[Day 58] 2022-0912: Next.js

🐈오늘 공부한 것

✔️투두리스트 리뷰

https://friedegg556.tistory.com/227

구현한 스타일링 코드와 리덕스 툴킷으로 리팩토링한 과정을 글로 정리했다. 처음에 할 때는 쉬워보였다가 중간에 안풀릴때는 엄청 어려웠다가 다 끝내고 다시 보니 또 엄청 쉽게 느껴지는 마법... 

✔️Next.js

노마드 코더의 Next.js 시작하기 강의를 수강중이다. 오늘 배운 내용은 Next.js 프로젝트에서 css 적용하는 방법과 app 컴포넌트, 레이아웃 컴포넌트로 전체 페이지에 스타일 일괄 적용하기 그리고 next.config.js 파일로 redirect, rewrite 설정하기.

 

CSS module 과 styled jsx

후술할 _app.js 파일을 제외한 일반 page 파일이나 컴포넌트 파일에 css를 적용할 때는 파일명.module.css 와 같이 이름을 붙인 css module 파일만이 허용된다. 이렇게 작성된 css 가 적용된 요소나 클래스에는 [파일이름]_[클래스 이름]__[해시값] 으로 클래스 이름이 자동생성 되기 때문에 코드 작성시 클래스명을 여러 파일에서 중복해서 사용할 수 있게 된다. 

import 후 사용할 때는 아래와 같이 작성한다.

// module.css 를 작성한 뒤 컴포넌트에서 import 해준다.
import styles from './NavBar.module.css';

// ... 컴포넌트 내부에서...
// 아래와 같은 패턴으로 작성한다.
// 일반적인 패턴 : className = '.nav' 와 같이 작성하면 동작하지 않는다.
// style을 object의 프로퍼티로 접근한다. 
<nav className={styles.nav}>

styled jsx 란 styled-components 같은 CSS IN JS 라이브러리이다. jsx 문법 안에서 style 태그를 사용해 스타일 코드를 작성할 수 있고 css module과 마찬가지로 적용된 요소에 개별 class 를 자동으로 부여하기 때문에 클래스이름 중복 여부를 신경쓰지 않아도 된다. cra나 cna 로 생성한 프로젝트에서 별도 설치 없이 바로 사용할 수 있다. 

<style jsx>{`
  nav {
    background-color: tomato;
  }
  a {
    text-decoration: none;
  }
  .active {
    color: yellow;
  }
`}</style>

 

_app.js 로 전체 페이지 공통 레이아웃 만들기

cra로 생성한 프로젝트에서는 페이지 라우팅을 할 때 모든 페이지들의 상위 컴포넌트가 존재하기 때문에 신경쓰지 않아도 되는 부분이지만, next.js 프로젝트에서는 그에 상응하는 상위 페이지(?) 라는 개념이 모호한 것 같다. 니코쌤이 오늘 알려준 내용은 _app.js 라는 컴포넌트로, 이 파일 안에 있는 내용을 가지고 현재 보고있는 페이지에 다른 컴포넌트들을 추가해줄 수 있다. 이름은 반드시 _app.js 여야 하며, pages 폴더 안에 생성한다.

//_app.js
import Layout from '../components/Layout';
import '../styles/globals.css';

export default function App({Component, pageProps}) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

이 app 컴포넌트는 Component와 pageProps 이렇게 두 가지를 인자로 받는다. about 페이지 컴포넌트가 렌더링 될 때 next.js 는 이 app컴포넌트에 about 컴포넌트와 그 props를 전달해주는데, 위 코드와 같이 Layout이라는 다른 컴포넌트를 불러와서 저렇게 감싸주면 내가 about.js 를 Layout 컴포넌트를 가지고 작성하지 않았어도 실제 렌더링 될 때는 저 컴포넌트까지 포함된 내용이 렌더링 된다. about 페이지 이외에도 pages에 포함된 다른 페이지 컴포넌트를 렌더링 할 때마다 이 app 컴포넌트가 소환(?) 되기 때문에 공통 레이아웃을 지정해 줄 수 있는 것이다. 

참고로 next.js 초기에 함께 생성된 styles 폴더에 보면 globas.css 라는 css 파일이 있는데 app 컴포넌트에서는 일반 css를 import하듯 이 css를 불러와서 전체 페이지에 글로벌 스타일로 적용시킬 수 있다. 

 

next.config.js Redirect, Rewrite 설정하기

리다이렉트란 초기에 요청한 url이 아닌 다른 url을 제공해서 이동하도록 하는 것이다. 

// 리턴문 뒤에 정보를 배열안에 담아서 주어야 함.
// 사이트 내부 경로는 물론 외부 주소로 목적지를 변경할 수도 있다.
// permanent 옵션은 검색엔진에 영향을 줄 것인지 여부.
async redirects() {
    return [{source: '/contact', destination: '/form', permanent: false}];
},

// 파라미터가 있을 때 파라미터는 그대로 가지고 가면서 경로만 바꾸려면 아래와 같이 작성
// * 를 붙이면 여러 파라미터를 가지고 있어도 리다이렉트 가능
async redirects() {
  return [{source: '/old/:id*', destination: '/new/:id*', permanent: false}];
},

리라이트란 fetch 요청 api key 등 숨기고 싶은 것이 있을 때, 유저에게 보이지 않도록 임의의 url 로 특정 url을 다시 작성하는(?) 것이다. 아래와 같이 작성할 수 있다.

async rewrites() {
    return [
      {
        source: '/api/movie',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
},

위 코드처럼 작성하고 fetch 요청 url을 srouce에 있는 내용으로 변경하면, fetch 요청을 할 때 유저에게는 해당 source를 보여주면서 실제로는 destination에 해당하는 주소로 요청을 보내게 된다. 완전 신기하다...

 

+ JSX 코드에서 옵셔널 체이닝 활용하기

어떤 배열이 담긴 state가 있다고 할 때 해당 state의 초기값을 배열로 설정해주지 않으면 즉 해당 state가 undefined 이거나 이터러블이 아닐 때는 map 메서드를 사용할 수 없게 된다. 초기 값이 undefined 여야 할 경우에는 옵셔널 체이닝을 사용해서 아예 undefined인 경우에는 해당 메서드가 실행되지 않도록 할 수 있다. cool.. 

{movies?.map(movie => (
  <div key={movie.id}>
    <h4>{movie.original_title}</h4>
  </div>
))}

🐈더 공부할 것

1. Next.js (조건부 렌더링 테스트, EsLint ??)

2. 슬라이딩 윈도우, 해쉬 알고리즘 학습

🐈오늘의 느낀 점

1. Next.js 에 대해서 이제 발만 담그어 봤는데 굉장히 흥미롭다. 좀 어려운 부분이 ssr 에 관련된 내용인데 생소하다보니... 내일은 Next.js가 어떻게 동작하는지 쪼금 알아보아야겠음. 미리 html을 생성해서 pre-rendering이 된다고 하는데 코드 작성 과정에서 뭐가 잘못된건지 제대로 적용이 안되는 것 같은 느낌이 들었다. 이럴 수도 있는건가??

 

2. 긴 연휴가 끝나고 다시 일상으로 돌아가게 되었다. 4일 연휴동안 주말 이틀은 정말 푹~~ 쉰 것 같다. 오랜만에 맛있는 것도 먹고 바다도 보고 엄청 힐링이 되었다. 이제 삼국지 조금만 보고 더 열심히 해야지...ㅋㅋ