즐거워하는 중

[React] 리액트 딥다이브 - Hook 정리

kiki14 — Fri, 22 Dec 2023 01:13:01 +0900

1. Virtual DOM 가상 돔

일단 DOM에 대해 먼저 알아야 한다.

DOM - Document Object Model

요소를 담은 것이 문서
돔은 트리구조로 요소를 노드로 표현한 것
(API 제공 -> 이걸로 DOM 조작, querySelector 등등)

Virtual DOM

실제 돔을 복사한 것. (JS객체 형태로 메모리상에 저장된다.)
그러나 요소를 조작할 순 없다. (API 제공하지 않기 때문)

리액트는 이 가상돔을 사용하여 빠른 업데이트를 할 수 있게 했다. (실제 돔을 조작하지 않기 때문)

React는 가상돔을 어떻게 활용하길래 빠른 업데이트를 하나?

리액트는 항상 두 개의 가상 돔을 갖고 있다.

렌더링 이전 객체 (변경 이전)
렌더링 이후에 보이게될 화면 구조를 나타내는 객체 (변경 이후)

리액트는 state가 변경되면 렌더링이 되는데, 브라우저가 그려지기 전에 가상돔을 생성한다.
즉, 업데이트 이전의 가상돔과 업데이트 이후의 가상돔을 비교하여 (- Diffing)
딱 그 부분만 실제 돔에 적용시킨다. (- Reconciliation: 재조정)

재조정이 효율적인 이유? 바로 Batch Update 때문
변경된 모든 엘리먼트를 일괄 적용한다. (Batch)
-> 빠르고 효율적이다.

Diffing : 리액트가 가지고 있는 두 개의 가상 돔, 변경 이전 객체와 변경 이후 객체를 비교하여 어떤 부분이 바꼈는지 파악
Reconciliation : Diffing을 통해 변경 부분을 파악하여 실제 DOM에 일괄 적용 (Batch Update)

2. memo

// 코드 첨부하기

3. 리액트 훅 깊게 살펴보기

함수형 컴포넌트가 상태를 사용하거나 클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 다양한 작업을 하기 위해 훅이 생겨났다.

3.1 useState

함수형 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 한다.

리액트는 클로저를 사용한 라이브러리다.

const [data, setData] = useState();

useState 내부에 선언된 setData 함수는 실행이 종료된 이후에도 지역변수인 state를 계속 참조한다.

게으른 초기화 (lazy initialization)

일반적으로 useState에서 기본값을 선언하기 위해 useState()인수로 원시값을 넣는 경우가 대부분이다.

그러나, 함수를 인수로도 넘겨줄 수 있다. 이를 게으른 초기화라고 한다.

게으른 초기화는 useState의 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용하라고 돼 있다.
이 게으른 초기화 함수는 오로지 state가 처음 만들어질 때만 사용된다.

// 일반적인 useState 사용 - 바로 값을 넣는다.
const [count, setCount] = useState(
  Number.parseInt(window.localStorage.getItem(cacheKey))
);

// 게으른 초기화 - 함수를 실행하여 값을 반환한다는 것
const [count, setCount] = useState(() =>
  Number.parseInt(window.localStorage.getItem(cacheKey))
);

언제 게으른 초기화를 사용하나요?
localStorage나 sessionStorage에 대한 접근, map, filter, find 같은 배열에 대한 접근, 혹은 초깃값 계산을 위해 함수 호출이 필요할 때와 같이 무거운 연산을 포함해 실행 비용이 많이 드는 경우에 게으른 초기화를 사용하면 좋다.

3.2 useEffect

내가 아는 useEffect의 정의

두 개의 인수를 받는다. 첫 번째는 콜백, 두 번째는 의존성 배열이다.
의존성 배열에 값이 변화되면 첫 번째 인수인 콜백을 실행한다.
클래스형 컴포넌트의 생명주기 메서드와 비슷한 작동을 구현할 수 있다.
두 번째 의존성 배열에 빈 배열을 넣으면 mount 될 때만 실행된다.
useEffect는 클린업 함수를 반환한다. 이 함수는 unMount 될 때 실행된다.

그러나 위 정의들은 어느 정도 옳지만 완전히 정확한 것도 아니다.

정확한 정의는,

useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘이다.
그리고 그 부수 효과가 ‘언제’ 일어나는지보다 어떤 상태값과 함께 실행 되는지 살펴보는 것이 중요하다.

3.2.1 useEffect는 의존성 배열이 변경된 것을 어떻게 아는 것일까?

여기서 기억할 것은 함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행한다.
렌더링할 때마다 의존성에 있는 값을 보면서 이 의존성의 값이 이전과 다른 게 하나라도 있으면 부수 효과를 실행하는 평범한 함수일 뿐이다.

state와 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수이다.

클린업 함수의 목적

useEffect 내에서 반환되는 클린업 함수는 정확히 무엇이고 어떤 일을 할까?

일반적으로, 이벤트를 등록하고 지울 때 사용한다고 알려져 있다.

로그를 살펴보면 클린업 함수는 이전 count 값, 즉 이전 state를 참조해 실행한다.

클린업 함수는 새로운 값과 함께 렌더링 뒤에 실행이 된다. 여기서 중요한 것은 클린업 함수는 새로운 값을 기반으로 렌더링 뒤에 실행되지만, 변경된 값을 읽는 것이 아닌 함수가 정의됐을 당시에 선언 됐던 이전 값을 보고 실행된다는 것.
=> 즉, 특정 이벤트의 핸들러가 무한히 추가되는 것을 방지하여 이전에 등록했던 이벤트 핸들러를 삭제하는 코드를 클린업 함수에 추가했던 것이다.

엄연히 따지고보면, unMount 개념과는 조금 차이가 있다.

언마운트 : 특정 컴포넌트가 DOM에서 사라지는 것을 의미한다.
클린업 함수 : (언마운트라기보다는) 함수형 컴포넌트가 리렌더링됐을 때 의존성 변화가 있었을 당시 이전의 값을 기준으로 실행되는, 말 그대로 이전 상태를 청소해주는 개념

의존성 배열

[] 빈 배열 : 비교할 것이 없으니 최초 렌더링 직후에 실행된 다음부터는 더 이상 실행되지 않음.

eslint-disable-line react-hooks/exhaustive-deps 주석은 최대한 자제하라.
eslint-disable-line react-hooks/exhaustive-deps 이 주석을 사용하여 react-hooks/exhaustive-deps 룰에서 발생하는 경고를 무시하는데, 이는 useEffect 인수 내부에서 사용하는 값 중 의존성 배열에 포함돼 있지 않은 값이 있을 때 경고를 발생시킨다.

useEffect는 반드시 의존성 배열로 전달한 값의 변경에 의해 실행되어야 하는 훅이다.
의존성 배열 없이 콜백 함수 내부에서 특정 값을 사용한다는 것은, 부수 효과가 실제로 관찰해서 실행돼야 하는 값과는 별개의 동작을 한다는 의미.

