자바스크립트는 모든 곳에 존재한다(JavaScript is Everywhere) – 한빛미디어

요약

자바스크립트라는 하나의 언어로 프론트엔드와 백엔드를 아우르며 웹 애프리케이션과 아이폰 및 안드로이드 스마트폰 앱까지 만들 수 있다는 것을 직접 보여주는 책이다. (사용하는 기술: Node.js, MongoDB, Mongoose, Express.js, React, React Native, Electron, GraphQL, Apollo Server, CSS-in-JS, Expo 등 다수)

이 책은 Notedly라는 노트앱을 사용자가 직접 개발할 수 있도록 안내한다. 독자는 Notedly를 위한 API 와 사용자 인터페이스(User Interface, UI)를 직접 개발한다. 그리고 최종적으로는 Notedly의 웹 애플리케이션, 클라이언트 앱 그리고 아이폰(iPhone)과 안드로이드(Android) 앱을 만든다.

만약 자바스크립트(JavaScript)로 개발한다는 것이 무엇인지 최신 근황을 빠르게 살펴보고자 한다면, <자바스크립트는 모든 곳에 존재한다 JavaScript Everywhere>를 읽는 것을 추천한다.

책 구성

이 책은 개발환경을 다루는 1장, API 서버를 개발하는 2~10장, 웹 애플리케이션을 개발하는 11~17장, Client 프로그램을 개발하는 18~20장, 스마트폰 앱을 개발하는 21~25장으로 구성된다. 간략히 다시 정리하면 아래와 같다.

[1장] (환경설정) 자바스크립트 개발환경 설정
[2-10장] (API 개발) Node, Express.js, MongoDB, Apollo Server를 통한 API 개발
[11-17장] (웹 앱 개발) React, Apollo Clinet, CSS-in-JS를 통한 웹 애플리케이션 개발
[18-20장] (Client 프로그램 개발) Electron 애플리케이션 개발
[21-25장] (스마트폰 앱 개발) React Native, Expo를 통한 iOS, 안드로이드 모바일 앱 개발

책을 추천하는 이유

자바스크립트를 활용한 다양한 기술을 직접 개발을 하며 배울 수 있다. 요즘 대세는 하면서 배우는 거, 즉 learning by doing 아닌가?

최신 기술의 핵심 개념을 빠르게 습득하기 좋다. 설명이 간결하고 각 챕터 페이지 수가 통상 10~20쪽 밖에 되지 않기 때문이다.

단순히 기술을 사용하는 방법이 아니라 왜 필요한지를 설명하여 실무적인 감각을 기를 수 있다. (예: 페이지네이션에 대한 개념과 구현 방법 두 가지 – offset pagination, cursor-based pagination – 관련 외부 블로그 포스트)

현재 우리의 notes 및 users 쿼리는 데이터베이스에 있는 전체 노트 및 사용자 목록을 반환한다. 이것은 로컬 개발에서는 잘 동작하지만, 애플리케이션이 커지면 수백 또는 수천 개의 노트를 반환하는 고비용의 쿼리가 발생할 수 있으며 그로 인해 데이터베이스, 서버, 네트워크 속도가 느려지므로 지속성이 떨어진다. 대신 이러한 쿼리를 페이지네이션(pagination)하여 정해진 수의 결과만 반환하게 할 수 있다.
– 127쪽, 9장 디테일, <자바스크립트는 모든 곳에 존재한다>

단점 아닌 단점

30개가 넘는 다양한 기술을 활용하다 보니 각 기술에 대해 상세히 설명하지 않는다. 그러나 그 덕분에 여러 가지 기술을 빠르게 훑을 수 있다.

가끔 사용하는 기술의 소개가 지나치게 간략하여 책을 읽는 것을 중단하고 구글링을 해야 하는 경우가 종종 있었다.

책 초반부(2장 ~ 10장 까지)에 사소한 오타가 있었다. 한빛미디어에서 정오표(Errata)를 깔끔하게 제공했으면 한다.

이 책에서 다루는 기술용어

