자바스크립트로 개발하다보면 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)에 대해서 알아보도록 하겠습니다. 매개변수를 무시한 함수 호출 다음과 같이 사용자의 아이디의 배열을 매개변수를 받아서 사용자의 상세 정보를 돌려주는 함수가 있다고 가정해봅시다. 아래와 같이 정상적인 배열을 넘기면 함수는 예상하는 것처럼 잘 돌아갑니다. 하지만 다음과 같이 인자 없이도 위 함수를 호출하면 어떻게 될까요? 문법이 엄격한 다른 언어라면 분명히 함수 호출이 불가능했을텐데
이번 포스팅에서는 ES2015에서 let과 함께 자바스크립트에 추가된 const 사용법에 대해서 알아보도록 하겠습니다. let 사용법에 대해서는 아래 포스팅들을 참고바라겠습니다. let으로 변수 선언하기 1 let으로 변수 선언하기 2 매직 넘버 아래 코드에서 findUser 함수는 안자로 받은 id 값이 100보다 작은지 여부에 따라서 로직이 분기되어 있습니다. 그리고 id 값이 100보다 큰 경우, 가짜 사용자 객체를 생성 후, name 속성값의 길이가 50보다 큰지 여부에 따라 다시 한 번 로직이 분기되고 있습니다. 예제와 같
이전 포스팅에서 ES2015의 let 키워드에서 대해서 알아보았습니다. 이번 포스팅에서는 for 문에서 let이 어떻게 사용될 수 있는지 살펴보겠습니다. 예제 코드 다음 코드는 사용자 아이디를 받아 가짜 사용자를 담든 후 콜백 함수를 호출하는 비동기 함수입니다. 마치 DB 연동처럼 setTimeout 함수를 이용하여 1초의 지연을 주었습니다. setTimeout() 함수에 대한 좀 더 자세한 내용은 관련 포스팅을 참고바랍니다. 그리고 아래 코드는 사용자 아이디의 배열을 받아 여러 사용자의 정보를 출력해주는 함수입니다. findUse
본 포스팅에서는 ES2015를 통해 자바스크립트에 추가된 let 키워드에 대해서 알아보도록 하겠습니다. 문제의 코드 먼저 다음 예제 코드를 살펴보시죠. findUser 함수는 사용자 아이디가 0보다 크면 성공 메시지를 출력하고 아니면 실패 메시지를 출력합니다. 그리고 if-else 문을 빠져나온 후, 실패 메시지를 다시 한 번 출력하고 있습니다. 자, 그럼 다음과 같이 1을 인자로 이 함수를 호출하면 마지막에 출력하는 실패 메시지는 뭐라고 출력이 될까요? 다음과 같이 오류가 발생하지 않고 undefined가 출력이 됩니다! 첫 개발
많은 자바스크립트 강좌에서 가급적 var 대신에 let이나 const 키워드를 사용하여 변수를 선언하라고 가이드하고 있는데요. 본 포스팅에서는 var의 어떤 문제점 때문에 그런건지 알아보도록 하겠습니다. 아리송한 코드 먼저 다음 코드를 살펴보도록 하겠습니다. 무엇이 출력이 될지 예상이 되시나요? 첫번째 console.log(n)에서 오류가 발생할 것 같기도 하고, 1과 2가 출력될 것 같기도 한데요. 의외로 정답은 다음과 같습니다. 왜 이런 예상치못한 결과가 얻어지는 걸까요? 원인은 var 키워드를 사용할 경우, 변수 Hoistin
배열을 사용하는 이유? 3개의 과일 이름을 변수에 저장하려면 다음과 같이 3개의 변수를 사용할 것이다. 하지만 만약에 저장한 과일 이름이 300개라면? 위와 같이 일일이 하나 하나의 변수에 저장하기 힘들 것이다. 배열을 이용하면 하나의 변수에 여러 가지 값을 저장할 수 있고, 색인(Index)을 통해 이 값에 접근할 수 있다. 새로운 배열 생성 하기 기본적으로 대괄호 기호인 배열 리터럴(literal)을 이용해서 배열을 생성한다. 배열 리터럴 내에서는 공백이나 줄바꿈은 중요하지 않으므로 각 엘리먼트의 길이기 길 경우 가독성을 위해