rustandbone Developer

모던 JS deep dive 2회차 챕터 1~4

18 Jan 2024

모던 JS deep dive 2회차

introduction

10월 10일에 시작한 스터디가 1월 19일로 마무리 되었다.
챕터를 나눠서 담당 부분을 정리하고 발표하는 식으로 진행했다.
서로가 잘 나눠서 한 덕에, 진행이 아주 잘 되었고, 많이 배운 스터디이다.

이번에는 다시 읽으면서 기억해야 할 것을 위주로 챕터별로 정리해보려고 한다.

01. 프로그래밍

1.3 구문과 의미

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

02. 자바스크립트란?

2.3.1 Ajax

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

서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링.

2.3.4 Node.js

2009, 라이언 달이 발표.
Node.js : 구글 V8 자바스크립트 엕진으로 빌드된 자바스크립트 런타임 환경

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

다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용됨. 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API 제공

자바스크립트 엔진 기반 => Node.js 환경에서 동작하는 애플리케이션은 자바스크립트를 사용해 개발. 프론트엔드와 백엔드에서 자바스크립트를 사용할 수 있는 동형성은 별도 언어 학습 시간 덜 수 있는 장점 제공.

비동기 I/O 지원, 단일 스레드 이벤트 루프 기반으로 동착하여 요청 처리 성능이 좋음. I/O가 빈번하게 발생하는 SPA에 적합. CPU 사용률 높은 애플리케이션에는 비권장.

Node.js로 자바스크립트는 범용 프로그래밍 언어가 됨. 프런트엔드 영역, 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리잡음.

크로스 플랫폼을 위한 가장 중요한 언어로 주목 받음.

2.3.5 SPA 프레임워크

모던 웹 애플리케이션은 데스크탑 애플리케이션 만큼의 성능과 사용자 경험을 제공하는 게 필수가 됨
=> 개발 규모, 복잡도 상승
=> 많은 패턴과 라이브러리 출현
=> 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처 구축 어려움
=> 프레임워크 등장

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

2.5 자바스크립트의 특징

자바스크립트는 웹 브라우저에 동작하는 유일한 프로그래밍 언어.
별도의 컴파일 작업 수행하지 않는 인터프리터 언어.
인터프리터는 소스코드 즉시 싷행, 컴파일러는 빠르게 동작하는 머신 코드 생성하고 최적화.

  • 인터프리터 언어
    • 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행
    • 한 줄씩 바이트코드로 변환하고 즉시 실행
    • 코드가 실행될 때마다 인터프리트 과정 반복 수행
    • 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행 => 코드 실행 속도가 비교적 느림
  • 컴파일러 언어
    • 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행
    • 컴파일 단계와 실행 단계 분리. 명시적으로 컴파일 단계 거치고, 명시적으로 실행 파일 실행
    • 컴파일은 단 한 번 수행
    • 컴파일과 실행 단계 분리로, 코드 실행 속도 빠름

자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

구형 브라우저를 고려해야 하면, 바벨 같은 트랜스파일러를 사용해 ES5 이하의 사양으로 다운그레이드할 필요 있음.

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

3.1 자바스크립트 실행 환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진 내장 Node.js도 자바스크립트 엔진 내장

용도가 다름 :
브라우저는 웹페이지를 브라우저 화면에 렌더링하는 게 목적
Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 목적
둘 다 자바스크립트 코어인 ECMAScript 실행 가능하지만 이외에 추가 제공 기능은 호환되지 않음
예) Node.js는 DOM API를 제공하지 않음. 직접 다룰 필요가 없기 때문
브라우저는 파일 생성, 수정하는 파일 시스템 지원하지 않음

  • 브라우저
    • ECMAScript
    • 클라이언트 사이드 Web API(DOM, BOM, Canvas, XMLHttpRequest 등)
  • Node.js
    • ECMAScript
    • Node.js 고유 API

3.3.1 Node.js와 npm 소개

npm(node package manager)은 자바스크립트 패키지 매니저.
Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과
패키지 설치 및 관리를 위한 CLI(Command Line Interface)를 제공

04. 변수

4.1 변수란 무엇인가?

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억.
메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체. 메모리 셀 하나의 크기는 1바이트(8비트), 1바이트 단위로 데이터를 저장하거나 읽어들임
각 셀은 메모리 주소를 가짐. 메모리 주소는 메모리 공간의 위치를 나타내면, 0부터 싲가해서 메모리의 크기만큼 정수로 포현됨

모든 데이터를 2진수로 처리. 데이터 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관없이 모두 2진수로 저장

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름.
상징적 이름인 변수는 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨

  • 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
  • 변수 값 : 변수에 저장된 값
  • 할당(대입, 저장 - assignment) : 변수에 값을 저장하는 것
  • 참조(reference) : 변수에 저장된 값을 읽어들이는 것

4.2 식별자

변수 이름을 식별자(identifier)라고도 함. 어떤 값을 구별해서 식별할 수 있는 고유한 이름.
식별자는 값이 아니라 메모리 주소를 기억하고 있음.
식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미.

4.3 변수 선언

변수 선언 : 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것
확보된 메모리 공간은 확보가 해제(release)되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호됨.

변수 선언에 의해 확보된 메모리 공간은 자바스크립트 엔진에 의해 undefined 값이 암묵적으로 할당되어 초기화됨.

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

변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록됨
실행 컨텍스트 : 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리함. 변수 이름과 변수 값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리됨.

일반적으로 초기화(initialization)란 변수가 선언된 이후 최초로 값을 할당하는 것을 말함. var 키워드로 선언한 변수는 암묵적으로 초기화 수행해 undefined 할당

선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 발생. 등록된 식별자를 찾을 수 없을 때 발생하는 에러.

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

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적 실행.
변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행.

자바스크립트 엔진은 실행 전 소스코드의 평가 과정을 거치면서 소스코드 실행 준비를 함. 이때, 변수 선언을 포험한 모든 선언문을 소스코드에서 찾아내 먼저 실행. 이 과정이 끝나면 모든 선언문을 제외하고 소스코드를 한 줄씩 순차 실행.

변수 선언이 소스코드 어디에 있든지 상관없이 다른 코드보다 먼저 실행.

변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

4.5 값의 할당

변수 선언은 런타임 이전에 먼저 실행
값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됨

4.6 값의 재할당

값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)
상수는 한 번 정해지면 변하지 않는 값. 즉 단 한 번만 할당할 수 있는 변수(undefined 초기화 => 변수값)

  • 자바스크립트는 매니지드 언어
    • 메모리 할당, 해제 같은 관리 기능을 언어 차원에서 담당
    • 개발자의 직접적인 메모리 제어 허용하지 않음
    • 메모리 해제는 가비지 콜렉터 수행 - 개발자 관여 불가

4.7 식별자 네이밍 규칙

식별자는 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름

  • 네이밍 규칙
    • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
    • 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
    • 예약어는 식별자로 사용할 수 없다.

변수에 값을 재할당하면
이전 값이 저장되어 있던 메모리 공간을 지우고 재할당 값을 새롭게 저장하는 것이 아니라
새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장

불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제됨. 언제 해제될지는 예측 불가.

  • 네이밍 컨벤션
    • 카멜 케이스
    • firstName
    • 스네이크 케이스
    • first_name
    • 파스칼 케이스
    • FirstName
  • 일반적으로 변수나 함수에는 카멜 케이스 사용
  • 생성자 함수, 클래스의 이름에는 파스칼 케이스 사용

Related posts