패스트캠퍼스 환급챌린지 31일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

 

https://fastcampus.info/4n8ztzq

 

운영 반영 준비로 피곤하지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

31일차 공부 시작!

오늘 공부 시작 시간 (07.31 22:00)

 

오늘의 강의 주제는 '로그인-예외 처리 흐름 설계'이다.

 

학습 인증샷 - 1

 

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

- 로그인 예외 처리 흐름 설계 -

 

* 기본적인 흐름의 문제점

기본적인 로그인 처리 구조는 axios.post 메서드를 사용해 로그인 API를 호출하고 성공 시 토큰과 사용자 ID를 받아 이후 사용자 정보와 게시글 정보를 axios.all로 동시에 요청하는 방식이다. 이러한 방식은 일견 깔끔해 보이지만 예외 처리 흐름 면에서는 몇 가지 단점이 있다.

로그인 요청부터 사용자 정보 게시글 데이터까지 이어지는 모든 API 요청에 대해 하나의 최상위 catch 블록만 두고 있다. 이럴 경우 로그인은 성공했지만 사용자 정보나 게시글 조회에서 실패가 발생한 경우에도 모든 예외를 동일하게 처리하게 되어 원인을 파악하거나 사용자에게 적절한 피드백을 주기가 어렵다.

예를 들어 사용자가 존재하지만 게시글 데이터를 가져오는 도중 문제가 생겨도, 로그인 자체가 실패한 것처럼 처리될 수 있다. 이러한 상황은 사용자 경험 측면에서도 바람직하지 않다.

* 향상된 구조를 위한 개선 방향

이 문제를 해결하려면 로그인 이후 요청에 대해서도 개별적인 예외 처리 로직을 갖는 것이 좋다. 실제 코드에서도 axios.post(...).then(...).then(...).catch(...) 형태에서, 내부 then 블록 안에서도 axios.all의 응답 결과를 별도로 catch하여 처리하고 있다. 이 부분은 하나의 개선 방향이지만 코드의 중첩이 깊어져 가독성을 해치는 점이 문제로 제기된다.

또한 API 요청이 많아질수록 중첩된 콜백 지옥(callback hell) 형태로 코드가 성장하게 되는데 이는 유지보수와 디버깅에 있어 매우 불리한 구조다. 이런 측면에서는 코드 구조 개선이 필요하다.

* async/await를 통한 구조 개선

콜백 기반의 then/catch 구조 대신 async/await 구조를 사용하면 코드의 가독성을 훨씬 높일 수 있다. try/catch 블록을 통해 각 단계에서 발생할 수 있는 예외에 대해 세분화된 처리가 가능하고, 기본적으로 동기적인 흐름처럼 표현되기 때문에 로직을 이해하기 쉬워진다.

로그인 실패와 사용자 정보 요청 실패, 게시글 데이터 요청 실패를 모두 하나의 catch 블록으로 포괄하되, 필요하다면 중첩된 try/catch로 더 세밀하게 처리할 수 있다.

 

* 실습 코드

import template from './login.template';
import TextField from '../views/text-field';
import axios  from 'axios';

export default class Login {
  #template = template;
  #data;
  #container;
  #loginFail = false;
  #fields = [];

  constructor(container, data) {
    this.#container = document.querySelector(container);
    this.#data = data;

    this.#initialize();
  }

  #initialize = () => {
    const idField = new TextField('#login-fields', {
      id: 'userid', label: '아이디', type: 'text', placeholder: '아이디를 입력해주세요', require: true,
    });
    const passwordField = new TextField('#login-fields', {
      id: 'password', label: '비밀번호', type: 'password', placeholder: '**********', require: true,
    });

    this.#fields.push(idField);
    this.#fields.push(passwordField);
  }

  #onSubmit = e => {
    e.preventDefault();

    const loginData = this.#fields
      .map(field => ({ [field.name]: field.value }))
      .reduce((a, b) => ({ ...a, ...b }), {});

    axios.post('/api/authentication', loginData)
      .then(result => {
        return result.data.result;
      })
      .then(({ id, token }) => {
        const options = { headers: { token } };
        this.#data.store.token = token;

        axios.all([
          axios.get(`/api/user/${id}`, options),
          axios.get(`/api/user/${id}/posts`, options),
        ]).then(([profile, posts]) => {
          this.#data.store.userProfile = profile.data.result;
          this.#data.store.userPosts = posts.data.results;
  
          location.href = '/#/profile';
        }).catch(error => {      
          this.#loginFail = true;
          this.render();
        });
      })
      .catch(error => {      
        this.#loginFail = true;
        this.render();
      });
  }

  render = () => {
    this.#container.innerHTML = this.#template({ ...this.#data, loginFail: this.#loginFail });
    this.#fields.forEach(field => {
      field.render(true);
    });

    this.#container.addEventListener('submit', this.#onSubmit);
  }
}

 

 

로그인은 단순한 인증 절차가 아니라 이후 이어지는 여러 데이터 호출의 시작점이 되는 중요한 흐름이다. 따라서 각 단계에서 발생할 수 있는 예외를 구조적으로 분리하고 처리하는 것이 중요하다. 또한 코드의 중첩과 복잡도를 낮추기 위해 async/await를 적극 사용하는 것이 장기적으로 유지보수에 도움이 된다.

 

 

33강 수강 완료

 

오늘 공부 종료 시간 (07.31 22:09)

33강 강의 내용 정리 필기

 

학습 인증샷 - 2

마치며

 

오늘도 환급 챌린지 33강 공부 완료!!

 

이번 강의에서는 로그인 기능 구현에서의 예외 처리 흐름 설계에 대해 다뤄봤다. 단순히 로그인 요청을 서버로 보내고 응답을 처리하는 수준이 아니라, 로그인 이후 이어지는 사용자 정보와 게시글 데이터 요청까지의 흐름에서 발생할 수 있는 다양한 예외를 고려하는 것이 핵심이다.