useEffect의 첫 번째 인수에 함수명을 부여하라

// 공식 문서에서도 첫 번째 인수로 익명 함수를 넘겨주고 있다.
useEffect(() => {
  console.log(user.id);
}, [user.id])

// 복잡성이 낮다면 상관없겠다만, 기명 함수로 바꾸는 것이 좋다.
// 변수에 적절한 이름을 붙이는 이유? 해당 변수가 왜 만들어졌는지 파악하기 위함이다. (목적성 부여)
useEffect(
  function logActiveUser() {
    logging(user.id)
  },
  [user.id]
)

거대한 useEffect를 만들지 마라
useEffect는 의존성 배열을 바탕으로 렌더링 시 의존성이 변경될 때마다 부수 효과를 실행한다.
이 부수 효과의 크기가 커질수록 애플리케이션의 성능에 악영향을 미친다.
- 최대한 간결하고 가볍게 유지한다.
- 부득이하게 큰 useEffect를 만든다면, 여러 개의 useEffect로 분리하는 것이 좋다.
- 만약, 불가피하게 의존성 배열에 여러 변수가 들어가야 한다면, 최대한 useCallback, useMemo로 사전에 정제한 내용들만 useEffect에 담는다.
불필요한 외부 함수 만들지 마라
(206p 참조)

왜 useEffect의 콜백 인수로 비동기 함수를 바로 넣을 수 없나?
-> useEffect의 경쟁 상태(race condition)

// ❌ - Error
useEffect(async () => {
  // useEffect에 async 함수를 넘겨주면 아래와 같은 에러가 발생함
  // Effect callbacks are synchronous to prevent race conditions.
  // Put the async function inside:
  const response = await fetch('http://some.data.com');
  const result = await response.json();
  setData(result)
}, [])

// ✅ 
useEffect(() => {
  (async () => {
    const response = await fetch('http://some.data.com');
    const result = await response.json();
    setData(result)
  })()
}, [])

// 혹은 flag 변수를 둔다.
useEffect(() => {
  let shouldIgnore = false;
  
  async function fetchData() {
    const response = await fetch('http://some.data.com');
    const result = await response.json();
    if (!shouldIgnore) setData(result)
  }
  
  fetchData();

  return () => {
    shouldIgnore = true;
  }
}, [])

3.3 useMemo

비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고, 이 저장된 값을 반환하는 훅이다.
값 뿐 아니라 컴포넌트도 가능하다.

import React, { useEffect, useMemo, useState } from "react";

function ExpensiveComponent({ value }) {
  useEffect(() => console.log("rendering!"));
  return <span>{value + 1000}</span>;
}

const Test = () => {
  const [value, setValue] = useState(10);
  const [, triggerRendering] = useState(false);

  // 컴포넌트의 props를 기준으로 컴포넌트 자체를 메모이제이션 했다.
  const MemoizedComponent = useMemo(
    () => <ExpensiveComponent value={value} />,
    [value]
  );

  function handleChange(e) {
    setValue(e.target.value);
  }

  function handleClick() {
    triggerRendering((prev) => !prev);
  }

  return (
    <div>
      <input value={value} onChange={handleChange} />
      <button onClick={handleClick}>렌더링발생</button>
      {MemoizedComponent}
    </div>
  );
};

export default Test;

여기서 triggerRendering으로 렌더링을 강제로 발생시켰지만, MemoizedComponent는 리렌더링되지 않는다.
value가 변경되지 않는 한 다시 계산되는 일은 없을 것이다.
=> useMemo 등 메모이제이션을 활용하면 무거운 연산을 다시 수행하는 것을 막을 수 있다는 장점이 있다.

3.4 useCallback

인수로 넘겨받은 콜백 자체를 기억한다.
특정 함수를 새로 만들지 않고 재사용한다는 의미이다.

어떻게 재사용하나?

import React, { memo, useCallback, useEffect, useMemo, useState } from "react";

const ChildComponent = memo(({ name, value, onChange }) => {
  useEffect(() => {
    console.log("rendering!", name);
  });

  return (
    <>
      <h1>
        {name} {value ? "켜짐" : "꺼짐"}
      </h1>
      <button onClick={onChange}>toggle</button>
    </>
  );
});

const Test = () => {
  const [status1, setStatus1] = useState(false);
  const [status2, setStatus2] = useState(false);

  // 이렇게 하면 하나만 변해도 둘 다 렌더링이 된다.
  // const toggle1 = () => {
  //   setStatus1(!status1);
  // };
  // const toggle2 = () => {
  //   setStatus2(!status2);
  // };

  const toggle1 = useCallback(
    function toggle1() {
      setStatus1(!status1);
    },
    [status1]
  );
  const toggle2 = useCallback(
    function toggle1() {
      setStatus2(!status2);
    },
    [status2]
  );

  return (
    <div>
      <ChildComponent name="1" value={status1} onChange={toggle1} />
      <ChildComponent name="2" value={status2} onChange={toggle2} />
    </div>
  );
};

export default Test;

3.5 useRef

useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.
useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다.

import React, { useEffect, useRef } from "react";

const Test = () => {
  const inputRef = useRef();

  // 이때는 미처 렌더링이 실행되기 전(반환되기 전)이므로 undefined를 반환한다.
  console.log(inputRef.current); // undefined

  useEffect(() => {
    console.log(inputRef.current); // HTMLInputElement { '__reactFiber~'}
  }, [inputRef]);
  
  return <input ref={inputRef} type="text" />;
};

export default Test;

useRef는 최초에 넘겨받은 기본값을 가진다.

명심할 부분은, useRef의 최초 기본값은 return 문에 정의해둔 DOM이 아니고!
useRef()로 넘겨받은 인수라는 것이다.

useRef가 선언된 당시에는 아직 컴포넌트가 렌더링되기 전이라 return으로 컴포넌트의 DOM이 반환되기 전이므로 undefined이다.

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

이 글은 옵시디언에서 작성되었습니다.

[Next] 섹션3 그런데 백엔드 개발자가 API를 아직 못 만들었다 (2)

kiki14 — Mon, 18 Dec 2023 16:51:20 +0900

5. 미들웨어, API 라우트, catch-all 라우트

6. next-auth로 로그인하기

7. 로그아웃 & 로그인 여부에 따라 화면 다르게 하기

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

이 글은 옵시디언에서 작성되었습니다.

[Queue] Microtask Queue, (Macro) Task Queue

kiki14 — Mon, 18 Dec 2023 10:07:07 +0900

#js #js기본

JavaScript는 단일 스레드 언어다.

한 번에 하나의 작업만 처리할 수 있다.
이러한 특성 때문에 비동기 처리 모델을 사용하여 I/O 작업 등이 진행되는 동안 다른 작업을 수행할 수 있도록 한다.

비동기 콜백 함수는 일반적으로 두 가지 종류의 큐에서 관리된다.

우선순위: micro task queue > task queue

1. 마이크로 태스크 큐 (micro task queue)

