[TIL] 23Y01M30D

in TIL
[TIL] 23Y01M30D

Facts(사실, 객관)

React Native를 이용해 회사에서 프로젝트 진행을 하고 있었으며 기본적 UI구현은 어느정도 끝났고 이제 API연동을 진행하고 있었다.

Feelings(느낌, 주관)

API연동을 위해 API 명세서를 받아 연동을 진행하였는데 postman에서는 get방식이 잘 작동되는데 반해 url이나 vsCode에서는 잘 작동되지 않는 이슈가 발생하여서 좀 당황하였다. 그래서 이 부분에 대해서는 백엔드 분이 내일 확인해주신다고 하였다.

내가 제일 많이 사용하는 배열 메서드는 map, filter가 있었고 그나마 reduce를 한번 사용한 적이 있었다. 그렇지만 배열에서 값이 존재하면 true값을 return받고 싶었다. 그래서 javascript배열 메서드를 한번 살펴봤는데 some이라는 함수를 새로 알게 되었다.

내가 async await와 axios를 사용하려고 하니까 잘못된 방법을 사용하고 있다는 것이었다. 최근에는 퍼블리싱위주로 작업을 하여서 까먹고 있었다. 그래서 계속해서 반복적으로 사용하고 확실하게 숙지하는게 중요하다는 생각을 많이 하게 되었다.

Findings(배운 점)

some함수는 배열중에 하나라도 조건에 일치하는 것이 있으면 true값을 return해주는 것이었다. 배열 안에서 내가 원하는 값이 있으면 true를 return받는 나에게 정말 적합한 함수였다. 아래 예시 코드를 한번 살펴보면 이해하기 쉬울 것이다.

const array = [1, 2, 3, 4, 5];

const value1 = array.some((element) => element === 0);
const value2 = array.some((element) = > element === 1);

console.log('value1:: ', value1) // false
console.log('value2:: ', value2) // true

오랜만에 axios와 async await를 사용해서 그런지 제대로 된 사용법을 모르고 사용하고 있었다. 나는 async를 함수 앞에 작성을 해주었고 함수 안에 axios를 사용했다. 근데 axios앞에 await사용하고 axios안에서는 또 then을 사용하는 것이었다. 개념에 대해서 정확하게 잘 몰랐기 때문에 사용한거 같다.

그래서 axios만 사용할 경우 promise-then방식을 이용해서 값을 받고 에러 처리를 catch를 통해서 하면 되지만 async/await를 사용할 경우 axios앞에 await를 붙여서 비동기 처리가 되게 작업하는 형식이다. 만약 async/await를 사용한다면 에러처리를 try-catch를 사용해서 작업하면 된다. 아래 예시 코드를 살펴보자.

// async/await 이용
const getDate = async () => {
    try {
      const receivedData = await axios.get(
        `http://url/api/1`
      );
      console.log('receivedData:: ', receivedData.data)
    } catch (err) {
      console.log('Error:: ', err);
    }
  };

// promise-then 이용
const getDate = () => {
      const receivedData = axios.get(
        `http://url/api/1`
      ).then((res) => console.log('res:: ', res.data)
      ).catch((err) => console.log('err:: ', err));
  };

Affirmation(자기 선언)

API명세서를 보고 처음 백엔드와 연동을 진행하니까 막상 잘 되지 않았고 백엔드에 문제가 있었는데 내가 계속 문제 있는줄 알고 찾고 있었다. 그래서 만약 백엔드 서버가 잘 되는지 안되는지 긴가민가하면 일단 내가 한번 찾아보고 백엔드분한테 한번 물어봐야겠다고 생각했다.

그리고 axios에 대한 개념을 확실하게 한번 더 잡게 되는 계기가 된거 같다는 생각을 했다. 프로그래밍도 그렇고 내가 좋아하는 축구도 그렇고 기초적인 개념이 제일 중요한거 같다. 앞으로 기초 개념들을 다시 살펴보면 정리해야겠다.

Reference

-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some
-promise-then, async/await

© 2024. All right reserved Min