이 게시물은 원본 아티클인 The 5 pillars of every HTTP request 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 Amin 에게 있습니다.

요청 (Request)

요청 또는 HTTP 요청은 무언가를 얻거나, 정보를 전송하기 위해 서버로 보내는 동작 입니다. 이것에는 서버의 URL과 요청의 헤더 및 본문이 포함됩니다.

설명 할 내용의 대부분은 요청을 하기 위해 중요하겠지만, 정보를 전송할 때에도 적용할 수 있습니다.

로드중 (Loading)

당신의 사용자들에게 로딩 정보를 보여주는 것은 요청하는 데 매우 중요한 단계입니다. 왜냐하면 네트워크에 무슨 일이 발생했는지 알 수 없기 때문입니다. 연결이 느릴 수도 있고, 다수의 요청으로 서버가 지연될 수도 있습니다.

로더를 보여주거나 요청이 아직 진행중임을 나타내는 글자를 표시하는 것은 어플리케이션을 더 전문적으로 보이게 하고, 사용자 친화적으로 만드는 추가적인 단계입니다. 이는 모두가 빠른 인터넷 연결을 가지고 있다고 가정하는 것 보다 더욱 전문적이고 사용자 친화적인 방법입니다.

파이어폭스나 구글 크롬 같은 브라우저의 개발자 콘솔에서 요청 속도를 늦춰볼 수 있습니다.

오류 (Error)

네트워크에서는 다양한 상황이 발생할 수 있지만, 우리는 우리의 코드 내부에서 일어나는 것 외에는 제어할 수 없습니다. 네트워크는 순간적으로 중단되거나, 사용자가 비행기모드를 켜거나, 서버가 가끔씩 멈출 수 있습니다. 우리는 어떤 형식의 문제인지, 언제 문제가 발생할 지 알 수 없지만 이를 책임져야 합니다.

이러한 상활들을 고려해 코드를 작성하는 것은 좋은 방법입니다. 특히 자바스크립트에서는 요청을 보내는 경우 Promise를 자주 사용하므로 Promise가 거부 된 상태일 수 있습니다. 따라서 이러한 상황을 코드에서 처리해야합니다.

취소가능한 (Cancelable)

만약 당신이 원격 API로부터 사용자들에게 데이터를 전달하고자 한다면, 최소한 이러한 요청을 취소할 수 있는 방법을 제공해야 합니다.

이는 좋은 방법이며, 모든 어플리케이션에서 추가적인 사용자 경험 요소입니다. 원격 서버에서 큰 페이로드를 전달 받는 것은 데이터 요금제를 사용하는 사용자들에게 부담이 될 수 있으며, 선택권을 제공하는 것은 사용자에게 모두를 고려한다는 것을 보여주는 좋은 방법입니다. 이는 데이터 전송에 많은 비용을 지불할 수 없는 사용자들도 고려한다는 것을 보여줍니다.

자바스크립트와 웹 페칭 API를 사용하면 중단 컨트롤러와 함께 신호를 사용해 요청을 취소할 수 있습니다.

검증 (Validation)

최종적으로 요청을 보내고 모든 것이 계획대로 진행되고 나면 성공적으로 응답을 받습니다. 그렇지 않나요?

어떻게 당신은 서버가 하루, 일주일, 1년 동안 응답이 바뀌지 않을거라고 확신하시나요? 당신의 어플리케이션은 일정 시간 동안 동작하겠지만, 만약 누군가 일반적인 배열이 아닌 객체를 전달하고자 하면 어떨까요? 이 경우 자바스크립트에서는 객체 대신 배열을 반복하려고 하기 때문에 문제가 발생할 수 있습니다.

데이터 검증은 중요한 단계이고, 특정 경우에는 필수적으로 필요할 수 있습니다. 왜냐하면 현재 무엇을 하고 있는지 알고 있고 프론트엔드와 백엔드를 단독으로 개발하고 있어도, 앞으로 1년 후에는 아마 다른 사람들이 참여하여 도움을 줄 수 있기 때문입니다.

만약 당신이 긴 휴가를 다녀와 API가 변경되더라도, 최소한 데이터 검증을 통해 해당 경우를 고려한다는 것을 알 수 있으며, 어플리케이션이 갑작스럽게 충돌(crash)하지 않을 것입니다 (그리고 의미있는 오류를 확인해 데이터 검증이 없을 때 보다 더 빠르게 문제를 해결 할 것입니다).

