관리 메뉴

Silver Library (Archived)

크게 2가지로 나누게 된 개념 - api 와 map function 본문

Face the fear, build the future/Revision Sector

크게 2가지로 나누게 된 개념 - api 와 map function

Chesed Kim 2022. 10. 19. 19:36
반응형

크게 2가지로 나누는 것. 그것은

1. 지금까지 여러 번 응용하며 구성 해 본 API 를 이용한 REST API. [post, put, get, delete] 

https://www.ibm.com/docs/en/informix-servers/12.10?topic=api-rest-syntax 

 

REST API syntax

A subset of the HTTP methods is supported by the REST API. These methods are DELETE, GET, POST, and PUT. The examples that are shown in this topic contain line breaks for page formatting; however, the REST API does not allow line breaks. POST The POST meth

www.ibm.com

2. backend 데이터인 json 의 array 데이터를 map 으로서 front-end 측에서 출력 되도록 구성하는 것.

여기서, 이 과정을 '지나치게 어렵게 받아들이고' 있었다. 마치, 알고리즘을 알아야만 해낼 수 있는 구성이라는 느낌.

그래서 OOP 부터, 다시 JS 기초 문법 부터 ECMA6 까지 둘러보며 알게 된 사실이.

 

그냥 필요한 부분만 먼저 익혀두면서 천천히 다 둘러봐도 되지 않나. 였다. 왜냐면 prototype 이며 constructor 도 유용했지만, 적어도 지금의 입장에서 보면 '초기 구성 할 때 보다도 완성 후, 코드 흐름을 아는 상황에서 리펙토링 할 때 용이' 하다는 판단이 들었기 때문.

 

이 부분에 대한 결론이다.

'async functions with Array.map  in Javascript' - https://advancedweb.hu/how-to-use-async-functions-with-array-map-in-javascript/

 

How to use async functions with Array.map in Javascript

Return Promises in map and wait for the results

advancedweb.hu

요컨데, Async 와 await 를 JavaScript 에서 잘 사용 할 줄 아면 딱, 거기까지라는 의미다.

단지 지난번에 본 데이터 내용물이 array 였지만 string 형태로 잔뜩 있다보니, 그 당시에는 그게 처음보던거다 보니 막상 배열상으로 mapping 하게되면, 0, 1, 2 순으로 나타나게 될 거란 걸 알아도, 정작 어떻게 구성해야 할지 몰랐던 거였다.

 

왜냐면 정말 몰랐으니까. 아니 의도는 알겠는데 이걸 그러니까 어떻게 출력 하고 싶냐고요...

지금와서 상기해보면, 그 당시 같이 한 개발팀이 '다들 신입인 점도 있다보니 그냥 막연하게 '그거 출력좀요' 정도로, 어떻게 할 줄을 몰랐다는 점'이다. (이 경험은 개발자로 활동하면서 당시 처음으로 목표한 것을 해내지 못했던 프로젝트 였는데, 이 트라우마적인 사건 이후로 코드 구성 이전에 어떻게 구성할지에 대한 계획에 더 많은 시간을 할애하게 되었다.) 

 

지금 생각해보면 정말 아깝다. 하다못해 'array 내용을 이 페이지에 출력하게 할 건데, 이 때 해당 json 파일 내부의 array 데이터들이 출력이 가능하게 끔.' 정도로 라도 알려줬어도 하는 아쉬움이.

 

그저 이제는 해낼 수 있다. 라는 아쉬움이 남을 다름이다. 

 

그런데 map 은 나도 뭐에 쓰는지 정도는 아는데? 였지만, 실질적으로 저걸 써본 적은 별로 없었다. 그 트라우마 사건 이후로, 바로 지난 콜라보레이션 작업 당시, json 파일 내에 데이터가 array 형식으로 되어있던 것을 출력케 한것.

 

tl;dr - 이 사건은 내가 폴더와 파일명을 직관적이게 짓고, 철저하게 분류해야 한다는 교훈을 주었다.

 

아무튼 그 당시 도저히 몰라서 백기를 들었던 map on react 개념은 바로 이거다.

https://www.pluralsight.com/guides/how-to-use-the-map()-function-to-export-javascript-in-react

 

How to Use the Map() Function to Export JavaScript in React | Pluralsight

To use the map() function, attach it to an array you want to iterate over. The map() function expects a callback as the argument and executes it once for each element in the array. From the callback parameters, you can access the current element, the curre

www.pluralsight.com

const Users = () => {
  const data = [
    { id: 1, name: "John Doe" },
    { id: 2, name: "Victor Wayne" },
    { id: 3, name: "Jane Doe" },
  ];

  return (
    <div className="users">
      {data.map((user) => (
        <div className="user">{user}</div>
      ))}
    </div>
  );
};

당시 몰랐던 것에 대한 결론은...

1. map() function 을 react.js 에서 불러 오되, 뭘 어떻게 하길 원했는지, 이를 두고 개발진 전원이 혼동이 온 것.

= 팀원과의 정보 동기화 문제.

 

 

그래도 덕분에 확실하게 알게 된 map() 개념이었다.

이걸로 상태 관리로 변형 가하듯이,

original 백엔드 data를 변형 하지 않고도 데이터를 변형 할 수 있는 방법도 알게 되었으니. 


<부가 메모>

이 데이터를 가칭 백엔드라 지칭하고, 어떻게든 이걸 내가 출력 시키고자 하는 페이지 내에서 해당 내용이 표시 되도록 '구성' 하는 것이 난관이었다.

 

왜냐면 해본적이 없으니까. 안타깝지만 이건 아무리 이론책을 봐도 당장 떠오르는 개념이 아니었다.

놀라운 사실이라면, CS 전공생도 '어떻게 해야 할지 감이 안 잡히니까.' 라고 했다.

최대한 몽키코더 만큼은 안 되겠다 라고 다짐하며, 결국 다른 예시를 찾아보며 알아 본 결과가 바로 위의 링크.

 

크게 정리하자면:

1. array 내부에 있는 데이터를

2. 같은 region 내 새 변수에서 map 을 사용해서 읽어들이게 한다.

3. 여기서 뭔가 수학 사칙연산 적인 의도가 필요하다면 추가 구성.

const arr = [1, 2, 3];

const syncRes = arr.map((i) => {
	return i + 1;
});

console.log(syncRes);
// 2,3,4

이게 끝이다. 참고로 위 코드블럭은 map function 이며, synchronous 의 예시다.

 

그럼, 문제의 async 는 언제 사용할까? 이건 정말 prototype 개념을 처음 접할 때 만큼 막막함 그 자체였다.

const arr = [1, 2, 3];

const asyncRes = await Promise.all(arr.map(async (i) => {
	await sleep(10);
	return i + 1;
}));

console.log(asyncRes);
// 2,3,4

위 코드블럭은 async 가 map method 뒤에 표기되어 있다.

해석하자면, arr 데이터 [1, 2, 3] 이 들어있는 내용을 mapping 하는데, 

기존의 (async 가 없던) 경우에는 그냥 사칙연산 적으로 +1 하라는 구성이었지만

이번의 async 가 함께 한 경우에는, 이 후에 추가로 await sleep(10); 이 추가되어 있다.

 

정황상, 이건 10 정도의 딜레이 후에, i 가 한번 작동하고, 이를 arr 데이터 마지막 까지 mapping 되는 순간 까지 해당 행동을 동기화 해라는 의미로 보인다. 

 

요약:

map 이 동작하는 순간, map 은 1, 2, 3 순으로 읽어내린 후, 이를 2, 3, 4 로 return 하는 것.

 

연관 개념:

동시성, 병렬성 (concurrency, parallelism)