poiemaweb / javascript스터디 1

김정빈·2021년 9월 6일

스터디 자바스크립트 컴퓨터과학

스터디

목록 보기

1/8

1. 기본개념과 동작 원리 이해의 중요성

프로그래밍이란?

0과 1밖에 알지 못하는 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업

Computational Thinking

프로그래밍을 하기 위해서는 논리적, 수학적 사고가 필요하게 되며 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다. 이런식으로 컴퓨터가 해석 할 수 있게 사고를 하는 것을 Computational thinking이라 한다.

프로그래밍 언어

컴퓨터에게 명령을 하기 위해서는 기계어(Machine code)를 사용해야 한다. 그러나 쉽지 않기에 인간이 이해할 수 있는 약속된 구문(syntax, 문법)으로 구성된 프로그래밍 언어(programming language)를 사용하여 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 번역시켜주는 번역기를 이용한다.

번역기에는 컴파일러와 인터프리터가 있다.

Syntax & Semantics

문제 해결을 위해서는 syntax(문법)과 Semantics(의미)가 둘다 필요하다. 문법에만 맞게 쓴다고 의미 있는 코드가 되진 않는다. 프로그래밍 언어에서 제공하는 syntax로 문제해결과정에 맞게 코드가 짜여져야 semantics가 있다라고 할 수 있다. 이런 점에서 프로그래밍은 요구사항의 집합을 분석하여 적절한 자료구조와 함수의 집합으로 변환한 후, 각각의 실행의 흐름을 제어하는 것이다.

기본개념과 동작 원리 이해의 중요성

구현된 코드는 의도한 대로 정확하게 동작해야 한다.
- 동작원리를 이해하면 코드의 동작을 예측 할 수 있다.
문맥에 맞는 정확한 용어를 사용해야 한다.
- 기본개념을 익히면 문맥에 맞는 정확한 용어를 사용 할 수 있다.

단어

기계어: CPU가 직접 해독하고 실행할 수 있는 비트 단위로 쓰인 컴퓨터 언어를 통틀어 일컫는다. 기계어는 CPU의 종류에 따라 다른 코드를 갖게 된다.

2. 자바스크립트란?

자바스크립트의 탄생

1995년, 넷스케이프 커뮤니케이션즈 소속 브렌던 아이크 개발, 정적인 HTML을 동적으로 표현하기 위해 탄생
1996년 3월, 브라우저 Netscape Navigator2에 탑재되고 'mocha'로 명명. 9월 'LiveScript'로 변경 12월 'JavaScript'로 변경
현재, 모든 브라우저의 표준 언어

자바스크립트의 파편화와 표준화

1996년 8월, 마이크로소프트, 'JScript'를 Internet Explorer3.0에 탑재
JavaSciprt와 JScript가 표준화 되지 못해 크로스브라우징이슈 발생
1996년 11월, 넷스케이프 커뮤니케이션즈에서 ECMA인터내셔널에 자바스크립트의 표준화를 요청하였다.
1997년 7월, ECMA-262라 불리는 자바스크립트 초판(ECMAScript 1)의 명세(specification)가 완성, 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.
1999년 ECMAScript 3(ES3)이 공개
2009년 ECMAScript 5(ES5)는 HTML5와 함께 출현한 표준안이다.
2015년 ECMAScript 6(ECMAScript 2015)가 공개. 범용 프로그래밍 언어로서 갖추어야 할 let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같은 기능들을 대거 도입하는 큰 변화가 있었다. - 이 후, ES6 이후의 버전업은 작은 기능의 추가 레벨로 매년 공개할 것으로 예고되었다.

자바스크립트 성장의 역사

초창기
- 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용
- 대부분 로직은 주로 웹 서버에서 실행되었고 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준.
1999년
- 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능인 Ajax(Asynchronous JavaScript and XML)가 XMLHttpRequest이라는 이름으로 등장했다.
  - 서버로부터 필요한 데이터만을 받아 변경이 필요한 부분만 한정하여 렌더링하는 것이 가능
  - 웹 사이트가 데스크톱 앱과 유사한 빠른 퍼포먼스와 부드러운 화면 전환 가능하게 됨.
    (예: 2005년 구글이 발표한 google maps)
2006년
- jQuery 등장
  - 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 보다 쉽게 제어할 수 있게 되었다.
  - 크로스 브라우징 이슈도 어느 정도 해결되었다.
  - jQuery는 넓은 사용자 층을 순식간에 확보했다.
  - 이로 인해 당시 다소 까다로운 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 더 선호하는 개발자가 양산되기도 했다.
2008년
- 구글의 V8 자바스크립트 엔진 등장
  - v8 엔진의 빠른 성능을 통해 데스크톱 앱과 유사한 사용자 경험을 제공할 수 있는 웹앱 개발 가능
- 웹 서버에서 수행되던 역할들이 클라이언트로 이동하게 된 계기. 프론트엔드 영역이 주목받게 됨.
2009년
- Node.js등장
  - 서버 사이드 앱 개발에서도 자바스크립트 사용 가능
