모르는 거 확실하게 알고 넘어가기!

공부하다가 애매모호하거나 처음 보는 내용을 확실하게 알고자 포스팅을 합니다!

---

1. Content-Type: application/json

(많이 봤던 코드이지만, 막상 설명하려고 하니 뭐라고 해야할 지 몰라서 넣어봤습니다.)

 

Content-Type: application/json는 HTTP request / response header에서 사용되는 MIME 타입 중 하나로, JSON (JavaScript Object Notation) 형식으로 데이터를 전송하거나 받을 때 사용됩니다. 이 헤더는 서버와 클라이언트가 서로 데이터를 어떻게 해석할지를 알려줍니다.

 

1. JSON (JavaScript Object Notation)

JSON은 가벼운 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고 기계가 분석하고 생성하기 쉽습니다. 데이터가 key-value 쌍으로 구성된 형태로 나타나며, 많은 웹 애플리케이션에서 서버와 클라이언트 간 데이터 전송에 사용됩니다.

 

2. 'Content-Type' 헤더의 역할

HTTP request / response에서 Content-Type 헤더는 전송되는 데이터의 형식을 지정합니다. 즉, 서버나 클라이언트는 이 헤더를 통해 데이터가 어떤 형식으로 인코딩되었는지 알 수 있습니다.

 

즉! Content-Type: application/json의 의미는 전송되는 데이터가 JSON 형식임을 나타냅니다.

---

1. HTTP Request 예시 (클라이언트에서 서버로 데이터 전송 시)

• 클라이언트가 서버에 JSON 데이터를 POST로 보낼 때

POST /api/resource HTTP/1.1
Host: example.com
Content-Type: application/json
{
    "name": "John",
    "age": 30
}

이 경우, Content-Type: application/json을 통해 서버는 본문(body)이 JSON 형식으로 되어 있다는 것을 알게 됩니다.

 

2. HTTP 응답 예시 (서버에서 클라이언트로 JSON 데이터 응답 시)

• 서버가 클라이언트에게 JSON 데이터를 반환할 때

 

HTTP/1.1 200 OK
Content-Type: application/json
{
    "status": "success",
    "message": "Data received successfully."
}

---

2. 백엔드에서 주는 error 메시지 활용하기

res.status(500).json({ message: 'Internal Server Error'});

백엔드 서버에서 message를 준다면, 프론트에서 알림 모달에 반환한 에러 메시지를 넣고 싶습니다.

 

스프린트 과제에서는 일일이 메시지를 확인해서 알림 모달에 error.message를 사용했지만, 중급 프로젝트 때는 일일이 확인할 시간이 없어 사용을 못했습니다. 그래서 이번 고급 프로젝트에서는 적극적으로 활용하려고 되새김해보고자 작성합니다.

 

async function fetchData() {
  try {
    const response = await fetch('/api/resource'); //임의의 엔드포인트
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message);  // message 사용
    }

    const data = await response.json();
  } catch (error) {
    alert(`Error: ${error.message}`);  // message 사용 및 사용자에게 에러 메시지 표시
  }
}

 

여기서 throw new Error()는 에러를 발생시키고 흐름을 중단하고, 예상치 못한 상황 처리할 수 있습니다.

또한, 서로 같은 에러 메시지를 표시하지만, errorData.message는 서버가 보내는 에러 메시지이고, error.message는 그 메시지를 기반으로 생성된 Error 객체의 메시지입니다.

 

---

3. interceptors 왜 사용해야하는가?

사실 스프린트 미션에서 사용해보라고 해서 사용하려다가 이해하는데 오래 걸려서 사용하지 못했고, 중급 프로젝트 때 잠깐 사용해봤지만, 아직도 왜 사용해야하는지 의문점이 들어서 작성합니다.

 

영어단어 그대로 interceptors는 HTTP request과 response을 가로채서 처리할 수 있는 기능입니다. 요청을 보내기 전에, 혹은 응답을 받은 후에 특정 작업을 처리할 수 있다고 합니다...

사용하는 이유는 아래와 같습니다.

• 토큰 추가: 매번 요청마다 Authorization 헤더에 토큰을 추가할 필요 없이 인터셉터에서 자동으로 처리할 수 있습니다.
• 에러 처리: 모든 응답에서 발생할 수 있는 에러를 한 곳에서 처리하여 코드 중복을 줄일 수 있습니다.
• 로딩 상태 관리: 모든 요청에 대해 로딩 상태를 관리하는 코드를 인터셉터에 작성할 수 있습니다.

그래서 토큰 추가 부분을 인터셉터를 이용해서 중복 코드 제거하여 매 요청마다 반복되는 코드를 제거할 수 있습니다.

axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

 

 

_retry: true 옵션도 있긴 한데, 아직 사용을 안해봤습니다.

_ retry를 통해 재시도를 한 번만 수행하도록 보장하여 서버와 클라이언트의 불필요한 부하를 방지한다고 합니다...

---

4. nprogress가 뭔데...

스프린트 미션으로 Typescript로 마이그레이션 하기가 있는데, 10을 안한 상태에서 10부터 진행하려니 사실 지쳐있었다.. 그래서 10은 모범답안으로 마이그레이션을 진행하려는데, nprogress가 import 되어있었다...

그래서 이게 뭔데...

 

NProgress는 웹 페이지의 로딩 상태를 시각적으로 표시하는 라이브러리 라고 합니다. 이 안에 주요한 메소드가 있는데,

 

• NProgress.start(): 로딩 시작
• NProgress.done(): 로딩 완료
• NProgress.set(n): 진행률 수동 설정 (0에서 1 사이 값)

코드 상에서는 start와 done만 보았습니다. 그리고 nprogress는 용량이 작기 때문에, 페이지 로딩 속도에 거의 영향이 없다고 합니다. 그리고 커스터마이징 가능합니다. 

 

사실 상 직접 코드를 작성하고 사용해본 것이 아니기 떄문에, 자세한 내용을 작성하지 못하지만, 이런 장점들을 보아서 고급 프로젝트 때 사용해보려고 합니다!!

 

---

 

5. React.FC( FunctionComponent )?

타입스크립트로 마이그레이션을 진행하기 위해서 예시들을 많이 보려고 GPT에다가 물어봤는데 React.FC를 사용하는 것을 봤습니다. LMS에서는 사용하는 걸 못봤는데, 왜 이렇게 사용하지..? 라는 의문이 들었습니다.

 

컴포넌트가 함수형 컴포넌트임을 명확하게 할 수 있고, children 자동 포함한다고 합니다.

근데, 자동 포함이다? 이건 단점이 될 수도 있습니다. 모든 컴포넌트가 children을 필요로 하는 것이 아니기 때문에 강제로 포함을 시킨다면 안 좋겠네요. 그래서 사용해야하나...? GPT한테 물어봤습니다.

 

네... 최신 트렌드는 사용하지 않아 사용하지 않는 것을 추천한다고 합니다. 그래서 그냥 개념만 알고 가려고 합니다!

 

---

헷갈리거나 몰랐던 개념을 정리할 수 있어서 정확한 공부를 할 수 있어서 좋았습니다. 또 모르거나 애매한 지식이 있다면 추가공부 카테고리에 올릴려고 합니다!