JS)모던 자바스크립트 Deep Dive 1장~4장/ 1장 프로그래밍, 2장 자바스크립트란?, 3장 자바스크립트개발 환경과 실행 방법, 4장 변수

1장 프로그래밍

1-1. 프로그래밍이란?

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이때 요구되는 것이 문제 해결 능력이다.

문제 해결  방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 하고 이때 필요한 것이 컴퓨팅 사고(Computational thinking)이다. 사람은 실생활에서 경험하는 익숙한 사항에 대해 당연시하는 안이한 인식이 있는 반면 컴퓨터는 사람과 인지 방식이 다르다. 여기에는 논리적, 수학적 사고가 필요하며, 해결 과제를 작은 단위로 분해하고 패턴화 해서 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다.

 

1-2. 프로그래밍 언어

명령을 수행할 주체인 컴퓨터의 언어인 기계어는 비트 단위로 기술되어 있다.

사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 프로그래밍  언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 번역기인 컴파일러 혹은 인터프리터를 이용해 기계어로 번역한다.

프로그래밍 언어란 사람과 컴퓨터(컴파일러 또는 인터프리터) 모두가 이해할 수 있는 약속된 형태의 인공어다.

언어는 구문과 의미의 조합으로 표현된다.

 

1-3. 구문과 의미

문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 프로그래밍 언어에서 제공하는 다양한 문법은 예를 들어 "변수와 값", "키워드", "연산자", "표현식과 문" 등이 있는데, 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합을 변환한 후, 그 흐름을 제어해 요구사항이 실현(문제가 해결) 되게 하는데 의미가 있다.

 

 

2장 자바스크립트란?

2-1. 자바스크립트의 탄생

자바스크립트는  웹페이지의 보조적인 기능을 수행하기 위해 브라 우저에서 동작하는 경랑 프로그래밍언어로

1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 개발되었다.

 

 

2-2. 자바스크립트의 표준화

넷스케이프 커뮤니케이션즈와 마이크로소프트등 회사들이 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가 -> 크로스 브라우징 이슈 -> 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요 -> 1996년 11월 넷스케이프가 ECMA 인터내셔널에 자바스크립트 표준화를 요청 -> 1997년 7월 ECMA-262, 자바스크립트 초판 출시

 

 

 

2-3. 자바스크립트 성장의 역사

1). Ajax

• 비동기
  • 기존방식 - HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 -> 화면 전환 시 서버로부터 새로운 HTML 전송받아 웹페이지 전체가 처음부터 렌더링 됨 -> 필요 없는 부분까지 전송받아 불필요한 데이터 통신이 발생해 성능면에서도 불리하고 화면이 순간적으로 깜빡이는 현상 발생.
  • Ajax 등장 후 - 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링 하는 방식 -> 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능.

 

2). jQuery

• DOM을 쉽게 제어하고 크로스 브라우징 이슈도 어느 정도 해결됨. 
• HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리.
• 거의 모든 웹 브라우저에 대응할 정도로 브라우저 호환성이 있음.

 

3). V8 자바스크립트 엔진

• V8 자바스크립트 엔진의 등장으로 자바스크립트로 웹 애플리케이션을 구축할 수 있게 되고 웹 애플리케이션 프로그래밍 언어로 정착하게 됨.
• 자바스크립트 발전 -> 웹서버 로직이 클라이언트(브라우저)로 이동 -> 웹 애플리케이션 개발에서 프론트엔드 영역이 주목받는 계기가 됨.

 

4). Node.js

• 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경.
• 서버 사이드 애플리케이션 개발에 주로 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공.
• 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋음.

 

덧) 스터디 질문 Q :
*프론트에서 Node.js가 필요한 이유?

====강사님 답 A====
프레임워크 또는 라이브러리와 오픈소스를 사용하기 위해.
사용하면 코드의 재사용성이 높아져서 생산성이 높아진다.
결국 회사의 비용이 절감된다.

 

 

5). SPA 프레임워크

