[개발일지] 3월 2주차 - 회사 내 전 프로젝트 web 코드 분석 & 발표

3/10 (월) ^^,,, 

1. next.js 서버컴포넌트, 클라이언트 컴포넌트 차이 공부 -> api 호출, strict mode 적용 이런것 차이
2. prefetch
3. 새로고침을 안하고 다른 창으로 들어가면 네트워크 로그가 계속 이어지는 것, 새로고침하면 로그가 초기화되는 것
4. react query , swr, contextAPI, redux  

 

3/11 (화) - 현재 회사 프론트코드 분석한 것 발표! 

1. useLayoutEffect가 뭐지? (O) 
   `useLayoutEffect`는 `useEffect`와 비슷하지만 실행 시점이 다른 React 훅이다
   
   브라우저 화면 그리기 전에 동기적으로 실행
   useLayoutEffect(() => {
       // 여기 코드가 먼저 실행
   });
   
   브라우저 화면 그린 후에 비동기적으로 실행
   useEffect(() => {
       // 여기 코드가 나중에 실행
   });
   ```
   
   - `useEffect`: 
     - 비동기적 실행
     - 화면 렌더링 후 실행
     - 대부분의 경우 이걸 사용
   
   - `useLayoutEffect`:
     - 동기적 실행
     - 화면 렌더링 전 실행
     - UI가 깜빡이는 것을 방지할 때 사용
     - DOM 측정/수정이 필요할 때 사용
2. 클라이언트 컴포넌트 인데도 서버에서 /_rsc 요청이 실행되는 이유 (O) 

클라이언트 컴포넌트 안에 서버 컴포넌트가 import 되어 있어도 문제가 발생함.

-> useEffect, useState 사용하는데 서버 컴포넌트인 컴포넌트를 발견함. 

 

서버 컴포넌트에서 useEffect를 사용하면 문제가 발생할 수 있다.

 

서버 컴포넌트에서 useEffect 사용 시 발생하는 문제

1. 서버 컴포넌트는 브라우저에서 실행되지 않음

• 서버 컴포넌트는 Next.js 서버에서 실행되므로,
  클라이언트에서만 동작하는 React Hook(useEffect, useState 등)은 사용할 수 없다.
• 예를 들어, page.tsx가 서버 컴포넌트라면 여기에 useEffect를 써도 실행되지 않음.

// 🚨 서버 컴포넌트에서는 `useEffect`가 실행되지 않음
export default function ServerComponent() {
  useEffect(() => {
    console.log("이거 실행될까?");
  }, []);

  return <div>서버 컴포넌트</div>;
}

➡ Next.js 서버에서 실행되기 때문에 useEffect가 동작하지 않음!

---

✅ 2. 서버 컴포넌트에서 useEffect를 사용하면 Next.js가 클라이언트에서 다시 실행할 수도 있음

만약 서버 컴포넌트가 처음 실행된 후, 클라이언트에서 다시 실행될 경우
불필요한 API 호출이나 /_rsc 요청이 발생할 가능성이 커요.

export default function ServerComponent() {
  useEffect(() => {
    console.log("클라이언트에서 실행됨!");
  }, []);

  return <div>서버에서 실행된 후, 클라이언트에서 다시 실행될 수 있음</div>;
}

➡ 서버에서 한 번 실행된 후, 클라이언트에서 다시 실행되면서 React의 "Hydration Mismatch" 오류가 발생할 수도 있음. 

 

3/ 13 (목) 

1. access token, refresh token 비교해서 알아두기.
2. useMutation 글 정리하기

임시 저장 글이 엄청 쌓여있다~~,, ㅎ 언제 다 정리하지!