주절주절 기록장

4.1 변수란 무엇이고, 왜 필요한가?

애플리케이션은 데이터를 다룬다, 아무리 복잡하더라도 데이터를 입력 받아 처리하고 출력하는 것이 전부다.

변수는 그런 데이터를 관리하기 위한 핵심 개념이다. 

예를 들어보자, 10 + 20 연산식이 있다. 10과 20을 임의의 메모리에 저장하고 CPU가 연산을 해서 30이라는 값 역시

임의의 메모리에 저장했다. 그렇다면 30이라는 값을 재사용하려면 어떻게 해야할까? 

임의의 메모리에 직접 접근한다는 것은 불가능하다. 메모리를 실수로 잘못 접근해서 그 결과로 운영체제의 중요한 값을 변경하면 치명적인 오류가 발생할 수 있다. 이를 막기 위해 자바스크립트는 개발자의 직접적인 메모리 접근을 허용하지 않는다. 혹시나 허용을 해준다고 해도 값이 저장된 메모리 주소는 코드를 실행할 때 마다 메모리 상황에 맞게 임의의 위치로 저장된다. 코드를 실행하기 전 까지 값이 저장된 메모리 위치를 알수도 없다. 따라서 메모리 주소를 통해 값에 접근하려는 시도는 올바르지 않다. 

그렇다면 변수는 어떻게 접근할까. 변수는 값의 위치를 나타내는 상징적인 이름이다. 변수는 컴파일러와 인터프리터에  의해 값이 저장된 메모리 공간으로 치환되어 실행된다. 따라서 개발자는 메모리 주소로 직접 접근할 필요도 없이 안전하게 접근 할 수 있다. 

이제 변수의 정의를 알아보자. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위한 이름을 뜻한다. 고유한 이름을 변수 이름, 변수에 저장된 값을 변수 값, 변수에 값을 저장하는 것을 할당(대입, 저장), 변수에 저장된 값을 읽어 들이는 것을 참조라고 한다.

4.2 식별자

식별자는 어떤 값을 구분해서 식별할 수 있는 고유한 이름을 말한다. 이를 위해선 메모리 공간에 저장되어 있는 어떤 값을 구분해서 식밸해낼 수 있어야 한다. 값을 식별한다고 식별자가 값을 기억하는 것이 아니다. 값이 기억된 메모리 주소를 기억한다. 값이 필요할 땐 값에 저장된 메모리를 따라가서 값을 불러 온다는 것이다. 즉, 식별자는 메모리 주소에 붙인 이름이라 볼 수 있다. 그리고 식별자라는 용어는 변수 이름에만 국한되지 않는다. 예를 들어, 변수, 함수, 클래스 등 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자다.

식별자 네이밍 규칙

식별자에게도 네이밍 규칙이 있다. 

-식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러 기호($)를 포함할 수 있다.

-단, 식별자는 특수문자를 제외한 문자, 언더스코어( _ ), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.

-예약어는 식별자로 사용할 수 없다. (await, break, case, catch, class, const, if, for, while, var, void, true, false... 등등)

네이밍 컨벤션 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.

카멜 케이스(camelCase)

var firstName;

스네이크 케이스(snake_case)

var first_name;

파스칼 케이스(PascalCase)

var FirstName;

헝가리언 케이스(typeHungarianCase)

var strFirsttName;

var $elem = document.getElementById('myId'); //dom 노드

일반적으로 변수나 함수 이름은 카멜 케이스를 사용하고, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.

4.3 변수 선언

변순 선언은 변수를 생성하는 것을 말한다. 정확하게 말하면 값을 저장하기 위해 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 주소를 연결해서 값을 저장할 준비를 하는 단계이다. 변수 선언에 의해 확보된 메모리는 확보가 해제될 때 까지 누구도 메모리 공간을 사용할 수 없도록 보호된다.

자바스크립트의 변수 선언 자바스크립트는 변수를 선언할 때 var, let, const를 사용한다. var은 let, const가 나오기 전 까지

