이정훈

이정훈

기록을 습관화하자

0830 - 0905

0904

프런트엔드 개발자 학습 방향

프런트엔드 개발자가 하는 일은 사용자가 사용하기 좋은 애플리케이션 UI를 구현하는 것이다.
UI는 상태 정보를 서버로 전송하기도 하고, 서버의 데이터를 가져와서 UI에 표현하기도 한다.

프런트엔드 개발자 학습 방향 영상 정리

프런트엔드 개발에 필요한 기술

  • HTML : tags & attributes, Semantic web
  • CSS : Layout(float, flex, grid), 반응형 웹, Preprocessor(Sass, PostCSS), CSS 방법론, CSS 프레임워크
  • 크로스 브라우징
  • JavaScript: ES5, ES6, ES Next,DOM/Event, Ajax, 동작 원리(브라우저, 자바스크립트 엔진), node.js
  • HTTP
  • Tools : Git, Webpack, Babel, ESLint, npm…
  • Library / Framework: SPA(Angular, React, Vue.js), Typescript, jQuery, Lodash, Axios…
  • TDD(Test Driven Development) : karma / jasmine, mocha, chai
  • 알고리즘 / 자료구조

초심자가 경험하는 3가지 어려움

  1. 책이나 수업의 내용이 무슨 말인지 모르겠거나, 주변 개발자의 말을 알아 들을 수 없는 경우 -> 배경지식 : 기본적 CS 지식 + 용어에 대한 이해 + 기본 상식
  2. 어떻게 만들어야 할 지 감이 오지 않는 경우 -> 문제 해결 능력 : 문제가 무엇인지 알아채는 능력 + Computational thinking + 알고리즘 / 자료구조 + 경험
    문제 해결 능력 = 해결 과제의 명확한 이해 -> 복잡함을 단순하게 분해 -> 자료를 정리하고 구분 -> 순서에 맞게 행위 배열
  3. 어떻게 만들어야 하는지는 알겠는데 코딩을 못하겠는 경우 -> 구현 능력 : 문법에 대한 정확한 이해 + 연습

효율적인 프로그래밍 학습 방법

결론부터 말하자면 그런 것은 없다. 의식적인 연습을 꾸준히 반복하는 만큼 성장한다. 여기서 의식적인 연습은 단순 반복을 뜻하는 것이 아니다.

  • 라이브 코딩을 감상하는 것과 예제 단순 타이핑은 연습이 아니다. 현재 내 능력으로 쉽게 해결 가능한 것을 반복하는 것도 연습이 아니다.
  • 자신의 능력을 살짝 넘어서는 도전을 지속적으로 시도하는 것이 연습이다.
  • 시행착오는 무엇을 알고 무엇을 모르는지를 알게 하는 개발자의 벗이자 선생님이다.
  • 무엇을 모르는지 알게 되었다면 몰랐던 것을 알기 위해 시도하고 실패하는 의식적인 연습을 반복한다.
  • 모르는 것이 너무 많은 경우에는 베이스가 되는 것부터 구체적인 목표를 수립하고 학습하고 작은 성취를 반복한다.
  • 수박 겉핥기식 학습도 문제지만 본질에서 벗어난 학습도 문제다. 적절한 지점을 찾아내 균형을 잡는 것도 능력이다.
  • 피드백에 겸손하고 적극적으로 반응하여 행동을 교정하라

마음가짐

  • 서둘지 말자. 이제 출발선에 선 것이다. 성과를 내기엔 이르다.
  • 두려워하지 말고 시도하여 실패하자. 실패는 영원하지 않다.
  • 사람은 잘 착각하고 또 잘 잊는다. 기록하고 수정하자
  • 기본기가 중요하다.
  • 일을 좋아하자. 좋아하면 괴롭지 않다.
  • 호기심을 갖자. 설명할 수 없으면 모르는 것이다.
  • 꾸준히 하자. 평생


0905

주말동안 자바스크립트의 초반 부분을 예습했다.
오래 기다렸던만큼 거는 기대가 커서 개념을 잘 학습하고, 배운 것들을 말하는 연습을 꼭 해야겠다.