용어	설명
Node.js	JavaScript로 서버 프로그램을 작성하게 해주는 백엔드 기술 “Node.js는 Chrome의 V8엔진을 이용하여 브라우저에서 JavaScript를 해석하듯이 서버에서 JavaScript를 동작할 수 있도록 하는 환경(플랫폼)” – 출처: (Node.js) Node.js란? written by Suyeon Bak on Medium.com
Express	Node.js 로 개발한 웹 프레임워크. 파이썬 개발자라면 Flask, django를 생각하면 되겠다.
GraphQL	REST API의 overfetch, underfetch와 endpoint 지옥을 극복하고자 페이스북(Facebook)에서 API를 더욱 빠르고 유연하며 개발자 친화적으로 만들기 위해 설계한 런타임
MongoDB	애플리케이션 데이터를 안전하게 저장하고 검색할 수 있도록 하는 Document 기반 NoSQL
CORS	1. Cross-Origin Resource Sharing은 다른 도메인에 리소스를 요청하기 위한 방법 (상세) 2. Express.js 에서 CORS를 활용하기 위해 사용하는 미들웨어 (링크)
React	리액트(React)는 페이스북(Facebook)에서 컴포넌트 기반 UI 프레임워크. 공식 사이트에는 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 소개
React Native	네이티브 크로스 모바일 플랫폼 앱을 랜더링하는 툴
CSS	웹 기술 3대장(HTML, CSS, JavaScript) 중 Decoration을 담당하는 기술
CSS-in-JS	스타일드 컴포넌트(Styled Component) 기술로 에어비엔비(AirBnb), 레딧(Reddit), 패트리온, 레고, BBC 뉴스, 아틀라시안(Atlassian)과 같은 회사에서 널리쓰임 “자바스크립트 코드에서 CSS를 작성하는 방법으로 2014년 페이스북(Facebook) 개발자인 Christopher Chedeau (aka. Vjeux)의 발표에서 이야기한 방법” – 출처: 모던 CSS : 1. CSS-in-JS written by ysok on Medium.com
Apollo	“Apollo 서버는 GraphQL API를 제공하는 서버를 개발할 수 있게 도와주는 패키지로서 기존에 Node.js에서 사용하는 Express와 역할이 비슷” – 출처: Apollo Server로 GraphQL API 서버 개발하기 (1) written by gwak2837 on LoveShinak.log
JWT	JSON Web Token 의 약자로 RFC 7519를 구현함. 세션 대용으로 많이 사용되고 있는 기술.
Git	프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템(Distributed Version Control System, DVCS)
Electron	크로스 플랫폼 데스크톱 애플리케이션을 구축하기 위한 오픈소스 프레임워크로 Node.js와 크로미움(Chromium)을 활용하여 작동 (참고) 일렉트론(Electron)은 원래 깃허브(GitHub)팀에서 아톰 텍스트 편집기를 위해 개발했지만, 이후로 슬랙(Slack), VS Code, 디스코드(Discord), 워드프레스 데스크톱(WordPress Desktop) 등의 크고 작은 다양한 애플리케이션을 위한 플랫폼으로 사용됨
Expo	리액트 네이티브(React Native)를 사용하여 iOS나 Android 프로젝트의 Bootstrap 및 개발을 돕는 툴체인. 간단히 말해, 리액트 네이티브 개발을 단순화하는 도구 및 서비스의 모음. An open-source platform for making universal native apps with React.
ESLint	자바스크립트 정적 분석 도구로 사용하지 않는 변수, 무한 루프, 도달할 수 없는 코드와 같은 코드 품질 등을 수행하는 도구
Prettier	자바스크립트, HTML, CSS, GraphQL, Markdown을 비롯한 다양한 언어를 지원하는 Code Formatting 도구
ODM	Object Document Mapper
mongoose	스키마 기반 모델링 ODM 솔루션으로 node.js 앱에서 MongoDB를 쉽게 사용할 수 있도록 데이터베이스 쿼리 및 데이터 유효성 검사 도구 제공 자바스크립트 객체를 DB의 Document로 Mapping 하는 모델 정의 후, 해당 모델 구조에 맞는 데이터를 저장하고 처리할 수 있음
Hashing(해싱)	(암호학 관점에서의 해싱 설명) 텍스트 문자열을 임의의 고정길이 문자열로 바꿔서 텍스트 문자열을 가려주는 행위
Salting(솔팅)	(암호학 관점에서의 솔팅 설명) 해싱을 거친 비밀번호와 함께 사용될 임의의 데이터 문자열을 생성하는 작업. 이렇게 하면 두 개의 사용자 비밀번호가 동일하더라도 해싱과 솔팅을 거친 비밀번호는 유일성을 갖게 됨.
bcrypt	블로우피시(blowfish) 암호와 알고리즘을 기반으로 하는 유명한 해싱 함수로 다양한 웹 프레임워크에서 사용되고 있음
Helmet middleware	익스프레스(Express.js)에서 사용하는 소규모 보안 지향 미들웨어 함수 집합으로 애플리케이션의 HTTP 헤더 보안을 강화함