• 복잡해진 개발과정을 수행하기 위해 필요에 따라 많은 패턴과 라이브러리가 출현 -> 개발에 도움이 되었지만 변경에 유연하고 확장하기 쉬운 애플리케이션 아키텍처의 구축이 어려워 프레임워크가 등장하게 됨.
• CBD(Coomponent based development ) 방법론을 기반으로 하는 SPA(Single Page Application)가 대중화되며 Anguular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리가 있음.

2-4. 자바스크립트와 ECMAScript

ECMAScript( JavaScript의 기반이 되는 스크립트 언어 명세서/사양서 )는 자바스크립트의 표준 사양인 ECMA-262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정함. 즉,  ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공

자바스크립트는 일반적으로 ECMAScript를 아우르는 개념.

ECMAScript 사양서.

 

 

2-5. 자바스크립트의 특징

웹 브라우저에서 동작하는 유일한 프로그래밍 언어.

개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어로 

 

2-6. ES6 브라우저 지원 현황

인터넷 익스플로러를 제외한 모던 브라우저의 ES6 지원 비율은 96%~99%로 거의 100%에 육박하지만 인터넷 익스플로러나 구형 브라우저는 ES6를 대부분 지원하지 않음. 따라서 브라우저에서 아직 지원하지 않는 최신기능을 사용하거나 인터넷 익스플로러나 구형 브라우저를 고려해야 하는 상황이라면 바벨과 같은 트랜스파일러를 사용해 ES6 이상의 사양으로 구현한 소스코드를 ES5 이하의 사양으로 다운그레이드할 필요가 있음.

 

 

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

3-1. 자바스크립트 실행 환경

자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있음. 기본적으로 브라우저에서 동작하는 코드는 Node.js 환경에서도 동일하게 동작함.

 

 

3-2. 웹 브라우저

1). 개발자 도구

• 브라우저에 기본 내장되어 있어 따로 설치할 필요가 없음.
• 운영체제에 따른 단축키

 

2). 콘솔

• 에러가 발생할 때 가장 먼저 살펴보는 곳임.
• 구현 단계에서 console.log 메서드를 사용해 코드의 실행 결과를 확인하면서 개발을 진행하기도 함.  

3). 브라우저에서 자바스크립트 실행

• 브라우저는 HTML 파일을 로드하면 script 태그에 포함된 자바스크립트 코드를 실행함.

 

4). 디버깅

• Sources 패널에서 디버깅을 통해 오류를 고칠 수 있음.

추가자료 : 생활코딩 -  https://www.youtube.com/watch?v=2f1aMNdhAEg&t=242s

 

 

3-3. Node.js

1). Node.js와 npm 소개

• Node.js는 크롭 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경임. 간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js.
• npm 은 자바스크립트 패키지 매니저 로써 Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 ClI를 제공.

2). Node.js 설치

• http://nodejs.org 에서 설치 가능.

3). Node.js REPL

• REPL을 사용해 간단한 자바스크립트 코드를 실행해 결과를 확인 가능.
• 터미널에서 명령어 입력하면 자바스크립트 파일 실행
  • node index.js 

 

 

3-4. 비주얼 스튜디오 코드

1). 비주얼 스튜디오 코드 설치

• https://code.visualstudio.com

2). 내장 터미널