1장 프로그래밍

프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
프로그래밍에 앞서 해결해야 할 문제를 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있다.
문제 해결 방안을 고려할 때 컴퓨터 입장에서 문제를 바라봐야 하는데 이때 필요한 것이 컴퓨팅 사고이다.
즉, 프로그래밍이란 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업

프로그래밍 언어

문제 해결 능력을 바탕으로 정의된 문제 해결 방안은 컴퓨터에게 전달되어야 한다.
이때 명령을 수행할 주체는 컴퓨터이므로, 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 한다.
기계어로 직접 명령을 전달하는 것은 매우 어려운 일이기 때문에 사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한다.
그것을 컴퓨터가 이해할 수 있는 기계어로 번역하는데, 이 일종의 번역기를 컴파일러 혹은 인터프리터라고 한다.

프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.
프로그래밍 언어는 구문과 의미의 조합으로 표현된다.

구문과 의미

const number = "string";
console.log(number * number); // NaN

  • 위 코드는 문법적으로는 전혀 문제가 없지만 의미적으로는 옳지 않다.

    • number라는 이름의 변수에 문자열이 할당되어 있기 때문
  • 문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다.
  • 이것은 문법에 부합하는 것은 물론이고, 요구사항이 실현되어야 의미가 있다.

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

2장 자바스크립트란?

자바스크립트의 탄생

  1. 1995년 높은 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 사는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다.
  2. 1996년 웹 브라우저인 넷스케이프 내이게이터에 자바스크립트가 탑재되었고 모카로 명명되었다.
  3. 그해 9월 라이브 스크립트로 이름이 바뀌었다가 12월 자바스크립트라는 이름으로 최종 명명되었다.

자바스크립트의 표준화

  1. 마이크로소프트는 자바스크립트 파생 버전인 Jscript를 인터넷 익스플로러에 탑재했다.
  2. 넷스케이프와 마이크로소프트가 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가하기 시작했다.
  3. 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다.
  4. 표준화된 자바스크립트의 필요성이 대두되어 비영리 표준화 기구인 ECMA가 표준화하였고 상표권 문제로 ECMAScript로 명명되었다.
  5. ES5는 2009년 HTML5와 함께 출현한 표준 사양이다.
  6. ES6는 let/const 키워드, 화살표 함수, 클래스, 모듈 등 범용 프로그래밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 있었다. 이후의 버전은 매년 공개할 것을 예고되었다.

자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지 보조 기능을 수행하기 위한 용도로 사용되었다.
대부분의 로직은 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달되는 HTML과 CSS를 단순히 렌더링 하는 수준이었다.

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

Ajax

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

  • 웹페이지에서 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링하는 방식이 가능하게 했다.
  • 이로써 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 성능과 부드러운 화면 전환이 가능해졌다.

jQuery

2006년 jQuery의 등장으로 DOM을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 문제도 어느 정도 해결되었다.

V8 자바스크립트 엔진

2008년 등장한 구글의 V8 자바스크립트 엔진은 빠른 성능을 보여주었다.
V8의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
-> 웹 서버에서 수행되던 로직들이 클라이언트로 이동했고, 이는 FE 영역이 주목받는 계기로 작용했다.

Node.js

V8로 빌드된 자바스크립트 런타임 환경이다.

  • 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 JS 엔진을 브라우저에서 독립시킨 JS 실행 환경이다.
  • 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP등 내장 API를 제공한다.
  • Node.js는 자바스크립트 엔진을 기반으로 하므로 Node.js 환경에서 동작하는 애플리케이션은 자바스크립트를 사용해 개발한다.
    • FE와 BE 영역에서 JS를 사용할 수 있다는 동형성은 시간을 덜 수 있다는 장점이 있다.
  • 비동기 I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋다.
    • 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 SPA에 적합하다.
    • 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

-> 브라우저에서만 동작하는 프로그래밍 언어 취급을 받던 JS는 이제 웹 프로그래밍 언어의 표준으로 자리 잡고 있다.