Promise의 then 메서드나 async/await 등에 의해 생성된 콜백 함수가 저장되는 곳입니다.
이벤트 루프가 각 반복에서 호출 스택을 비우면, 마이크로 태스크 큐 를 확인하고 그 안의 모든 콜백을 실행합니다.

2. 태스크 큐 (task queue)

setTimeout, setInterval 과 같은 API에 의해 생성된 콜백 함수가 저장되는 곳이다.
이벤트 루프가 각 반복에서 호출 스택 과 마이크로 태스크 큐 를 비운 후에야 확인하고 실행한다.

코드 예시 1

function aaa() {
  setTimeout(() => {
    console.log('d');
  }, 0);
  console.log('c'); 
}

setTimeout(() => {
  console.log('a');
  aaa();
}, 0);

Promise.resolve().then(() => { // ✨ then의 콜백은 resolve가 된 후 실행된다.
  aaa(); // (1)
  console.log('b'); 
});

일단, function aaa, setTimeout, Promise.resolve.then() 모두 메인 스크립트에서 동기적으로 호출
setTimeout이 태스크큐에 등록 (ㄱ)
Promise.resolve().then의 콜백이나 async/await의 콜백이 마이크로 태스트 큐에 등록 (ㄴ)
메인 스크립트의 동기적인 부분이 모두 완료되면, 이벤트 루프가 마이크로 태스크 큐를 확인
(ㄴ) 단계 : aaa(); 실행
1. aaa()의 setTimeout 태스크큐에 등록 (ㄷ)
2. ‘c’ 출력
‘b’ 출력
마이크로 태스크 큐 비워지면 이벤트 루프는 태스크 큐 확인
1. (ㄱ) 단계 : ‘a’ 출력
2. aaa() 함수를 호출하면서 setTimeout이 등록 (ㄹ)
  1. ‘c’ 출력
  2. (ㄱ) 단계 ‘d’ 출력
(ㄹ) 단계 : ‘d’ 출력

결과: c -> b -> a -> c -> d -> d

[!note] Promise.resolve.then에서 aaa(); console.log(‘b’) 는 동기적으로 일어난다.
c가 출력되고, setTimeout의 콜백이 태스크 큐에 등록 된 후, b가 출력이 된다.

코드 예시 2

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve()
  .then(function() {
    console.log('3');
  })
  .then(function() {
    console.log('4');
  });
  
console.log('5');

1 출력, 5출력
setTimeout의 콜백을 태스크 큐에 등록 // 0초의 지연 시간 후에 태스크 큐에 추가.
Promise.then의 콜백을 마이크로 태스크 큐에 등록
1. 메인 스크립트의 동기 작업이 완료가 되면, 이벤트 루프는 마이크로 태스크 큐를 확인하고 그 안의 모든 작업을 처리한다.
  1. 3 출력
  2. 4 출력
태스크 큐 확인 후 2출력

출력결과: 1 -> 5 -> 3 -> 4 -> 2

코드 예시 3

console.log('1');

setTimeout(function() {
  console.log('2');
  
  Promise.resolve().then(function() {
    console.log('3');
  });
}, 0);

Promise.resolve()
  .then(function() {
    console.log('4');
  })
  .then(function() {
    console.log('5');
  });

console.log('6');

1 출력, 6출력
setTimeout 콜백이 태스크 큐에 등록 (2)
프로미스의 then 체인 콜백이 마이크로 태스크 큐에 등록 (4, 5)
이벤트 루프가 마이크로 태스크 큐를 확인
1. 4, 5 출력
마지막으로 태스크 큐 확인하여 2 출력
1. 그 후 새롭게 생성된 Promise가 마이크로 태스크 큐에 등록
2. 3 출력

[!note] setTimeout 내부에 생성된 Promise 역시 해당 시점에서 가장 우선순위가 낮은 비동기 작업으로 처리된다.

출력 결과: 1 -> 6 -> 4 -> 5 -> 2 -> 3

코드 예시 4

function test() {
  return new Promise((resolve, reject) => {
    resolve();
      console.log('step1');
    })
}

test()
  .then(() => {
    console.log('step2')
  })
  .catch(() => {
    console.log('error')
  })

test() 가 호출되고 프로미스 객체가 생성
resolve() 실행 -> ‘step1’ 출력 // Promise 내부 함수는 마치 동기적으로 흐른다.
then() 실행 -> ‘step2’
끝

결론: 비동기 작업은 규칙에 따라 처리 순서가 결정된다.

코드를 보고 알 수 있는 점?

JavaScript에서 비동기 작업은 정해진 규칙에 따라서 처리 순서가 결정이 되고,
이 규칙은 Promise(마이크로 태스크)와 setTimeout(태스트) 사이에서도 차별화 된다.

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

이 글은 옵시디언에서 작성되었습니다.

[Next] 섹션3 그런데 백엔드 개발자가 API를 아직 못 만들었다 (1)

kiki14 — Sun, 17 Dec 2023 21:40:35 +0900

1. MSW 세팅과 버전 업그레이드

msw

1. MSW로 미리 API 만들기 - 서버 쪽 세팅

유의. 넥스트에서 매끄럽게 되지 않는 부분이 있다.

1-1) 설치

npx msw init public/ --save // 넥스트 프로젝트 폴더 내에 public 폴더
// y 클릭
npm install msw --save-dev

(1번을 실행하면 public에 mockServiceWorder.js가 실행됨)

어떤 때에 MSW를 쓰나요?

개발 환경에서 억지로 에러를 내거나 매번 로그인하는 것을 skip할 때 msw를 사용하면 좋다.

1-2) src/mocks 폴더구조

Next Server에서는 아직… node 로 대신해보자.

서버, 클라이언트 두 환경 모두 msw가 돌아야 한다.

그런데 아직 Next.js 서버와 자연스럽게 호환되지 않아서 임시로 node 서버를 활용한다.

src/mock/http.ts 확인

npm i -D @mswjs/http-middleware express cors 
npm i --save-dev @types/express @types/cors // ts

실제 코딩은

src/mock/handlers.ts 확인

1-3) src/mock/http.ts, 즉 서버를 띄워놓자 `npm run mock`

코드가 바뀌면 node를 껐다가 재실행 해줘야한다. 이 과정은 번거롭다.
scripts에 mock 명령어 설정해두고, 서버 띄워서 실행시켜두면 편하다.

HTTP header 알고갑시다.

Set-Cookies

Set-Cookies는 웹 서버가 클라이언트의 웹 브라우저에게 쿠키를 저장하도록 지시하는 HTTP 응답 헤더이다.
쿠키는 웹 브라우저에 저장되어 서버와 클라이언트 간의 상태 정보를 유지할 수 있게 해준다.
예를 들면, 로그인 상태, 세션 정보, 사용자 환경 설정 등을 저장할 수 있다.

쿠키의 내용은 아래와 같다.

