LG CNS 부트캠프 학습일지 5일차

학습 내용

• switch, map, filter 사용법
• fetch와 axios 를 이용한 비동기통신

switch, map, filter 사용법

map과 filter 같은 고차함수 (Higher-order Function) 사용법을 배웠다. 자바와 파이썬에서도 자주 사용했기 때문에 익숙했다. 어떤 배열이나 리스트를 순회할 때 for 문을 만드는 것보다 고차함수를 붙이면 코드가 조금 더 간결하고 이해하기 쉬울 때가 많다. 자바스크립트도 크게 다르지 않았다. 고차함수의 가장 좋은 점은 반복문 안에서 한 가지만 하게 만든다는 것이라고 생각한다.

fetch와 axios 를 이용한 비동기통신

비동기(asynchronous)통신이란 무엇인가. 동기(synchronous)통신과 다르다는 것은 알겠는데, 무엇을 동기라고 하는지 모르면 이해하기 어렵다. 학교에서 디지털 회로를 배울 때가 생각났다. 디지털 회로를 구성하는 각 부품이 동기화(synchronized) 되어 있다고 하는데, 이는 각 부품이 클럭의 신호에 따라 같이 움직인다는 것이다.

소프트웨어에서도 맥락은 비슷하다. 동기화되어 있다는 것은 함수의 결과값을 받을 때까지 기다리는 것을 의미한다. 하지만 외부에서 데이터를 가져와야할 때는 그 데이터를 반환하는 함수가 끝날 때까지 기다리기 어렵다. 예를 들어 통신이 중간에 끊길 수도 있고 통신이 불안정해서 속도가 느릴 수 있다. 프론트엔드에서 데이터를 받을 때까지 그냥 기다리고 있다면 컴퓨터 화면을 보고 있는 사용자 입장에서는 답답하다고 느낄 것이고 웹사이트가 반응하지 않는다고 생각할 것이다.

서론이 길었는데, 결론은 반응성을 높여서 사용자가 즐거운 경험을 할 수 있도록 프론트엔드와 벡엔드는 비동기통신을 한다. 그리고 비동기통신을 위해 자바스크립트 fetch 메소드를 사용하거나 axios 라이브러리를 사용한다. axios를 사용해본 경험이 부족해서 fetch 보다 어떤 점에서 편리한지 모르겠다. 한 가지 있긴 한데, 외부 라이브러리를 추가할 정도인지 판단하지 못하겠다는 것이다.

여담으로 최근에 axios 라이브러리가 해킹되었다는 뉴스를 들었다. 다행히 개발자들이 빠르게 대응했다. 보안사고 때문에 모든 라이브러리를 배척하는 것은 지나친 행동일 것이다. 하지만 직접 사용하는 라이브러리가 해킹당했다는 소식을 들으니 찝찝함을 느끼는 것은 어쩔 수 없는 것 같다.

결론

비동기통신은 난이도가 조금 있었다. 리엑트 토이프로젝트를 진행할 때 비통기 통신으로 어려워하고 있었는데, 오늘 배운게 도움이 될 것 같았다.