SPA 프레임워크

CBD(Component based development)방법론을 기반으로 하는 SPA가 대중화 되면서 Angular, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양을 말하며 핵심 문법을 규정한다.
각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 JS 엔진을 구현한다. 자바스크립트는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, XMLHttpRequest, fetch, Web storage 등을 아우르는 개념이다.

자바스크립트의 특징

  • 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
  • 개발자가 별도로 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
  • 대부분의 모던 JS 엔진은 인터프리터와 컴파일러의 장점을 결합해 처리 속도가 느린 인터프리터의 단점을 해결했다.
  • 하지만 자바스크립트는 런타임에 컴파일되며 실행 파일이 생성되지 않고 인터프리터 도움 없이 실행할 수 없기 때문에 컴파일러 언어라고 할 수는 없다.
  • 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
    • 프로토타입 기반의 객체지향 언어

ES6 브라우저 지원 현황

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

트랜스파일러란 Typescript, Sass 그리고 Babel과 같이 같은 언어이지만, 문법적으로 변환해 주는 도구를 말한다.
컴파일러는 머신언어로 변경해서 언어와 파일 자체가 변경되지만, 트랜스파일러는 같은 언어지만 문법만 바꿔주는 역할을 한다.

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

자바스크립트 실행 환경

자바스크립트는 자바스크립트 엔진을 내장하고 있는 브라우저 환경이나 Node.js 환경에서 실행할 수 있다.
브라우저는 HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 JS 실행 환경을 제공하는 것이 주된 목적이다.
브라우저는 DOM API를 기본적으로 제공하지만, Node.js는 DOM을 직접 다룰 필요가 없기 때문에 DOM API를 제공하지 않는다.
이처럼 브라우저는 ECMAScript와 클라이언트 사이드 Web API를, Node.js는 ECMAScript와 Node.js 고유의 API를 지원한다.

웹 브라우저

개발자 도구

크롬 브라우저에서는 웹 애플리케이션 개발에 필수적인 강력한 도구인 개발자 도구를 제공한다.
개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다.

  • Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다.
  • Console : 로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 console.log 메서드의 실행 결과를 확인할 수 있다.
  • Sources : 로딩된 웹페이지의 JS 코드를 디버깅할 수 있다.
  • Network : 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
  • Application : 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

콘솔

개발자 도구의 콘솔은 코드에서 에러가 발생해 애플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴봐야 할 곳이다.
콘솔은 코드를 직접 입력해 그 결과를 확인할 수 있는 환경으로 사용할 수도 있다.
JS 코드를 실행할 때 줄바꿈이 필요한 경우에는 Shift를 누른 상태에서 엔터키를 누른다.

디버깅

에러 정보의 오른쪽에 에러 발생 위치를 나타내는 링크를 클릭하면, 자바스크립트 코드를 디버깅할 수 있는 Sources 패널로 이동할 것이다.
에러가 발생한 위치에 빨간 밑줄이 표시되고, 그 위에 마우스를 올리면 에러 정보가 표시된다.
디버깅 하는 방법은 에러가 발생한 코드 왼쪽의 라인 번호를 클릭해 브레이크포인트를 걸고 다시 실행하면 디버깅 모드로 들어간다.
그때 마우스 커서를 올려 보면 변수의 값을 확인할 수 있다.
이처럼 디버깅은 먼저 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것이다.

Node.js

프로젝트의 규모가 커짐에 따라 프레임워크 또는 라이브러리를 도입하거나 Babel, Webpack, ESLine 등 여러 가지 도구를 사용할 필요가 있다. 이때 Node.js와 npm이 필요하다.

  • 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js다.
  • npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI를 제공한다.

Node.js REPL

Node.js가 제공하는 REPL(Read Eval Print Loop)을 사용하면 간단한 자바스크립트 코드를 실행해 결과를 확인해 볼 수 있다.
node 명령어로 실행한다.