connect.sid // 쿠키 이름
msw-cookie // 쿠키의 값
HttpOnly (opts) // 이 옵션이 설정되면 클라이언트 측 스크립트에서 쿠키에 직접 접근할 수 없다. (보안 강화 설정)
Path (opts) // 쿠키가 전송되는 경로 지정
Max-Age (opts) // 쿠키의 최대 수명을 초 단위로 설정, 0인 경우는 쿠키 바로 삭제

// [Set-Cookie 헤더를 통해 클라이언트의 웹 브라우저에 쿠키를 저장하도록 지시]
// 
// HTTP 응답 객체를 생성하고, JSON 형식의 사용자 정보 User[1]를 반환하면서 동시에
// Set-Cookie라는 HTTP 응답 헤더를 설정하는 예시.
http.post("/api/login", () => {
	console.log("로그인");
		return HttpResponse.json(User[1], {
			headers: {
				"Set-Cookie": "connect.sid=msw-cookie;HttpOnly;Path=/",
			},
	});
}),

// [웹 브라우저에 저장된 쿠키를 삭제하도록 지시]
http.post("/api/logout", () => {
	console.log("로그아웃");
	return new HttpResponse(null, {
		headers: {
			"Set-Cookie": "connect.sid=;HttpOnly;Path=/;Max-Age=0",
		},
	});
}),

2. next용 msw 컴포넌트와 `.env`

2-1) 세팅하기

클라이언트 컴포넌트
src/app/_component/MSWComponent.tsx 를 하나 만들고, 상위 layout.tsx에 import 한다.

src/app/_component/MSWComponent.tsx

src/app/layout.tsx

if (typeof window !== "undefined") 로 브라우저에서만 돌아간다는 것을 보장하기 위해 한 번 걸러준다.

2-2) 클라이언트 환경에서는

public/mockServiceWorker.js 가 가로채서 http.ts 서버로 보내버린다. 그리고 handlers.js가 실행 됨.

2-3) `.env` 와 `.env.local`

.env // at root, 배포시에는 .env가 동작함
.env.local // at root, 개발시에 .env.local 동작

실은 개발 시에 .env, .env.local 모두 실행된다. .env.local 하나를 더 실행시키는 것과 동일하다.
배포 시, .env만 실행

.env.local

NEXT_PUBLIC_API_MOCKING=enabled // 브라우저 접근 가능
NEXT_PUBLIC_BASE_URL=http://localhost:9090 
AUTH_URL=http://localhost:9090 // 서버에서만 접근 가능, 브라우저 접근 불가능

NEXT_PUBLIC 프리픽스를 붙이면 브라우저에서 접근 가능한 변수가 된다.

즉 이 파일들에서 모두 접근이 가능하다는 뜻!
서버에서만 사용하려면 프리픽스를 빼주면 된다.
중요한 것들은 NEXT_PUBLIC 프리픽스를 제외하여 설정하도록 한다.

그러면 개발 할 때에만 mocking이 실행 됨.
MSWComponent.tsx에서 설정해둔 값을 확인해보면 알 수 있음

3. 서버 컴포넌트에서 Server Actions 사용하기

3-1) 회원가입과 로그인 구현하기

3-1-1) Server Actions 이란? (Next 14)

(beforeLogin)/_component/SignupModal.tsx

기존의 클라이언트 컴포넌트를 서버 컴포넌트로 바꾼다.

‘use client’ 삭제
state 모두 삭제
input 태그에 require, name 속성(attribute)을 추가해준다.
: name은 나중에 value에 접근하는데에 사용된다.
FormData 를 사용하면 useState가 필요 없다.
온클릭 등 이벤트 모두 삭제

3-1-2) formData 적용

마크업에서는 form action 과 name 속성값을 추가한다.
submit 함수는 아래와 같이 설정한다.
특히, try-catch문 안에서는 redirect 해주면 안 되고, 플래그 변수를 하나 둬서 try-catch 밖에서 진행하게 해줌.
이건 서버 redirect만 해당한다!

아래 이미지는 서버코드이다.

여기까지가 서버 컴포넌트에서 Server Actions 사용하기였다.

아래는 코드 전문이다.

클라이언트 컴포넌트로 state와 이벤트들이 있다.

"use client";

import style from '@/app/(beforeLogin)/_component/login.module.css';
import {useState} from "react";

export default function LoginModal() {
  const [id, setId] = useState();
  const [password, setPassword] = useState();
  const [message, setMessage] = useState();
  const onSubmit = () => {};
  const onClickClose = () => {};

  const onChangeId = () => {};

  const onChangePassword = () => {};

  return (
    <div className={style.modalBackground}>
      <div className={style.modal}>
        <div className={style.modalHeader}>
          <button className={style.closeButton} onClick={onClickClose}>
            <svg width={24} viewBox="0 0 24 24" aria-hidden="true"
                 className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03">
              <g>
                <path
                  d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path>
              </g>
            </svg>
          </button>
          <div>로그인하세요.</div>
        </div>
        <form onSubmit={onSubmit}>
          <div className={style.modalBody}>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="id">아이디</label>
              <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder=""/>
            </div>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="password">비밀번호</label>
              <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder=""/>
            </div>
          </div>
          <div className={style.message}>{message}</div>
          <div className={style.modalFooter}>
            <button className={style.actionButton} disabled={!id && !password}>로그인하기</button>
          </div>
        </form>
      </div>
    </div>
  );
}

이 코드를 서버 컴포넌트로 바꾸어서 ServerActions을 사용한다.
1. state, 이벤트 모두 삭제
2. 뒤로가기 버튼의 경우 -> 클라이언트 컴포넌트로 분리한다.
3. input 태그에 name 속성을 지정한다. formData를 그대로 받기 위해서다.
4. required 속성 추가해준다.
5. form action={onSubmit} -> onSubmit이 ServerActions이 된다.

import BackButton from "./BackButton";
import { redirect } from "next/navigation";
import style from "@/app/(beforeLogin)/_component/login.module.css";

