2022/08/08 - TIL

01장 프로그래밍

1.1 프로그래밍이란?

0과 1만 아는 컴퓨터에게 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 문제 해결방안을 제시할 때 컴퓨터의 입장에서 문제를 바라봐야하는데 이때 컴퓨터 사고가 필요하다. 예시) 걷는다 = 왼발(혹은 오른발을 선택한다) + 전방으로 선택한 발을 움직인다.

1.2 프로그래밍언어

프로그래밍언어는 사람이 이해할 수 있는 약속된 구문으로 이를 이용해 프로그램을 작성하고, 기계에게 이를 전달할 때 일종의 번역기(컴파일러, 인터프리터)를 사용한다. 프로그래밍은 구문(syntax)와 의미(semantics)의 조합으로 이루어져 있다

1.3 구문과 의미

프로그래밍 언어는 문법에 부합하는 것은 물론이고, 수행하고자 하는 바를 정확히 수행하여 요구사항이 실현되어야 의미가 있다.

대부분의 언어는

[변수, 값, 연산자, 표현식, 문, 조건문, 반복문, 흐름제어, 함수, 객체, 배열]

로 이루어져 있다.

프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것이다.

02장 자바스크립트란?

2.1 자바스크립트의 탄생

웹페이지의 보조적인 기능을 수행하기 위해 브렌던 아이크가 자바스크립트를 개발했다.

처음에 넷스케이프 네비게이터에 탑재 되었고, 모카로 명명되었다.

모카→라이브스크립트→자바스크립트

얼마 후 자바스크립트의 파생 버전인 JScript가 출시된다.

2.2 자바스크립트의 표준화

넷스케이프 커뮤니케이션즈(Javascript)와 마이크로소프트(JScript)는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하면서 크로스 브라우징 이슈 가 발생했다.

크로스 브라우징 이슈 를 해결하기 위해 넷스케이프 커뮤니케이션즈는 비영리 표준화 기구인 ECMA인터내셔널에 표준화를 요청한다. 그리고 초판 ECMAScript 1판이 완성되고, 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.(흔히 ES6라 말하는 것은 ECMAScript 6를 이야기한다)

2.3 자바스크립트의 성장의 역사

초창기에는 자바스크립트는 웹페이지의 보조적인 기능을 수행하기위해 한정적인 용도로만 사용되었다. 이 때 대부분의 로직은 서버에서 실행(SSR)되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링(HTML, CSS, Javascript를 시각적으로 출력하는 것)하였다.

2.3.1 Ajax

1999년 자바스크립트를 이용해 서버와 브라우저가 비동기방식으로 교환할 수 있는 통신기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다. Ajax의 등장으로 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. (이때 데스크톱 어플리케이션에 유사할정도의 화면전환을 구현하였다)

2.3.2 jQuery

2006년, jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수있고 크로스 브라우징 이슈도 해결되었다. 배우기 쉽고 직관적이라 jQuery를 선호하는 개발자가 양산되었다.

2.3.3 V8 자바스크립트 엔진

구글 맵스를통해 웹 어플리케이션 프로그래밍 언어로써의 자바스크립트 엔진의 성능이 대두되었다. V8 자바스크립트 엔진의 등장으로 자바스크립트는 데스크톱 어플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 어플리케이션 언어로 정착되었다. 이때 웹 서버에서 수행되던 로직들이 대거 클라이언트(브라우저)로 이동했고, 이는 웹 어플리케이션 개발에서 프론트엔드 영역이 주목받는 계기로 작용했다.

2.3.4 Node.js

2009년, 라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. Node.js는 자바스크립트 엔진을 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.

Node.js는 자바스크립트 엔진을 기반으로하므로 Node,js는 비동기 I/O를 지원하며 단일 스레드 이벤트 기반으로 동작함으로써 요청 처리 성능이 좋다. 따라서 Node.js는 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다. 하지만 CPU 사용률이 높은 어플리케이션에는 권장하지 않는다.

2.3.5 SPA 프레임워크

모던 웹 어플리케이션은 데스크톱 어플리케이션에 준하는 성능과 사용자 경험을 제공하는 것이 필수가 되며 개발 규모와 복잡도가 상승했다. 개발 난이도가 증가하면서 이를 해결하는 라이브러리와 패턴이 나왔지만, 유연하면서 확장하기 쉬운 어플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레임워크가 등장하게 되었다

이러한 요구에 맞춰 CBD(component based development) 방법론을 기반으로 하는 SPA가 대중화되면서 Angular, React, Vue.js, Svelete 등 다양한 SPA 프레임워크/라이브러리가 사용되었다.

2.5 자바스크립트의 특징

HTML, CSS와 함께 웹을 구성하는 오소중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는

1. 명령형
2. 함수형
3. 프로토타입 기반 객체지향

프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

04장 변수

4.1 변수란 무엇인가? 왜 필요한가?

컴퓨터는 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

1+1

위의 값을 성공적으로 계산하고 메모리에 저장해도 CPU가 연산하여 만들어낸 숫자 값 30을 재사용할 수 없다. 만일 위의 값을 사용하고 싶다면 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 하지만 이 방법은 치명적인 오류를 일으킬 수 있기에, 자바스크립트는 개발자의 직접적인 메모리 제어를 하용하지 않는다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. (값의 위치를 가르키는 상직적인 이름이다)

