[우리FIS아카데미 4기] 클라우드 서비스 개발 과정 4주차 회고

NextJS와 프로젝트에 매진한 4주차...

이번주는 너무 정신없었어서 학습일지 정리도 많이 밀렸다.. 흑흑

그래도 회고 글은 놓칠 수 없지...

 

2025-01-20-MON

자리를 바꿨는데.... 너무 중앙이다..

 

저번주 React에 이어 이번주는 요즘 다시 급부상하고 있는 NextJS에 대해 공부했다.

NextJS

왜 풀스택 프레임워크라고 소개한걸까? => 리액트와는 다르게 서버 측 프로세스 코드를 작성할 수 있다.

Image 태그 Link 태그 등 로우레벨의 태그들을 NextJS에서 최적화된 컴포넌트로 지원해준다. => 잘 활용하도록 하자.

 

NextJS는 라우터 방식이 두 가지가 있다.

pages router => pages 디렉토리 내의 파일 구조 기반의 라우팅

app router => app 디렉토리 내의 폴더 구조 기반의 라우팅

 

<동적 렌더링 관련 warning>

Error: Route "/products/[productId]/reviews/[reviewId]" used `params.reviewId`. `params` should be awaited before using its properties.

Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

=> In Next 15, these APIs have been made asynchronous. You can read more about this in the Next.js 15 Upgrade Guide. 15버전 부터는 해당 부분이 비동기로 만들어짐 그러므로 await 붙여야 함!

async function Page({ params }) {
  // asynchronous access of `params.id`.
  const { id } = await params
  return <p>ID: {id}</p>
}

 

client app은 브라우저랑 서버로 나뉘어져 있음

서버는 use server 혹은 디폴트로 정의되고

브라우저는 use client라고 명명해주어야 함

서버에서 브라우저의 부담을 완화해줌

 

static rendering - 서버가 빌드할 때 미리 코드를 찍어두고 요청 시 바로 보내줌

 

[...slug] 로 작성 시 아래의 모든 경로의 세그먼트들을 다 잡아줌

not-found.js : app 루트 경로 속 존재하지 않는 경로로 들어갔을 시 나오는 404 페이지

 

<숨김폴더 활용>

utils 폴더를 만들고 싶을 때 => _utils로 작성. utils로만 작성하면 라우팅해주므로 폴더명 앞에 _를 쓰자!

 

2025-01-21-TUE

JTBC 구내식당... 꿀맛



CSR vs SSR

클라이언트 컴포넌트 vs 서버 컴포넌트

fetch cache

 

tanstack-query, AuthJS

 

NextJS 개념을 어제에 이어 진행했다.

아으 정리할게 너무 많다.

2025-01-22-WED

NextJS 공식 문서에 나오는 practice 실습을 진행했다.

총 16챕터까지 있는데 양이.... 상당하다ㅋㅋㅋㅋㅋㅋ

근데 챕터 하나하나 다 중요한 내용들이 함축되어 있어서 이거 실습 제대로만 한다면 정말 많이 배워가겠구나 생각했다.

그래서 아는 내용이더라도 공식문서 한줄한줄 제대로 읽으면서 실습을 진행해나갔다.

 

https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

Learn Next.js | Next.js by Vercel - The React Framework

실습 대시보드 화면

 

조건부로 클래스 이름을 조합하기 위한 유틸리티 라이브러리인 clsx를 활용하여 스타일링을 진행했다.

 

동적렌더링 vs 정적렌더링

부분 사전 렌더링(동적 + 정적)

 

동적 렌더링을 할 때 데이터 받아오는 속도가 느려질 때?

loading.tsx를 통한 자식요소 전체 렌더링

suspense를 통한 부분 요소 렌더링

 

 

서브웨이 먹고 승한오빠가 커피 내기 제안해서 가위바위보했는데 오빠가 졌다ㅋㅋ

원래 내기 제안한 사람이 지는 법.

잘먹었어~~~

 

그리고 저녁에 자바인액션 스터디를 했는데

진짜 뭔소린지 하나도 모르겠어서 눈물났다.

오늘 스터디의 30% 내용 정도는 이해한 듯.......

스터디원분들... 너무 똑똑하십니다........ 열심히 따라갈게요....

2025-01-25-THU

이 날은 프로젝트 실습날!!

 

NextJS를 활용한 프로젝트인데 나는 다른 팀원분들과 같이 오픈소스 프로젝트를 진행했다.

디자인 시스템(사실 여기서도 하게 될 줄은 몰랐다... 근데 안하면 후회할 거 같았다)을 우리금융 및 우리FISA를 대상으로 만들어보고자 디자인 시스템 라이브러리를 만들어보기로 했다.

 

다른 동아리에서 디자인 시스템을 만들어봤지만 중간에 투입된 프로젝트였기도 했고 초기부터 디자인시스템을 만들어보는 경험을 해보고 싶어서 참여하기로 했다. 근데 디자이너의 중요성을 정말 많이 깨닫는다... 작업하면서 디자이너 분들의 ux 의견과 디자인 의견이 목말랐다. 

디자인 시스템은 사용자와 라이브러리 개발자의 니즈 모두에 맞는 것은 무엇인가 계속해서 생각하고 고민해야 한다.

 

리뷰도 그래서 더더욱 꼼꼼히 하게 되는 것 같고 내가 모호하게 아는 부분이 무엇인지 확실히 짚고 리뷰하고 있다. 알차게 프로젝트 개발해야지!!!

 

이전 디자인 시스템을 하면서 forwardref를 사용했었는데 이 역할이 도대체 정확히 뭔지 궁금했다.

유연성과 확장성을 위해 사용되는데 어떤 컴포넌트일 때, 어떤 상황일 때 고려해서 이 forwardref를 써야 할 지 많이 고민했던 것 같다.

이 녀석에 대해서도 추후 포스팅을 해야겠다.

 

2025-01-26-FRI

어제 이어서 프로젝트 실습날이다.

남은 PR 리뷰를 하고 리뷰 반영된 걸 확인하고 아직 다른 팀원분이 완성하지 못한 컴포넌트를 같이 보면서 작업하였다.

 

우리 디자인 시스템 빌드 담당 현식님이 울면서 install 한 번씩 해달라고 돌아다니셨다...

NextJS 얼른 사과해.

 

 

FISA 선배님이 오셔서 주스를 선사하셨다...

감사합니당ㅎㅎㅎ

 

⬇️ 내가 작업한 버튼과 체크박스 컴포넌트 ⬇️

 

 

끝나고 막판에 다른 동아리 디자인 시스템에서 이슈가 발생해서... 그거 하다가 네트워크 스터디 집중을 못했지만🥲

끝나고 친구들이랑 신나게 설연휴 시작을 맞이했다.

행복한 설연휴 시작~!💕

 

이번엔 학습일지를 따로 포스팅을 할 시간이 없어서... 별로 못올렸지만 현재 우선순위에 있는 애들이 너무 많다.. 추후 꼭 써야지!

할게 너무너무너무 많다ㅠㅠㅠ

 

밑에 링크는 이전에 모리딥 스터디를 하면서 NextJS 관련하여 정리한 것이 있어... 올려두겠다.

13인데 저거 읽었을 때는.... 아니 벌써 15라니 말도안돼 너무 빨라요 천천히 업데이트해주세요.

🔗 학습일지 링크

[React/NextJS] React18과 함께 Next.js 13의 변화 알아보기