Node.js로 웹 서버를 만들어야 한다면 가장 먼저 떠오르는 이름이 바로 Express일 겁니다. 2010년에 처음 등장한 이후로 지금까지 Node.js 생태계에서 압도적인 점유율을 자랑하고 있는 웹 프레임워크인데요. Express는 "최소한의 기능만 제공하되, 필요한 것은 직접 골라 쓰자"라는 철학을 바탕으로 설계되어서, 가벼우면서도 유연한 서버를 구축할 수 있습니다. 이번 포스팅에서는 Express를 처음 접하는 분들을 위해 프로젝트 셋업부터 라우팅, 미들웨어, 요청/응답 처리까지 핵심적인 사용법을 차근차근 알아보겠습니다. E
Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들에게 사랑받고 있는 테스팅 라이브러리입니다. 출시 초기에는 프론트엔드에서 주로 쓰였지만 최근에는 백엔드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest: All-in-one 테스팅 라이브러리 페이스북에서는 Jest를 단순한 테스팅 라이브러리가 아닌 "테스팅 프레임워크"라고 부르는 만큼 기존 자바스크립트 테스팅 라이브러리와는 차별점이 있습니다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러 가지 테스팅 라이브러리를 조합해서
이전 두 개의 포스팅를 통해서 기존에 자바스크립트로 어떻게 비동기 처리 코드를 작성해왔는지에 대해서 살펴보았습니다. 이번 포스팅에서는 좀 더 개선된 방식으로 비동기 처리를 할 수있도록 도와주는 async/await에 대해서 알아보도록 하겠습니다. async/await를 제대로 시용하려면 Callback과 Promise에 대한 이해가 무엇보다 중요하오니 아래 포스팅도 참고 바라겠습니다. [자바스크립트] 비동기 처리 1부 - Callback [자바스크립트] 비동기 처리 2부 - Promise Promise를 통한 비동기 코딩 먼저 Pr
많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다. 이번 포스팅에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점 ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩을 했었습니다. 예를 들어, 다음 코드를 보시면 findUserAndCallBack() 함수를 호출할 때, 두번째 인자로 콜백 함수가 넘어갑니다. 그리고 fi
자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다. 이번 포스팅에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수 유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는 findUser()라는 함수를 작성해보겠습니다. 결과 위와 같이 우리가 흔히 생각하는 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있습니다. 하지만 자바스크립트에서
2018년 8월 10일 Vue CLI 3가 정식 릴리즈되었습니다. Github 릴리즈 페이지: https://github.com/vuejs/vue-cli/releases Evan You의 포스팅: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb Vue CLI는 React의 create-react-app처럼 Vue 프로젝트를 손쉽게 만들 수 있도록 도와주는 커맨드 라인 도구 입니다. 이번 포스팅에서는 Vue CLI 3 사용법에 대해서 간단하게 알아보도록 하겠습니다.
GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서 알아보겠습니다. 아래에 소개된 방법들로 GraphQL API 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다. 호출법을 넘어 GraphQL이라는 언어 자체가 표준으로서 어떻게 정의되는지 궁금하시다면 GraphQL 명세 함께 읽기 시리즈에서 깊이 다루고 있습니다. 내장 Web UI 많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해주는 FakerQL의 경우
웹팩은 자바스크립트 개발자들이 좀 더 쾌적한 개발 경험을 할 수 있도록 여러 가지 개발 편의 기능을 제공합니다. 이번 포스팅에서는 웹팩을 사용하면서 개발 편의성을 개선시킬 수 방법에 대해서 알아보겠습니다. 실습 프로젝트 먼저 실습 프로젝트를 만들겠습니다. 새로운 디렉터리를 만들고 NPN 프로젝트를 초기화 후, 웹팩과 웹팩 CLI 패키지를 설치합니다. 그 다음, 다음과 같이 src/index.js와 dist/index.html 파일을 작성합니다. src/index.js dist/index.html 자 이제, 터미널에서 웹팩을 커맨드를
React나 Vue, Angular와 같은 자바스크립트 프레임워크를 기반으로 프로젝트를 하다보면 webpack.config.js라는 파일과 자주 마주치게 됩니다. 바로 웹팩 설정 파일인데요. 이번 포스팅에서는 이 설정 파일을 기본으로 한 웹팩 기본 설정법에 대해서 알아보도록 하겠습니다. 웹팩에 대한 기본 개념이나 사용법을 모르시는 분은 지난 포스팅를 먼저 읽어보시면 더 따라가기 쉬우실 겁니다. 설정 파일 웹팩을 사용할 때 반드시 설정 파일이 필요하지는 않지만, 대부분의 경우에는 설정 파일을 사용합니다. 왜냐하면 터미널에서 웹팩 커맨
자바스크립트 프레임워크로 React를 사용하든 Vue를 사용하든 Angular를 사용하든 항상 웹팩(Webpack)이라는 녀셕을 만나게 됩니다. 보통 구글링해서 겨우 필요한 설정만 바꾸면서 사용하고 했었는데 이 번에 시간을 내서 웹팩에서 대해 한 번 공부를 해보았습니다. 웹팩(Webpack)은 기본적으로 자바스크립트 모듈 번들러(JavaScript Module Bundler)이며 웹 개발을 도와주는 엄청나게 많은 부가 기능을 가지고 있습니다. 간단한 예제 프로젝트를 통해서 웹팩의 필요성을 느껴보고 기본적인 사용법에 대해서 알아보도록
자바스크립트로 코딩을 하시다가 객체가 의도하신 대로 복제되지 않아서 고생하신 적이 한 번 쯤은 있으실텐데요. 예를 들어, 다음과 같은 객체가 있다고 가정해보겠습니다. 여러분은 위 객체를 어떻게 복제하여 새로운 변수에 복제본을 할당하실 건가요? 원본에 영향이 없도록 안전하게 복제하실 자신이 있으신가요? 이번 포스팅에서는 자바스크립트에서 객체를 복제하는 다양한 방법에 대해서 실습을 통해서 한 번 정리해보도록 할께요. 우선 객체를 복제하다가 쉽게 범할 수 있는 실수에 대해서 살펴보고, 얇은 복제와 깊은 복제에 대한 개념을 잡아보겠습니다.
웹 개발을 하다 보면 한글이나 공백이 들어간 URL이 깨지거나, 쿼리 스트링에 특수 문자가 포함되어 의도치 않은 동작을 하는 경우를 종종 마주치게 되는데요. 이런 문제의 원인은 대부분 URL 인코딩과 관련이 있습니다. 이번 포스팅에서는 URL 인코딩이 무엇이고 왜 필요한지부터 짚어보겠습니다. 어떤 문자는 그대로 써도 되고 어떤 문자는 변환해야 하는지, 그리고 자바스크립트의 encodeURI와 encodeURIComponent 함수가 어떻게 다른지도 함께 살펴보겠습니다. URL 인코딩이 왜 필요할까요? URL은 인터넷에서 자원의 위치
ES6(ES2105) 이상의 최신 자바스크립트 문법으로 작성된 코드가 노드JS(NodeJS)에서 실행이 안 되는 경우가 종종있습니다. 이럴 경우 어쩔 수 없이 예전 자바스크립트 문법으로 코드를 재작성하기도 하는데요. 이번 포스팅에서는 자바스크립트 Transpiler인 Babel을 이용하여 이 문제를 해결해보겠습니다. NodeJS에서 ES6 코드 실행 오류 먼저 간단한 예제 프로젝트를 하나를 만들겠습니다. babel-test라는 디렉터리에 NPM 패키지를 생성합니다. 이제 다음과 같이 매우 간단한 자바스크립트 코드를 작성해보겠습니다.
자바스크립트로 개발하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, import는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. 예를 들어, 위 두 코드는 Expres
자바스크립트로 개발하다보면 require나 import 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, import는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. 예를 들어, 위 두 코드는 Expres
백엔드 개발을 하든 프론트엔드 개발을 하든 자바스크립트 프로젝트에서 npm(Node Package Manager)을 사용하는 것은 거의 필수적인데요. 이번 포스팅에서는 실무에서 자바스크립트 프로젝트를 하면서 자주 사용하게 되는 npm 커맨드들을 정리해보았습니다. 프로젝트 생성 npm init 커맨드를 사용하면 현재 디렉터리에 npm 기반으로 프로젝트를 생성할 수 있습니다. 커맨드를 실행하면 패키지 이름, 버전, 설명 등등을 입력하게 됩니다. 프로젝트를 생성할 때 이러한 정보들을 일일이 입력하는 게 귀찮게 느껴질 수 있습니다. 이 때
자바스크립트로 Base64 인코딩을 다뤄야 할 일이 생기면 가장 먼저 마주치게 되는 함수가 btoa()와 atob()인데요. 이름이 워낙 짧고 비대칭적이라 어느 쪽이 인코딩이고 어느 쪽이 디코딩인지 헷갈리기 십상입니다. 이번 포스팅에서는 두 함수가 무엇이고 어디에 자주 쓰이는지부터 짚어보겠습니다. 그리고 한글이 들어갈 때의 함정과 현대적인 대안도 함께 살펴보겠습니다. btoa와 atob는 무엇일까요? btoa()와 atob()는 자바스크립트에 내장된 Base64 인코딩과 디코딩 함수입니다. 이름의 의미를 풀어서 외워두면 헷갈리지 않
웹 페이지나 데이터베이스에서 멀쩡하던 한글이 다른 사람에게서는 검색이 안 된다거나, macOS에서 만든 파일을 윈도우에 올렸더니 같은 이름인데도 다른 파일로 인식되는 경험이 있으실 텐데요. 이런 문제 대부분의 뿌리에는 유니코드(Unicode)와 정규화(normalization)라는 개념이 자리잡고 있습니다. 이번 포스팅에서는 UTF-8과 자주 헷갈리는 유니코드의 정체부터 짚어보겠습니다. 한글이 유니코드에서 어떻게 표현되는지, 같은 글자가 왜 두 가지 방식으로 저장될 수 있는지도 함께 살펴보겠습니다. 유니코드는 인코딩이 아닙니다 유니
컴퓨터로 텍스트를 다루다 보면 "ASCII 코드"라는 용어를 종종 마주치게 됩니다. URL 인코딩을 설명할 때나 한글이 깨지는 문제를 디버깅할 때마다 ASCII가 빠지지 않고 등장하는데요. 이번 포스팅에서는 ASCII가 무엇이고 왜 만들어졌는지부터 짚어보겠습니다. 문자표가 어떻게 구성되어 있는지, 오늘날 UTF-8과는 어떤 관계를 가지는지도 함께 살펴보겠습니다. ASCII란? ASCII는 American Standard Code for Information Interchange의 약자로, 영문자와 숫자, 그리고 일부 특수 문자를 0
ES2015는 자바스크립트의 근간이 되는 함수에도 여러 가지 변화를 가져왔습니다. 이번 포스팅에서는 그 중 기본 매개변수(Default Parameters)에 대해서 알아보도록 하겠습니다. 매개변수를 무시한 함수 호출 다음과 같이 사용자의 아이디의 배열을 매개변수를 받아서 사용자의 상세 정보를 돌려주는 함수가 있다고 가정해봅시다. 아래와 같이 정상적인 배열을 넘기면 함수는 예상하는 것처럼 잘 돌아갑니다. 하지만 다음과 같이 인자 없이도 위 함수를 호출하면 어떻게 될까요? 문법이 엄격한 다른 언어라면 분명히 함수 호출이 불가능했을텐데