🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 모듈

모듈: 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각, 일반적으로 기능을 기준으로 파일 단위로 분리

자바스크립트는 주로 웹페이지의 보조로서 탄생한 언어이기 때문에, 일반적으로 모듈 기능을 갖고 있는 언어와 다르게 모듈 기능이 존재하지 않았음

물론 클라이언트 사이드의 자바스크립트에선 <script>를 이용하여 여러 js 파일을 로드할 수는 있지만, 파일마다 독립적인 파일 스코프(모듈 스코프)가 없이 그냥 하나의 자바스크립트 파일처럼 작용함<br/> 즉, 엄연히 기능적으로 파일이 구분되어있고 그 파일(모듈)을 불러와서 사용하는 모듈화가 아니었음

ES6모듈(ESM)

ES6에서 추가한 클라이언트 사이드 자바스크립트 모듈 기능<br/>

<script type="module" src="app.mjs"></script>

export

모듈 내부에서 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조 가능<br/> 외부에 공개하기 위해 export 식별자를 사용한다.

// test_export.mjs 파일
export const TEST = 12345;

export function add(a, b) {
  return a + b;
}

import

반대로 다른 모듈에서 공개한 식별자를 사용하기 위해 import를 사용

import { TEST, add } from './test_export.mjs';

네트워크 기본 규칙

• 프로토콜: 네트워크끼리 통신하기 위해 정해놓은 규칙

• OSI모델(OSI 7계층): 네트워크가 데이터를 주고받기 위한 표준 통신 규격

  • 응용 계층(7)
  • 표현 계층(6)
  • 세션 계층(5)
  • 전송 계층(4)
  • 네트워크 계층(3)
  • 데이터 링크 계층(2)
  • 물리 계층(1)

• TCP/IP모델(TCP/IP 4계층): OSI 7계층을 4계층으로 간단화한 규격

  • 응용 계층(4): OSI에서 응용, 표현, 세션
  • 전송 계층(3): OSI에서 전송
  • 인터넷 계층(2): OSI에서 네트워크
  • 네트워크 접속 계층(1): OSI에서 데이터 링크, 물리

• 캡슐화: OSI 7계층에서 표현, 세션 계층을 응용 계층에 포함하여 생각했을 때, 아래의 과정을 캡슐화라고 한다.

  ---

  응용 계층(데이터 전송) -><br/> 전송 계층((전송)헤더 + 데이터 전송) -><br/> 네트워크 계층((네트워크)헤더 + (전송)헤더 + 데이터 전송) -><br/> 데이터링크 계층((네트워크 접속)헤더 + (인터넷)헤더 + (전송)헤더 + 데이터 + 트레일러 전송) -><br/> 물리 계층(전기적 신호로 수신 측에 전송)

  ---

위 과정이 거꾸로 수신 측에서 거꾸로 층을 올라가며 헤더를 해체하는 작업은 역캡슐화

JavaScript 함수 선언문과 함수 리터럴 구분

함수 선언문은 값이 아닌 문이다! 즉, 표현식이 아니다.

function add(a, b) {
  return a + b;
}

그런데 함수를 이런 식으로 표현할 수 있다.

var add = function addMaker(a, b) {
  return a + b;
};

흠... 애매하다. 함수 표현식 같이 생겼는데, 뒤에는 익명이 아닌 기명으로 마치 함수 선언문을 변수 add에 할당하고 있는 것처럼 보인다.<br/> 근데 위에 식은 분명히 작동하고, 그렇다는 것은 우변이 값으로 작용하여 변수에 할당된 게 아닐까 생각할 수 있다.<br/> 위와 같은 상황에서 우변은 (모양은 함수 선언문과 같지만) 함수 리터럴로 해석된다.<br/> 즉, 함수 선언문으로서 해석되는 게 아닌 함수 리터럴로서 해석되는 표현식인 것이다.

{}도 상황에 따라 블록문 혹은 객체 리터럴로 해석될 수 있는 것과 유사!

(function test() {
  console.log('()안에 있는 함수 선언문 모양은 함수 리터럴로 해석됩니다.');
});
test(); // ReferenceError: test is not defined -> 함수가 선언되지 않음

/* 함수 리터럴이기에 즉시 실행 함수가 아래와 같은 모양으로 실행 가능한 것
()안에서의 함수 선언문 모양은 함수 리터럴이기에 그 뒤에 바로 ()를 붙여서 실행해도 } 뒤에 ;가 자동으로 붙지 않는다. */
(function test() {
  console.log('()안에 있는 함수 선언문 모양은 함수 리터럴로 해석됩니다.');
})();

undefined