또한 데이터 검증을 사용하면 타입스크립트와 같은 강한 타입을 가진 언어를 사용해 데이터가 확실히 파싱(parse)되고 검증 되었음을 확인하고, 데이터가 변경될까봐 걱정하지 않고 100% 확신하여 이를 반복할 수 있습니다.

예제

다음은 React를 시작하는 사람이 작성한 예시 어플리케이션입니다.

Copycopy code to clipboard
import React, { useEffect, useState } from 'react';

export const App = () => {
	const [users, setUsers] = useState([]);

	useEffect(() => {
		fetch('https://jsonplaceholder.typicode.com/users')
			.then((response) => response.json())
			.then((newUsers) => {
				setUsers(newUsers);
			});
	}, []);

	return (
		<ul>
			{users.map((user) => (
				<li key={user.id}>{user.username}</li>
			))}
		</ul>
	);
};

보이는 것 처럼 로딩 상태도 없고, 요청을 취소할 수도 없고, 데이터를 검증하지도 않습니다.

이번에는 이러한 요소들이 모두 추가된 예시를 보겠습니다.

Copycopy code to clipboard
import React, {
	Fragment,
	useRef,
	useEffect,
	useState,
	useCallback,
} from 'react';

const isValidUser = (input) => {
	return (
		typeof input === 'object' &&
		input !== null &&
		typeof input.id === 'number' &&
		typeof input.username === 'string'
	);
};

const isValidUsers = (users) => {
	if (!Array.isArray(users)) {
		return false;
	}

	if (!users.every((user) => isValidUser(user))) {
		return false;
	}

	return true;
};

export const App = () => {
	const [users, setUsers] = useState([]);
	const abortController = useRef(null);
	const [error, setError] = useState(null);
	const [loading, setLoading] = useState(false);

	const cancel = useCallback(() => {
		abortController?.current?.abort();
	}, [abortController]);

	useEffect(() => {
		abortController.current = new AbortController();
		const { signal } = abortController.current;

		setError(null);
		setLoading(true);

		fetch('https://jsonplaceholder.typicode.com/users', {
			signal,
		})
			.then((response) => {
				if (response.ok) {
					return response.json();
				}

				return Promise.reject(new Error('Something went wrong'));
			})
			.then((newUsers) => {
				if (!isValidUsers(newUsers)) {
					throw new Error('Wrong response from the server');
				}

				setUsers(newUsers);
			})
			.catch((error) => {
				setError(error);
			})
			.finally(() => {
				setLoading(false);
			});
	}, []);

	return (
		<Fragment>
			{loading && <small>Loading, please wait...</small>}
			{error && <small>{error.message}</small>}
			<button onClick={cancel}>Cancel</button>
			<ul>
				{users.map((user) => (
					<li key={user.id}>{user.username}</li>
				))}
			</ul>
		</Fragment>
	);
};

물론 여기에는 스타일이 적용되지 않아 끔찍해보일 수 있습니다. 그러나 최소한 당신에게 좋은 아이디어를 제공할겁니다.

우리는 요청을 취소시킬 수 있는 방법과 사용자를 안심시킬만한 로드 진행 현황 그리고 기본적인 데이터 검증 매커니즘을 추가해 데이터가 손상되거나 변경되지 않았음을 보장했습니다.

결론

우리는 믿을만한 어플리케이션을 만들기 위한 5가지 방법을 알아보았습니다. 언제나 서버에 요청할 때 이것을 따르는 게 좋습니다.

• 적절한 요청 보내기
• 로딩 상태 보여주기
• 어떤 에러던지 모여주기
• 취소 가능한 요청 만들기
• 전달받은 데이터 검증하기

만약 당신이 이 단계들을 따른다면, 시험을 거친 견고하고 신뢰할 수 있는 어플리케이션을 개발 할 수 있을 것입니다.

이것은 곧 사용자들이 보기에 더 좋은 어플리케이션으로 만들어 줄 것입니다.

이 컨셉은 자바스크립트나 리액트에 한정되지 않으며, 다른 어떠한 언어나 프레임워크 & 라이브러리 에서도 동일한 단계로 적용 할 수 있습니다.

역주 의견

여기서부터는 저(himprover)의 의견 입니다.

개인적으로 내용 보다도 글 자체를 번역하기에 어려웠던 글이었습니다.

한 문장 문장들이 길어서 어떻게 해야 자연스러울지 고민이 많았네요.

개인적인 블로그에 글을 쓸 때에도 좀 더 잘 쓰도록 노력해야겠습니다.