노마드스터디 리액트 10주 5기 6주차 주간회고록

 

6주차

기간:

24.07.22 ~ 24.07.28

 

요약 3줄

• NextJS 기초 강의 시작! 예전에 혼자 들으려고 했을 때는 진도가 덜 나갔는데 스터디하면서 들으니 진도가 쭉쭉 나갔다.
• 회사 일이 많아지면서 번아웃 온 것처럼 피곤하고 스트레스 받아서 면접 준비를 제대로 못 했다. 회사 바쁜 일이 마무리 될 때까지는 스터디와 회사 프로젝트만 병행 해야겠다.
• 벌써 6주차라니 나이 들수록 시간이 빨리 가는 것 같다. 찾아보니 나이가 들수록 새로운 자극과 경험을 하지 않기 때문에 일상이 반복되고 시간이 수축되는 것처럼 느낄 수 있다고 한다. 바빠도 틈틈히 새로운 자극을 주도록 노력해보자!

 

---

 

이번주 목표

• 일일 강의, 일일 챌린지, 일일 스프린트 전부 완료하기
• 주간 회의록 작성하고 7월 26일(금) 17시까지 제출하기
• NextJS 기초 강의 코드챌린지(졸업작품) 제출!

 

결과

NextJS강의는 새롭게 알게 된 내용이 많아서 더 흥미롭게 들을 수 있었다~! 매일 매일의 목표를 모두 달성하진 못했지만 다음날 보충해서 듣더라도 어제까지 들어야할 내용들은 전부 완료 :) 남은 코드 챌린지까지 일요일에 제출하고 다음주는 캐럿마켓 클론코딩 시작! 이번 스터디 강의 중에 제일 듣고 싶었던 강의인만큼 기대된다!

 

---

 

일일 스프린트

🔽  2024/07/22 월요일

워크샵의 여파로 과제 겨우 내고 주말 내내 시체처럼 누워있었지만...

다시 정신 차리고 일주일 화이팅 해보자!!🐳

 

[✅] NextJS 시작하기: #1.1부터 ~ #2.1까지 강의 듣기

[ - ] 리액트 공식문서 읽기 

[✅] 프리야 빈야사 요가

 

 

🔽  2024/07/23 화요일

 

[✅] NextJS 시작하기: #2.2부터 ~ #2.10까지

[✅] 일일 퀴즈 제출

[ - ] 리액트 공식문서 읽기 

[ - ] 빈야사 요가

[✅] 면접 준비

 

 

🔽 2024/07/24 수요일

영어면접이라닣ㅎㅎㅎ 나... 떨고있니...

 

[✅] 코딩테스트 & 영어면접

[⚠️] NextJS 시작하기: #3.0부터 ~ #3.8 강의 듣기

[✅] 일일 퀴즈 제출

 

 

🔽  2024/07/25 목요일

 

[✅] NextJS 시작하기: #3.4부터 ~ #3.8 강의 듣기

[✅] 주간회고록 새로 알게된 내용 작성

[✅] 인사이드 플로우 요가

 

 

🔽 2024/07/26 금요일

 

[  ] 6주차 주간회고록 작성 및 제출

[  ] 회사 프로젝트... (야근 예정)

 

---

이번주 강의 요약

새롭게 알게 된 것 :

1. 프로젝트 세팅

1) Next.js 설치

npm init -y
npm install react@latest next@latest react-dom@latest

• react-dom은 브라우저의 Document Object Model(DOM)에 렌더하는 역할을 한다.

2) app 폴더 안에 page.tsx 파일 생성

•  Next.js 프로젝트를 빌드할 때 첫화면을 app 폴더 안에 page라는 파일로 인식하기 때문에 꼭 네이밍 확실하게 해서 생성해줘야 한다.

3) Github에 올리기 전 .gitignore 파일 있는지 확인!!

• 아무 생각 없이 github에 올렸다가 module까지 같이 올라가는 바람에 커밋 내역 삭제하고 다시 올리느라 애먹었닿ㅎㅎㅎㅎㅎ

 

2. ROUTING

1) Defining Routes

• 리액트 방식의 라우팅은 URL에 접근했을 때 특정 컴포넌트를 렌더링 하는 방식이었다.

/ ---> <Home />
/about-us ---> <AboutAs />
/movie/:id ---> <Movie />

 

 

• Next.js는 직접 적어줄 필요없이 파일 시스템을 통해서 URL을 표현해준다. URL경로명이 곧 폴더 이름이 되는 것!
• app/page.tsx & layout.tsx는 root segment라고 부른다! homepage.com/ 을 입력했을 때 보이는 최상위 파일(root 파일)

<app>(폴더)
page.tsx
layout.tsx
-- <about-us>(폴더)
---- page.tsx
-- <sales-product>(폴더)
---- page.tsx

// 이런 경우에는 /about-us /sales-product 경로로 화면이 보여지고 하위에 page.tsx 화면이 뿌려진다!
// 파일명은 무조건 page.tsx여야하고 내부에 컴포넌트명은 상관없다~!

 

 

2) Not Found Routes

• app 폴더 하위에 layout.tsx와 page.tsx는 필수적으로 들어가야 하고 하나 더 추가하자면 not-found.tsx 이다!
• not-found.tsx 도 절대절대 파일명을 바꿔선 안 된다!!! 사용자가 존재하지 않는 경로로 url 접속을 할 경우 리다이렉트 해주는 화면이 된다.

- Navigation Bar