유일한 변수 선언 키워드였다.

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다. var score;는 선언 단계를 통해 변수 이름 score를 등록하고, 초기화 단계를 통해 score 변수에 암묵적으로 undefined를 할당해 초기화 한다. 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전의 다른 애플리케이션이 사용한 쓰레기 값이 남아 있을 수 있다. 값을 할당하지 않고 곧바로 변수 값을 참조하면 이런 쓰레기값이 나올 수 있다. var은 선언 즉시 초기화를 진행하므로 이런 위험으로 부터 안전하다. 

변수를 사용하려면 반드시 선언이 필요하다. 변수뿐만 아니라 모든 식별자가 그렇다. 만약 선언하지 않은 식별자에 접근하면 RefrerenceError(참조 에러)가 발생한다. 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러다. 

값의 할당

var score = 80;

score = 90; 

위 코드는 어떻게 동작할까? 1항의 var socre = 80;은 한 문장이지만 두개로 나뉘어서 동작한다고 할 수 있다.

var score; 

scroe = 80;

호스팅으로 인해 score가 런타임 전에 undefined로 초기화를 하고 런타임 때 한줄씩 진행되며 score = 80; 값을 넣는다.

그 다음 score = 90을 집어 넣게 되는데 이 모든 값은 하나의 메모리에 들어가게 될까? 답은 아니다. 

undefined, 80, 90 전부 새로운 메모리 공간을 확보하고 그곳에 값을 집어 넣는다. 

남은 undefined, 80은 어떻게 될까? 어떤 변수도 저 메모리 주소를 기억하지 않게 된다. 이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동해제된다. 단, 언제 해제 될지는 예측할 수 없다. 

#가비지 콜렉터

애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능을 말한다. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 메모리 누수를 막는다.

#언매니지드 언어와 매니지드 언어

프로그래밍 언어는 메모리 관리 방식에 따라 언매니지드 언어와 매니지드 언어로 나뉜다. c언어 같은 언매니지드 언어는 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free() 같은 저수준 메모리 제어 기능을 제공한다. 이런 방식은 개발자 역량에 따라 최적의 성능도 발휘할 수 있지만 반대로 치명적인 오류를 만들 수도 있다.

반대로 매니지드 언어는 메모리 관리를 언어 차원에서 다루고 개발자는 제어하지 않는다. 장점으로는 어느정도 생산성과 편리성을 확보할 수 있지만 성능면으로선 어느 정도 손실을 감수할 수 밖에 없다. 

이런 var은 여러 단점이 있어 현재는 사용하지 않는다고 한다.

var을 쓰지 않는 이유 3가지

사용하지 않는 첫번째 이유는 같은 이름으로 변수를 여러번 선언해도 에러가 나지 않는다는 점이다. 조그만 코드면 모를까 대형 프로젝트에서 변수가 중복되면 변수 중복에 대한 오류는 나지 않더라도 다른 예상치 못한 오류가 빈번하게 나올 것이다.

두번째로 호이스팅 문제다. 호이스팅이란 코드가 실행되기 이전에 변수 선언이 스코프 최상단으로 올려버리는 것이다.

이것의 문제는 코드의 가독성을 떨어뜨릴 수 있다. 변수 선언은 코드 최하단에 있고 코드 상단에는 갑작스럽게 변수를 사용하고 있더라도 문제가 되지 않는다. 

 세번째는 의도치 않는 전역변수를 만들 수 있다. var은 함수레벨스코프로, 함수를 제외한 if, for, while등은 코인블록으로 안 본다. 그래서 함수만이 지역 변수를 가질 수 있고 그 외의 곳에서 선언된 변수들은 전역변수가 되는 일이 일어난다. 

#스코프  함수가 사용될 수 있는 영역을 말한다.

#지역변수, 전역변수

지역변수는 한 지역 내에서만 사용할 수있는 변수이다. 여기서 지역은 {} 안을 의미한다. 따라서 이 지역 밖에서는 작동하지 않는다. 다른 함수에서도 연결해서 사용하려면 전달인자로 넘겨주거나 전역변수로 지정해야 한다.

