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

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

근데, 넘 쉬워보이는 한빛미디어 혼공스(혼자 공부하는 일에 능숙한 사람이라는 신조어! 맞다, 나도 혼공스다!)를 위한 "혼자 공부하는 자바스크립트"라는 책을 접하고는 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를 좀 더 공부해 봐야겠다. 

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

( 한빛미디어 혼자공부하는 자바스크립트 )