• NextJS에는 우리에게 url에 관한 정보를 알려주는 hook 이 존재 → usePathname
• usePathname은 오직 client component에서만 작동한다. 그래서 파일 최상단에 “use client”라고 명시해줘야 에러가 뜨지 않는다!

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navigation() {
  // usePathname은 오직 client component에서만 작동한다!
  const path = usePathname();
  console.log(path);
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link href="/">Home</Link>
            {path === "/" && "🤲🏻"}
          </li>
          <li>
            <Link href="/about-us">About us</Link>
            {path === "/about-us" && "🤲🏻"}
          </li>
        </ul>
      </nav>
    </>
  );
}

 

 

3) CSR vs SSR

• Redering이란 next.js가 우리의 react component를 가져와서 브라우저가 이해할 수 있는 html로 변환하는 작업을 말한다.

💦 CSR

• react가 render되는 방식은 client side rendering이다. 그 말은 즉 브라우저가 렌더링을 한다는 것
• client는 Javascript를 로드하고, 그 후에 Javascript가 UI를 빌드한다.

💦 단점1)

• 유저가 페이지에 도달한 시점에는 페이지가 빈 화면이다. (도달한 후에 브라우저의 Javascript 엔진에 의해 코드가 추가되는 것)
• Javascript가 비활성화된 사용자는 화면을 볼 수 없다…ㅠ

💦 단점2) SEO에 취약하다!

• 검색 엔진이 보는 내 웹사이트는 말 그대로 비어있는 상태라 SEO에 취약할 수밖에 없다. App을 실행시키려면 Javascript를 실행시켜야 한다.

 

☀️ SSR

• Next.js로 웹사이트를 빌드할 때는 default로 서버 사이드 렌더링이 된다.
• Javascsript가 활성화 되어있지 않아도 사용자가 HTML을 볼 수 있게 되는 것
• ❤️ 중요한 건 Next.js application의 모든 page 안의 모든 component들은 next.js가 그것들을 우선 server에서 render 한다는 것
• “use client”라고 명시한 것 때문에 사용자들은 client단에서만 render된다고 생각하는데 Next.js는 모든 컴포넌트들을 backend에서 렌더된다!
• 사용자가 /about-us url에 접속 했을 때 서버측에 request를 하고 HTML을 response해와서 전체 html코드를 받아온다! Javascript에 의존하지 않는다.

 

4) Hydration

• hydration은 단순 HTML을 React application으로 초기화(실행) 하는 작업이다.
• /about-us —> Boring HTML —> :) —> init(Boring HTML) —> interactive HTML(리액트 어플리케이션으로 초기화)
• Boring Button은 Interactive해지고 EventListner가 추가 된다.
• dehydrated딸기(건조된 딸기)에서 → hydrated딸기(신선한 딸기)로 변환
• 리액트나 프레임워크가 client에 로드되면 그걸 완전한 functional interactive app으로 변환 시킬 수 있는 것

 

5) ‘use client’

• framework가 initialize된 후든 hydration이 완료된 후든 use client가 없는 화면은 hydrate되지 않는다.
• 'use client'는 이 component는 client 화면에서 interactive 해야해 라고 말해주는 것
• 그럼 언제 use client를 사용해야하지? => 프로그래밍 하다보면 에러로 알려줄 것
• ⭐use client는 오직 client에서만 render된다는 것을 의미하지 않는다. backend에서 render되고 frontend에서 hydrate됨을 의미한다.
• 단순 HTML이 있는 코드에서는 ‘use client’를 명시할 필요가 없다. use client가 없다는 뜻은 Javascript 코드의 양이 줄어듦을 의미하고 페이지 로딩 속도가 빨라진다!

 

6) Layouts

• 재사용하는 요소들(Ex: 네비게이션, 헤더 등)을 위해 layout이 필요하다!
• 레이아웃은 서로 상쇄하지 않는다. 중첩된다.

 

7) Metadata 

• route groups은 (home) 이런 식으로 폴더 이름을 괄호로 묶어줘야 한다.
  • 이런 식으로 폴더 이름을 지정해주면 URL을 바꾸거나 하지 않아 프레임워크에서는 보이지 않는다.
  • 괄호 폴더는 URL에 전혀 영향을 미치지 않는다.
• routes를 그룹화해서 logical groups으로 만들 수 있다!
• 레이아웃이 중첩되는 방식과 마찬가지로 메타데이터도 중첩이 가능하지만 실제로는 중첩되지 않고 병합된다!
  • 예를들어 rootlayout에 description만 넣어두고 각 페이지마다 title을 따로 넣어주면 title만 다르게 보여짐
• 메타 데이터는 페이지나 레이아웃에서만 내보낼 수 있다!!!

// 메타 데이터 템플릿
// Rootlayout
export const metadata: Metadata = {
	title: {
		template: "%s | 홈페이지 이름",
		default: "홈페이지 이름"
	},
	description: "The best movies on the best framework"
};

// 각자 페이지 ex Home
export const metadata = {
	title: "Home",
};

---

주간 회의와 조별 활동

이번주 활동:

-

 

기억에 남는 것:

-

 

---

칭찬하고 싶은 점

• 영어 면접 준비가 안 되서 못 본다고 포기하고 싶었지만 깨지더라도 부딪혀보자!하는 마음으로 임했다.
• 장대비를 뚫고라도 요가에 빠지지 않고 다녀왔다 :)
• 졸려도 아침에 명상하고 독서 기록 등의 아웃풋을 했다!

 

고치거나 버려야 할 점

• 밥 먹고 요가 가기 전에 늘어지는 것... 21시 요가인 날은 밥 먹고 3~40분의 시간이 있는데 그 시간을 빈둥거리면서 써버린다ㅠ
• 씻고 화장품 바르고 머리 말릴 때 유튜브에 정신 팔려서 시간 많이 쓰는 것ㅠ