전역변수는 지역변수 {} 밖에서 선언하는 변수로 지역 변수와 달리 어느 지역에서든 사용할 수 있는 변수이다.

참고자료

https://sunmerrr.github.io/javascript/globalVariable/

let, const의 특징

let,const는 늦게 나온 만큼 var의 단점을 보완해서 나왔다.

첫번째로 동일한 변수를 중복 선언할 수 없다. 중복 선언을 하면 에러가 난다.

두번째로  블록레벨 스코프를 가진다. var의 함수스코프 문제를 막기 위해 추가된 기능으로 전역변수 문제를 막았다.

코드 블록의 종류에는 함수, if, switch, for, while, try catch등이 있다. 

세번째는 변수 호이스팅 문제가 발생하지 않는다. 호이스팅을 하지 않는 것은 아니다 호이스팅은 하지만 undefined 값을 변수 선언시에 넣게 되므로 그 전에 참조하면 초기화 되지 않았으므로 참조 에러를 발생시킨다.

let, const의 차이점

let은 변수에 값을 재할당 하고 싶을 때 사용한다. 

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야한다.

const는 재할당이 안된다. 값을 상수로 쓰고 싶거나 변경하면 안되는 값에 사용한다. 그렇다고 불변은 아니다

원시값은 불가능하지만 객체는 변경이 가능하다.

#원시값 객체가 아니면서도 매서드도 가지지 않는 데이터

#객체, 매서드 아직 공부가 덜 되어서 이해하는데 오래 걸릴 것 같다.

천천히 알아가도록 하자 

#CS 개념 맛보기

컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. CPU가 연산을 하고, 메모리가 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리셀의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며,

컴퓨터는 메모리 셀의 크기 만큼, 즉 1바이트 단위로 데이터를 저장하거나 읽는다.

적지 못한 것과 그 이유

Jquery, dom, 동기, 비동기 설명이 빠졌다.

Jquery는 짧게 적은 만큼 기억도 그만큼 안났던 것 같고, DOM은 설명을 봐도 이해가 안돼서

기억이 안나는 것 같다. 

동기, 비동기는 적을 수 있었는데 다음것을 생각하다 적는 걸 잊었다. 

다시 적어보기

Jquery - dom을 쉽게 제어하게 한다. 

DOM - XML, HTML에 접근하기 위한 인터페이스다.

이 객체 모델은  문서내 모든 요소를 정의하고, 접근하는 방식을 제공한다. 

동기 - 응답(결과)가 받기 전 까지 다른 동작을 하지 않는다. 과정이 단순하고 처리 속도는 빠르지만

그 일을 처리하기 전 까지는 자원의 낭비가 일어난다.

비동기 - 응답(결과)를 받지 않아도 다른 일을 처리한다. 과정은 복잡해지고 처리속도도 느려지지만

자원의 낭비 없이 효율적인 처리가 가능하다.

돌아보기

동기, 비동기는 알고도 못 적은 만큼 다 적고 나서도 잊은 것이 없는지 충분히 고민하는 시간이 필요해 보인다.

그리고 확실히 펜으로 적으니 기억에 더 각인되는 느낌이지만 시간이 너무 오래 걸린다.

메모장 같은 곳에 적는 것도 생각해 봐야겠다. 

2.1 자바스크립트의 탄생

웹브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능 수행을 위해

브라우저에서만 동작하게 만든 경량프로그래밍 언어가 자바스크립트다. 

2.2 자바스크립트의 표준화

마이크로소프트가 만든 자바스크립트 파생 버전인 JScript와 넷스케이프 커뮤니케이션즈의 자바스크립트가

표준화 되지 못해 서로 완전히 호환되지 않는 일이 생겼다. 양 회사는 자사브라우저 시장 점유율을 위해 

자사 브라우저에서만 동작하는 기능을 추가하기 시작했다.

이로 인해 브라우저에 따라 웹페이자가 정상 동작하지 않는 코르스 브라우징 이슈가 발생하기 시작했고,

