혼공스 혼자 공부하는 자바스크립트

혼자 공부하는 자바스크립트 - 1:1 과외하듯 배우는 프로그래밍 자습서 ㅣ 혼자 공부하는 시리즈
윤인성 지음 / 한빛미디어 / 2021년 1월

평상시 자바스크립트의 다재다능함에 놀라며 언젠가는 꼭 배워야 겠다고 벼르고 있었지만, 생각보다 진도가 나가질 않았다.

근데, 넘 쉬워보이는 한빛미디어 혼공스(혼자 공부하는 일에 능숙한 사람이라는 신조어! 맞다, 나도 혼공스다!)를 위한 "혼자 공부하는 자바스크립트"라는 책을 접하고는 2일만에 후다닥~ 독파 완료해 버렸다!

알라딘 구매 링크: www.aladin.co.kr/shop/wproduct.aspx?ItemId=258583816


1:1 과외하듯이 배우는 친절한 프로그래밍 자습서라는 말이 딱 맞는 책이다. 정말 "순삭했다"는 말이 맞을 정도로 책 내용이 완전 쉽게 설명되어 있다.

특히, 중간에 직접 해 볼 수 있는 174개의 손코딩 예제들이 있어서 작은 성취감을 즐기면서 완독할 수 있어서 기분이 한마디로 째졌다!

다른 분들께도 일단 "시작" 하고 싶다는 동기부여를 위해서 자바스크립트를 왜 배워야 하는지에 대해서 간단히 설명드리면....

