모던 자바스크립트 Deep Dive 3장 자바스크립트 개발 환경과 실행 방법

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

3장 자바스크립트 개발 환경과 실행 방법

3.1 자바스크립트 실행 환경

모든 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작한다. 그런데 브라우저와 Node.js는 용도가 다르다. 브라우저는 화면에 렌더링 하는 것이 주된 목적이지만, Node.js는 브라우저 외부에서 실행환경을 제공하는 것이 주된 목적이다. 따라서 같은 자바스크립트 기반이라도 ECMAScript 이외에 추가 기능은 호환되지 않는다. 브라우저는 클라이언트 사이드 Web API를 지원하고, Node.js는 Node.js 고유의 API를 지원한다.

※ API란?

프로그램들이 서로 상호작용하는 것을 도와주는 매개체로써 예시로 날씨 API가 있으면 이를 통해 실시간 날씨를 알려주는 기능을 구현할 수 있고, 지도 관련 API가 있으면 지도나 길 찾기 등의 기능을 구현할 수 있겠다.

※ Cheerio란?

 : Node.js에서 HTML을 파싱(분석)하여 스크래핑 하기 위한 라이브러리다. 웹 사이트에서 필요한 정보를 가공 추출하는 것을 웹 크롤링이라고 하는데 Web API가 없는 Node.js는 이런 라이브러리를 통해서 가공하기도 한다.

3.2.1 개발자도구

크롬 브라우저가 기본 제공하는 개발자도구는 웹 애플리케이션 개발에 필수적인 강력한 도구다.

자주 사용하는 도구의 기능은 다음과 같다.

Elements	DOM과 CSS를 편집해서 렌더링 된 뷰(웹 페이지)를 확인해 볼 수 있다. 렌더링이 의도대로 되지 않았을 때 여러 속성을 바꿔보며 힌트를 얻을 수 있다. 단, 편집 내용은 저장되지 않는다.
Console	웹 페이지의 에러를 확인하거나 소스 코드를 작성해서 console.log 등의 메서드로 실행 결과를 바로 확인해볼 수 있다.
Sources	자바스크립트 코드를 디버깅 해볼 수 있다.
Network	로딩된 웹 페이지의 네트워크 요청 정보와 성능을 확인할 수 있다.
Application	웹 스토리지, 세션, 쿠키 정보를 확인하고 관리할 수 있다.

※ DOM이란?
 : HTML 문서를 브라우저가 이해할 수 있도록 만든 자료구조 형태이다. HTML 문서의 계층적(Tree) 구조와 정보를 표현한다. 웹 브라우저에서 문서의 요소를 제어하기 위해 사용한다.

※ 웹 스토리지란?

 : 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술이다. 로컬 스토리지와 세션 스토리지가 있다.

※ 로컬 스토리지란?

 : 컴퓨터의 브라우저에 정보를 저장하는 방식으로 특정 웹 사이트를 새 탭이나 새 창으로 띄우거나 브라우저를 종료한 후 다시 실행시켜도 데이터를 유지하고, 세션과 공유한다. 직접 캐시 삭제 및 로컬 스토리지 초기화를 하지 않는 한 데이터는 영구적으로 보관되나 동일 컴퓨터의 해당 브라우저 외에서는 사용이 불가하다.

※ 세션 스토리지란?

 : 웹 페이지의 세션이 끝나면 (브라우저의 종료를 의미) 데이터가 지워진다. 각각의 탭과 창 마다 데이터가 분리되어 저장된다.

※ 세션이란?

 : 사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지, 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고, 그 상태를 일정하게 유지하는 기술이다.

※ 쿠키란?

 : http의 일종으로 웹사이트 방문 시 그 사이트가 사용하고 있는 서버에서 사용자의 클라이언트에 저장하는 기록 데이터 파일이다.

※ 세션과 쿠키의 차이는?
 : 세션은 서버에 저장되어 보안상 더 안전하고, 브라우저 종료시 삭제되나 쿠키는 브라우저에 저장되어 보안상 취약하고, 브라우저가 종료되어도 일정기간 이후 삭제된다. 하지만 세션은 서버에 저장되어 서버자원(시간과 메모리)을 사용하기 때문에 사용자가 많은 경우 자원소모가 상당하다. 따라서 쿠키와 세션을 적절히 병행사용하여 서버자원의 낭비를 줄이면 웹 사이트의 속도를 높일 수 있다.

3.2.2 콘솔

