> [!date] published: 2025-05-22 ## 📌 오늘의 주제 - Next.js 훑어보기 - 5조 코드리뷰 관전 ## 💡 배운 것 ### Next.js 길라잡이 개념과 관련된 강의보다는 공부해 보면 좋을 키워드들을 알려주셨다. > [!note]- > 멘토님 개인적 의견 > > - 13 -> 14 : 최적화에 집중 > - 14 -> 15 : 그 최적화를 롤백 (너무 버그가 많았음) > > 캐싱 기능에 집중한 업데이트였는데, 여기에 관련된 버그들이 많아져서 일단 롤백하고 Deep Dive 섹션으로 넘어간 것 같다. (참고: [Deep Dive: Caching \| Next.js](https://nextjs.org/docs/app/deep-dive/caching)) > 캐싱 기능은 아직까지는 대용량 트래픽 용 보다는 초기 프로덕트에 좀 더 맞지 않나. 최신 기술들은 불안정한 경우가 많으므로 기술의 장단을 이해하면서 쓰는 것이 좋다. 라우팅은 최대한 심플하게 가는 것이 좋다. 라우팅이 복잡해졌을 때(그러니까 Next.js의 다양한 라우팅 방식들을 많이 사용했을 때) 버전 업데이트에 따라 하위 호환성이 지켜지지 않는다면 문제가 좀 많이 복잡해질 수 있다. **network boundary** (용어는 좀 다를 수 있음) : `'use client'` 를 사용하면 하위 컴포넌트들이 모두 클라이언트 컴포넌트가 된다. 어디서부터 클라이언트에서 그릴 것인가를 구분하는 경계가 바로 `'use client'` > [!note]- 그 외의 키워드들... > > - layout과 template > - CSR, SSR > - 에러 핸들링 > - fetch -> 캐싱 > - server action : 기존에 오랫동안 쌓아온 패러다임으로는 좀 쓰기 어렵다고 말씀하심 > - Server Component와 Client Component의 차이점에 대해서 > - React의 Server Component <- 요 녀석을 쉽게 쓰기 위한 것이 Next.js (?) > - RSC ### Node 브라우저에는 자바스크립트 엔진이 있기 때문에 자바스크립트 코드를 실행할 수 있다. 브라우저 밖에서는 node를 이용해서 자바스크립트 코드를 실행할 수 있다. ~~이어지는 cursor를 이용한 express server 바이브 코딩... 무섭고 재밌었다.~~ ### 5조 코드리뷰 구경 코드 리뷰에 앞서... **코드와 자신을 동일시하지 말자!** 멘토님의 코멘트들 **1️⃣ 변수명에서 의미가 잘 드러나게 하기** **2️⃣ useEffect가 정말 필요한 상황이었을지를 생각해보자** [You Might Not Need an Effect – React](https://react.dev/learn/you-might-not-need-an-effect) **3️⃣ 조건문을 읽기 좋은 형태로 바꿔주기** ```ts // bad if (menuExpendedIndex === null) { // ... } // good const isMenuExpended = menuExpendedIndex !== null; if (isMenuExpended) { // ... } ``` **4️⃣ 핸들러는 함수로 뽑아내주자** 읽는 사람이 한번 더 생각하지 않게. ```tsx // bad <button onClick={() => setExpendedIndex(null)}>닫는 버튼</button>; // good const closeMenu = () => setExpendedIndex(null); <button onClick={closeMenu}>닫는 버튼</button>; ``` **5️⃣ 컴포넌트의 이름은 두글자 이상이면 좋다.** `Header` 보다는 `AppHeader` 프로젝트가 커지면 커질수록 컴포넌트 이름이 겹칠 가능성이 많아짐... Header / CardHeader / ... 이런 것들 보통 컴포넌트를 찾아갈 때 검색으로 찾게 될텐데 수많은 Header들 사이에서 고르려면 공통 컴포넌트도 이름을 구체적으로 적어주는 것이 좋다. (CommonHeader라던가 AppHeader라던가) **7️⃣ string 은 single quote가 좋다.** 암묵적 룰이라고만 말씀하셨는데... Airbnb 스타일 가이드에서 single quote를 쓰도록 되어있던 것 같아서 찾아보니 맞았다. - [Use single quotes `''` for strings. - airbnb/javascript: JavaScript Style Guide](https://github.com/airbnb/javascript?tab=readme-ov-file#strings--quotes) - [quotes - ESLint - Pluggable JavaScript Linter](https://eslint.org/docs/latest/rules/quotes) (default option은 double(❗️) 이다.) ![[361b0ce2-5295-40cb-aeb7-2baa3494c13d.png]] [Do you use Single Quotes or Double Quotes? : r/learnjavascript](https://www.reddit.com/r/learnjavascript/comments/v96drv/do_you_use_single_quotes_or_double_quotes/) 8️⃣ 이름은 가급적 fullname으로 역시 읽는 사람이 한번에 이해할 수 있도록 ```ts // bad const eventHandler = (e) => { // ... }; // good const eventHandler = (event) => { // ... }; ``` ## 📝 생각과 메모 단순히 "코드의 가독성" 이라고 표현하면 좀 추상적인 느낌이었는데 멘토님이 여러 번 강조하신 **"인지 비용"** 이라는 말이 참 좋은 표현인 것 같다. 코드의 가독성이 나빠 모호해지면 - 코드를 읽는데 시간이 오래 걸린다. - 코드를 잘못 이해하면 추가 커뮤니케이션이 필요하다. - 미래의 나도 헷갈릴 수 있음 이런 여러가지 이유로 "비용"이 발생하기 때문에 코드 가독성이 중요하다고 할 수 있는 것이었다. -- AI 코드 리뷰 툴에도 관심이 생겼다. 지금 하고 있는 프로젝트에 적용해 볼 수 있으면 적용해보고 싶다.