TIL_2023.05.31

이얏호·2023년 5월 31일
0
post-custom-banner

프로그래머스 문제를 풀다가 정리를 하기 위해 특정 값들을 객체로 만들었다.
그러한 객체를 순서대로 출력하기 위해서 평소 하던 것 처럼 for문을 돌리는데
객체의 length값이 찍히지가 않았다.

객체에는 길이가 존재하지 않았기 때문이다...

그래서 for in을 사용하는 방법을 취했으나.

더 간편한 방법을 배웠다!!

let a = {
	"a": 1,
    "b": 375,
    "cde": 777
}

console.log(Object.keys(a))
console.log(Object.values(a))

다음과 같이 Object.keys() 혹은 Object.values()를 사용하면
해당 객체의 key값들이 모인 배열, value값들이 모인 배열이 반환되었다.

그러한 배열의 length를 확인한다거나 아니면 value값 자체를 제출할 상황에 굳이 for in을 돌리지 않고도 편하게 원하는 값을 찾을 수 있었다.


여기서 추가적으로 Array.from()에 대해서도 확인을 했는데,
Array.from()은 유사 배열 객체(array-like object),
혹은 반복 가능한 객체(iterable object)를 배열로 만들어주는 역할을 한다.

length가 존재해야하고, 인덱스적 요소가 존재해야한다는 전제 조건이 필요하지만
간편하게 객체를 배열로 바꿀 수 있다는 점에서 좋은 것 같다.

추가적으로 string에 사용할 경우 마치 .split("")을 한 것 처럼
한 자 한 자가 끊어져서 배열로 작성되는 걸 확인 할 수 있었다.

let a = "foo";

console.log(Array.from(a));
console.log(a.split(""));

// -----------------------
// console에는 다음과 같이 찍힌다.
// [ 'f', 'o', 'o' ]
// [ 'f', 'o', 'o' ]


api에 통신을 요청할 때, 궁금증이 생겼는데
options 내에서 Authorization: 의 Bearer값을 통해서 통신을 인가 해주는 구조라고 배웠는데 options부분을 통째로 지워버려도 이상 없이 TMDB에서 api값이 받아와졌다.

왜 인가 코드가 존재하지 않는데 통신이 가능했냐면
결론은 제공하는 정보가 암호화, 즉 숨길 필요가 없었기 때문이라는 답변을 들었다.

중요한 정보라면 해당 Bearer값을 통해서 인가를 해줄지 말지 판단을 하고 넘겨주지만 누구나 접근해도 상관 없는 정보이기에 해당 부분이 없어져도 작동에 문제가 발생하지 않았던것이다!


내가 작성한 코드에서 api 통신이 실패 할 경우에 사용자에게 무언가 메세지를 표시해주고 싶었다.

일단 우리가 인터넷을 살펴보거나 할 때 401, 404 오류 라고 뜨는걸 봤었는데,
이는 HTTP 상태 코드에서 비롯된 것이었다.

fetch를 통해서 값을 받아오고 response.status 를 통해서 HTTP상태 코드에 접근이 가능한데, 이 값에 따라서 확인할 수 있는 상태가 달라졌다.

100번대는 임시 응답으로 현재 클라이언트의 요청까지 처리되었으니 계속 진행해도 된다는 의미.

200번대는 클라이언트의 요청이 서버에서 성공적으로 처리되었다는 의미.

300번대는 완전한 처리를 위해서 추가적인 동작이 필요한 경우를 의미하는데, 서버의 주소 또는 URL의 웹 문서가 이동되어서 해당 주소로 다시 통신을 시도하라는 의미가 대부분이라고 한다.

400번대는 없는 페이지 요청 등 요청 사항 자체가 잘못 된 경우.

500번대는 서버의 사정으로 메시지 처리에 문제가 발생한 경우, DB에서 처리 과정 오류나 서버의 부하, 서버 익셉션 등이 발생하는 경우.

이런식으로 status 값에 따라서 통신 상태를 확인 할 수 있다.
결국 정상적으로 문제없이 통과되는 상황은 200 ~ 299번까지.
그래서 if문을 통해 199 < response.status < 300 조건을 달아두고 해당 범위를 벗어났을 경우
에러 메세지를 통해 status를 출력해주어 어떠한 상황인지 사용자에게 알려줄 수 있었다.

profile
열심히 신나게 화이팅!
post-custom-banner

0개의 댓글