[z-com] 섹션 1 정리

제로초 님의 Next + React Query로 SNS 서비스 만들기 인강 섹션 1을 정리한 내용이다.

---

Section 1. 기획자와 디자이너가 기획서를 던져주었다.

---

1. Next 프로젝트 시작하기

• Next.js 프로젝트 Install

npx create-next-app@latest

• 프로젝트 시 기타 설정들(참고)

• 디렉토리 구성(참고)
  

  

  • public: 모든 사람들이 접근 가능한 이미지를 넣어두는 곳
  • src/app: 앱 라우터에서 주소와 관련된 부분들을 넣어두는 곳(app 폴더의 위치는 통상적으로 src 바깥쪽이나, src 내에 라우팅 부분(src/app)과 그 외의 목적으로 사용하는 디렉토리를 src/test, src/mock 등으로 구성) => 취향에 따라 다를 수 있음
  • next.config.js: Next.js 관련 설정 파일
  • ts.config.json: TypeScript 관련 설정 파일

---

2. 브라우저 주소 app 폴더에 반영하기

• app 폴더 구조
  • 다이나믹 라우팅([username],[id]):[]에 감싸진 부분을 변수처럼 인식하여, 각각의 사용자나 상태에 따른 개별 페이지를 일일이 만들지 않아도 되게끔 함
  • layout.tsx: 전체 페이지 레이아웃을 구성하는데 쓰이며, 웹사이트의 헤더, 푸터, 사이드바와 같이 페이지별로 공통적으로 사용되는 컴포넌트를 포함함. children에 는 각각의 페이지 컴포넌트가 들어감.
    • 페이지별로 페이지만의 레이아웃이 별도로 필요할 때는 별도로 layout.tsx 파일을 구성(ex: app/home/layout.tsx) 이 때, 페이지가 렌더링되는 순서는 layout.tsx(전체) => layout.tsx(home)=> home.tsx
    • layout.tsx 예시

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div lang="ko">루트 레이아웃{children}</div>;
}

---

3. 라우트 그룹

• Next.js 14에서 로그인 분기처리

-   (beforeLogin)과 (afterLogin)으로 로그인 여부에 따라 보여줄 페이지 컴포넌트를 분리하여, layout을 달리 보여줌
-   ()로 감싼 디렉토리는 url에 관여하지 않으나, ()디렉토리 내에 layout.tsx은 둘 수 있음\*_

---

4. template.tsx, Link, Image, redirect

• template.tsx: layout.tsx와 같이 공통적인 레이아웃을 구성하는 점은 비슷하나, 다른 라우트로 이동시 layout.tsx와 달리 매번 새롭게 마운팅이 됨
  • layout.tsx와 공존하면 안됨
  • 공식문서에 따르면, Google Analytics나 페이지를 이동할 때마다 기록되어야할 작업이 있는 경우에 사용

import styles from "@/app/(beforeLogin)/_component/main.module.css";
import Image from "next/image";
import zLogo from "../../../../public/zlogo.png";
import Link from "next/link";

export default function Main() {
  return (
    <>
      <div className={styles.left}>
        <Image src={zLogo} alt="logo" />
      </div>
      <div className={styles.right}>
        <h1>지금 일어나고 있는 일</h1>
        <h2>지금 가입하세요.</h2>
        <Link href="/i/flow/signup" className={styles.signup}>
          계정 만들기
        </Link>
        <h3>이미 트위터에 가입하셨나요?</h3>
        <Link href="/login" className={styles.login}>
          로그인
        </Link>
      </div>
    </>
  );
}

• Link: Next.js에서 제공하는 Link 컴포넌트는 클라이언트 사이드 라우팅을 가능하게 함. 브라우저의 페이지 전환 없이 새로운 페이지로 네비게이션 할 수 있음.(기존 a 태그는 url 변경시 리다이렉트됨) 이는 사용자 경험을 향상시키며, 애플리케이션의 전체적인 성능을 향상시킴
• Image: Next.js의 Image 컴포넌트는 이미지를 더 효율적으로 로드함. Image 컴포넌트는 이미지 최적화를 자동으로 수행하며, 레이지 로딩, 자동 리사이징, 그리고 최적의 이미지 형식 선택 등의 기능을 제공함.