기타잡설

CRUD

1980년대 초 영국의 테크니컬 라이터인 제임스 마틴(James Martin)이 데이터를 쓰기(create), 읽기(read), 업데이트(update), 삭제(delete)하는 애플리케이션과 관련된 용어로 사용하면서 처음 대중화 됨 (참고 : Wikipedia, MelroseLABS)

테스트에 대한 저자의 사과

테스트는 소프트웨어 개발 단계 중 점점 더 중요성이 강조되고 있다. 이는 SW 기반의 전기차, 중요한 판단을 하는 AI 알고리즘 등의 안전성과 신뢰성 그리고 무엇보다 사용자 요구사항 달성여부를 알려주는 척도이기 때문이다. 하지만 <자바스크립트는 모든 곳에 존재한다>에서 저자는 테스트를 다루지 않았고, 아래와 같이 독자들에게 미안함을 표현한다.

솔직히 인정한다. 이 책에 테스트에 대한 분량을 할당하지 않은 것에 죄책감을 느낀다. 코드 테스트는 변경 사항을 편안하게 적용하고 다른 개발자와의 협업을 향상시키기 위한 중요한 요소이다.
– 131쪽, 9장 디테일, <자바스크립트는 모든 곳에 존재한다>

페브리즈(Febreze)

지금은 고유 명사처럼 받아들여지는 방향제인 페브리즈(Febreze)의 초기 광고는 담배 연기와 같은 특정 악취를 제거하는 사람들의 모습을 보여주었고, 그 덕택에 매출은 바닥을 찍었다. 그러나 페브리즈를 ‘마감용’ 방향제로 사용하는 광고, 즉 누군가 방을 청소하고 베개를 털고 마지막에 페브리즈를 뿌리는 식으로 광고를 바꾸자 판매가 급증했다.

P&G는 페브리즈 출시 초기에 냄새 제거 기능을 알리는 데 초점을 맞췄다. 이 때문인지 대부분의 소비자는 나쁜 냄새가 날 때만 페브리즈를 사용했다. 그러나 이 기능만으로는 판매에 큰 도움이 되지 못했다. 한국P&G 관계자는 “소비자들은 나쁜 냄새가 발생할 때만 간헐적으로 페브리즈를 사용할 것이라고 생각했는데 실제로는 냄새 제거 외에 상쾌함이 더해졌을 때 페브리즈를 더 자주 사용한다는 사실을 발견했다”고 말했다.
출처: 조선비즈 | 흡연 과학자가 개발한 P&G 페브리즈 (2019.5.18)

옷(Clothing)

‘개발자는 옷을 잘 못 입는다.’는 사실에 가까운 편견이 만연해있는데, 신경을 좀 쓸 필요가 있다. (나부터 실천하자!)

스타일은 인간 문화의 중요한 일부이며, 우리는 모두 이러한 뼈, 치아, 열매, 돌을 가지고 목걸이와 팔찌를 만들었다는 것을 발견했다. 우리의 옷은 신체를 보호하는 기능적 목적을 제공할 뿐만 아니라 우리의 문화, 사회적 지위, 관심사 등에 대한 정보를 다른 사람들에게 전달할 수도 있다.
– 167쪽, 13장 애플리케이션에 스타일 입히기, <자바스크립트는 모든 곳에 존재한다>

요약