[API] 로그인 구현하기

🐾들어가며

부트캠프에서 프로젝트를 들어가기 전에 api 사용방법에 대한 실습으로 로그인을 구현해보기로 하였습니다. 간단하게 로컬스토리지에 토큰을 저장하는 것까지 코드를 바꿔가면서 진행하였습니다.

✨본격적으로

fetch로 요청보내기

const login = async () => {
	const baseUrl = "";
	const reqPath = "/user/login";

	const loginData = {
		"user":{
			"email":email,
			"password":password
		}
	};

	fetch(`${baseUrl}${reqPath}`,{
		method: "POST",
		headers:{
			"Content-type": "application/json"
		},
		body:JSON.stringify(loginData);
	})
}

fetch의 기본 동작은 GET이기 때문에 다른 메서드를 지정하기 위해서는 두번째 인자로 객체를 넣어서 요청에 대한 정보를 전달해야 합니다. 이때, 주의할 점은 body의 값은 문자열로 주기에 문자열로 변환해줄 JSON.stringify(문자열로 변환할 객체)를 사용합니다.

[!Note]
body에 입력하면 문자열로 변환하는데 객체를 문자열로 바로 변환하면 [object Object]가 나옵니다.

함수의 재사용성 높이기

위의 코드는 외부의 값인 email, password를 함수 내부에서 직접 불러오기 때문에 외부 환경에 의존적일 수 밖에 없습니다. (외부에 email,password가 없으면 함수 실행이 안됨) 따라서 이를 파라미터로 하여 인자로 입력받을 수 있도록 바꾸어 사용하면 함수의 재사용성을 높일 수 있습니니다.

const login = async (email, password) => {
	const baseUrl = "";
	const reqPath = "/user/login";

	const loginData = {
		"user":{
			"email":email,
			"password":password
		}
	};

	fetch(`${baseUrl}${reqPath}`,{
		method: "POST",
		headers:{
			"Content-type": "application/json"
		},
		body:JSON.stringify(loginData);
	})
}

reqPath와 body객체 자체를 받으면 json형태로 포스트 요청을 할 수 있는 기본적인 함수를 만들 수 있습니다.

POST 요청의 결과값을 받기 위해서 await과 json()을 활용합니다.

const login = async (email, password) => {
	const baseUrl = "";
	const reqPath = "/user/login";

	const loginData = {
		"user":{
			"email":email,
			"password":password
		}
	};

	const res = await fetch(`${baseUrl}${reqPath}`,{
		method: "POST",
		headers:{
			"Content-type": "application/json"
		},
		body:JSON.stringify(loginData);
	});
	const json = await res.json();
	const token = json.user.token;
}

프로미스를 사용할 때 동기적 실행을 위해 await를 사용하며, 이를 사용하면 프로미스 객체 안의 결과값을 가지고 올 수 있습니다.

로컬스토리지에 저장하기

로그인 결과가 성공하면 서버에서 토큰을 주는데, 이를 로컬스토리지에 저장하여 사용자 인증이 필요한 곳에 사용할 수 있도록 해줍니다.

const login = async (email, password) => {
	const baseUrl = "";
	const reqPath = "/user/login";

	const loginData = {
		"user":{
			"email":email,
			"password":password
		}
	};

	const res = await fetch(`${baseUrl}${reqPath}`,{
		method: "POST",
		headers:{
			"Content-type": "application/json"
		},
		body:JSON.stringify(loginData);
	});
	const json = await res.json();
	const token = json.user.token;
	localStorage.setItem("token", token);
}

로컬스토리지에 저장하는 방법은 간단한데, 이때 꼭 key와 value의 쌍으로 인자를 넣어야 한다는 점을 주의해야 합니다.

✔️결론

fetch를 이용해서 프로미스 객체를 어떻게 활용을 할 지가 궁금했는데, await의 기능 중에 프로미스 객체의 결과값을 반환해주는 것도 있다는 걸 알았습니다. then()과 catch()를 쓴 것과 어떻게 다른 지도 좀 더 찾아봐야겠습니다.