사용자 로그인 정보를 가져와서 채팅 애플리케이션에 적용하는 방법

백엔드 구현

1. NestJS를 사용하여 UserController를 생성하고, 로그인을 처리하는 login 메서드가 구현합니다.
2. 로그인이 성공하면 인증 토큰을 쿠키에 저장하여 응답합니다.

프론트엔드 구현

1. Axios를 사용하여 백엔드의 로그인 API를 호출합니다.
2. 받아온 토큰을 쿠키에 저장합니다.
3. Socket.IO를 사용하여 소켓 연결을 수립합니다.
4. 토큰을 이용하여 백엔드 API에서 사용자 정보를 요청합니다.
5. 사용자 정보를 소켓을 통해 채팅 애플리케이션에 적용합니다.

프론트엔드 예시

import axios from 'axios';
import io from 'socket.io-client';

const loginData = {
  email: 'user@example.com',
  password: 'password',
};

axios.post('api_endpoint', loginData)
  .then(response => {
    const authorization = response.data;
    document.cookie = `Authorization=Bearer ${authorization}; path=/;`;

    const socket = io();

    axios.get('api_endpoint', {
      headers: {
        Authorization: `Bearer ${authorization}`,
      },
    })
    .then(response => {
      const user = response.data;
      const userName = user.name;

      socket.emit('setUserName', userName);

      // 나머지 채팅 애플리케이션 코드
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
  })
  .catch(error => {
    console.error('Error logging in:', error);
  });

오늘의 질의 응답😎

브라우저의 작동방식에 대해서 설명해주세요.

나의 답변 😄

브라우저는 사용자가 URL을 입력하거나 링크를 클릭하면 서버에 데이터 요청을 보내고, 받은 HTML, CSS, JavaScript 파일을 해석하여 화면에 웹 페이지를 표시합니다. 이를 위해 렌더링 엔진이 HTML을 파싱하고, DOM과 CSSOM을 생성하여 화면을 구성합니다. JavaScript는 동적 기능을 추가하며, 이벤트 처리와 상호작용을 관리합니다. 페이지 업데이트나 사용자 입력에 따라 과정을 반복하며 웹 페이지를 구성하고 보여줍니다.