• 단축키 Ctrl +  `  
•  

 

3). Code Runner 확장 플러그인

 

4). Live Server 확장 플러그인

 

 

4장 변수

4-1. 변수란 무엇인가? 왜 필요한가?

• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
• 변수 이름을 통해 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다.

 

4-2. 식별자

• 변수의 이름을 식별자라도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 메모리 주소에 붙인 이름이다. 
• 변수, 함수, 클래스 등 메모리상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자이다. 

 

4-3. 변수 선언

• 변수 선언은 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
•  키워드 var, let- 선언과 동시에 초기화된다.
  • ES6 이전 - var
  • ES6 이후 - let, const  
• 예) var ex; // 변수 선언문 

 

4-4. 변수 선언의 실행 시점과 변수 호이스팅

자바스크립트 엔젠은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다. 

위 코드처럼 study가 먼저 선언되기 전에 console.log로 실행했을때 참조에러(ReferenceError)가 아니라 undefined가 나왔다. 이는 변수 선언(선언 단계와 초기화 단계)이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 증거이고 이처럼 변수 선언문이 코드의 선두로 끌어 올려지 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

 

 

4-5. 값의 할당

• 1️⃣var score; (런타임 이전)    변수 선언 시 메모리에 undefined라는 값이 저장되고
• 2️⃣score = 80; (런타임)  변수에 값을 할당 할때 메모리에 새로운 공간에 80 이라는 값이 저장된다. 
• 변수에 값을 할당(대입,저장)할 때 할당 연산자 =를 사용한다.
• 변수 선언  < ==  값의 할당       
• var study  =  "good job"; 
  • 우측의 "good job" 이라는 값을 좌측의  study 라는 변수에 할당 한다.
  • 아래 그림처럼 변수에 값을 할당할때는 undefined가 저장되어 있던 메모리 공간에 "good job" 이라는 값이 저장되는 것이 아니라 새로운 메모리 공간에 값이 저장된다.

 

4-6. 값의 재할당

재할당은 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다.

재할당도 할당처럼 기존의 메모리 공간에 값이 저장되는 것이 아니라 새로운 메모리 공간에 값이 저장된다. 

더 이상 필요하지 않는 불필요한 값(첫번째 undefined, 두번째 good job)은 가비지 콜렉터에 의해 메모리에서 자동 해제는데 언제 해제될지는 예측할 수 없다.

재할당 가능 - 변수 : var, let

재할당 불가 - 상수: const

 

4-7. 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. (숫자 X)
• 예약어는 식별자로 사용할 수 없다.
• 일반적인 네이밍 규칙 
  • 카멜 케이스 - 변수, 함수
  • 파스칼 케이스 - 생성자 함수, 클래스
  • 케밥 케이스 - HTML
  • 변수 - 명사
  • 함수 - 동사 
  • 불리언-  is, has 

1. 카멜 케이스 표기법 (camelCase)

• 첫 문자는 소문자로 표기하고 그 이후에 연결되는 문자들의 첫자는 대문자로 표기. 

2. 케밥 케이스 표기법 (kebab-case)

• 모든 문자의 첫 자는 소문자로 표기하고 문자들 사이는 -(하이픈)로 연결.

3. 스네이크 케이스 표기법 (snake_case)

• 모든 문자의 첫 자는 소문자로 표기하고 문자들 사이는 _(언더바)로 연결.

4. 파스칼 케이스 표기법 (PascalCase)

• 모든 문자의 첫 자를 대문자로 표기.

5. 헝가리안 표기법(Hungarian Notation)

• 접두어에 자료형을 알아볼수 있게끔 표기하는 것이다. 요새는 잘 사용하지 않는거 같다.
• 예) 문자열은 변수명 앞에 str을 붙인다.
  • String strName;

 

 

덧) 스터디에서 나온 이런저런 내용 240710수-
*애플리케이션은 기본적으로 서버에 저장되어 있지만 리소스들은 사용자의 컴터에 다운되서 브라우저에서 실행된다.

*인터프리터(변수할당문)- 런타임에 읽고 해석한다.
런타임 이전 타임(변수 선언문) => 코드를 실행시키기 위한 전처리.
인터프리터의 단점 - 컴파일러로 실행된 파일보다 느리다.
선언문들 런타임 이전 실행됨.

*var의 대안으로 나온 let, let은 호이스팅이 발생하지 않는 것 처럼 동작.

 

 

 

참고

도서 - 모던 자바스크립트 Deep Dive -이웅모

이웅모 강사님 홈피  -  https://poiemaweb.com/js-prototype

이웅모 강사님 유튜브  -  https://www.youtube.com/watch?v=0AjTZG6bGq8

* spa 프레임워크 

블로그 https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/

* 자바스크립트와 ECMAScript

블로그  https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html

 

✅ 덧, 부분은 스터디 내용을 기억에 의존해서 쓴 글이라 틀린 부분이 있다면 댓글 부탁드립니다.- 뽀짝코딩 주인장-