현재
- 크로스 플랫폼을 위한 가장 중요한 언어로 주목받고 있다.
  - 웹, 하이브리드 앱(phoneGap, ionic), 서버 사이드(NodeJS), 데스크톱(Electron), 머신러닝(TensorFlow.js), 로보틱스(Johnny-Five) 프로그래밍 언어로서 세계에서 가장 인기있는 프로그래밍 언어
- SPA 프레임워크/라이브러리 유행
  - Angular, React, Vue.js

JavaScript와 ECMAScript

ECMAScript
- 표준명세 ECMA-262
- 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법(core syntax)을 규정한다.
- 각 브라우저 제조사는 ECMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.
JavaScript
- 프로그래밍 언어
- 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등을 아우르는 개념이다.
  - 클라이언트 사이드 Web API는 ECMAScript와는 별도로 World Wide Web Consortium (W3C)에서 별도의 명세로 관리하고 있다. 클라이언트 사이드 Web API의 자세한 내용은 MDN web docs: Web API를 참고가능

JavaScript의 특징

웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
기본 문법은 C, Java와 유사하고 Self에서는 프로토타입 기반 상속을, Scheme에서는 일급 함수의 개념을 차용했다.
인터프리터 언어(Interpreter language)이다.
- 대부분의 모던 자바스크립트 엔진(Chrome의 V8, FireFox의 Spidermonkey, Safari의 JavaScriptCore, Microsoft Edge의 Chakra 등)은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점을 해결
자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.
강력한 객체지향 프로그래밍 능력을 지니고 있다.
- 상속, 정보 은닉을 위한 키워드 private는 없다.
- 하지만 프로토타입 기반의 객체지향 언어이다.

ES6 브라우저 지원 현황

Internet Explorer를 제외한 대부분의 모던 브라우저는 ES6를 지원하고 있다.
- 96 ~ 99%로 지원한다.
- Internet Explorer와 구형 브라우저는 대부분 지원하지 않는다.
  - ES6을 지원하지 않는 브라우저를 사용환경으로 하기 위해서는 babel과 같은 트랜스파일러를 사용하여 ES5이하의 버전으로 다운그레이드 해야 한다.
Node.js의 경우 v4부터 ES6를 지원하기 시작했다.
import/export모듈은 대부분의 브라우저가 지원하지 않는다.
- import/export모듈을 사용하기 위해서는 Webpack과 같은 모듈 번들러가 필요하다.
지원현황테이블

단어

ECMA인터내셔널: 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구
크로스플랫폼: 컴퓨터 프로그램, 운영 체제, 컴퓨터 언어, 프로그래밍 언어, 컴퓨터 소프트웨어 등이 여러 종류의 컴퓨터 플랫폼에서 동작할 수 있다는 것을 뜻하는 용어이다.
phoneGap:웹 콘텐츠를 보여 주는 웹뷰(WebView)에서 스마트폰 디바이스에 접근하여, 카메라나 마이크 제어 같은 웹 브라우저 고유 기능 이외의 기능을 실행할 수 있는 인터페이스를 제공하는 대표적인 하이브리드 앱 개발 솔루션이다.
Ionic: 하이브리드 모바일 앱 개발을 위한 완전 오픈 소스 SDK이다.
Client Side Web Api
- 브라우저 api: 브라우저에 내장되어 있는 API. 브라우저를 이용해 복잡한 작업들을 쉽게 구현할 수 있도록 도와준다. 비디오 플레이를 시키거나 오디오 소리가 나도록 동작하는 것등이 포함된다. 백그라운드에서 C++언어와 같은 로우한 언어로 구현이 되어 있는 기능을 사용자가 자바스크립트로 사용할 수 있도록 API를 구성.
- 써드파티 api: 외부 API입니다. 트위터나 유튜브와 같이 최근 목록 가져오기 기능을 사용하고 싶을 때 해당 서비스에서 제공하는 API를 말합니다.
Self: 프로토타입 개념 기반의 객체 지향 프로그래밍 언어이다
Scheme: 함수형 프로그래밍과 절차적 프로그래밍을 지원하는 다중패러다임 프로그래밍 언어로, 리스프(LISP)의 방언(변종 언어)이다.
인터프리터 언어(Interpreter language)
- 원시코드(프로그래머가 작성한 소스코드)를 기계어로 변환하는 과정없이 한줄 한줄 해석하여 바로 명령어를 실행하는 언어를 말합니다
- 빌드과정이 없어 바로 실행 가능
- 실행 하면서 해석하기 때문에 컴파일 언어에 비해 속도가 느림
일급함수: 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다.
private, protected, public
private: private으로 선언된 attribute, method는 클래스에서만 접근 가능
protected: protected로 선언된 attribute, method는 해당 클래스를 상속 받은 클래스에서 접근 가능
public: public으로 선언된 attribute, method는 어떤 클래스라도 접근 가능

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

웹브라우저

크롬브라우저를 기준으로 한다.