자바스크립트 파일 실행

  • node 파일이름을 터미널에 입력하면 node.js 환경에서 해당 JS 파일을 실행시킨다. Code Runner 익스텐션도 node.js 환경을 기반으로 한다.
    • 그렇기 때문에 Web API는 위와 같은 방법으로 사용할 수 없다.
  • 클라이언트 사이드 Web API가 포함된 자바스크립트 코드를 실행하려면 브라우저 환경에서 실행해야 한다. Live Server 익스텐션은 소스코드를 수정할 때마다 수정 사항을 브라우저에 자동 반영해준다.

eslint 설정

4장 변수

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

자바스크립트 엔진이 10 + 20이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 즉 피연산자를 기억한다.
컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있는대, CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.
각 셀은 고유의 메모리 주소를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며, 0부터 시작해서 메모리 크기만큼 정수로 표현된다.

위 예제의 숫자 값 10과 20은 메모리 상의 임의의 위치(메모리 주소)에 기억되고 CPU는 이 값을 읽어들여 연산을 수행한다. 연산 결과로 생성된 30도 메모리 상의 임의의 위치에 저장된다.
이렇게 생성된 데이터를 재사용 하기 위해서는 해당 데이터가 저장된 메모리 공간에 직접 접근해야 한다.

하지만 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높기 때문에 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.
직접적인 메모리 제어를 허용하더라도 값이 저장될 메모리 주소는 메모리 상황에 따라 임의로 결정되기 때문에 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 수 없다.
따라서 메모리 주소를 통해 값에 직접 접근하려는 시도는 올바른 방법이 아니다.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

  • 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다.
  • 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다.
  • 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수명이라고 하고, 변수에 저장된 값을 변수 값이라고 한다.
  • 변수에 값을 저장하는 것을 할당이라 하고, 저장된 값을 읽어 들이는 것을 참조라 한다.
  • 변수에 저장된 값의 의미를 파악할 수 있는 변수 이름은 가독성을 높인다.
    • 명확한 네이밍을 해서 코드를 이해하기 쉽게 만들어야 한다.

식별자

  • 변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
  • 식별자는 메모리 공간에 저장되어 있는 값을 구별해서 식별해낼 수 있어야 하므로, 어떤 값이 저장되어 있는 메모리 주소를 기억해야 한다.
  • 변수, 함수, 클래스 등 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.
  • 식별자는 네이밍 규칙을 준수해야 하며, 선언에 의해 JS 엔진에 식별자의 존재를 알린다.

변수 선언

변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것

  • 확보된 메모리 공간은 확보가 해제 되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.
  • 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다.
  • var 키워드는 여러 단점이 있는데 그 중 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것
    • 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다.
  • ES6는 기본적으로 하위 호환성을 유지하면서 ES5의 기반 위에 새로운 기능을 추가한 것이다.
    • ES6는 ES5의 superset이다.
var score; // 변수 선언
  • 위와 같이 코드를 작성하면 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다.
  • 선언 이후, 변수에 값을 할당하지 않으면 확보된 메모리 공간에는 JS 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다. 이것은 JS의 특징이다.

JS 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행한다.

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

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

  • var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다.
  • var 키워드로 선언한 변수는 어떠한 값을 할당하지 않아도 undefined라는 값을 갖게 된다.
  • 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있다.
    • 이러한 값을 쓰레기 값이라고 한다.
    • 자바스크립트의 var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안잔하다.
  • 식별자를 사용하려면 반드시 선언이 필요하다. 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.

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

console.log(name); // undefined
var name; // 변수 선언문

JS 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 변수를 참조하는 시점에 name 변수의 선언이 되지 않았으므로 참조 에러가 발생할 것처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다. -> 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

  • JS 엔진은 코드를 실행하기에 앞서 소스코드 실행을 위한 준비 단계인 평가 과정에서 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
  • 소스코드 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
  • 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 변수 호이스팅이라 한다.
  • 변수 선언뿐 아니라 var, let, const, function, class 키워드를 사용해서 선언되는 모든 식별자는 호이스팅된다.

