Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. Font Awesome 5가 출시된지 시간이 꽤 흘렀음에도 불구하고, 아직까지도 Font Awesome 4가 많이 사옹되고 있습니다. 여러 가지 이유가 있겠지만 저는 개인적으로 Font Awesome가 일부 아이콘들을 유료화하는 과정에서 다소 복잡해진 부분이 없지 않은 것 같습니다. 하지만 Font Awesome에서 이전 버전에 대한 공식 지원을 중단했기 때문에 최소한 프로젝트에서는 가급적 최신 버전을 쓰는 것이 권장됩니다. 이번 포
올인원(All-in-one) 테스팅 프레임워크 Jest를 사용하면 다른 라이브러리 설치 없이 바로 소위 mocking 기능을 쓸 수 있는데요. 그런데 여기서 mocking을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 “모킹”으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법을 말하
리액트 앱을 개발하다보면 모든 컴포넌트에 어떤 값을 props으로 넘기고 싶은 데이터가 필요할 때가 있습니다. 다시 말해, 어떤 컴포넌트 트리 내에서 최상위 컴포넌트 부터 최말단 컴포넌트에 걸쳐 전역(global)으로 관리해야 할 데이터가 필요한 상황이 되겠네요. 이번 포스팅에서는 React Context를 활용하여 리액트 앱에서 전역 데이터를 관리하는 방법에 대해서 알아보도록 하겠습니다. React Context 없이 개발하기 먼저 React Context 없이 props만을 이용해서 어떻게 전역 데이터를 여러 컴포넌트에 걸쳐서
이번 포스팅에서는 Apollo Server를 이용하여 매우 간단하게 GraphQL 서버를 개발해보도록 하겠습니다. 기존에 GraphQL 서버를 한 번도 개발해보신 적인 없으신 분들께 도움이 되었으면 합니다. 프로젝트 생성 원하는 디렉터리(ex. my-server)에 index.js 파일을 생성합니다. 그리고 NPN 초기화 명령어를 실행하면 package.json 파일이 생성됩니다. 패키지 설치 Apollo Server를 사용하기 위해서 패키지 두개를 설치합니다. 참고로 apollo-server는 Apollo에서 제공하는 패키지이며,
테스트를 작성하다보면 모든 테스트 함수에서 공통적으로 필요한 공통 로직이 필요할 때가 있습니다. 이번 포스팅에서는 Jest를 이용해서 이렇게 테스트 전이나 후에 항상 실행되야 하는 코드를 작성하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드 데이터베이스에 접근하는 코드에 대한 테스트를 작성한다는 가정 하에, 다음과 같이 간단한 예제 코드를 작성해보겠습니다. 임의의 데이터베이스 역할을 하는 모듈로서 사용자 데이터를 저장하기 위한 users 배열을 가지고 있습니다. data 모듈에 저장되어 있는 users 배열에 사용자 데이터를 조
지난 포스팅에서 Jest로 기본적인 테스트 코드 작성하는 방법에 대해서 알아보았습니다. 자바스크립트 언어 특상 상 실제 프로젝트에서는 비동기(Asynchronous)로 돌아가는 코드를 테스트해야 할 일이 많은데요. Jest Runner가 비동기 코드에 대한 테스트라는 사실을 인지할 수 있도록 테스트를 작성해주지 않으면 예상치 못했던 테스트 결과에 당황할 수가 있습니다. 이번 포스팅에서는 이러한 비동기 코드에 대한 테스트를 작성할 때 흔히 하는 실수들과 적절한 대응 방법에 대해서 알아보겠습니다. 콜백 함수 테스트 먼저 콜백 함수를 이
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 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다. 내장 Web UI 많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해주는 FakerQL의 경우 브라우저에서 열어보면 Playground가 나옵니다. 좌측 패널에 다음과 같이 쿼리를 입력하고 중간에 있는 실행 버튼을 누릅니다. 그러면 우측 패널에
웹팩은 자바스크립트 개발자들이 좀 더 쾌적한 개발 경험을 할 수 있도록 여러 가지 개발 편의 기능을 제공합니다. 이번 포스팅에서는 웹팩을 사용하면서 개발 편의성을 개선시킬 수 방법에 대해서 알아보겠습니다. 실습 프로젝트 먼저 실습 프로젝트를 만들겠습니다. 새로운 디렉터리를 만들고 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