import { redirect } from "next/navigation";

export default function Login() {
  redirect("i/flow/login");
}

• redirect: 사용자를 다른 URL로 리디렉션할 수 있게함.

---

5. css module을 선택한 이유

• Tailwind vs Styled Component(Emotion) vs Sass vs Css Module vs Vanilla Extract: CSS Moudle 선택
  • Next의 기능이 초점이기 때문에, 호불호가 있는 CSS 방식은 지양
    (Tailwind: 호불호 너무심하고, 가독성 좋지 않음 / Styled Component: Server Component SSR시 문제 O / Vanilla Extract: Windows와 호환 문제)
  • Css Module의 장점: 페이지 컴포넌트 단위로 페이지 컴포넌트.module.css 형식으로 가운데 module이 붙음

---

6. 패러렐 라우트

• Parellel Route(병렬 라우트): 여러 페이지를 한 라우트 url에서 보여주려고 할 때 사용(ex: dimmed 처리된 것 같은 페이지 + 모달 페이지)
  • 병렬 라우팅은 @를 폴더명에 붙여 사용(ex: @modal / 모달이 여러개라면 @modal2, @modal3 이런식으로 패러렐 라우트 폴더를 늘려서 사용)
  • 동시에 보여줄 페이지를 동일한 라우팅 내에 존재시켜야함!

---

7. 클라이언트 컴포넌트로 전환하기

• Server Component(서버 컴포넌트): Next.js에서 기본적으로 컴포넌트는 서버 컴포넌트로 서버에서 렌더링됨.
  • 주로 SEO(검색 엔진 최적화)에 중요한 콘텐츠, 초기 페이지 로딩 속도 향상, 또는 서버에서만 접근 가능한 데이터를 다루는 등의 경우에 사용됨
  • 서버에서 렌더링된 컴포넌트는 HTML 형태로 클라이언트에 전달되며, 검색 엔진이 콘텐츠를 쉽게 읽을 수 있게 함
• Client Component(클라이언트 컴포넌트): "use client"를  컴포넌트 최상단에 붙여 사용하며, 클라이언트 측에서 렌더링됨.
  • 주로 useState나 useEffect, 이벤트에 대한 핸들링이 존재할때 사용됨
    
  • 클라이언트 컴포넌트는 JavaScript를 통해 브라우저에서 직접 조작하므로, 사용자 경험(UX)을 풍부하게 만들 수 있음 
    

---

8. default.tsx

• default.tsx
  
  • 패러렐 라우트의 기본값이 되는 컴포넌트! (@modal/default.tsx)

---

9. 인터셉팅 라우트

• Intercepting Route(인터셉팅 라우트):  
  • (.)를 앞에 붙여, 현재 레이아웃에서 애플리케이션의 다른 부분의 경로를 렌더링 할 수 있음
  • 클라이언트에서 라우팅할 때만, 인터셉트 라우팅이 적용됨 

---

10. private_foler(_폴더)

• Private Folder: 
  • _를 붙여 사용. 반복되어 사용되는 컴포넌트를 두기에 적합 
  • UI 로직과 라우팅 로직을 분리하는 역할. 각 로직의 복잡성을 줄이고 코드의 가독성과 유지보수성을 향상시킬 수 있음

---

11. 로그인 모달에서 발생하는 문제 해결하기

• useRouter
  • router.push:
    • 다른 페이지로 이동할 때 사용.
    • 이동한 페이지로 이전 페이지로 돌아갈 수 있음 
    • 브라우저의 뒤로가기, 앞으로가기 버튼을 사용할 수 있음 
    • 무한반복이 되지 않도록 주의해야 함
  • router.replace:
    • 다른 페이지로 이동할 때 사용.
    • 이동한 페이지로 이전 페이지로 돌아갈 수 없음
    • 브라우저의 뒤로가기, 앞으로가기 버튼을 사용할 수 없음
    • 주로 로그인 후 페이지 이동 시 사용

---

12. Main, SignUpModal css 설명

• 컴포넌트 분리와 CSS 설명에 관한 부분이라 정리는 생략