export default function LoginModal() {
  const onSubmit = async (formData: FormData) => {
    // formData에는 input의 name으로 접근하여 값을 가져올 수 있다. formData.get('id')

    "use server"; // 클라이언트에서는 보이지 않는다.
    let shouldRedirect = false;
    try {
      const response = await fetch("msw에서설정한가짜api주소넣어주면된다!", {
        method: "post",
        body: formData,
        credentials: "include", // 쿠키 전달 옵션.
      });
      
	  // 403 같은 경우는 백엔드와 협의하여 정한다.
      if (response.status === 403) {
        return { message: "user_exists" }; // 이미 계정이 있다는 메시지 반환
      }
      shouldRedirect = true;
    } catch (error) {
      console.error(error);
      return;
    }
    
	// 에러 발생 시에도 redirect 실행되지 않게끔 flag 변수로 분기처리한다.
    if (shouldRedirect) {
      redirect("/home"); // 리다이렉트는 절대 try-catch 내부에서 작성하지 않는다.
    }
  };

  return (
    <div className={style.modalBackground}>
      <div className={style.modal}>
        <div className={style.modalHeader}>
          <BackButton />
          <div>로그인하세요.</div>
        </div>
        <form action={onSubmit}>
          {" "}
          {/* onSubmit 이벤트를 action으로 바꿨다. */}
          <div className={style.modalBody}>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="id">
                아이디
              </label>
              <input
                id="id"
                name="id" // formData는 name을 이용하여 가져올 수 있다.
                className={style.input}
                type="text"
                placeholder=""
                required // required를 해야 아래 버튼이 활성화 되지 않을 것임
              />
            </div>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="password">
                비밀번호
              </label>
              <input
                id="password"
                name="password"
                className={style.input}
                type="password"
                placeholder=""
                required
              />
            </div>
          </div>
          <div className={style.message}>{message}</div>
          <div className={style.modalFooter}>
            <button type="submit" className={style.actionButton}>
              로그인하기
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

4. 클라이언트 컴포넌트에서 Server Actions 사용하기

다시 클라이언트 컴포넌트에서 ServerActions을 사용해보자.

onSubmit 함수를 _lib 같은 폴더로 분리해주자. // _lib/signup.ts
useFormState, useFormStatus - 리액트에서 제공해주는 함수들
1. const [state, formData] = useFormState();
2. const {pending} = useFormStatus();

// _component/SignupModal.tsx

"use client";

import style from './signup.module.css';
import onSubmit from '../_lib/signup'; // onSubmit 함수를 분리했음!
import BackButton from "@/app/(beforeLogin)/_component/BackButton";
import { useFormState, useFormStatus } from 'react-dom';

function showMessage(messasge: string) {
  if (messasge === 'no_id') {
    return '아이디를 입력하세요.';
  }
  if (messasge === 'no_name') {
    return '닉네임을 입력하세요.';
  }
  if (messasge === 'no_password') {
    return '비밀번호를 입력하세요.';
  }
  if (messasge === 'no_image') {
    return '이미지를 업로드하세요.';
  }
  if (messasge === 'user_exists') {
    return '이미 사용 중인 아이디입니다.';
  }
  return '';
}

export default function SignupModal() {
  const [state, formAction] = useFormState(onSubmit, { message: null });
  const { pending } = useFormStatus();

  return (
    <>
      <div className={style.modalBackground}>
        <div className={style.modal}>
          <div className={style.modalHeader}>
            <BackButton />
            <div>계정을 생성하세요.</div>
          </div>
          <form action={formAction}>
            <div className={style.modalBody}>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="id">아이디</label>
                <input id="id" name="id" 
	                className={style.input} 
	                type="text" placeholder=""
                    required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="name">닉네임</label>
                <input id="name" name="name" 
	                className={style.input} 
	                type="text" placeholder="" 
	                required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="password">비밀번호</label>
	                <input id="password" name="password" 
		                className={style.input} 
		                type="password" placeholder="" 
		                required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="image">프로필</label>
                <input id="image" name="image" 
	                className={style.input} type="file" 
	                accept="image/*"
	                required 
                />
              </div>
            </div>
            <div className={style.modalFooter}>
              <button type="submit" 
	              className={style.actionButton} 
	              disabled={pending}>
	              가입하기
			  </button>
              <div className={style.error}>{showMessage(state?.message)}</div>
            </div>
          </form>
        </div>
      </div>
    </>)
}

// _lib/signup.ts

"use server";

import { redirect } from "next/navigation";
import { signIn } from "@/auth"; // 서버라서 auth

export default async (prevState: any, formData: FormData) => {
  if (!formData.get("id") || !(formData.get("id") as string)?.trim()) {
    return { message: "no_id" };
  }
  if (!formData.get("name") || !(formData.get("name") as string)?.trim()) {
    return { message: "no_name" };
  }
  if (
    !formData.get("password") ||
    !(formData.get("password") as string)?.trim()
  ) {
    return { message: "no_password" };
  }
  if (!formData.get("image")) {
    return { message: "no_image" };
  }
  let shouldRedirect = false;
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
      {
        method: "post",
        body: formData,
        credentials: "include",
      }
    );
    if (response.status === 403) {
      return { message: "user_exists" };
    }
    shouldRedirect = true;
    await signIn("credentials", {
      username: formData.get("id"),
      password: formData.get("password"),
      redirect: false,
    });
  } catch (err) {
    console.error(err);
    return;
  }

  if (shouldRedirect) {
    redirect("/home"); // try-catch문 안에서 X
  }
};

다국어 대응할 때…

한글 보다도 영어로 사용하는 것이 다국어 대응할 때 더 좋다.

form 과 관련된 React hook

form에서 state를 사용할 수 있는 훅과 - useFormState
form에 데이터를 보내면 서버쪽으로 보낸 데이터의 상태를 알 수 있다. - useFormStatus