이를 해결하기 위해 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 표준화를 요청한다.

이를 통해 만들어진 것이 ECMA-262라 불리는 표준화된 자바스크립트로, 상표권 문제로 ECMAScript로 명명되었다. 

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

초창기 자바스크립트는 웹페이지 보조적 기능을 수핼하는 용도였다. 이 시기 대부분의 로직은 웹 서버에서 실행되었고,

브라우저는 서버로 부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.

#렌더링 

렌더링이란 HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다.

2.3.1 Ajax

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능인 Ajax가 XMLHttpRequest라는 이름으로 등장했다.

이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML 코드를 서버로 전송받아 웹페이지 전체를

렌더링하는 방식으로 동작했다.

이런 동작은 변경할 필요 없는 부분까지 처음부터 끝까지 렌더링하는 불필요한 과정을 거치게 만들었다.

반면 Ajax는 기존과 달리 변경할 필요가 없는 부분은 렌더링하지 않고, 필요한 부분만 렌더링 할 수 있어 웹 브라우저에서도 데스크롭 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환을 가능하게 만들었다.

#동기, 비동기

동기는 응답(결과)를 받아야지만 동작을 한다. 하나의 일을 처리할 동안 다른 동작은 멈추게 된다.

비동기는 응답(결과)를 받지 않더라도 동작을 하는 방식이다. 동기보다 복잡하고 시간이 더 걸리더라도

그 시간 동안 다른 일을 할 수 있으므로 자원 관리에 효율적이다.

2.3.2 jQuery 

DOM을 더욱 쉽게 제어할 수 있게 해주었다.

#DOM - Document Object Model

문서객체모델(DOM)은 XML이나 HTML에 접근하기 위한 인터페이스다.

이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방식을 제공한다.

?.  솔직히 잘 모르겠다. 조금 더 진도를 나가야 알 수 있을 것 같다. 

2.3.3 V8 자바스크립트 엔진

구글 맵스의 Ajax를 기반으로한 웹 애플리케이션의 가능성을 확인된 뒤, 더욱 빠르게 동작하는 자바스크립트 엔진의

필요해졌다. 그 필요를 충족시킨 엔진이 구글의 V8 자바스크립트 엔진이다. V8 자바스크립트 엔진의 등장으로 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.

V8 엔진 등장으로 웹 서버에서 수행되던 로직들이 대거 클라이언트로 이동했고, 웹 애플리케이션 개발에서 프런트엔드 영역이 주목받는 계기가 되었다.

2.3.4 Node.js

라이언 달이 발표한 Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다.

브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 독립시킨

자바스크립트 실행 환경이다. 다양한 플랫폼에서 작용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용된다.

Node.js는 ?.비동기 I/O를 지원하며 단일스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.

#단일스레드 이벤트 루프

이해하기 쉽지 않다 한바퀴 돌고 와서 다시 보자. 

https://meetup.toast.com/posts/89 

1.1 프로그래밍이란?  - 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.

이를 위해 필요한 것은 컴퓨터 사고이다.

사람의 기준인 소리가 크다 작다가 아닌 컴퓨터가 이해할 수 있는 볼륨 60처럼

구체적이고도 정확한 지시가 필요하다.

1.2 프로그래밍 언어 - 컴퓨터가 명령의 수행하기 위해서는 컴퓨터가 이해할 수 있는 언어, 기계어로 명령해야 한다.

하지만 그것은 사람에게 어렵기에 약속된 구문으로 구성된 프로그래밍 언어를 사용한다.

프로그래밍 언어를 통해 프로그램을 작성 후, 그것을 기계어로 번역해주는 컴파일러 혹은 인터프리터를 통해 명령이 전달 된다.

1.3 구문과 의미 - 언어에는 문법이 있다. 모든 언어가 그렇듯이 문법만 안다고 언어가 되지 않는다.

문법과 함께 의미가 담겨야 비로소 언어가 된다.

그러므로 프로그래밍 언어 역시 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는 것,

즉 요구사항이 실현되어야 의미가 있다.