개발자도구의 Console 패널은 자바스크립트와 관련한 매우 유용한 도구로 console.log(...)와 같이 소괄호 안의 코드를 평가해서 그 결과를 콘솔에 출력하는 함수이다. REPL(Read Eval Print Loop : 입력 수행 출력 반복) 환경으로 사용할 수도 있다. 

3.2.4 디버깅

개발자 도구의 Source 탭에서 디버깅브레이크 포인트를 잡거나 코드 입력 시 상단줄에 debugger를 함께 입력하면 디버깅 모드로 진입한다. 디버깅은 먼저 에러 메시지를 확인하고 원인을 찾아 제거하는 것으로 브레이크 포인트를 설정해 원하는 인트부터 확인할 수도 있고, 발생한 오류에 대해서 콘솔의 오류메시지를 참고하여 확인 가능하니 유용하게 사용할 수 있다.

3.3.1 Node.js와 npm 소개

Node.js는 자바스크립트 런타임 환경이다. Node.js 웹사이트에 접속하면 LTS버전과 Current 버전 중 선택해서 다운로드할 수 있는데, LTS가 안정화된 버전이고 Current는 베타버전처럼 특정 기능 등을 테스트하는 상황의 버전일 수 있어서 실제 개발환경이라면 LTS 버전을 설치해야 한다. 이때 Node.js를 위한 패키지 관리 프로그램인 npm도 같이 설치된다.

npm(node package manager)이라는게 있는 데 사용할 수 있는 모듈들을 패키지화해서 모아둔 사이트. 혹은 저장소의 개념이다. 패키지 설치 및 관리를 위한 명령어를 제공한다.

※ NPM(node package manager)이란?

 : 사용할 수 있는 모듈(기능)들을 패키지화 해서 모아둔 사이트. 혹은 저장소의 개념이다. 패키지 설치 및 관리를 위한 CLI(명령어 입력 시스템)를 제공한다.

※ CLI란? 

 : 컴퓨터의 운영체제와 상호 작용하는 명령을 입력할 수 있는 텍스트 기반 인터페이스이다.

 

정리

자바스크립트는 웹 브라우저용과 서버용이 있다. 극단적으로 자바스크립트는 두 종류가 있는 거나 마찬가지로 하시는 분도 보았다. 개발자도구는 그 편한 맛에 한번 빠지면 헤어 나올 수 없을 것이다. 잠시 백엔드를 찍먹 했을 때 자바 디버깅하면서 그 편리함이 더욱 생각났었다.

live server나 code runner 같은 익스텐션은 워낙 유명하고, 혹시 node.js를 위해 자바스크립트를 공부하는 사람들을 위해 npm에 대한 내용이나 Cheerio 같은 서버 사이드 라이브러리도 소개하고 있다.

 

4강부터 문법이 시작된다. 책을 읽을 때 네이버 프론트엔드 개발자이신 정재남 님의 모던 자바스크립트 딥다이브 스터디 영상도 같이 보면서 공부하고 있다. 본인도 코어자바스크립트 저자이면서 딥다이브 스터디를 온라인으로 진행하시고 무료로 영상을 올리셨던데 역시나 영상에서 일반적으로 다 아는 내용들은 '이런 건 다 아시잖아요? 하고 넘어가고 주로 잘 이용하지 않는 문법이나 상황. 자바스크립트 고유의 이상한 설정오류(?)나 최신 문법 같은 데서 반응하셔서 나름 보는 재미가 쏠쏠하다. 스터디 영상 자체도 4강부터 시작하신다.

 

출처 : 나무위키 프로그래밍 언어

참고로 집에 자바스크립트 관련 책만 5권 넘게 있는데 위와 같이 나무위키를 먼저 봤더라면 그렇게 많은 교재와 강의를 사지는 않았을 것 같다. 책을 사전처럼 쓰라는 말이 와닿는데 사전으로 한 권의 책을 가지고 있어야 한다면 당연 이 책을 추천한다. 자바스크립트에 대한 깊은 공부가 필요할 때 정재남 님의 코어 자바스크립트와 이응모 님의 딥다이브를 추천하는데 입문자가 이 책으로 공부를 시작하는 건 좀 비추다. 특히 독학의 경우 당장 코드 한 줄도 입력 못하는데 어디서부터 어디까지의 범위로 공부해서 어떻게 활용해야 할지 감이 안 잡힐 수 있다. 다른 입문자를 위한 쉽게 쓰여진 책들이나 얇은 책도 많기 때문에 우선 그런 책을 한 권 읽고 따라 쳐보고, 나중에 사전처럼 두고두고 볼 용도로 딥다이브 한 권 사놓으면 된다.