값의 할당

변수에 값을 할당할 때는 할당 연산자를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

var score; // 변수 선언
score = 80; // 값의 할당

변수 선언과 값의 할당을 하나의 문으로 단축 표현할 수도 있다.

var score = 80;
  • JS 엔진은 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행하기 때문에 위의 두 예제는 정확히 동일하게 동작한다.
  • 다만 변수 선언은 런타임 이전에 먼저 실행되지만 값의 할당은 런타임에 실행된다.
  • 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있는 메모리 공간을 지우고 그 메모리 공간에 할당 값 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 값을 저장하는 것이다.

값의 재할당

  • 재할당은 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것이다.
  • var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 변수에 처음 값을 할당하는 것도 재할당이다.
  • 만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다.
  • 재할당되기 이전의 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

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

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

  • C언어 같은 언매니지드 언어는 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free() 같은 저수준 메모리 제어 기능을 제공한다.
    • 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만 반대의 경우 치명적 오류를 생산할 가능성도 있다.
  • 자바스크립트 같은 매니지드 언어는 메모리 관리 기능을 언어 차원에서 담당하고 개발자의 직접적인 메모리 제어를 허용하지 않는다.
    • 역량에 의존하는 부분이 작아져 일정한 생산성을 확보할 수 있지만, 성능 면에서 어느 정도의 손실이 있을 수 있다.

식별자 네이밍 규칙

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
  • 단, 식별자를 숫자로 시작하는 것은 허용하지 않는다.
  • 예약어는 식별자로 사용할 수 없다.
  • 식별자를 만들 때 유니코드 문자를 허용하지만 바람직하지 않으므로 권장하지 않는다.
  • 자바스크립트는 대소문자를 구별하므로 같은 단어여도 대소문자가 다르다면 별개로 구분된다.
  • 변수 이름은 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 한다.
  • 변수 선언에 별도 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것이다.
  • 네이밍 컨벤션은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다.

5장 표현식과 문

값

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

  • 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.
  • 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.
  • 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.
  • 변수에 할당되는 것은 값이기 때문에 10 + 20은 할당되기 이전에 평가되어 값을 생성해야 한다.

리터럴

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

  • 숫자 리터럴 3을 코드에 기술하면 JS 엔진은 이를 평가해 숫자 값 3을 생성한다.
  • JS 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

표현식

값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

  • 리터럴도 값으로 평가되기 때문에 표현식이다.
  • 변수 식별자를 참조하는 것도 값으로 평가되기 때문에 표현식이다. -> 즉 값으로 평가될 수 있는 문은 모두 표현식
  • 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있어서, 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

문

프로그램을 구성하는 기본 단위이자 최소 실행 단위

  • 문의 집합으로 이뤄진 것이 바로 프로그램이고, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.
  • 문은 여러 토큰으로 구성된다.
    • 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.
    • ex) 키워드, 식별자, 연산자, 리터럴, 특수 기호 등
  • 문을 명령문이라고 부르기도 한다.
  • 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.

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

세미콜론은 문의 종료를 나타낸다.

  • JS 엔진은 세미콜론으로 문의 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
  • 문이 끝나면 세미콜론을 붙여야 하지만, 함수나 반복문 같은 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 세미콜론을 붙이지 않는다.
  • JS엔진이 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능이 암묵적으로 수행되기 때문에 생략 가능하다.
  • 하지만 세미콜론 자동 삽입 기능 동작과 개발자의 예측이 일치하지 않는 경우가 간혹 있다.

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

표현식인 문은 값으로 평가될 수 있는 문이고, 표현식이 아닌 문은 값으로 평가될 수 없는 문이다.

  • 둘을 구별하는 가장 간단한 방법은 변수에 할당해 보는 것이다.
  • 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있지만, 표현식이 아닌 문을 변수에 할당하면 에러가 발생한다.
  • 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined를 출력하는데, 이를 완료값이라 한다.
    • 완료값은 표현식의 평가 결과가 아니다.

태그:

카테고리:

업데이트:

참고