자바스크립트의 역사
웹브라우저에서 사용하는 프로그래밍 언어이다.
넷스케이프의 브렌던 아이크가 '모카'라는 이름으로 만들었다가 '라이브스크립트'로 변경되었다.
썬마이크로시스템즈가 '자바스크립트'라는 이름으로 변경했다.
'자바'와 '자바스크립트'는 인도와 인도네시아, 코끼리와 바다코끼리처럼 완전히 다른 프로그래밍 언어이니, 헷갈림 금지!
자바스크립트로 할 수 있는 것들은 정말 무궁무진하다!
웹 클라이언트 애플리케이션 개발
웹 서버 애플리케이션 개발
모바일 애플리케이션 개발 (내가 제일 관심있는 분야 ★ 표시 땅땅!)
데스트톱 애플리케이션 개발
데이터베이스 관리
자바스크립트의 종류
자바스크립트가 많은 곳에서 사용되자 유럽컴퓨터제조협회(ECMA)는 자바스트립트를 ECMAScript라는 이름으로 표준화 했다.
인터넷 익스플로러를 제외한 최신 브라우저(마이크로소프트 엣지, 구글 크롬, 모질라 파이어폭스, 애플 사파리 등)는 모두 최신 버전의 ECMAScript 기능까지 지원한다.
모바일 애플리케이션의 종류
네이티브 앱(Native App): 아이폰은 오브젝티브-C(Objective_C), 안드로이드폰은 자바(Java) 같이 제조사가 추천하는 프로그래밍 언어로 만들어진 애플리케이션.
모바일 웹 앱(Mobile Web App): 웹사이트 화면을 애플리케이션으로 감싸기만 해서 보여주는 형태. 아이폰 개발자와 안드로이드 개발자를 모두 고용해야 하는 부담을 덜기 위해 활용됨.
하이브리드 앱(Hybrid App): 모바일 웹 앱은 성능도 좋지 않고, 스마트폰이 가진 기능을 제대로 활용할 수 없어서 이를 보완하고자 중간에 스마트폰의 기능과 웹 페이지를 연결할 수 있는 층을 설치해서 웹사이트가 스마트폰의 기능을 활용할 수 있게 만든 형태. 일반적으로 모바일 사이트에서도 똑 같이 보이면서 스마트폰 고유의 모습도 가지고 있는 앱들 (쿠팡, 위메프, 다이닝 코드 등) 네이티브 앱과 하이브리드 앱이 완전하게 구분되는 것은 아님. 카카오톡은 대부분 네이티브 방식으로 개발되었지만, 샵(#) 탭에서는 웹으로 개발된 것을 보여주므로 하이브리드 방식으로 개발되었다고 봐야 함
리액트 네이티브(React Native): 조금 더 발전되어 웹 앱처럼 개발했는데, 네이티브 앱처럼 만들어 주는 엔진 또는 프레임워크가 등장함. 하나의 프로그램을 만들어서 여러 프로그램으로 만들어 주는 리액트 네이티브가 가장 대표적인 형태임. (페이스북, 인스타그램, 핀터레스트 등)


하나 더 동기부여를 해 드리자면!

이 책의 맨 마지막 부분이 내가 정말 알고 싶었던 리액트 라이브러리 맛보기로 구성이 되어 있다는 점!
리액트를 제대로 사용하려면 Node.js라는 백엔드 자바스크립트 플랫폼을 알아야 한다.
이 책에서는 리액트만 사용하는 간단한 예제로 "할 일 목록 애플리케이션"을 구현해 보도록 하고 있다.


또 하나 이 책의 꿀팁은~

책의 마지막 부분에 혼공 용어노트가 있어서 76개의 기본 용어가 깔끔하게 잘 정리 되어있다는 점!
마치 알고 있는 줄 알았는데, 내가 제대로 알고 있지 못했던 부분을 다시 꼼꼼 정리해 보았다.
CDN (Contents Delivery Network): 콘텐츠 전송 네트워크, 전 세계 여러 지역에 전송할 콘텐츠를 창고처럼 준비해두었고, 멀리 떨어져 있는 사용자가 콘텐츠를 요청했을 때 가장 가까운 지역에서 콘텐츠를 빠르게 제공하는 기술
디자인 패턴 (Design Pattern): 효율적으로 프레임워크를 개발할 수 있게 고안한 패턴. 개발하는 과정에서 빈번하게 발생하는 문제들이 발생했을 때 해결책을 재사용할 수 있도록 만든 패턴이다.
DOM (Document Objects Model): 문서 객체를 조합해서 만든 전체적인 형태. 약자로 'DOM'이라고 한다.
Flux Pattern: 디자인 패턴의 일종. Flux 아키텍츠라고도 한다. MobX 라이브러리는 Flux 패턴으로 쉽게 관리할 수 있다.
프레임워크 (framework): 프로그램을 개발할 때 사용하는 거대한 규모의 클래스, 함수, 도구의 집합
JSON (JavaScript Object Notation): 자바스크립트의 배열과 객체를 활용해 자료를 표현하는 방식, 이름과 값이 쌍으로 이루어진 데이터
JSX (JavaScript XML): 리액트를 위해서 개발된 자바스크립트 확장 문법. 자바스크립트 코드 내부에 HTML 태크 형태로 컴포넌트를 만들 수 있으며 JSX 자바스크립트 확장 문법이라고 한다. 단순하게 태그를 만드는 기능 이외에도 태그 내부에 표현식을 삽입해서 출력하는 기능도 제공한다.
library: 프로그램 개발에 쓰이는 하부 프로그램. 리액트 라이브러리는 사용자 인터페이스를 쉽게 구성할 수 있도록 도와주어 대규모 프론트엔드 웹 애플리케이션을 체계적으로 개발할 수 있다.
Obect Oriented Programming: 객체를 정의하고, 객체를 활용해서 프로그램을 만드는 것. C++, C#, 자바, 루비, 코틀린, 스위프트, PHP 등은 모드 클래스 기반의 객체 지향 프로그래밍 언어이다.
프로토타입 객체(prototype object): 객체의 틀. 프로토타입의 객체에 속성과 메소드를 추가하면 모든 객체에서 해당 속성과 메소드를 사용할 수 있다. 기본 자료형의 객체화!
새도윙 (shadowing): 함수 외부에서 선언한 변수를 함수 내부에서도 같은 이름으로 변수를 선언하여 사용할 때, 함수 내부의 변수가 함수 외부의 변수를 가리는 현상. 해당 함수 내부에서 선언된 변수만 인식하기 때문에 변수가 서로 충돌하지 않는다.
utility library: 개발할 때 보조적으로 사용하는 함수를 제공해 주는 라이브러리. underscore, Lodash 등의 다양한 라이브러리가 있다.


이제 자바스크립트의 아주 기초를 떼었으니, 다음 단계로는 리액트와 Node.js를 좀 더 공부해 봐야겠다.

※ 이 독후감은 한빛미디어 베타리더로 선정되어 책을 지원받고 작성한 후기입니다.