개발자 도구
- Elements
  - 웹 페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인해 볼 수 있다.
  - 편집한 내용이 저장되지는 않는다.
  - 웹 페이지가 의도된 대로 렌더링되지 않았다면 이 패널을 확인하여 유용한 힌트를 얻을 수 있다.
- Console
  - 웹 페이지의 에러를 확인
  - 자바스크립트 소스코드에 포함시킨 console.log 메소드의 결과를 확인해 볼 수 있다.
- Sources
  - 웹 페이지의 자바스크립트 코드를 디버깅할 수 있다.
- Network
  - 웹 페이지에 관련한 네트워크 요청(request) 정보와 퍼포먼스를 확인할 수 있다.
- Application
  - 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.
콘솔
- 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴보아야 할 곳
- 구현 단계에서는 항상 콘솔을 열어둔 상태에서 개발을 진행하는 것이 좋다.
- 구현 단계에서 값을 확인하며 개발을 진행하기 위해 console.log 함수를 사용하는 경우가 많다.
- REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용 할 수 있다.
  - 여러 줄로 이루어진 코드를 실행하는 경우, 줄바꿈이 필요할 때 Shift 키를 누른 상태에서 엔터 키를 누른다.
HTML에 포함된 자바스크립트를 브라우저에서 실행
- 브라우저는 HTML 파일을 로드하면 script 태그에 포함한 자바스크립트 코드를 실행한다.
디버깅
- 콘솔 창 에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면 자바스크립트 코드를 디버깅을 할 수 있는 Sources 패널로 이동한다.
- 에러가 발생한 위치에 빨간 밑줄이 표시되고 그 위에 마우스를 올려 보면 원인을 알 수 있다.
- 에러가 발생한 코드 왼쪽의 라인 번호를 클릭하면 브레이크 포인트(중단점)을 걸 수 있다.
  - 중단점에서 변수 상태를 보기 위해서는 오른쪽에 정지버튼을 눌러야 한다.
- 보다 자세한 내용은 구글의 Tools for Web Developers: 콘솔 사용과 Tools for Web Developers: Chrome DevTools에서 자바스크립트 디버깅 시작하기를 참고.

Node.js

Node.js
- 2009년, 라이언 달(Ryan Dahl)이 발표
- Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)
- 주로 서버 사이드 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공
- 데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA(Single Page Application)에 적합하다.
- CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.
- 백엔드 영역의 서버 애플리케이션 개발뿐만 아니라 프런트엔드 영역의 다양한 도구나 라이브러리도 동작한다. 따라서 Node.js는 프런트엔드 모던 자바스크립트 개발에 필수적인 환경이라고 할 수 있다
npm(node package manager)
- 자바스크립트 패키지 매니저.
- Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할
- 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공.
- 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.
Node.js 설치
- Node.js 웹사이트에 접속
- LTS 버전, Current 버전 중 하나 다운로드 및 설치
- 설치가 완료되면 터미널에서 Node.js와 npm 버전을 출력하여 정상 설치 확인
- npm은 버전 업데이트
Node.js REPL
- 터미널에 node입력하면 REPL환경에서 코드를 실행해 볼 수 있다.
  - CTRL + C를 두번 입력하면 REPL환경 종료.
  - REPL에 대해 더 자세한 것은 Node.js Documentation: REPL 참조
- node 파일이름.js 를 통해 js 파일 실행결과를 볼 수 있다.

비주얼 스튜디오 코드

비주얼 스튜디오 코드 설치
- 코드 에디터를 사용하면 코드 자동 완성, 문법 오류 감지, 디버깅, Git 연동 등 강력하고 편리한 기능을 지원한다.
- VS Code를 설치하기 위해 VS Code 웹사이트(https://code.visualstudio.com)에 접속하여 자신의 운영체제에 맞는 인스톨러를 내려받아 설치한다.
내장 터미널
- VS Code에는 터미널(윈도우에서는 명령 프롬프트)가 내장되어 있다.
  - Ctrl + ` 단축키를 사용한다.
  - 해당 터미널로 node.js 환경을 이용 할 수 있다.
Code Runner 확장 플러그인
- Code Runner 확장 플러그인을 사용하면 자바스크립트를 비롯해 다양한 프로그래밍 언어를 VS Code에서 실행할 수 있다.
- 실행 단축키
  - Windows: Ctrl + Alt + N
  - macOS: Control + Option + N
Live Server 확장 플러그인
- Live Server 확장 플러그인을 사용하면 가상 서버가 가동되고 HTML파일이 자동 로딩된다. 이후 소스 코드를 수정하면 수정 사항이 가상 서버에 자동 반영된다.

단어

REPL(Read Eval Print Loop)(입력수행출력반복): 코드를 구성한 후 컴파일 없이 즉석에서 실행 하여 결과를 확인 할 수 있는 환경
크롬개발자도구중단점: 중단점을 이용하면 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 알 수 있습니다. 또한 실행이 중지된 시점을 기준으로 명령어를 실행할 수도 있습니다.
마켓플레이스: VSCode 확장 플러그인 저장소

김정빈

다음 포스트