const [state, formAction] = useFormState(onSubmit, { message: "" }); // form submit함수와 초기값
const { pending } = useFormStatus();

 return (
    <>
	  <form action={formAction}>
      ...
      </form>
    </>

ts 단언

아래의 경우 image일 땐 string이 아닐 수도 있으므로 ts에서 as로 단언해준다.
or !로

5. Auth.js, 미들웨어 API 라우트, catch-all 라우트

app 폴더와 같은 레벨에 auth.ts, middleware.ts 작성

npm i next-auth@5 @auth/core

Middleware

Next의 Middleware를 통해 페이지 별 접근할 수 있는 라우트를 설정할 수 있다.
페이지별 접근 권한을 설정하는 것과 비슷하다.

catch-all route

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

이 글은 옵시디언에서 작성되었습니다.

[Routing] 08 Paraller Routes

kiki14 — Sat, 16 Dec 2023 18:29:24 +0900

페러랠 라우트 (Paraller Routes)

페러랠 라우트 정의
1. 렌더링 예시
사용법
1. default.tsx
useSelectedLayoutSegments(s)

페러랠 라우트?

패러랠 라우트,
즉 병렬 라우팅을 사용하면 동일한 레이아웃에서 하나 이상의 페이지를 동시 혹은 조건부로 렌더링한다.

렌더링 예시

1. 동시 렌더링 예시

@team/page.js와 @analytics/page.js는 패러렐 라우트의 동일 레벨인 layout.js의 Props로 전달된다.
두 개가 동시에 공존할 수 있음을 보여주는 예시이다.

[독립적으로 스트리밍 -> 오류와 로딩상태도 독립적으로]

이들은 독립적으로 스트리밍되고, 독립적인 오류 및 로딩 상태를 정의한다.

2. 조건부 렌더링 예시

인증 상태와 같은 특정 조건하에 조건부로 렌더링을 할 수 있다.
URL에서 완전히 분리된 코드를 사용할 수 있는 것이 특징이다.

사용법

@folder 로 명명
props로 동일 레벨에 존재하는 layout.js로 전달된다.
URL 구조에 영향을 주지 않는다.

app
ㄴ @analytics
   ㄴ page.js
ㄴ @team
   ㄴ page.js
ㄴ layout.js
ㄴ page.js

이런 구조일 때

// app/layout.ts

type Props = {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}
export default function Layout({ children, analytics, team }: Props) {
	return (
		<>
			{ children }
			{ analytics }
			{ team }
		</>
	)
}

default.js

기본적으로 슬롯 내에서 렌더링되는 콘텐츠는 현재 URL과 일치한다.

일치하지 않는 슬롯의 경우, 혹은 새로 고침 시 default.js 파일을 렌더링하므로 필수적으로 있어야 한다.

// default.js

export default function Default() { 
  return null
}

useSelectedLayoutSegment(s)

로 경로 세그먼트를 읽어온다.
레이아웃 기준의 폴더들만 읽어준다.

'use client' import { useSelectedLayoutSegment } from 'next/navigation' 

export default async function Layout(props: { 
  //... 
  auth: React.ReactNode
}) { 
  const loginSegments = useSelectedLayoutSegment(); 
  // ...
}

useSelectedLayoutSegment 는 문자열 하나만 반환
useSelectedLayoutSegments 는 배열 반환

(이 글은 옵시디언에서 작성되었습니다.)

[Routing] 04 경로 그룹 (Route Groups)

kiki14 — Sat, 16 Dec 2023 17:51:37 +0900

경로 그룹 (Route Groups)

공식 문서 링크

경로 그룹

소괄호를 사용하여 파일의 논리 그룹을 구성한다.

보통 app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다.
대신, 소괄호를 사용하여 그룹화 해주면 해당 폴더의 경로는 URL 경로에 포함되지 않는다.

어떤 때에 쓰이나?

경로를 그룹으로 구성한다.
동일한 경로 구간 수준에서 중첩 레이아웃을 활성화 한다:
1. 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩 레이아웃 만들기
2. 공통 구간의 경로 하위 집합에 레이아웃 추가

예시

1. URL 경로에 영향을 주지 않고 경로를 그룹으로 구성한다.

(marketing) /about, /blog
(shop) /account

-> 각각 레이아웃을 따로 둘 수 있다.

특정 세그먼트를 레이아웃으로 선택

/account, /cart, /checkout 같은 레벨의 경로들인데, 만약 /account, /cart만 동일한 레이아웃으로 묶어주고 싶다면 소괄호를 사용하여 (shop) 논리 그룹으로 만들어준다.

여러 루트 레이아웃 만들기

즉 각 그룹마다 각기 다른 레이아웃을 만들고 싶다면 () 소괄호 밑에 layout.js를 생성해주라는 뜻이다.

(옵시디언에서 작성되었습니다.)

[Routing] 02 Page and Layout

kiki14 — Sat, 16 Dec 2023 17:46:41 +0900

Page and Layout

1. Page

페이지는 경로에 대한 고유한 UI이다.
page.js 파일에서 export 한다.

파일 구조

app ㄴ page.js ㄴ dashboard 	ㄴ page.js

코드

// app/page.js // -> '/' URL의 UI가 된다. export default function Page() {   return <h1>Hi! Home page!</h1>; }

// app/dashboard/page.js // -> '/dashboard' URL의 UI가 된다. export default function Page() {   return <h1>Hi! Dashboard page!</h1>; }

2. Layout

Layout은 여러 Page 같에 공유되는 UI이다.
레이아웃은 네비게이션 간에 상태를 유지하고 대화형을 유지하며 다시 렌더링되지 않는다. 그리고 중첩될 수 있다.

children props를 사용.

파일 구조

app ㄴ  layout.ts ㄴ  page.ts ㄴ dashboard 	ㄴ  layout.ts 	ㄴ page.ts

코드

// app/dashboard/layout.ts  export default function DashboardLayout({  	children }: {  	children: React.ReactNode }) {   return (  	  <section> 		  <nav></nav>  		  {children}  		</section>  	) }

2.1 RootLayout

app 디렉토리의 최상위 수준에서 정의되며 모든 경로에 적용된다.

코드

// app/layout.ts  export default function RootLayout({  	children }: {  	children: React.ReactNode }) {   return (  		<html lang="en">  			<body>{children}</body>  		</html> 	) }

2.2 중첩 레이아웃

파일 구조

app 
ㄴ  layout.ts 
ㄴ  page.ts 
   ㄴ dashboard 	
      ㄴ  layout.ts 	
      ㄴ page.ts

루트 레이아웃 (app/layout.ts)에 대시보드 레이아웃 (app/dashboard/layout.ts)가 중첩되어진다.

(옵시디언에서 작성되었습니다.)

[Next] 섹션2 본격 클론 시작 (작성 중)

kiki14 — Sat, 16 Dec 2023 02:53:22 +0900

본격 클론 시작

active link

링크와 연결된다.

내가 어디에 있는지? -> client 컴포넌트에서 할 수 있다.
폴더는 _component -> NavMenu.tsx

"use client";

import { useSelectedLayoutSegment, useSelectedLayoutSegments } from "next/navigation";

const segment = useSelectedLayoutSegment(); // 레이아웃 기준 폴더들만 'compose'
const segments = useSelectedLayoutSegments(); // 하위 폴더들 까지 모두 ['compose', 'tweet']

client component 는 언제 사용?

컴포넌트에 use~ hook이나 onclick이벤트같은거 있다면 클라컴포넌트라고 생각하자

context api 로 홈탭 만들어보기

강좌에서는 주스탠드나 리액트 쿼리 등 다양하게 보여주지만 한가지만 선택해서 잘 사용하면 좋다.
일단 context api로 시작해보자!

Post.tsx 같은 애들은 공통적으로 많이 사용할 것 같으니 공통으로 빼주자!
TabProvider.tsx 생성

// TabProvide.tsx

export const TabContext = createContext ({
	tab: 'rec',
	setTab: (value: "rec" | "fol") => {}
})

type Props = { children: ReactNode };

export default function TabProvider({ children }: Props) {
	const [tab, setTab] = useState('rec');

	return (
		<TabContext.Provider value={{ tab, setTab }}>
			{children}
		</TabContext.Provider>
	)
}

// 사용할 곳에 가서..
...
return (
	<TabProvider>
		<Tab /> {/* 이렇게 알아서 잘 묶어준다. 그러면 Provider이하는 모두 context api를 유지한다. */}
	</TabProvider>
)

PostForm 만들기!

폼은 왠만하면 클라이언트 컴포넌트라고 생각한다.
왜? 이벤트가 많으니까

/compose/tweet 만들기

tweet 모달 띄우기

게시하기 버튼을 누르면 포스트 입력창이 뜨고 새로고침을 해도 뒤에 홈이 보이는 채로 떠있는 상태여야 함.

@modal 만들고, default.tsx 잊지말고 작성한다.
1. /componse/tweet 경로의 모달을 만든다면
2. 내부 폴더 생성를 생성한다.
  1. /componse/tweet/ page.tsx 얘가 모달임.
같은 수준의 layout.tsx에서 {modal} props로 마련해준다.
여기서 (.) 를 사용하여 인터셉팅 라우트로 생성해준다면 <Link href="/compose/tweet"> 의 이동은 모두 인터셉팅 라우트 된 곳으로!

usePathname() 과 /explore 페이지

usePathname
- / 부터 ?앞까지 pathname
  - ? 뒤는 searchParams
- Client component에서 사용할 수 있다.
/explore 경로에서는 <TrendSection>이 없어야함.
- 경로를 탐지해서 null을 반환해주면 됨.
  - 경로를 탐지하는 hook은 여러개가 있다. (당연히 hook은 client component에서)
  - usePathname() : / 여기부터 ? 전까지 보여줌 /explore
  - useSelectedLayoutSegment() : 경로 이름 보여줌 explore

const pathname = usePathname();
if (pathname === "/explore") return null;

// 혹은

const segment = useSelectedLayoutSegment();
if (segment === "explore") return null;

useSearchParams()와 프로필, /search 페이지

주소창에 정보를 넣는것이 searchParams이다.

useRouter, useSearchParams

탭을 누르면 searchParams도 바뀌어야 한다.

searchParam을 가져오는 두 가지 방법

Search 컴포넌트에서 searchParams props를 통해 원하는 곳에 넘겨준다.
아니면 client component로 만들고 searchParams 훅을 사용한다.

클릭 시 이동

router.replace()

쿼리스트링 설정하기
`/search?q= what 인 경우에

searchParams.get(‘q’) // what
- 쿼리 스트링 뒤 문자를 반환
searchParams.toString() // q=what
- searchParams 전체를 반환

클라이언트 컴포넌트에서 서버 컴포넌트를 감싸는건 괜찮다.

개별 Post를 누르면 해당 페이지로 이동해야하는데,
전체를 모두 클라컴포넌트로 바꾸기 애매한 경우
서버 컴포넌트를 children 혹은 props 넘긴다.

주의

클라 컴포넌트에서 서버 컴포넌트를 import 하면 안 된다.
- 서버 컴포넌트가 클라이언트 컴포넌트로 성격이 바뀐다.
서버 컴포넌트가 클라의 자식일 경우, 반드시 서버 컴포넌트를 children이나 props로 넘겨야 한다.

onClickCapture

알고 계셨슴까?
활용 잘 하십시오.

Faker.js

npm i @faker-js/faker
더미 데이터 넣어주는 라이브러리

/message

다른 DB 테이블과 합치는건 대문자로 작성한다.

(혹시 틀린 정보가 있다면 댓글로 알려주세요!)

이 글은 옵시디언에서 작성되었습니다.

[React] Context

kiki14 — Fri, 15 Dec 2023 13:31:48 +0900

Context 란?

컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다.

주로 전역적으로 필요한 값을 다룰 때 사용하며, 이는 꼭 전역일 필요는 없다.

컴포넌트 간에 데이터를 props가 아닌 또 다른 방법으로 전달해주는 방법이다.

props로만 전달한다면 발생하는 문제점들

1. props drilling이 발생

function App() {
  return <A value="Hi!" />;
};

function A({ value }) {
  return <B value={value} />;
};

function B({ value }) {
  return <C value={value} />;
};

function C({ value }) {
  return <D value={value} />;
};

function D({ value }) {
  return <Last value={value} />;
};

function Last({ value }) {
  return <div>Received: {value}</div>;
};

2. 여러 종류의 자식 컴포넌트가 특정 값에 의존하는 문제

function App() {
  return (
    <MyComponent value="Hi!!" />
  )
};

function MyComponent({ value }) {
  return (
    <div>
      <FirstComponent value={value} />
      <SecondComponent value={value} />
      <ThirdComponent value={value} />
    </div>
  )
};

function FirstComponent({ value }) {
   return (
     <div>First Component : "{value}"</div>
   )
};

function SecondComponent({ value }) {
   return (
     <div>Second Component : "{value}"</div>
   )
};

function ThirdComponent({ value }) {
   return (
     <div>Third Component : "{value}"</div>
   )
}

// 이렇게 여러 종류의 자식 컴포넌트가 특정 값에 의존하기도 한다.

이를 해결하기 위한 Context

사용법

import { createContext } from 'react';
const MyContext = createContext();


// Context객체 안에는 Provider라는 컴포넌트가 들어있다.
// 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근할 수 있다.

function App() {
  return (
    <MyContext.Provider value='hey~ world!'>
    </MyContext.Provider>
  )
}


// 그리고 원하는 컴포넌트에서 useContext라는 hook을 사용하여 Context에 넣은 값에 바로 접근할 수 있다.

import { createContext, useContext } from 'react';
function Message() {
  const value = useContext(MyContexnt);
  return (
    <div>{value}</div>
  )
}

적용 예시

1. props drilling이 발생했던 코드에서 context 적용

import { createContext, useContext } from 'react';
const MyContext = createContext();

function App() {
  return (
  	<MyContext.Provider value="hey world~!">
      <A />
    </MyContext.Provider>
  )
}

function A() {
  return <B />
}

function B() {
  return <C />
}

function C() {
  return <D />
}

function D() {
  return <Last />
}

function Last() {
  const value = useContext(MyContext);
  return <div>{value}</div>
}

export default App;

2. 여러 종류의 자식 컴포넌트가 특정 값에 의존하는 문제를 context 적용

import { createContext, useContext } from 'react';
const MyContext = useContext();

function App() {
  return (
    <MyContext.Provider value="Hi!!!">
      <MyComponent />
    </MyContext.Provider>
  )
}

function MyComponent() {
  return (
    <div>
      <FirstComponent value={value} />
      <SecondComponent value={value} />
      <ThirdComponent value={value} />
    </div>
  )
};

function FirstComponent() {
   const value = useContext(MyContext);
   return <div>First Component : "{value}"</div>
};

function SecondComponent() {
   const value = useContext(MyContext);
   return <div>Second Component : "{value}"</div>
};

function ThirdComponent() {
   const value = useContext(MyContext);
   return <div>Third Component : "{value}"</div>
}

export default App;

캭

Provider를 사용하지 않는 경우는 default 인자를 넣어주자.

const MyContext = createContext('default value');

context를 사용하여 재사용 할 수 있는 버튼 예시

[Next] 섹션1 기획자와 디자이너가 기획서를 던져주었다.

kiki14 — Thu, 14 Dec 2023 13:39:57 +0900

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

고민

1. 화면을 어떻게 만들 것인가?

2. 주소 체계 확인

Next.js

public // next 서버에서 접근할 수 있게 해줌
src // 작성하면 될 폴더
ㄴapp // 라우팅 담당 폴더
  ㄴ...

01. 라우트 그룹 만들기

RootLayout

페이지를 넘나들어도 바뀌지 않는 Layout 부분이다.

next13에 도입된 RootLayout은 그 내부에 page.tsx가 {children}로 전달된다.

02. App 디렉토리는 주소창과 연결된다.

App 디렉토리는 주소창과 연결되는 폴더이다.

- localhost:3000/compose

- localhost:3000/explore

- localhost:3000/home

이런식의 접근이 가능하게 해준다.

03. slug [ ]

URL의 일부로 사용되는 문자열을 가리키며, 라우팅 및 동적 경로 생성에 사용된다.

slug는 일반적으로 웹 페이지의 고유한 식별자로 사용되고, 콘텐츠를 식별하고 접근할 수 있는 역할을 한다.

바뀌는 아이디나 이름 등.. 계속해서 폴더를 생성할 수 없기에 '[ ]' 를 사용한다.

slug 동적 라우팅

04. ( ) 같은 레이아웃을 둔다.

같은 폴더로 묶어주면, 주소에는 관여하지 않지만 그룹으로 만들 수 있다.

이들은 같은 레이아웃을 둔다.

* 폴더 주소 app/(afterLogin)/home 이어도, 브라우저에서는 /home이다.

05. template.tsx, Link, Image, redirect

* template 와 layout 의 차이점?

layout : 넘나들 때 리렌더링 안되게 하려면 layout

template : 리렌더링 되게 하려면 template ( 거의 쓰지 않는다. 만약 페이지 넘나들 때 기록을 해야한다면?)
-> 리렌더링보다는 매번 새롭게 마운팅되는 느낌

둘은 공존할 수 없다.

* Link

a tag는 새로고침 됨
꼭 Link 태그 써야 한다.

* images

[next img](https://nextjs.org/docs/app/building-your-application/optimizing/images)
넥스트에서 이미지 최적화 해줌.

* redirect

next에서 제공해줌
원래 i/flow/login인데, login으로 들어갔다가 redirect되서 i/flow/login으로 감
그래서 login/page.tsx에서 redirect 해줌

* CSS modules

tailwind -> 호불호가 심하고 가독성 안 좋다
Styled Component (Emotion)
- Emotion은 next13과 안 맞다
- styled는 Server Component SSR 문제가 있음
css module -> 같은 폴더에 css파일 넣고 간단하게 사용가능
- 전역 적용은 .module을 파일명에 안 붙이기
- 특정 페이지 적용은 page.module.css 로 적용하면 해당 페이지에만 적용가능
sass -> scss 친구
scss -> 갠적으로 선호
Vanilla extract -> 윈도우 개발환경에서 문제 있음

06. URL과는 관련이 없는 명명법

() 그룹 폴더
@folder 페러렐 라우트
_component private foler

주소창에 나오지 않는다!

07. redirect는 서버컴포넌트에서 동작한다.

서버에서 리다이렉트를 하면 인터셉팅이 제대로 되지 않는다.

클라이언트에서 링크를 통해 리다이렉트 해야 인터셉팅 된다.

서버 쪽 에서 redirect 하는 법

import { redirect } from "next/navigation";

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

클라 쪽 에서 redirect 하는 법

"use client";

import Main from "@/app/(beforeLogin)/_component/Main";
import { useRouter } from "next/navigation";

export default function Login() {
  const router = useRouter();
  router.replace("i/flow/login");
  return <Main />;
}

router.push -> 히스토리를 남긴다.
- localhost:3001 -push-> localhost:3001/login -push-> localhost:3001/i/flow/login
- 뒤로가기 시, 히스토리 순서에 따라!
router.replace -> 히스토리를 남기지 않아 router.replace가 되어진 곳을 건너뛴다.
- localhost:3001 -> localhost:3001/login -replace-> localhost:3001/i/flow/login
- localhost:3001/i/flow/login 에서 뒤로가기 시, 히스토리가 남지 않기에 중간을 건너뛰어 localhost:3001 로 간다.

즐거워하는 중

[React] 리액트 딥다이브 - Hook 정리

1. Virtual DOM 가상 돔

DOM - Document Object Model

Virtual DOM

React는 가상돔을 어떻게 활용하길래 빠른 업데이트를 하나?

2. memo

3. 리액트 훅 깊게 살펴보기

3.1 useState

게으른 초기화 (lazy initialization)

3.2 useEffect

3.2.1 useEffect는 의존성 배열이 변경된 것을 어떻게 아는 것일까?

클린업 함수의 목적

의존성 배열

3.3 useMemo

3.4 useCallback

3.5 useRef

[Next] 섹션3 그런데 백엔드 개발자가 API를 아직 못 만들었다 (2)

5. 미들웨어, API 라우트, catch-all 라우트

6. next-auth로 로그인하기

7. 로그아웃 & 로그인 여부에 따라 화면 다르게 하기

[Queue] Microtask Queue, (Macro) Task Queue

JavaScript는 단일 스레드 언어다.

비동기 콜백 함수는 일반적으로 두 가지 종류의 큐에서 관리된다.

우선순위: micro task queue > task queue

1. 마이크로 태스크 큐 (micro task queue)

2. 태스크 큐 (task queue)

코드 예시 1

결과: c -> b -> a -> c -> d -> d

코드 예시 2

출력결과: 1 -> 5 -> 3 -> 4 -> 2

코드 예시 3

출력 결과: 1 -> 6 -> 4 -> 5 -> 2 -> 3

코드 예시 4

결론: 비동기 작업은 규칙에 따라 처리 순서가 결정된다.

코드를 보고 알 수 있는 점?

[Next] 섹션3 그런데 백엔드 개발자가 API를 아직 못 만들었다 (1)

1. MSW 세팅과 버전 업그레이드

1. MSW로 미리 API 만들기 - 서버 쪽 세팅

1-1) 설치

어떤 때에 MSW를 쓰나요?

1-2) src/mocks 폴더구조

Next Server에서는 아직… node 로 대신해보자.

1-3) src/mock/http.ts, 즉 서버를 띄워놓자 npm run mock

HTTP header 알고갑시다.

Set-Cookies

2. next용 msw 컴포넌트와 .env

2-1) 세팅하기

2-2) 클라이언트 환경에서는

2-3) .env 와 .env.local

3. 서버 컴포넌트에서 Server Actions 사용하기

3-1) 회원가입과 로그인 구현하기

4. 클라이언트 컴포넌트에서 Server Actions 사용하기

다국어 대응할 때…

form 과 관련된 React hook

ts 단언

5. Auth.js, 미들웨어 API 라우트, catch-all 라우트

Middleware

catch-all route

[Routing] 08 Paraller Routes

페러랠 라우트 (Paraller Routes)

페러랠 라우트?

렌더링 예시

1. 동시 렌더링 예시

2. 조건부 렌더링 예시

사용법

default.js

useSelectedLayoutSegment(s)

[Routing] 04 경로 그룹 (Route Groups)

경로 그룹 (Route Groups)

경로 그룹

어떤 때에 쓰이나?

예시

1. URL 경로에 영향을 주지 않고 경로를 그룹으로 구성한다.

특정 세그먼트를 레이아웃으로 선택

여러 루트 레이아웃 만들기

[Routing] 02 Page and Layout

Page and Layout

1. Page

파일 구조

1-3) src/mock/http.ts, 즉 서버를 띄워놓자 `npm run mock`

2. next용 msw 컴포넌트와 `.env`

2-3) `.env` 와 `.env.local`