JavaScript 공부. 01

출처: https://ko.wikipedia.org/wiki/자바스크립트

기본적인 웹 프로그래밍 언어 중 JS를 공부하려 한다.

요즘 JS는 안 쓰이는 곳이 없을 만큼 중요한 언어라고 생각한다.

Front-end에서는 React, Vue 등에서 활발하게 사용하고 있고,

Back-end에서는 Node.js 등 사용된다.

첫 웹 프로젝트를 했을 때 Back-end를 담당했었는데, JS에 대한 지식 1도 없이 Node.js로 구축을 했다.

그 당시에 정말 많은 삽질, const와 var 중 어떤 것을 써야 하며 혼합형으로 가치 없는 코드를 작성하기 일쑤였다.

대학교 프로젝트니까 급하게 하다 보니 정말 아무 생각이 없었던 것 같다.

최근에 나오는 프레임워크에 기본이 되는 JS를 공부하고, 최종적으로는 RN(리액트 네이티브)를 공부해보려 한다.

그럼 START!!

(다음 내용은 '이웅모-모던 자바스크립트 Deep Dive' 책의 공부한 내용을 토대로 작성되었습니다.)

---

01장. 프로그래밍

이 부분에 관련해서는 간략하게만 읽고 넘어갔다.

대부분 전공을 공부하면서 듣는 내용들이기 때문에 가볍게 읽자.

 

· 프로그래밍 : 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

-> 이러한 프로그래밍에 요구되는 능력은 문제 해결 능력이며,

    이때 필요한 것이 바로 Computational thinking(컴퓨팅 사고)이다.

[사람] -> 프로그래밍 언어 ->

[컴파일러] -> 기계어 ->

[컴퓨터]

사람은 프로그래밍 언어를 통해 컴퓨터가 이해할 수 있는 기계어로 변환시킨다.

이 번역의 작업을 '컴파일러(compiler) 혹은 인터프리터(interpreter)'라고 한다.

 

· 최종적으로, 프로그래밍은 요구사항의 집합을 분석해서

   적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이라고 한다.

 

02장. 자바스크립트란?

이 부분도 간략히 읽고 넘어가는 부분이다.

 

· 자바스크립트는 1996년 3월, 넷스케이프 커뮤니케이션즈의 웹 브라우저인

   넷스케이프 내비게이터 2에 탑재되었고 '모카'로 명명되었다가 그해 9월 '라이브 스크립트'라는 이름으로 바뀌었다.

   그다음 12월 '자바스크립트'라는 이름으로 최종 명명되었다고 한다.

 

· 자바스크립트는 JScript와 자바스크립트 간의 표준화되지 못한 문제 때문에,

   브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 '크로스 브라우징 이슈'가 발생하기 시작했다.

-> 이러한 자바스크립트의 파편화를 방지하고 표준화된 자바스크립트를 만들고자

     1997년 7월, ECMA-262라 불리는 자바스크립트 초판 사양이 완성되었고,

     상표권 문제로 자바스크립트는 최종 'ECMAScript'로 명명되었다.

 

2장에서는 자바스크립트의 성장의 역사로 Ajax, jQuery, V8 자바스크립트 엔진,

Node.js, SPA Framework에 대한 내용들이 나오는데 천천히 읽어보면 좋을 듯하다.

 

참고로 자바스크립트의 특징에 대해서도 나오는데, 여기서 중요한 점은

· 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는

   인터프리터 언어(interpreter language)이며, 명령형, 함수형, 프로토타입 기반

   객체지향 프로그래밍을 지원하는 '멀티 패러다임 프로그래밍 언어'라는 것이다.

   또한, 클래스 기반 객체지향 언어보다 효율적이면서 강력한

   '프로토타입 기반의 객체지향 언어' 정도를 기억하면 좋을 듯하다.

 

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

3장에서는 환경 및 실행에 대한 내용이 나온다.

 

· 첫 번째로 나오는 것이 바로 '개발자 도구'이다.

   크롬 브라우저에서 명령어를 통해 간단히 개발자 도구를 열 수 있다.

   1) Windows 단축키는 F12 or Ctrl+Shift+I

   2) macOS 단축키는 Cmd+option+I

 

· 개발자 도구의 기능을 간단히 살펴보자.

   1) Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링 된 뷰를 확인해 볼 수 있다. 편집한다고 해서 저장되지는 않는다.

   2) Console : 로딩된 웹페이지의 에러 또는 console.log 등의 메서드의 실행이 가능하다.

   3) Sources : 로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.

   4) Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.

   5) Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

·  콘솔은 자바스크립트 코드를 직접 입력해 결과를 확인할 수 있는

    REPL(Read Eval Print Loop, 입력 수행 출력 반복) 환경으로 사용할 수도 있다.

 

·  책의 예제를 간단히 따라 해 보자.

예제03-01(모던자바스크립트)

위 예제는 오류가 날 수밖에 없는 예제이다.

버튼을 클릭하면 null이라는 단어와 함께 오류가 발생한다. 위 예제를 디버깅해보자.

 

디버깅은 개발자 도구의 'Sources' 패널에서 가능하다.

17을 누르면 브레이크 포인트(중단점)가 걸리게 되고, counter위에 마우스를 올리면 null이 뜬다.

(브레이크 포인트를 건 다음, F5 또는 새로고침을 시도해보자)

위의 예제에서 counter값에 알맞지 않은 counter-x라는 값이 들어가 있기 때문에,counter값이 null로 반환되어 오류가 발생함을 알 수 있다.

 

그렇다면, 제대로 고쳐서 실행해보자!

아까와는 다르게 제대로 값이 들어가고 있고,

increase와 decrease가 정상적으로 작동함을 확인할 수 있다.

 

·  그다음으로는 index.js 파일을 만들어보는 예제이다.

    이 예제에서는 터미널에 node.js를 활용하여 결괏값을 출력한다.

 

·  바로 예제를 실습해보자.

index.js에 예제 코드를 작성하고, VScode가 제공하는 터미널에 node index를 작성해보았다.

arr이라는 변수에 3개의 값이 들어가고 이를 출력한다.

이것을 node.js 없이 Code Runner라는 확장 플러그인을 통해 쉽게 확인할 수도 있다.

여기서 arr.forEach(console.log)를 arr.forEach(alert)로 바꾸면 무슨 일이 일어날까?

alert는 정의되지 않았다고 하면서 오류가 출력된다.

왜냐하면 alert 함수는 브라우저에서만 동작하는 클라이언트 사이트 Web API이기 때문이다.

즉, 브라우저 환경에서만 유효한 함수라는 것이다.

이것을 쉽게 VScode에서 실행시킬 수 있는데, 책에서 나오는 것이 바로

'Live Server 확장 플러그인'이다.

플러그인을 설치하고 html 파일을 하나 더 만들어준 이후에

오른쪽 하단에 뜬 'Go Live'를 통해 예제를 확인해보자.

자동으로 브라우저가 실행되면서 alert 함수가 정상적으로 작동됨을 확인할 수 있다.

test02.html 예제에서 source 파일로 index.js를 불러오기 때문에 바로 함수가 실행되는 것이다.

---

여기까지가 01~03장까지의 내용이다.

다음 시간에 또 JS를 공부해서 오도록 하겠다.

그럼 뿅 ( σ̴̶̷̤ .̫ σ̴̶̷̤ )♡