Nextjs 코드 구성 및 상태관리

bicco2·2023년 3월 19일

nextjs

Chapter4 - 코드 구성과 데이터 불러오기

코드 구성

아토믹 디자인

atom : 가장 기본적인 컴포넌트 디렉토리 또는 애니메이션
(ex. buttoon, input, p ...)
molecules : atom에 속한 컴포넌트들의 조합
(유틸리티 기능들은 잘 사용되지않음)
organisms : molecules와 atom을 조합한 컴포넌트
(ex. 회원가입 양식 , footer 등)
templates : 일종의 페이지 스켈레톤

디렉토리

src 로 최상위 폴더를 설정하는 이유는 간결화를 위한 것임

(src/pages가 있고 pages/가 있으면 전자는 무시되는 점을 참고)

utilities : 함수 각각을 목적에 맞게 구분하여 분리해놓은 디렉토리
public : 정적 파일 제공 디렉토리 , js css images 등으로 나눌 수 있으며 실행시키면
(http://localhost:3000/assets/css/{filename} 로 nextjs 서버가 파일에 접근한다.)
- public/icons 는 웹 앱 매니페스트 아이콘을 제공할 용도로 사용된다.
styles : 공통 스타일이나 유틸리티 기능을 관리할 때
lib : 서드 파티 라이브러리 관련 디렉토리

데이터 불러오기

getStaticProps로 정적 페이지를 빌드 시점에 데이터를 가져올 수 있고

getServerSideProps를 통해 서버가 페이지를 렌더링할 때 데이터를 불러올 수 있다.
(ctx는 경로 매개변수)
userReq.status를 사용해서 에러 발생 api를 걸러내도록 한다.

브라우저에서 http 요청을 보낼시 주의 사항

믿을 수 있는 곳에만
ssl 인증서를 통해 안전하게 접근할 수 있는 곳의 http api만 사용해야함
(즉, https를 사용해야함)
브라우저에서 원격 데이터베이스에 직접 연결하면 안된다.
(외부 접근 가능성이 높아짐)

Rest Api 요청은 서버 or 클라이언트에서 데이터를 불러올 수 있다.

동적 웹은 클라이언트가 데이터를 불러오는 경우가 많다.
(Api의 Authorization 이 네트워크 탭에 노출될 위험이 있음)

But, 서버에서 http 요청을 보내는 것이 훨씬 안전하다 .

Api end-point가 알려지지않고 그 외 전송하는 매개변수값이나 헤더 토큰 값도 노출하지 않기 때문이다.

서버 :getServerSideProps, getStaticProps를 사용하는 것
클라이언트 : 컴포넌트가 마운트 된 후와 특정 이벤트가 발생한 후, 이렇게 두가지 시점에 데이터를 불러온다.

Next-js 는 이런 문제를 해결할 수 있음

api 페이지 사용

rest api를 만들고 서버가 http 요청을 하게한다.
그 후 클라이언트로 결과만 전송
이 방법은 Api를 proxy 형태로 만들어 숨기는 것이다.

그래도 뚫릴 수 있음

해결법

컴포넌트 목록을 서버에서만 렌더링 하도록 만듦
jwt Api키 이용
벡앤드 프레임워크 사용

import { useEffect, useState } from 'react';
import Link from 'next/link';

function UserData({ user }) {
  return (
    <div style={{ display: 'flex' }}>
      <img src={user.profile_picture} alt={user.username} width={150} height={150} />
      <div>
        <div>
          <b>Username:</b> {user.username}
        </div>
        <div>
          <b>Full name:</b> {user.first_name} {user.last_name}
        </div>
        <div>
          <b>Email:</b> {user.email}
        </div>
        <div>
          <b>Company:</b> {user.company}
        </div>
        <div>
          <b>Job title:</b> {user.job_title}
        </div>
      </div>
    </div>
  );
}

export async function getServerSideProps({ query }) {
  const { username } = query;

  return {
    props: {
      username,
    },
  };
}

function UserPage({ username }) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(async () => {
    const req = await fetch(`/api/singleUser?username=${username}`);
    const data = await req.json();

    setLoading(false);
    setData(data);
  }, []);

  return (
    <div>
      <div>
        <Link href="/" passHref>
          Back to home
        </Link>
      </div>
      <hr />
      {loading && <div>Loading user data...</div>}
      {data && <UserData user={data} />}
    </div>
  );
}

export default UserPage;

이런식으로 마지막 return 에서 Loading user data… 이 부분만 서버 렌더링 되고
나머지는 클라이언트 측에서 이뤄지는 것을 알 수 있다.

graphQL 사용하기

graphQL은 꼭 필요한 데이터만 불러오도록 지정할 수 있고 한번의 요청으로 여러 곳의 데이터를 불러 올 수 있다.

또한 사용할 데이터에 대해 정적이고 강력한 타입 시스템을 제공한다.

chapter5 - 지역 및 전역 상태 관리

상태(동적 정보)관리는 높은 수준의 상호작용이 가능한 사용자 인터페이스(ui) 구현이나 ux를 더 뛰어나게 만들기 위한 필수 요소

React는 단방향 데이터 흐름이기 때문에 부모 > 자식 형태만 가능하다.

따라서 전역 상태관리가 어렵다

방법

context api 사용
_app.js 에서 provider로 감싸서 state 제공, React와 다르지 않게 사용할 수 있음 .
Redux
context api와 비슷 (shallowEqual : 렌더링 최적화)

chapter 6 - css와 내장 스타일링 메서드

Styled JSX : nextjs 기본 스타일링 기법 (css in js)

vercel 제공 css와 사용법 같고 컴포넌트 내부에서 사용가능
컴포넌트 각자 할당으로 같은 클래스 이름이여도 컴포넌트가 다르면 중복 사용가능
- 만약 해당 컴포넌트 내에서 같은 속성을 사용하고 싶다면
css-in-js 방식이라 실행 도중 또는 컴파일 시점에 css로 변환된다.

Nextjs에서 css-in-js 방식은 단점이 존재함

개발 도구 지원 부족(자동완성 같은거)
코드 내 css에 대한 의존성이 커져 앱 번들이 느려짐
서버가 미리 css 규칙들을 생성해놓아도 클라이언트에서 하이드레이션이 끝나게 되면 재생성해야함

CSS Module : css 클래스를 실행시간 부하 없이 모든 언어로 만들 수 있음

.button처럼 global {} 형식으로 가능 + 셀렉터 컴포지션으로 규칙을 만들고 덮어 쓸 수 있음

SASS : 기본 지원

for 변수, 반복문 , 믹스인과 같은 기능 제공
scss와 sass는 다른것 : scss는 css 확장자에서 바꿔도 문제가 없지만 sass는 호환되지않음
단 엄청 큰css 파일을 컴파일 할 수 있는 위험성과
결과 예측이 쉽지않은 단점이 있음

bicco2

FE 개발자다?

이전 포스트

Nextjs 렌더링 전략 및 내장 컴포넌트

다음 포스트