자바스크립트의 배열은 여러가지 메서드를 제공하고 있지만 그 중에서 가장 강력한 녀석을 뽑으라면 단연 reduce()를 뽑을 수 있을텐데요. 워낙 범용적으로 쓰일 수 있는 메서드이다 보니 reduce()가 사용된 코드를 해석하는데 어려움을 느끼시는 분들이 많습니다. 이번 포스팅에서는 reduce() 메서드의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 개발에서 활용할 수 있는지 배워보겠습니다. 기본 문법 어떤 배열을의 reduce() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의
자바스크립트의 배열은 forEach(), filter(),map(), reduce, every(), some() 등과 같이 콜백 함수를 인자로 받아 배열에 저장되어 있는 모든 원소로 상대로 호출해주는 함수들을 제공합니다. 이 함수들을 잘 활용하면 소위 함수형 프로그래밍(Functional Programming) 스타일로 코딩을 할 수 있게 되죠. 그런데 혹시 이러한 자바스크립트의 배열에 제공하는 함수에 비동기 함수를 인자로 넘기면 낭패를 볼 수 있다는 것을 아시나요? 이번 포스팅에서는 자바스크립트 배열 함수를 통해서 비동기 함수를
React로 앱을 만들다 보면 서버에서 데이터를 가져오는 코드를 정말 자주 작성하게 됩니다. useEffect() 안에서 fetch()를 호출하고 useState()로 로딩 상태와 에러 상태를 관리하고 데이터가 오면 상태를 업데이트하고... 이 패턴을 몇 번이고 반복하다 보면 문득 이런 생각이 들지 않나요? "매번 같은 코드를 쓰고 있는데, 이걸 더 잘 처리하는 방법은 없을까?" 🤔 여기에 캐싱, 재시도, 백그라운드 갱신, 낙관적 업데이트까지 고려하면 상황은 더 복잡해집니다. 이런 문제를 정면으로 해결하기 위해 만들어진 라이브러리
자바스크립트로 개발을 시작하게 되면 꼭 한번 씩은 만나게 되지만 별로 대수롭지 않게 넘어가는 함수 2개가 있습니다. 바로 setTimeout() 함수와 setInterval() 함수인데요. 이번 포스팅에서는 자바스크립트의 타이머를 사용하는 이 두 내장 함수에 대해서 한 번 알아보려고 합니다. setTimeout() 사용법 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다. setTimeout() 함수는 첫번째 인자로 실행할
이번 포스팅에서는 Node.js에서 파일 입출력 처리를 할 때 사용하는 fs 모듈에 대해서 알아보겠습니다. fs모듈 불러오기 fs 모듈은 Node.js에 내장되어 있어 있기 때문에 별도의 라이브러리 설치없이 바로 불러와서 사용할 수 있습니다. CommonJS 모듈 시스템을 사용하는 프로젝트에서는 require 키워드로 불러오고, ES 모듈 시스템을 사용하는 프로젝트에서는 import 키워드를 사용할 수 있습니다. 비동기 함수 vs 동기 함수 fs 모듈는 비동기(asynchronous) API와 동기(synchronous) API를
React 앱을 개발하다보면 네트워크를 통해 REST API나 GraphQL API를 호출하여 원격에 있는 데이터를 가져와야 하는 일이 빈번하게 생기는데요. 이번 포스팅에서는 React 훅 함수를 이용해서 원격 API를 깔끔하게 호출하는 방법에 대해서 알아보겠습니다. useEffect()로 원격 데이터 가져오기 보통 원격 API를 호출하는 작업은 컴포넌트 랜더링을 막지않기 위해서 비동기로 처리하기 경우가 대부분인데요. 이러한 Side Effect 처리를 위해 React에서는 useEffect 훅 함수를 제공하고 있습니다. 예를 들어
코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있습니다. 예를 들어, 자바에서는 Thread.sleep() 함수, 파이썬에서는 time.sleep() 함수를 사용해서 이렇게 의도된 지연을 줄 수가 있습니다. 다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있는데요. 자바스크립트에서는 어떻게 프로그램의 실행을 일정 시간동안 지연시킬 수 있을까요? setTimeout() 함수 자바스크립트 API에서 다른 언어에서 제공하는 sleep 함수와 그나마 가장 유사한
JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발의 새로운 트랜드가 되고 있습니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. (이렇게 브라우저에서 직접 비동기로 HTTP 통신을 하는 것을 한 때 소위 Ajax라고도 일컬었죠...) 이번 포스팅에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠습니다. 라이브러리? 원격 API 호출하면 제일 먼저
파이썬에서도 자바스크립트처럼 비동기로 작동하는 코드를 짤 수 있을까요? 이번 글에서는 파이썬에 내장된 asyncio 모듈을 통해 비동기 프로그래밍을 어떻게 수행하는지에 대해서 알아보겠습니다. 동시 프로그래밍의 패러다임의 변화 전통적으로 동시 프로그래밍(concurrent programming)은 여러 개의 쓰레드(thread)를 활용하여 이루어졌는데요. 하지만 쓰레드를 이용해서 직접 코딩을 해보신 분이라면 겪어보셨겠지만, thread safe한 프로그램을 작성하는 것은 생각보다 쉬운 일이 아닙니다. 게다가 싱글 코어 프로세서에서 이
이전 두 개의 포스팅를 통해서 기존에 자바스크립트로 어떻게 비동기 처리 코드를 작성해왔는지에 대해서 살펴보았습니다. 이번 포스팅에서는 좀 더 개선된 방식으로 비동기 처리를 할 수있도록 도와주는 async/await에 대해서 알아보도록 하겠습니다. async/await를 제대로 시용하려면 Callback과 Promise에 대한 이해가 무엇보다 중요하오니 아래 포스팅도 참고 바라겠습니다. [자바스크립트] 비동기 처리 1부 - Callback [자바스크립트] 비동기 처리 2부 - Promise Promise를 통한 비동기 코딩 먼저 Pr
많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다. 이번 포스팅에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점 ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩을 했었습니다. 예를 들어, 다음 코드를 보시면 findUserAndCallBack() 함수를 호출할 때, 두번째 인자로 콜백 함수가 넘어갑니다. 그리고 fi
자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다. 이번 포스팅에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수 유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는 findUser()라는 함수를 작성해보겠습니다. 결과 위와 같이 우리가 흔히 생각하는 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있습니다. 하지만 자바스크립트에서