변수에 값을 저장하는 것은 할당(대입, 저장), 저장된 변수 값을 읽어들이는 것을 참조 라고 한다.

4.2 식별자

변수 이름을 식별자라고도 한다. 식별자는 어떤 갑승 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

식별자는 변수, 함수, 클래스의 이름 모두 식별자이다.(메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 한다)

선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. 변수 단계는 2단계로 분리되어 수행한다.

1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확ㄱ보하고 암묵적으로 undefined를 할당해 초기화한다.

변수 이름을 비롯한 모든 식별자는 실행컨텍스트에 등록된다. 실행컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.

var 는 변수가 선언 단계와 초기화 단계가 동시에 진행된다. 변수를 사용하려면 반드시 선언이 필요하다. 변수뿐만 아니라 모든 식별자에 접근할 때 선언이 되어있지 않다면 Reference Error가 뜬다.

4.4 변수 선언의 실행 시점과 변수 호이스팅

console.log(state) //undefined
var state = 1

state가 referenceError이 아닌 undefined가 발생하는 이유는, 변수 선언이 런타임 이전단계에서 실행이되면서 호이스팅이 일어나기 때문이다.(var, let, const , function, class 를 사용한 모든 값들은 모두 호이스팅된다)

4.5 값의 할당

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 실행되지만, 값의 할당은 소스 코ㄷ가 순차적으로 실행되는 시점인 런타임에 실행된다

05장 표현식과 문

5.1 값

값은 식이 평가되어 생성된 결과를 말한다.

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다

1은 정수 리터럴, 2진수리터럴, 8진수리터럴, 문자열 리터럴 다양한 방식으로 표현할 수 있다

5.3 표현식

표현식은 값으로 평가될 수 있는 문이다.

• 리터럴 표현식 : 10, ‘hi’
• 식별자 표현식 : sum, arr[1]
• 연산자 표현식 : 10+20
• 함수/메서드 호출 표현식 : square(), person.getName()

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행단위이다. 문은 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본요소를 의미하는 토큰으로 구성되었다.

var x; //변수 선언문
x = 5; //할당문
function foo(){} //함수 선언문
if( x>1 ) console.log(x) //조건문
for( var i=0; i<2;i++){console.log(i)} // 반복문

5.5 세미콜론과 세미콜론 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타낸다. 코드 블록은 자체로 종결성을 가지고 있기 때문에 ;를 안붙여도 된다. 만일 ;를 쓰지 않더라도 세미콜론 자동 삽입이 있기 때문에 암묵적으로 실행된다

5.6 표현식인 문과 표현식이 아닌 문

표현식인 문과 표현식이 아닌 문을 가장 간단하고 명료한 방법은 변수에 할당하는 것이다

var foo =x;// 표현식인 문은 값처럼 사용할 수 있다
var foo1 = var x;//error 표현식이 아닌 문은 값처럼 사용할 수 없다

06장 데이터 타입

• 원시타입 : 숫자타입/문자열타입/불리언타입/undefined 타입/null 타입/심벌 타입
• 객체타입 : 객체/함수/배열

6.2 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는데 사용한다.

• ‘ ‘작은 따옴표
• “ ” 큰 따옴표
• 백틱

따옴표로 감싸지 않는다면 띄어쓰기를 할 수 없으며, 식별자로 취급하기 때문에 hello라는 문자취급을 할 수 없다

let string = hello//not string! error 

6.3 템플릿 리터럴

1. 멀티라인 문자열 : 일반문자열에서는 줄바꿈이 허용되지 않는다.
2. 표현식 삽입
3. 테그드 탬플릿

이렇게 세가지 기능이 있다

6.9 데이터 타입의 필요성

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참좋라 때 한번에 읽어 들어야 할 메모리 공간의 크기를 정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해결할지 결정하기 위해

07 연산자

: 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연상 등을 수행하여 하나의 값을 만든다.

7.1 산술 연산자

7.1.1 이항 산술 연산자

: + - * / %

7.1.2 단항 산술 연산자

:++ — + -

(+는 변수값이 그대로고, - 는 변수값 부호가 변한다)

7.1.3 문자열 연결 연산자

: ‘1’ + 1

7.2 할당 연산자

=, +=, -=, *=, /=, %=

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 변수 값이 변하는 부수효과가 있다.

7.3 비교 연산자

==, ===, ≠, ≠=

7.4 삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정한다

var result = score >= 60 ? 'pass' : 'fail' ; //ok!

var x = 2, result;

if(x%2) result = '홀수'; 
console.log(result); //짝수

var x = 10;
var result = if(x%2) {result = '홀수'} else {result ='짝수'}
SyntaxError

첫 번째, 두 번째는 문제가 없지만 세번째 같은 경우에는, 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 하지만, if else는 표현식이 아닌 문이기 때문에 값으로 사용할 수 없기 때문에 에러가 생긴다.

08장 제어문

: 조건에 따라 코드 블록을 실행하거나 반복실행할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행한다.

8.1 블록문

0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록으로 부른다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 일반적으로 제어문이나 함수를 정의할 때 사용된다.

문에는 원래 세미콜론을 붙이는 것이 일반적이지만, 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에, 블록문 끝에는 세미 콜론을 붙이지