참조: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

string, number, boolean

JavaScript에서 아주 흔하게 사용되는 세 가지의 원시(기본) 타입으로 string, number, 그리고 boolean이 있다.

let myName: string = "이순신";
let age:number = 35;
let isAdult:boolean = true;

• string은 "이순신"과 같은 문자열 값을 나타낸다.
• number은 35와 같은 숫자를 나타냅니다. JavaScript는 정수를 위한 런타임 값을 별도로 가지지 않으므로, int 또는 float과 같은 것은 존재하지 않는다. 모든 수는 단순히 number이다.
• boolean은 true와 false라는 두 가지 값만을 가진다.
• string, number, boolean은 항상 위와 같이 소문자로 쓴다.
• 타입 표기는 항상 타입의 대상 뒤쪽에 위치한다.

타입 추론

타입스크립트에서는 항상 타입을 지정해야할까? 꼭 그렇진 않다. 가능하다면 TypeScript는 자동으로 코드 내의 타입들을 문맥으로부터 추론하고자 시도하는데, 이를 타입 추론이라고 한다.

아래와 같이 타입을 지정하지 않았을 때

let myName = "Alice";

타입스크립트가 문맥으로부터 그 타입을 추론해낸다.

Any

타입스크립트는 any라고 불리는 특별한 타입을 가지고 있다. 특정 값으로 인해 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있다.

let obj: any = { x: 0 };
// 아래 이어지는 코드들은 모두 오류 없이 정상적으로 실행된다.
// `any`를 사용하면 추가적인 타입 검사가 비활성화되며,
// 개발자가 TypeScript보다 상황을 더 잘 이해하고 있다고 가정한다.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

any 타입을 지정해도 위의 코드의 경우는 아래와 같이 에러는 발생한다.

타입을 지정하지 않았을 때는

타입 검사가 활성화되어 타입스크립트가 개발자에게 다음과 같은 정보를 알려준다.

Property 'foo' does not exist on type '{ x: number; }'.

정리: any 타입은 모든 타입을 허용하고, 해당 값에 대한 추가적인 타입 검사를 수행하지 않는다. 개발자가 타입스크립트보다 상황을 더 잘 이해하고 있다고 가정하고 타입 검사를 수행하지 않고 코드를 실행하기 때문에, any 타입을 남용하면 타입스크립트의 장점을 활용할 수 없으며, 타입 안정성이 떨어질 수 있다...

배열(Array)

타입스크립트이 배열은 아래와 같은 방법으로 타입 지정을 할 수 있다.

let arr1: number[] = [10, 20, 30];
let arr2: Array<number> = [40, 50, 60];
let arr3: string[] = ['이순신', '홍길동', '강감찬'];
let arr4: Array<string> = ['사과', '딸기', '바나나'];

• arr1, arr2 같은 것은 변수명이므로 편한대로(물론, 변수의 역할에 맞는 적절한 네이밍) 지으면 된다.
• 위와 같이 배열 타입을 미리 지정하면 아래와 같은 코드는 에러가 발생한다.

  arr2.push("abc"); // abc는 수가 아니기 때문
  arr4.push(23);   // 123은 문자열이 아니기 때문

함수

TypeScript에서는 함수의 입력 및 출력 타입을 지정할 수 있다.

매개변수 타입

// 매개변수 타입 표기
function greet(name: string) {
  console.log("Hello, " + name.toUpperCase() + "!!");
}
greet("Tom"); // Hello, TOM!!

매개변수에 타입이 표기되었다면, 해당 함수에 대한 인자는 검사가 이루어진다.

greet(34); // Argument of type 'number' is not assignable to parameter of type 'string'.

return 타입

반환 타입은 매개변수 목록 뒤에 표기한다.

function getFavoriteNumber(): number {
  return 26;
}
let num = getFavoriteNumber();
console.log(num); // 26 

변수의 타입 표기와 마찬가지로, 반환 타입은 표기하지 않아도 되는 것이 일반적이다. 왜냐하면 TypeScript가 해당 함수에 들어있는 return 문을 바탕으로 반환 타입을 추론할 것이기 때문이다. 따라서 위 예시에서 사용된 타입 표기는 큰 의미를 갖지 않는다.

• 이 포스팅은 타스린이인 제가 타입스크립트 공부를 위해 정리하는 것입니다. 당연히 내용은 부실할 수 있어요. 😄
• 타입스크립트 정리를 위해 저는 코딩 고수님들의 유튜브 채널들과 타입스크립트 페이지를참고했어요.
  • 코딩애플님 : https://youtu.be/xkpcNolC270
  • 코딩앙마님 : https://youtu.be/5oGAkQsGWkc
    • 타입스크립트 홈 : 타입스크립트

1. 타입스크립트가 뭐죠?

타입스크립트가 무엇인지 이해하기 위해선 자바스크립트의 특징을 알고 있어야 한다.

1.1 자바스크립트 동적 타입의 장단점

var a = 10 - 5; // 5
var b = 10 - '5'; // 5
var c = '10'-5;

자바스크립트로 위와 같이 코딩해보면, 개발자가 별도로 타입을 지정하지 않았음에도 자바스크립트 엔진이 모두 정상적 연산 처리를 해준다. 이는 자바스크립트가 동적 타이핑"(dynamic typing)을 지원하는 프로그래밍 언어이기 때문이다.

다른 정적 타입 언어(예: C++, Java)에서는 변수를 선언할 때 해당 변수가 어떤 데이터 타입을 가지는지 명시적으로 선언해야 한다. 그러나 자바스크립트에서는 변수를 선언할 때 타입을 명시하지 않아도 되며, 실행 중에 변수에 할당되는 값에 따라 자동으로 타입이 결정된다.

let message = "Hello, world!";
console.log(typeof message);  // 출력: "string"

message = 10;
console.log(typeof message);  // 출력: "number"

이러한 동적 타이핑에는 장단점이 있다.

• 장점 : 동적타이핑은 자바스크립트를 유연하고 편리하게 만들어주는 특징 중 하나이다. 이를 통해 개발자는 데이터 타입을 명시적으로 선언하지 않고도 자유롭게 변수를 사용할 수 있다.
• 단점 : 의도하지 않은 동작이 발생할 수도 있다. 따라서 자바스크립트 개발자는 변수의 타입을 주의깊게 관리해야 한다.

소규모 프로젝트에서는 동적타이핑이 문제가 되지 않을 수 있지만, 프로젝트 규모가 커질 수록 수 많은 변수의 동적인 타입을 세심하게 관리하는 것은 결코 쉬운 일은 아닐 것이다.

1.2 타입스크립트(TypeScript)

타입스크립트는 위에서 살펴본 자바스크립트의 동적 타이핑이 가지는 단점을 극복하기 위해 도입되었다. 쉽게 말하면 동적인 타이핑을 보다 엄격하게 정적인 타입으로 지정하여 어플리케이션의 오작동이나 에러를 줄이는 것이다.

타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어이다. 자바스크립트에 정적 타입을 추가한 것으로, JavaScript의 확장된 버전이라고 볼 수 있습니다. 타입스크립트는 자바스크립트 코드와 거의 동일한 구문을 사용하며, 자바스크립트 런타임 환경에서 실행될 수 있습니다.

자바스크립트는 파일명이 xxx.js 인 반면 타입스크립트는 xxx.ts이다. 하지만 브라우저는 직접적으로 ts 파일을 인식하지 못하고 js 파일만 인식하고 실행할 수 있다. 이는 타입스크립트가 자바스크립트로 컴파일되어야만 브라우저에서 실행될 수 있음을 의미한다. ts 파일이 타입스크립트 컴파일러를 거쳐 컴파일되면 js 파일로 변환된다.

아래는 간단한 자바스크립트와 타입스크립트 비교 예시이다.

// test.js
function add(num1, num2) {
  console.log(num1 + num2);
}
add();  // NaN
add(1); // NaN
add(1, 2); // 3
add(3,4,5); // 7
add("Hello", " World"); // Hello World

자바스크립트로 위와 같이 코딩하면 콘솔창에 NaN, 3, 7 등이 출력이 된다.

만약 동일한 코드를 ts 파일로 저장한다면?

위의 이미지에서 보듯이 add(), add(1) 등에 빨간 밑줄이 생기는데 콘솔창에 NaN이 표시되지 않는다. 밑줄이 뜬 자리에 마우스오버를 하면

이런 식으로 에러 내용을 표시해주기 때문에 개발자가 코딩하는 시간에 에러를 바로 확인하고 수정할 수 있다. 그래서 위의 코드를 타입스크립트 형식으로 바꾸면

function add(num1: number, num2: number) :number {
  return num1 + num2;
}
let newNum: number = add(1, 2);
console.log(newNum);

이렇게 사용할 변수의 타입을 명시적으로 지정을 해주고, 만약 return할 것이 있으면 함수의 () 뒤에도 타입을 지정해준다.

이처럼 타입스크립트는 정적 타입 검사를 수행하여 개발자가 코드를 작성하는 과정에서 발생할 수 있는 오류를 사전에 탐지할 수 있다. 정적 타입 검사는 변수, 매개변수, 함수 반환 값 등의 타입을 명시적으로 선언하고, 이에 따라 타입 체크를 수행하여 잠재적인 오류를 찾아낸다.

2. 타입스크립트 간편하게 연습해보기

2.1 TypeScript Playground

링크 : https://www.typescriptlang.org

위 링크로 들어가면 아래와 같은 화면이 나온다.

화면 상단의 메뉴에서 Download를 클릭하면 자신의 프로젝트에 타입스크립트를 설치하는 방법이 나오고, Docs나 HandBook 메뉴를 누르면 타입스크립트에 관한 설명이나 예시 등 참고할 만한 내용이 나온다.

여기서 우리는 Playground 메뉴를 누르자. 그러면 아래와 같은 화면이 나온다.

이 환경의 장점은 타입스크립트로 코딩한 것을 화면의 좌측에서 컴파일된 js 로 바로 바로 확인해볼 수 있다. 코드를 쓰고 "Run"을 누르면 콘솔 로그(Logs)도 확인 가능하다.

2.2 Stackblitz

링크 : https://stackblitz.com

위 링크로 들어가면 아래와 같은 화면이 나온다.

github 아이디로 로그인을 하자.

새로운 프로젝트를 생성하면 아래와 같이 선택할 수 있다.

타입스크립트를 선택하자

이제 타입스크립트 연습을 해볼 수 있다.

자바스크립트에서 배열(Array)은 여러 개의 값을 순차적으로 저장하는 자료구조이다. 배열은 대괄호 []를 사용하여 생성하며, 각 값은 쉼표(,)로 구분된다.

// 빈 배열 생성
const numbers = [];

// 배열에 값 추가
numbers.push(10);
numbers.push(20);
numbers.push(30);

// 배열의 값 접근
console.log(numbers[0]);     // 출력: 10
console.log(numbers[1]);     // 출력: 20
console.log(numbers[2]);     // 출력: 30

// 배열의 값 변경
numbers[1] = 50;
console.log(numbers);        // 출력: [10, 50, 30]

// 배열의 길이
console.log(numbers.length); // 출력: 3

// 배열 순회(iteration)
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// 배열 메소드 활용
numbers.pop();               // 배열의 마지막 요소 제거
console.log(numbers);        // 출력: [10, 50]
numbers.reverse();           // 배열 요소 순서 뒤집기
console.log(numbers);        // 출력: [50, 10]

배열은 동일한 데이터 유형의 값을 저장하는데 사용되며, 값의 인덱스는 0부터 시작한다. 배열의 각 요소는 0부터 시작하는 인덱스를 사용하여 접근할 수 있다. 배열의 길이는 length 속성을 통해 알 수 있으며, push() 메소드를 사용하여 배열의 끝에 값이 추가된다.

배열은 다양한 메소드를 가지고 있어 배열을 조작하고 데이터를 검색, 정렬, 변환하는 등의 작업을 수행할 수 있다.

2. forEach

forEach() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하며, 요소의 인덱스와 값을 인자로 받는다. forEach() 메소드는 원본 배열을 변경하지 않고 단순히 각 요소에 대한 작업을 수행한다.

numbers.forEach(function(element) {
  console.log(element);
});

배열의 인덱스 정보를 가져오기 위해선 아래와 같이 사용하면 된다.

numbers.forEach(function(element, index) {
  console.log(index, element);
});

화살표 함수를 사용할 때는

numbers.forEach((element, index) => {
  console.log(index, element);
});

3. map

map() 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 각 함수 호출의 결과를 새로운 배열로 반환한다. 따라서 map() 메소드를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 생성할 수 있다.

const newNumbers1 = numbers.map(function(element) {
  return element * 2;
});
console.log(newNumbers1);  // 출력: [100, 20] 위 코드에서 reverse() 메소드가 적용이 되었다.

화살표 함수를 사용하면 더 간결하게 출력할 수 있다.

const newNumbers2 = numbers.map(element => element * 2);
console.log(newNumbers2);  // 출력: [100, 20] 위 코드에서 reverse() 메소드가 적용이 되었다.

자바스크립트에서 Object는 key-value 쌍으로 구성된 데이터를 나타내는 자료형이다. Object는 중괄호 {}를 사용하여 생성하며, 각 key와 value는 콜론(:)으로 구분된다.

// 빈 Object 생성
const obj = {};

// Object에 key-value 추가
obj.name = "John";
obj.age = 30;
obj.isStudent = false;

// Object의 값 접근
console.log(obj.name);       // 출력: "John"
console.log(obj.age);        // 출력: 30
console.log(obj.isStudent);  // 출력: false

// Object의 값 변경
obj.age = 35;
console.log(obj.age);        // 출력: 35

// Object에서 key-value 삭제
delete obj.isStudent;
console.log(obj); // { "name": "John", "age": 35 }

Object는 다양한 데이터 유형을 포함할 수 있으며, value로는 숫자, 문자열, 불리언 값, 배열, 또 다른 Object 등을 포함할 수 있다.

Object의 key와 value는 아래와 같이 초기화할 수도 있다.

const person = {
  name: "Alice",
  age: 25,
  sayHello: function() {
    console.log("안녕하세요!");
  }
};

console.log(person.name);     // 출력: "Alice"
console.log(person.age);      // 출력: 25
person.sayHello();            // 출력: "안녕하세요!"

Object는 매우 유연하고 다양한 용도로 사용될 수 있는 자료형이다. 프로퍼티를 추가, 수정, 삭제하여 데이터를 동적으로 관리하거나 객체의 속성과 메소드를 활용하여 다양한 작업을 수행할 수 있다.

2. Property

프로퍼티(property)는 Object 내에서 key와 value의 쌍으로 구성된 하나의 항목을 의미한다. Object는 프로퍼티의 집합이며, 각각의 프로퍼티는 Object 내에서 고유한 식별자인 key를 가지고 해당 key에 연결된 값(value)을 가진다.

프로퍼티는 다양한 데이터 유형을 포함할 수 있으며, value로는 숫자, 문자열, 불리언 값, 배열, 또 다른 Object 등이 가능하다. 또한, Object 내에서 함수를 가지는 프로퍼티를 가지면 이를 메소드(method)라고도 부른다.

상속은 객체 지향 프로그래밍에서 객체 간의 코드 및 속성을 공유하기 위한 메커니즘이며, 보통은 상위와 하위 객체의 관계를 부모-자식 관계에 빗대어 표현한다. 다른 말로 하면, 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이 아닌 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다. 아래는 자바스크립트에서의 상속을 구현한 짧은 코드이다.

function Person(name) {
  this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function () {
  return 'My name is ' + this.name;
}
var p1 = new Person("Lee"); // My name is Lee
console.log(p1.introduce());

function Employee(name, position){ 
  this.name = name;
  this.position=position;
}

Employee.prototype = new Person();
Employee.prototype.getDetails = function() {
  return this.introduce() + ' and I work as a ' + this.position;
};

var emp = new Employee('John Doe', 'Manager');
console.log(emp.getDetails()); // My name is John Doe and I work as a Manager

Employee이라는 생성자를 만든 뒤, 이 생성자의 prototype과 Person의 객체를 연결했더니 Employee 객체도 메소드 introduce를 사용할 수 있게 되었고, 자신만의 프로퍼티도 사용할 수 있게 되었다. 그 결과 "My name is John Doe and I work as a Manager" 이 콘솔에 출력되었다. 좀더 자세히 설명하자면,

1. Person 생성자 함수:

   function Person(name) {
   this.name = name;
   }
   Person.prototype.name=null;
   Person.prototype.introduce = function () {
   return 'My name is ' + this.name;
   }

• Person 생성자 함수는 name 인자를 받아서 this.name 속성을 설정한다.
• Person.prototype에 name 속성을 null로 초기화하고, introduce 메서드를 정의한다. introduce 메서드는 객체의 이름을 반환하는 문자열을 생성한다.

2. p1 객체:

   var p1 = new Person("Lee"); // My name is Lee
   console.log(p1.introduce());

• new Person("Lee")를 통해 Person 생성자 함수를 호출하여 p1 객체를 생성한다.
• p1 객체는 name 속성이 "Lee"로 설정되며, introduce 메서드를 상속받아 실행하면 "My name is Lee" 문자열을 반환한다.

3. Employee 생성자 함수:

   function Employee(name, position){ 
   this.name = name;
   this.position=position;
   }

• Employee 생성자 함수는 name과 position 두 개의 인자를 받아서 this.name과 this.position 속성을 설정한다.

4. Employee.prototype 설정:

   Employee.prototype = new Person();

• Employee.prototype을 new Person()을 통해 Person 객체의 인스턴스로 설정한다. 이를 통해 Employee 객체는 Person 객체의 속성과 메서드를 상속받는다.

5. getDetails 메서드:

   Employee.prototype.getDetails = function() {
   return this.introduce() + ' and I work as a ' + this.position;
   };

• Employee.prototype에 getDetails 메서드를 정의한다.
• getDetails 메서드는 introduce 메서드를 호출하여 현재 객체의 이름을 가져온 뒤, position 속성과 함께 문자열을 생성하여 반환한다.

6. emp 객체:

   var emp = new Employee('John Doe', 'Manager');
   console.log(emp.getDetails()); // My name is John Doe and I work as a Manager

• new Employee('John Doe', 'Manager')를 통해 Employee 생성자 함수를 호출하여 emp 객체를 생성한다.
• emp 객체는 name 속성이 "John Doe"로 설정되고, position 속성이 "Manager"로 설정된다.
• emp 객체는 Person 객체의 introduce 메서드를 상속받아 실행하면 "My name is John Doe" 문자열을 반환하며, getDetails 메서드를 실행하면 "My name is John Doe and I work as a Manager" 문자열을 반환한다.

이상의 상속과 관련하여 중요한 개념은 프로토타입(prototype)과 프로토타입 체인(prototype chain)이다. 위의 코드를 좀더 이해하기 위해선 이 두 개념에 대해 알아야 한다.

2. 프로토타입 / 프로토타입 체인

프로토타입(prototype)은 객체 지향 프로그래밍에서 객체 간의 상속과 프로퍼티 공유를 구현하기 위한 메커니즘이다.

모든 JavaScript 객체는 프로토타입을 가지며, 프로토타입은 다른 객체로써 동작할 수 있다. 프로토타입은 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체이며, 생성자로 사용될 함수도 객체이다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티이다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 객체는 프로토타입을 통해 프로퍼티와 메서드를 상속받고, 이를 통해 코드의 재사용성과 구조화를 촉진할 수 있다.

객체를 생성할 때, 객체 리터럴 {}이나 new 키워드를 사용하여 생성한 객체는 기본적으로 Object.prototype을 프로토타입으로 가진다. 즉, 모든 객체는 Object.prototype에 정의된 메서드와 프로퍼티를 상속받는다. 예를 들어, toString()이나 hasOwnProperty()과 같은 메서드는 Object.prototype에 정의되어 있으며, 모든 객체가 이를 사용할 수 있다.

프로토타입을 이해하기 위해 아래 예시를 보자.

function Ultra(){};
Ultra.prototype.ultraProp = true;

function Super(){}; 
Super.prototype = new Ultra();

function Sub(){};
Sub.prototype = new Super();

var o = Sub();
console.log(o.ultraProp); //true

생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

프로토타입(prototype)은 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다

이 포스팅은 다음의 사이트에서 IaaS, PaaS, SaaS와 관련된 내용을 번역한 것입니다. https://www.redhat.com/en/topics/cloud-computing/iaas-vs-paas-vs-saas

Overview

IaaS, PaaS, SaaS 각각의 차이점은 무엇인가요? 일단 약어들 안에 공통점을 파악하는 것부터 시작해봅시다. "As-a-service"는 일반적으로 제3자가 제공하는 클라우드 컴퓨팅 서비스를 의미하며, 이를 통해 코드 작성과 고객과의 관계 같이 당신에게 더 중요한 것에 집중할 수 있습니다. 각각의 클라우드 컴퓨팅 유형은 사용자가 관리해야 하는 "온프레미스 인프라"(on-premise infrastructure)➀를 점점 더 줄여줍니다.

On-premise infrastructure 에 대한 설명은 하단에 있습니다.

온프레미스 IT 인프라는 사용자 및 관리자로서 가장 큰 책임 수준을 요구합니다. 하드웨어와 소프트웨어가 모두 온프레미스에 있는 경우, 각 구성 요소를 필요에 따라 관리, 업데이트 및 교체하는 것은 사용자와 해당 팀에 달려 있습니다. 클라우드 컴퓨팅이 제공하는 것은 인프라의 일부 또는 전부를 제3자의 관리로 할당하여 사용자가 다른 일에 집중할 수 있도록 하는 것입니다.

클라우드 컴퓨팅의 주요한 3가지 서비스 유형은 인프라스트럭처 서비스 (infrastructure-as-a-service, IaaS), 플랫폼 서비스 (platform-as-a-service, PaaS) 및 소프트웨어 서비스 (software-as-a-service, SaaS)입니다.

각 유형의 모델과 이들의 장점, 그리고 이들을 모두 활용하여 모든 요구 사항을 충족시키는 클라우드 컴퓨팅 환경을 구축하는 방법에 대해 알아보겠습니다. 또한 이를 이해하는 데 도움이 될 몇 가지 예시도 살펴보겠습니다.

IaaS

Infrastructure-as-a-service, or IaaS는 온프레미스 인프라에서 한 걸음 뒤로 물러난 모델입니다. d이는 클라우드나 인터넷을 통해 필요에 따라 제3자가 스토리지 및 가상화와 같은 인프라 서비스를 제공하는 종량제 서비스➂입니다.

사용자로서, 운영 체제와 데이터, 응용 프로그램, 미들웨어 및 런타임에 대한 책임은 여전히 사용자에게 있지만, 제공 업체는 사용자가 필요로 하는 네트워크, 서버, 가상화 및 스토리지에 대한 액세스와 관리를 제공합니다.

제공 업체가 대신 유지 및 업데이트를 해주므로 사용자는 자체 온사이트 데이터 센터(on-site datacenter)를 유지하거나 업데이트할 필요가 없습니다. 사용자는 응용 프로그래밍 인터페이스(API) 또는 대시보드를 통해 인프라에 액세스하고 제어할 수 있습니다.

IaaS는 필요한 구성 요소만 구매하고 필요에 따라 확장하거나 축소할 수 있는 유연성을 제공합니다. 비용 부담이 적고 유지 보수 비용이 없어 매우 경제적인 옵션입니다.

IaaS를 사용하는 한 가지 방법은 신속하고 유연하게 개발 및 테스트 환경을 구축하고 제거하는 것입니다. 필요한 인프라만 사용하여 개발 환경을 생성하고 필요한 기간 동안 확장 또는 축소할 수 있으며, 작업을 완료하면 필요한 만큼만 사용하여 지불할 수 있습니다.

IaaS의 주요 단점은 제공자의 보안 문제, 여러 클라이언트와 인프라 리소스를 공유해야 하는 멀티 테넌트 시스템(multi-tenant systems)➃, 그리고 서비스 안정성 등의 가능성입니다. 이러한 단점은 신뢰할 수 있고 신뢰성이 높으며 견고한 역사와 평판을 갖춘 신뢰할 수 있는 제공자를 선택함으로써 회피할 수 있습니다.

AWS, Microsoft Azure, Google Cloud와 같은 공개 클라우드 제공자(Public cloud providers)가 IaaS의 예시입니다.

PaaS

플랫폼 서비스 (PaaS)는 전체적인 온프레미스 인프라 관리로부터 한 걸음 더 나아간 모델입니다. 이는 제공 업체가 자체 인프라에 하드웨어와 소프트웨어를 호스팅하고, 이 플랫폼을 통합 솔루션, 솔루션 스택 또는 서비스로 사용자에게 제공하는 것을 의미합니다.

주로 개발자와 프로그래머를 위해 유용한 PaaS는 사용자가 인프라나 플랫폼을 직접 구축하고 유지 관리할 필요 없이 자체 앱을 개발, 실행 및 관리할 수 있게 해줍니다.

사용자는 코드를 작성하고 앱을 구축하고 관리하지만, 소프트웨어 업데이트나 하드웨어 유지보수와 같은 번거로움 없이 수행할 수 있습니다. 개발 및 배포 환경이 제공됩니다.

PaaS는 개발자가 웹 기반 애플리케이션을 구축하고 사용자 정의할 수 있는 프레임워크를 생성할 수 있는 방법입니다. 개발자는 내장된 소프트웨어 구성 요소를 사용하여 애플리케이션을 생성할 수 있으며, 이는 직접 작성해야 하는 코드 양을 줄여줍니다.

PaaS의 몇 가지 예시로는 AWS Elastic Beanstalk, Heroku, Red Hat OpenShift 등이 있습니다.

SaaS

소프트웨어 서비스(SaaS) 또는 클라우드 애플리케이션 서비스는 웹 브라우저를 통해 제공자가 관리하는 전체 애플리케이션을 제공하는 가장 포괄적인 형태의 클라우드 컴퓨팅 서비스입니다.

소프트웨어 업데이트, 버그 수정 및 일반적인 소프트웨어 유지보수는 제공자에 의해 처리되며, 사용자는 대시보드나 API를 통해 앱에 연결합니다. 개별 컴퓨터에 소프트웨어를 설치할 필요가 없으며, 프로그램에 대한 그룹 액세스가 원활하고 신뢰성이 높아집니다.

예를 들어, 만약 당신이 Outlook 또는 Gmail과 같은 웹 기반 서비스의 이메일 계정이 있는 경우, 어디서든지 컴퓨터에 로그인하여 이메일을 받을 수 있기 때문에 당신은 이미 SaaS의 형태에 익숙합니다.

SaaS는 소프트웨어 설치와 업데이트를 처리할 충분한 인력이나 대역폭이 없는 소규모 기업들에게 좋은 옵션입니다. 또한 많은 사용자 정의가 필요하지 않거나 주기적으로만 사용되는 애플리케이션에도 적합합니다.

그러나 SaaS는 시간과 유지보수 비용을 절약해 주지만, 제어, 보안 및 성능 측면에서 손실이 발생할 수 있으므로 신뢰할 수 있는 제공자를 선택하는 것이 중요합니다.

Dropbox, Salesforce, Google Apps, Red Hat Insights 등이 SaaS의 몇 가지 예시입니다.

📗 용어 정리

이것은 위의 본문에 나온 용어들 중 부연설명이 필요해보이는 것을 필자가 따로 정리한 부분입니다.

➀ on-premise (또는 on-premise IT infrastructure)

"On-premise" 또는 "On-premise IT infrastructure"는 클라우드 컴퓨팅과 대조되는 개념으로 사용되는 용어이다. On-premise은 "사내" 또는 "현장"이라는 의미를 가지며, On-premise IT infrastructure는 기업이나 조직이 자체적으로 보유하고 운영하는 서버, 스토리지, 네트워크, 데이터센터 등의 IT 인프라를 가리킨다. 이러한 인프라는 조직의 내부 시설에 구축되어 있으며, 직접 관리하고 유지보수해야 한다.

On-premise IT infrastructure의 특징은 다음과 같다.

• 자체 소유: 기업이 서버, 스토리지, 네트워크 장비 등의 IT 인프라를 구입하고 소유한다.
• 자체 운영: 기업은 IT 인프라의 설치, 관리, 유지보수, 보안 등을 직접 담당한다.
• 물리적인 제어: IT 인프라가 기업의 물리적인 공간에 위치하므로 보안 및 데이터 관리 등에 대한 직접적인 통제가 가능하다.
• 초기 투자 비용: On-premise 인프라를 구축하기 위해서는 초기적인 투자 비용이 필요하다.
• 확장성 제한: 기업은 자체 인프라에 따라 확장이나 스케일링 작업을 수행해야 하므로 유연성이 상대적으로 제한될 수 있다.

➁ on-site

"on-site"와 "on-premise"는 유사한 의미를 갖지만 약간의 차이가 있다.

"on-site"는 특정한 장소나 현장에서 직접적으로 작업이 이루어지는 것을 의미미한다. 예를 들어, "on-site meeting"은 회의가 특정 장소에서 직접적으로 개최되는 것을 의미한다.

따라서 "on-premise"는 주로 IT 인프라 관점에서 사용되는 용어이며, "on-site"는 다양한 작업이나 회의 등을 직접적으로 특정 장소에서 수행하는 것을 의미하는 용어이다.

➂ pay-as-you-go service

사용자가 실제로 사용한 만큼만 비용을 지불하는 방식

➃ 멀티 태넌트 시스템(multi-tenancy, multi-tenant systems)

mutli-tenancy는 여러 개의 독립적인 고객 또는 사용자가 동일한 IT 인프라를 공유하여 사용하는 아키텍쳐이다. 클라우드 컴퓨팅 환경에서 주로 사용되는 개념이다.

멀티 테넌트 시스템에서는 각 고객 또는 사용자가 자체적으로 독립된 환경과 데이터를 가지고 있지만, 하나의 공유된 인프라를 사용하여 운영된다. 이러한 인프라는 가상화 기술을 사용하여 여러 고객의 요구를 동시에 처리하고 격리된 환경을 제공한다.

이러한 방식은 비용 절감과 자원 효율성을 제공하며, 다수의 고객이 공유 인프라를 효과적으로 활용할 수 있다. 그러나 공유된 인프라로 인해 보안 및 성능의 문제가 발생할 수 있으므로, 신뢰할 수 있는 제공자의 적절한 보안 및 격리 메커니즘을 갖춘 시스템이 필요하다.

• 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
• 이 포스팅은 위 사이트의 클로져 설명 페이지의 일부를 그대로 가져온 것입니다.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

어휘적 범위 지정(Lexical scoping)

 function init() {
   var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
   function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
   }
   displayName();
}
init();

init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()가 자신만의 name변수를 가지고 있었다면, name대신 this.name을 사용했을 것이다.

위 코드를 실행하면 displayName() 함수 내의 alert()문이 부모 함수에서 정의한 변수 name의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.

let과 const를 사용한 범위 지정

ES6 이전 전통적인 JavaScript에는 함수 스코프와 전역 스코프 두 가지만 존재했다. var로 선언한 변수는 함수 내부 또는 외부에서 선언되었는지에 따라 함수 스코프 또는 전역 스코프를 가진다. 이때, 중괄호로 표시된 블록이 스코프를 생성하지 않는다는 점에서 혼란을 일으킬 수 있다.

if (Math.random() > 0.5) {
    var x = 1;
} else {
    var x = 2;
}
console.log(x);

C나 Java와 같이 블록이 스코프를 생성하는 언어의 경우, 위 코드의 console.log 라인에서 x가 어떤 블록 스코프에도 포함되지 않기 때문에 에러가 발생해야 할 것이다. 그러나 블록은 var로 선언한 변수에 대해 스코프를 생성하지 않기 때문에 여기서 var 명령문은 전역 변수를 생성한다. 이것을 클로저와 함께 사용했을 때 어떤 버그가 발생할 수 있는지 실제 예제가 아래 소개되어 있다.

ES6에서 JavaScript는 블록 스코프 변수를 생성할 수 있도록 let과 const 선언과 함께 시간상 사각지대 등을 도입했다.

if (Math.random() > 0.5) {
    const x = 1;
} else {
    const x = 2;
}
console.log(x); // ReferenceError: x is not defined

요약하자면, ES6부터 블록은 스코프로 취급되기 시작했지만, 이는 let과 const로 변수를 선언했을 때만 유효하다. 또한, ES6에서 모듈을 도입하면서 또 다른 스코프를 제공하게 되었다. 추후 소개하겠지만, 클로저는 이 모든 스코프의 변수를 캡처할 수 있다.

클로저(Closure)

이제 다음 예제를 보자:

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc(); 
    //리턴된 displayName 함수를 실행(name 변수에 접근)

이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 것이다.

한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. makeFunc() 실행이 끝나면(displayName함수가 리턴되고 나면) name 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.

하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, myFunc은 makeFunc이 실행 될 때 생성된 displayName 함수의 인스턴스에 대한 참조다. displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 alert 에 전달된다.

다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:

function makeAdder(x) {
  var y = 1;
  return function(z) {
    y = 100;
    return x + y + z;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

이 예제에서 단일 인자 x를 받아서 새 함수를 반환하는 함수 makeAdder(x)를 정의했다. 반환되는 함수는 단일인자 z를 받아서 x와 y와 z의 합을 반환한다.

본질적으로 makeAdder는 함수를 만들어내는 공장이다. 이는 makeAdder함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 add5, add10 두 개의 새로운 함수들을 만들기 위해 makeAdder함수 공장을 사용했다. 하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다.

add5와 add10은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 add5의 맥락적 환경에서 클로저 내부의 x는 5 이지만 add10의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는것이 아니라는 것을 의미한다.

... 후략 ...

이어지는 자세한 내용은 다음의 사이트를 참고하세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

• 함수 스코프 : 이와 관련 설명은 이전 포스팅(스코프)
• 값을 재할당 가능
• 초기화하지 않아도 됨
• 이미 선언된 변수에 재선언 가능

1.1 예시

var 는 기본적으로 함수 스코프를 가진다. 그리고 초기화 하지 않고 사용할 수 있으며 var 로 선언한 변수명을 재사용 할 수 있다.(재할당 가능) 아래는 이에 대한 간략한 예시이다.

var variable1;
variable1 ="(var) 초기화된 값1";
console.log(variable1);
function printV(){
  variable1 ="(var) 초기화된 값2";
 console.log(variable1);
}
var variable1 = "(var) 초기화된 값3";
console.log(variable1);
printV();

1.2 결과

• 최초에 variable1 란 이름으로 변수를 선언했고 var 키워드를 붙였다. 하지만 첫 선언시에는 초기화를 하지 않았다.
• var는 재할당이 가능하기 때문에 함부 바깥에서 한번, 내부에서 한번 값을 재할당했을 때 콘솔에 값이 정상적으로 출력된다. 또한 같은 변수명을 재선언하는 것이 가능하다.

1.3 var의 호이스팅(Hoisting)

🧐 호이스팅이란?

영어 동사 "hoist"의 사전적 의미는 아래와 같다.

1. [동사] (흔히 밧줄이나 장비를 이용하여) 들어[끌어]올리다
2. [명사] (화물장애인을 들어올리기 위한) 승강 장치 출처: 네이버사전

자바스크립트에서 호이스팅이란 변수와 함수 선언(var, let, const, function 등)이 스코프의 최상단으로 끌어올려지는 동작 을 말한다. 스코프의 최상단으로 끌어올려진다는 것은 무슨 의미인가? 또 이러한 호이스팅은 왜 필요한가?

호이스팅은 자바스크립트 엔진이 동작하는 과정 중 하나로, 자바스크립트 엔진은 코드를 실행하기 전에 두 번의 단계를 거친다.

1. 컴파일 단계(Compilation Phase) : 코드를 해석하고 실행 가능한 형태로 변환하는 단계이다. 이 단계에서 변수와 함수 선언을 메모리에 등록하고, 스코프를 생성한다.(이때 호이스팅이 이루어진다.)
2. 실행 단계(Execution Phase) :컴파일 단계에서 생성된 코드를 실행하는 단계이다. 변수 할당 및 계산, 함수 호출 등이 이루어진다.

호이스팅은 컴파일 단계에서 변수와 함수 선언을 메모리에 등록하는 과정으로, 변수나 함수 선언을해당 스코프의 최상단으로 끌어올림으로써 변수와 함수를 선언하기 전에 사용할 수 있는 효과를 갖게 된다. 하지만 호이스팅은 실제 코드의 순서를 변경하는 것이 아니라 자바스크립트 엔진이 코드를 해석하는 과정에서 수행되는 것이다.

[ 호이스팅 사용 예시 ]

• 호이스팅은 함수 선언을 스코프의 최상단으로 끌어올리므로, 함수를 선언하기 전에 호출할 수 있다.

  greet();
  function greet() {
  console.log("Hello!");
  }

• 하지만 아래 코드는 TypeError가 발생한다. 호이스팅은 변수 선언만 끌어올리고, 초기화는 끌어올리지 않기 때문이다.(매우 중요!!)

  greet(); // TypeError: greet is not a function
  var greet = function() {
  console.log("Hello!");
  };

• 아래처럼 블록 내에서 선언된 변수도 블록 외부에서 접근할 수 있다. 호이스팅으로 인해 변수 선언이 해당 스코프의 최상단으로 끌어올려지기 때문이다.

  var x = 1;
  

if (x === 1) { var y = 2; } else { var y = 3; }

console.log(y); // 2

호이스팅은 적절하게 활용하면 유용할 수 있지만, 코드의 가독성을 저해할 수 있으며 예상치 못한 동작을 초래할 수 있다. 아래의 var의 호이스팅 예시를 통해 구체적으로 알아보자.

```javascript
console.log(myVariable); // undefined
var myVariable = "Hello, world!";
console.log(myVariable); // "Hello, world!"

위 코드의 첫줄에서 myVariable 은 선언된 적이 없다. 하지만 콘솔에서는 에러 메세지가 아니라 "undefined"가 출력된다. 이는 호이스팅 때문으로, 호이스팅에 의해 선언부가 스코프의 최상단으로 끌어올려진다. 따라서 위의 코드를 자바스크립트 엔진이 호이스팅 매커니즘을 통해 아래와 같이 해석한다.

var myVariable;
console.log(myVariable); // undefined
var myVariable = "Hello, world!";
console.log(myVariable); // "Hello, world!"

위에서 언급했지만, 이는 자바스크립트 엔진이 컴파일 과정에서 개발자의 코드를 "해석"하면서 변수나 함수 선언을 최상단으로 끌어올리는 매커니즘을 작동시키기 때문이다. 여기서 문제가 발생한다.

console.log(x); // undefined
var x = 10;

위 예시에서 변수 x를 선언하기 전에 출력하려고 했는데, 출력 결과는 undefined이다. 이는 var 변수의 호이스팅으로 인해 발생하는 현상이다. var x 선언이 코드 상단으로 이동하지만 초기화는 원래 위치에 그대로 남아있게 된다. 따라서 console.log(x)가 실행될 때 변수 x는 선언은 되었지만 초기화되지 않은 상태이기 때문에 undefined가 출력된다.

이러한 동작은 개발자의 의도와 다르게 동작할 수 있으며, 디버깅이 어려워질 수 있다. 물론 아주 짧은 코드를 짤때는 이런 실수를 안 할 수 있겠지만, 프로젝트가 커질 경우에는 문제가 발생할 수 있다. 따라서 변수를 사용하기 전에 선언하고 초기화하는 것이 가독성과 예측 가능성을 높이는데 도움이 된다.

호이스팅은 변수가 중복 선언되는 경우에도 예상치 못한 동작을 초래할 수 있다.

var helloMsg = "Hello World";
if (true) {
  var helloMsg = "Hello Javascript"; 
}
console.log(helloMsg) // "Hello Javascript"

만약 개발자가 의도를 가지고 변수를 재정의했다면 문제가 되지 않는다. 하지만 규모가 큰 프로젝트에서 기존의 정의된 변수가 있다는 사실을 인지하지 못한 채 위와 같은 코드를 작성한다면, 의도치 않게 중복 선언된 변수가 덮어쓰여지는 결과를 초래할 수 있으며, 디버깅과 유지 보수를 어렵게 만들 수 있다.

1.4 var 호이스팅의 단점 정리

1. 변수의 위치 예측 어려움: var는 선언과 초기화가 분리되어 있으므로, 변수 선언이 실제 코드의 위치와 다르게 끌어올려질 수 있으며, 코드의 가독성과 이해가 어려워질 수 있다. 변수 선언이 실제 사용보다 이후에 위치하면 의도하지 않은 결과를 초래할 수 있다.

2. 스코프 오염 문제: var로 선언된 변수는 함수 스코프를 갖기 때문에 함수 내에서 선언된 변수는 해당 함수 스코프 전체에서 접근 가능하다. 이로 인해 의도하지 않은 변수의 공유나 값의 변경이 발생할 수 있다. 특히 반복문 내에서 var로 선언된 변수를 사용하면 예상치 못한 동작이 발생할 수 있다.

3. 재선언 허용: var는 동일한 변수명을 다시 선언할 수 있다. 이는 의도하지 않은 변수 충돌을 유발할 수 있다. 이러한 문제는 코드의 복잡성을 증가시키고 디버깅을 어렵게 만들 수 있다.

위와 같은 단점으로 인해 ES6부터 let과 const가 도입되었다. let과 const는 블록 스코프를 갖고 호이스팅 동작도 var보다 예측 가능하게 변경되었다.

2. let

• 블록 스코프 : 이와 관련 설명은 이전 포스팅(스코프)
• 재할당 가능
• 초기화 하지 않아도 됨
• 이미 선언된 변수에 재선언 불가능

2.1 예시

아래 코드와 결과들에서 볼 수 있듯이, let도 값을 재할당할 수 있고, 초기화하지 않고 사용할 수도 있다. 하지만 var와는 달리 let은 이미 선언한 동일한 변수명을 재선언(중복선언)할 수 없다.

let variable2;
variable2 = "(let) 초기화된 값1";
console.log(variable2);
variable2 = "(let) 초기화된 값2";
console.log(variable2);
function printL(){
  variable2 ="(let) 초기화된 값3";
  console.log(variable2);
}
// let variable2 = "(let) 초기화된 값3"; // SyntaxError: Identifier 'variable2' has already been declared 
//console.log(variable2);
printL();

2.2 결과

위 코드에서 // let variable2 부분의 주석을 해제하면 에러가 발생한다.

2.3 let의 호이스팅

[ var와 let의 차이점 - let에서 불가능한 것 ]

let은 var와는 달리 변수를 선언하기 전에 출력할 수 없다.

console.log(x); // ReferenceError: x is not defined
let x = 10;

위에서 언급햇듯이 중복선언도 불가능하다.

let x = 10;
let x = 20; // SyntaxError: Identifier 'x' has already been declared

하지만 아래의 예시는 에러가 발생하지 않는다.

let helloMsg = "Hello World";
if (true) {
  let helloMsg = "Hello Javascript"; 
  console.log(helloMsg) // "Hello Javascript"
}
console.log(helloMsg) // "Hello World"

그 이유는 두 변수의 스코프가 다르게 작동하기 때문이다. let 키워드는 기본적으로 블록 스코프(범위)를 가지는데, 위 코드에서는 같은 이름의 변수가 각각 전역 스코프와 블록 스코프를 가지기 때문에 각기 다른 변수로 취급된다.

[ let 호이스팅이 적절히 사용된 예 ]

다음은 let의 호이스팅이 적절히 사용된 예시이다. 이 예시는 let 변수의 호이스팅을 활용하여 변수의 범위를 제한하면서도 반복분 내에서 활용하는 것을 보여준다.

function printNumbers() {
  for (let i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  }
}
printNumbers();

위 코드에서는 반복문 안에서 setTimeout 함수를 사용하여 1초 후에 i 값을 출력하도록 설정하였다. let 키워드를 사용하여 변수 i를 선언하면 매번 반복될 때마다 새로운 블록 스코프가 생성되며, 각 반복마다 독립적인 변수 i가 생성된다. 이로 인해 setTimeout의 콜백 함수는 클로저로써 자신이 선언된 스코프인 반복문의 블록 스코프에 접근할 수 있다. 따라서 setTimeout이 실행되었을 때 해당 반복문의 인덱스 값을 제대로 유지하게 된다.

위 코드를 실행하면 0부터 4까지 순서대로 1초 간격으로 출력되는 것을 확인할 수 있다. 이는 let 변수의 호이스팅을 적절하게 활용하여 반복문에서 인덱스 값을 제대로 유지한 결과이다.

클로져(closure)? 클로저는 함수 내부에서 정의된 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미한다..
함수가 종료되더라도 해당 함수가 생성될 때의 환경을 기억하고, 그 이후에도 접근할 수 있게 해준다.

function outerFunction() {
  var outerVariable = 'Hello';
  function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}
var closure = outerFunction();
closure(); // 출력: Hello

outerFunction 내부에서 innerFunction이 정의되고 반환된다. 반환된 innerFunction은 외부 함수인 outerFunction의 변수인 outerVariable에 접근할 수 있다. 이는 클로저의 특성으로 인해 가능한 것... 바로 위의 let 호이스팅 예시에서도 마찬가지로, setTimeout의 콜백 함수는 자신의 외부에 있는 변수 i에 접근할 수 있다.

• 클로져에 대해 더 자세히 알고 싶으면 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

3. const

• 재할당이 불가능하며, 선언과 동시에 초기화해야 한다. const로 선언된 변수는 블록 스코프(이전 포스팅: 스코프)를 갖는다.
• 객체나 배열과 같은 참조 타입의 const 변수의 경우, 변수 자체는 변경할 수 없지만 해당 객체 또는 배열의 내부 속성이나 요소는 변경할 수 있다.

3.1 예시

//const pi; //SyntaxError: Missing initializer in const declaration 
const pi= 3.141592;
console.log(pi); 3.141592
//pi = 4.2222;  // TypeError: Assignment to constant variable. 

위 코드에서 볼 수 있듯이 const는 선언만 하고 초기화하지 않을 경우 에러가 발생한다. 또한 이미 선언된 변수 pi에 재할당이 불가능하다. const 변수는 한 번 할당된 값은 변경할 수 없다.

하지만 const 변수에 객체를 할당한 후, 객체의 속성 값을 변경하는 것은 가능하다.

const person = {
  name: 'John',
  age: 30
};
console.log(person); // 출력: { name: 'John', age: 30 }

person.name = 'Jane';
console.log(person); // 출력: { name: 'Jane', age: 30 }

위 코드에서 const 변수인 person은 객체 자체를 변경할 수는 없다. person 객체를 아래와 같이 변경할 수는 없다는 말이다.

person = { name: 'Jane',
          age: 30,
          addr: "New York"
         } // TypeError: Assignment to constant variable. 

하지만 person 객체의 name 속성 값을 'Jane'으로 변경할 수 있다.

3.2 const의 호이스팅

const 변수의 호이스팅은 선언 단계까지만 호이스팅되고, 초기화는 호이스팅되지 않는다. 즉, const 변수는 선언 이전에 접근하면 "ReferenceError"가 발생한다. const 변수는 반드시 선언과 동시에 초기화되어야 한다.

console.log(x); // ReferenceError: x is not defined
const x = 10;

재할당이 허용되지 않는다.

const x = 10;
x = 20; // TypeError: Assignment to constant variable.

[ const를 적절히 사용한 예 ]

function calculateArea(radius) {
  if (radius > 0) {
    const pi = 3.14159;
    const area = pi * radius * radius;
    console.log(area);
  } else {
    console.log("반지름은 양수여야 합니다.");
  }
}
calculateArea(5); // 출력: 78.53975
calculateArea(-2); // 출력: 반지름은 양수여야 합니다.

위의 코드는 원의 넓이를 계산해보는 코드이다. 위에서 const로 선언된 pi와 area는 블록 내에서만 유효한 스코프를 갖는다. 또한 호이스팅이 발생할 때 문제가 발생하지 않는다.

4. 정리

1. var는 함수 스코프, let과 const는 블록 스코프를 가진다.
2. var, let, const 세 가지 모두 최상위로 호이스팅된다. var 변수만 undefined로 초기화되고 let과 const 변수는 초기화되지 않는다.
3. var와 let은 동일한 변수명에 값을 재할당하는 것은 가능하며, 초기화 없이 선언만 할 수 있다. 반면 const는 재할당이 불가능하며, 선언과 동시에 초기화를 반드시 해야한다.
4. var는 동일한 변수명을 재선언(재할당과 다르다)할 수 있지만, let과 const는 재선언이 불가능하다.

Scope는 한국어로 범위로 번역된다. 프로그래밍 언어애서 스코프는 "변수와 함수의 유효 범위를 정의하는 규칙" 또는 "변수에 접근할 수 있는 범위" 라고 할 수 있고 언어마다 이 규칙에 있어서 차이점이 있다.

자바스크립트에서는 세 가지 주요한 스코프 유형이 있다.

• 전역 스코프(Globe Scope)
• 함수 스코프 (Function Scope)
• 블록 스코프 (Block Scope)

이제 각 유형에 대해 간략히 알아보자.

1.1 전역 스코프(Global Scope)

전역 스코프는 코드의 최상위에 있는 스코프이며, 스크립트 전체에서 접근 가능한 범위이다. 전역 스코프에서 선언된 변수와 함수는 어디서든지 참조할 수 있다.

var msg = "안녕하세요?";
function showMsg (){
  console.log("#1. ", msg);
}
showMsg();
console.log("#2. ", msg);

콘솔에 어떻게 나올까?

1.2 함수 스코프 (Function Scope)

함수 스코프는 함수 내부에서 선언된 변수와 함수가 해당 함수 내에서만 접근 가능한 범위이다. 함수 내부에서 선언된 변수는 함수 외부에서는 접근할 수 없다. 또한, 함수 스코프는 함수를 중첩할 때도 계층적으로 적용된다.

var i = 100;
function print(){
  var i = 101;
  console.log(i);
}
console.log(i);
print();

콘솔에 어떻게 나올까?

❌ 아래처럼 함수 바깥에서 함수 내 변수를 접근하면 에러가 발생한다.

function print(){
  var i = 101;
  console.log(i);
}
console.log(i);
print();

1.3 블록 스코프 (Block Scope)

블록 스코프는 중괄호 {}로 감싸진 코드 블록(예: if 문, for 문) 내에서 선언된 변수의 범위를 제한하는 스코프이다. 블록 스코프는 ES6에서 도입된 let과 const 키워드로 선언된 변수에 적용된다.

아래와 같이 var, let, const를 사용하여 블록스코프를 테스트해보자.

function print(){
  var fnScope1 = 100;
  let fnVar1 = "함수 내부 변수1";
  const fnVar2 = "함수 내부 변수2"
  if(true){ 
    var fnScope2 = 101;
    let blockVar1 = "블록 변수1";
    const blockVar2 = "블록 변수2";
    console.log("--- if 블록 안 ---")
    console.log("var fnScope1: ", fnScope1);
    console.log("var fnScope2: ", fnScope2);
    console.log("let fnVar1: ", fnVar1);
    console.log("const fnVar2: ", fnVar2);
    console.log("let blockVar1: ", blockVar1);
    console.log("const blockVar2: ", blockVar2);        
  }
  console.log("--- if 블록 바깥---")
  console.log("var fnScope1: ", fnScope1);
  console.log("var fnScope2: ", fnScope2);
  console.log("let fnVar1: ", fnVar1);
  console.log("const fnVar2: ", fnVar2);
  //console.log("let blockVar1: ", blockVar1); // blockVar1 is not defined 
  //console.log("const blockVar2: ", blockVar2); //blockVar2 is not defined      
}
print();

어떤 결과가 나올까? print() 가 호출되면 조건문 내부의 콘솔 로그가 먼저 출력되며 아래와 같이 나온다.

😎 정리해보면...

• var는 기본적으로 함수 스코프를 가진다. 따라서 함수 print() 내부에 var로 선언된 변수는 그것이 조건문 안에 있더라고 조건문 바깥에서도 사용할 수 있다. 조건문 내부의 fnScope2 변수가 정상적으로 출력되었다.
• let과 const는 전역변수나 함수 내부 변수로 사용할 수도 있다. 하지만 기본적으로 블록 스코프를 가지고 있기 때문에 블록 내에서 선언되었다면 해당 블록 바깥에서 그것을 사용하는 것은 불가능하다. blockVar1 과 blockVar2를 조건문 바깥에서 사용할 시 에러가 발생한다. (하지만 클로져는 블록 바깥의 let 변수를 참조할 수 있게 하는 것 같다.. 이것은 다음 포스팅에서 다루어보고 싶다.....)
• var, let, const에 대한 좀더 상세한 정리는 다음 포스팅에서... "호이스팅"(hoisting)도 다음 포스팅에서 같이..😊

자바스크립트 연습 Tip!

자바스크립트 연습하기 좋은 사이트: https://codepen.io/

온라인으로 코딩 연습하는 좋은 사이트들이 있는데, codepen은 HTML/CSS/JS 연습하기 가장 좋은 사이트 중 하나가 아닌가 싶다. 위 사이트에서 계정 생성 및 로그인 후 "New Pen"을 누르면 아래처럼 편하게 연습해볼 수 있는 화면이 나온다. 내가 하던 작업을 별도의 이름을 정해서 저장할 수 있으니 내 작업 목록들을 확인하기 편한 것 같다.

• ECMAScript 5 (ES5)는 JavaScript의 버전 중 하나로, 2009년에 표준으로 채택되었다.
• 엄격 모드는 JavaScript의 실행을 엄격하게 제어하는 모드로, 코드 작성에 일부 규칙을 강제하여 에러를 더 잘 포착하고 예측 가능한 동작을 유도한다. 엄격모드를 사용하면 최적화된 코드를 짜기 용이하기에 대형 프로젝트일 경우 엄격모드가 매우 중요한 역할을 한다.

2. 엄격모드의 특징

이는 간략한 정리라서.. 추후 좀더 보강을 해봐야지..

• 변수 선언 : 변수를 선언할 때 var 키워드를 사용해야 한다. 선언하지 않고 변수에 값을 할당하면 에러가 발생한다.
• 변수 삭제: delete 연산자를 사용하여 변수를 삭제할 수 없다.
• 읽기 전용 변수: eval과 arguments 읽기 전용 변수로 사용할 수 없다. 이전의 비엄격 모드에서는 이러한 변수에 새로운 값을 할당할 수 있었지만, 엄격모드에서는 할당 시 에러가 발생한다.
• 함수 선언: 함수 선언이 스크립트 또는 함수의 맨 위로 끌어올려지지 않는다. 따라서 함수를 선언하기 전에 호출하면 에러가 발생한다.
• 중복 매개변수 : 중복된 매개변수 이름을 사용할 수 없다. 이전의 비엄격 모드에서는 중복된 매개변수가 허용되었지만, 엄격모드에서는 에러가 발생한다.
• Octal 숫자 : 8진수 숫자 리터럴 앞에 0을 붙이는 것이 허용되지 않는다. 예를 들어, 0123과 같은 숫자는 엄격모드에서 에러를 발생시킨다.
• this 값 바인딩 : 함수의 this 값을 엄격하게 바인딩한다. 함수가 전역 컨텍스트에서 호출될 때 this undefined가 된다.

3. 사용법

1. 최상단에 사용 : 보통은 최상단에 쓴다. 이로써 전역에 걸쳐 엄격 모드가 실행되기 때문에 이전의 느슨한 모드(Sloppy mode)에 비해 최적화된 코드를 짜기 용이하다.

   "use strict";
   

// 엄격모드가 적용된 전역 범위의 JavaScript 코드 // 이곳에서는 엄격모드의 규칙이 적용된다.

function exampleFunction() { // 엄격모드가 적용되지 않은 함수 내부 // 이곳에서는 엄격모드의 규칙이 적용되지 않는다.

"use strict";

// 엄격모드가 적용된 함수 내부 // 이곳에서는 엄격모드의 규칙이 적용된다. // 함수 내부의 코드 작성 }

2. 함수 내 사용 : 이 예시는 use strict가 쓰여진 곳부터 적용된다는 점을 보여주기 위한 것으로, 함수 내에 쓸 경우는 보통 함수 바디의 첫줄에 쓴다.
```javascript
// 엄격모드가 적용되지 않은 전역 범위의 JavaScript 코드

function exampleFunction() {
  // 엄격모드가 적용되지 않은 함수 내부
  // 이곳에서는 엄격모드의 규칙이 적용되지 않습니다.

  "use strict";

  // 엄격모드가 적용된 함수 내부
  // 이곳에서는 엄격모드의 규칙이 적용됩니다.

  // 함수 내부의 코드 작성
}

4. 실제로 사용해보자!

아래와 같이 const, let, var 를 쓰지 않은 전역변수를 사용하면,

str = "Hello World"
function printStr () {
  console.log(str);
}
printStr();

콘솔에 출력되는 것을 확인할 수 있다.

그런데 최상단에 use strict를 쓰고 같은 코드를 쓰면?

'use strict'
str = "Hello World"
function printStr () {
  console.log(str);
}
printStr();

에러가 발생한다.

해결을 위해 전역 번수 앞에 let을 붙이자.

'use strict'
let str = "Hello World"
function printStr () {
  console.log(str);
}
printStr();

정상적으로 출력된다.

5. 엄격모드는 필수인가?

use strict 를 꼭 사용해야 하나요? "당연히 사용해야 하는 거 아니야?"라는 생각이 드시겠지만, 꼭 그렇지만은 않습니다.

모던 자바스크립트는 '클래스’와 '모듈’이라 불리는 진일보한 구조를 제공합니다(클래스와 모듈에 대해선 당연히 뒤에서 학습할 예정입니다). 이 둘을 사용하면 use strict가 자동으로 적용되죠. 따라서 이 둘을 사용하고 있다면 스크립트에 "use strict"를 붙일 필요가 없습니다.

코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 됩니다.

* 출처: https://ko.javascript.info/strict-mode

자바스크립트를 배우다보면 "ES5", "ES6" 같은 용어들을 접하게 된다. 흔히들 자바스크립트는 ES6의 기술 규격을 따른다" 같은 표현을 한다. 이 포스팅에서는 ECMAScript가 무엇인지, 각 에디션별로 어떤 특징이 있는지 간략히 정리하고자 한다.

🧐 ECMAScript는 무엇?

ECMAScript는 "ECMA International"이라는 국제 표준화 기구가 ECMA-262라는 기술 규격에 따라 정의한 표준화된 스크립트 언어이다. "ECMA"는 "European Computer Manufacturers Association"의 약자이며, 이는 1961년에 설립된 "유럽 컴퓨터 제조업 협회"이다. 이 협회는 현재 "Ecma International"라는 이름으로 알려진 비영리 표준화 기구로 변모하였으며, 컴퓨터와 통신 기술 분야에서 국제적으로 표준을 제정하는 역할을 수행하고 있다. ECMA-262는 1997년 6월에 초판이 발행되어 2022년 6월까지 총 13개가 발행되었다. 따라서 ES5, ES6 같은 용어들은 이 국제기구에서 발행되는 표준화된 스크립트 언어인 ECMAScript와 그 버젼을 줄여서 부르는 용어이며, 현재는 ES13까지 발행되었다.

🙄 왜 표준화가 필요했나?

1996년 3월에 넷스케이프가 "Mocha"라는 이름으로 첫 자바스크립트를 Netscape Navigator 2에 탑재하였다. 약 5개월 후인 1996년 8월에 마이크로소프트는 자바스크립트의 파생버젼인 "JScript"를 Internet Explorer 3.0에 탑재했다. 이에 문제가 발생했는데, 자바스크립트와 JScript가 모두 표준화되지 않은 상태였기에 두 회사 모두 자사 브라우저의 시장점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능들을 경쟁적으로 추가시켰다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 문제가 발생했다.

결국 1996년 11월, 넷스케이프 커뮤니케이션즈는 ECMA International에 자바스크립트 표준화를 요청하였다. 1997년 7월, ECMA-262라 불리는 표준화된 ECMAScript 1(이/가) 문서화되었고 상표권 문제로 자바스크립트는 ECMAScript로 명명되었다.

😉 ECMAScript 각 버젼별 간략한 정리

이는 엄격하지 않은, 간략한 정리입니다. 특징 중에 누락된 부분이 있을 수 있어요

에디션	명칭	출판년도	특징
1		1997	초판
2		1997	ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경
3		1999	강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등
4		폐기됨	4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다고 함 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다.
5	ECMAScript 2009	2009	1. 엄격 모드(Strict Mode) 도입: 엄격한 문법과 실행 환경을 강제하는 모드 2. JSON 지원: JSON 형식의 데이터를 쉽게 다룰 수 있는 메서드와 기능을 추가 3. Getter와 Setter: 객체의 속성에 대한 접근자 메서드를 정의할 수 있게 됨
5.1		2011	1. ECMAScript 5에서 도입된 엄격 모드에 일부 수정 2. 기술적 수정: ECMAScript 5.1은 ECMAScript 5에서 발견된 일부 버그와 모호한 부분을 수정 3. 유니코드 업데이트: ECMAScript 5.1은 유니코드 6.1.0 버전에 기반하여 문자열 처리와 관련된 일부 기능을 업데이트 4. ECMAScript 5.1은 ECMAScript 명세의 일부를 업데이트하고 정확성과 일관성을 개선
6	ECMAScript 2015	2015	1. 화살표 함수: 간결한 함수 표현을 위한 화살표 함수가 도입됨 ( () => {} ) 2. 클래스: 클래스 기반의 객체 지향 프로그래밍을 지원 3. 모듈 시스템: 모듈을 정의하고 가져오는 기능을 제공하여 코드의 모듈화를 용이하게 함 4. 확장된 문법: 템플릿 리터럴, 디스트럭처링, 확장된 매개변수 처리 등 다양한 문법적 향상
7	ECMAScript 2016	2016	1. 배열에 includes() 메서드 추가: 배열 내에 특정 요소가 있는지 확인하는 includes() 메서드가 추가(Array.prototype.includes) 2. 지수 연산자: 지수 연산을 수행하는 연산자인 ** 가 도입
8	ECMAScript 2017	2017	1. 비동기적인 처리를 위한 async/await 문법이 도입 2. Object.entries()와 Object.values(): 객체의 키와 값에 접근하기 위한 메서드가 추가 3. 문자열 패딩: 문자열의 길이를 지정하여 패딩하는 메서드인 padStart()와 padEnd()가 도입
9	ECMAScript 2019	2018	1. 비동기 반복 처리: 비동기적으로 반복 작업을 처리하는 for-await-of 문법이 도입 2. Rest/Spread 프로퍼티: 객체의 나머지 프로퍼티를 하나의 객체로 모으는 Rest 프로퍼티와 객체의 프로퍼티를 확장하는 Spread 프로퍼티가 도입
10	ECMAScript 2019	2019	1. Object.fromEntries(): 배열 형태의 키-값 쌍들을 객체로 변환하는 메서드 2. Array.prototype.flat()과 Array.prototype.flatMap(): 중첩된 배열을 평탄화하거나 매핑 함수를 적용하여 새로운 배열을 생성하는 메서드 3. String.prototype.trimStart()과 String.prototype.trimEnd(): 문자열의 앞부분이나 뒷부분의 공백을 제거하는 메서드 4. catch 문의 에러 생략: catch 절에서 에러를 명시적으로 사용하지 않을 경우, 에러를 생략하고 처리할 수 있음
11	ECMAScript 2020	2020	1. BigInt: 매우 큰 정수를 나타내기 위한 BigInt 데이터 타입이 도입 2. Promise.allSettled(): 모든 프로미스가 결정될 때까지 기다린 후 결과를 반환하는 메서드 3. String.prototype.matchAll(): 정규 표현식과 문자열에 대한 반복적인 매치 결과를 반환하는 메서드
12	ECMAScript 2021	2021	1. 논리 할당 연산자: 변수에 값을 할당하고 그 값을 반환하는 연산자로, 추가 2. String.prototype.replaceAll(): 문자열 내의 모든 매치된 부분을 새로운 문자열로 대체하는 메서드 3. Promise.any(): 가장 빨리 처리되는 프로미스를 반환하는 메서드 4. WeakRefs: 약한 참조를 사용하여 가비지 컬렉션에서 수거할 수 있는 객체 참조를 생성하는 기능입니다.
13	ECMAScript 2022	2022	1. Math 산술 연산자 개선: Math 객체의 연산자인 Math.addExact(), Math.subtractExact(), Math.multiplyExact(), Math.divideExact(), Math.remainder() 등이 추가 2. Promise.any()의 개선: 이제 Promise.any()는 비동기 프로미스 중 하나가 성공할 때까지 기다리며, 모든 프로미스가 거부될 때까지 기다릴 수 있다. 3. 비공개 필드 및 메서드: 클래스 내부의 비공개 필드와 메서드를 정의할 수 있는 문법이 도입. 이를 통해 클래스의 내부 상태와 동작을 보호하고 캡슐화할 수 있음 4. WeakRefs 개선: WeakRefs는 약한 참조를 통해 가비지 컬렉션에서 수거 가능한 객체 참조를 생성하는 기능으로, 이제는 약한 참조로부터 실제 객체에 대한 참조를 얻는 메서드인 deref()가 추가됨

출처

• https://ko.javascript.info/manuals-specifications
• https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
• ECMAScript를 직접적으로 참조하고 싶다면 -> ECMA International

자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 최초의 엔진은 단순한 인터프리터였지만, 모든 현대적 엔진은 JIT(Just-in-time) 또는 런타임 컴파일을 사용하여 성능을 향상시키고 있다.

🤔 JIT 방식은 무엇?

JIT 컴파일(just-in-time compilation) 또는 동적 번역(dynamic translation)은 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법을 말한다. JIT 컴파일러는 실행 시점에서 인터프리트 방식으로 기계어 코드를 생성하면서 캐싱(메모리에 데이터를 임시 저장 후 불러쓰는 것)한다. 그렇기에 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지할 수 있다. 이런 측면에서 JIT 컴파일러는 인터프리트 방식과 정적 컴파일 방식을 혼합한 방식으로 볼 수 있다.

💪 자바스크립트 엔진이 하는 일?

1. 개발자가 작성한 자바스크립트 코드를 웹 브라우저나 다른 실행 환경에서 해석될 수 있는 최적화된 코드로 변환하는 일을 한다.
2. 대부분의 현대 웹 브라우저는 자바스크립트 엔진을 내장하고 있다.
   • Chrome - V8 엔진,
   • Mozilla Firefox - SpiderMonkey 엔진,
   • Microsoft Edge - Chakra 엔진
   • IE - 버전에 따라 'Trident’ 또는 'Chakra’라 불리는 엔진을 사용

🐵 클라이언트 사이드

클라이언트 사이드에서 자바스크립트는 사용자의 웹 브라우저에서 실행된다. 주로 웹 페이지의 동적인 기능을 구현하고 사용자와의 상호작용을 처리하는 데 사용된다.

• 웹 페이지 조작: 자바스크립트를 사용하여 DOM(Document Object Model)을 조작하여 웹 페이지의 구조와 내용을 변경할 수 있다. 예를 들어, 버튼을 클릭하면 특정 요소가 나타나거나 사라지도록 설정할 수 있다.
• 이벤트 처리: 자바스크립트를 사용하여 사용자의 동작(마우스 클릭, 키 입력 등)을 감지하고 이에 대한 이벤트 처리를 할 수 있다. 예를 들어, 사용자가 폼을 제출할 때 입력 데이터의 유효성을 검사하는 기능을 구현할 수 있다.
• 웹 애니메이션: 자바스크립트를 사용하여 웹 페이지에서 애니메이션 효과를 만들 수 있다. 예를 들어, 움직이는 이미지 슬라이더, 페이드 인/아웃 효과 등

🙈 서버 사이드

서버 측 자바스크립트는 백엔드 서버 로직에서 코딩 언어를 사용하는 것을 의미한다. 이 경우 자바스크립트 엔진은 서버에 직접 위치한다. 서버 측 자바스크립트 함수는 데이터베이스에 액세스하고, 다양한 논리 작업을 수행하고, 서버의 운영 체제에 의해 트리거된 다양한 이벤트에 응답할 수 있다. 주로 Node.js라고 하는 서버 사이드 플랫폼을 통해 실행되는데, 몇 가지 예시는 다음과 같다.

• 웹 애플리케이션 개발: Node.js를 사용하여 서버 사이드에서 웹 애플리케이션을 개발할 수 있다. 데이터베이스와의 상호작용, API 엔드포인트 구현, 인증 처리 등을 자바스크립트로 처리할 수 있다.
• 파일 시스템 액세스: Node.js는 파일 시스템 액세스를 지원하므로 서버 사이드에서 파일 생성, 수정, 삭제 등의 작업을 자바스크립트로 수행할 수 있다.
• 네트워크 작업: Node.js를 사용하여 네트워크 관련 작업을 처리할 수 있다. 예를 들어, HTTP 요청을 처리하고 RESTful API를 구축하는 등의 작업을 자바스크립트로 수행할 수 있다.

🧐 자바스크립트 엔진별 차이점

V8 (Google Chrome, Node.js):

• V8은 Google에서 개발한 자바스크립트 엔진으로, Google Chrome 브라우저와 Node.js에서 사용된다.
• V8은 고성능을 지향하며, JIT(Just-In-Time) 컴파일러를 사용하여 자바스크립트 코드를 기계어로 변환한다.
• V8은 크롬 개발자 도구를 통해 디버깅을 지원하고, 최신 ECMAScript 표준을 빠르게 채택하는 특징이 있다.

SpiderMonkey (Mozilla Firefox):

• SpiderMonkey는 Mozilla Firefox 브라우저에서 사용되는 자바스크립트 엔진이다.
• SpiderMonkey는 오랜 역사를 가진 엔진으로, 초기에는 인터프리터 기반으로 동작했으며, 현재는 JIT 컴파일러를 사용한다.
• 최근 버전의 SpiderMonkey는 ASM.js 및 WebAssembly와 같은 고성능 표준을 지원하여 빠른 실행 속도를 제공한다.

Chakra (Microsoft Edge):

• Chakra는 Microsoft Edge 브라우저의 이전 버전에 사용되던 자바스크립트 엔진이었다. 하지만 2019년부터는 Chromium 기반의 새로운 Edge 브라우저에서는 V8 엔진을 사용한다.
• Chakra는 JIT 컴파일러와 프로파일링 기능을 활용하여 빠른 실행 속도를 추구했다.

🤔 Chromium???? 이게 뭐지?

• Chromium은 오픈 소스 웹 브라우저 프로젝트로, Google Chrome 브라우저의 기반이 되는 소프트웨어이다. Chromium 프로젝트는 Google에서 개발되었으며, 많은 개발자들과 기업들이 참여하여 지속적인 개선과 확장이 이루어지고 있다.
• Chromium은 웹 브라우저의 핵심 기능을 제공하는 여러 컴포넌트로 구성되어 있다. 그 중 가장 중요한 부분은 Blink 렌더링 엔진과 V8 자바스크립트 엔진이다. Blink는 웹 페이지의 렌더링과 관련된 작업을 처리하며, V8은 자바스크립트 코드의 실행을 담당한다.
• Google Chrome은 Chromium 프로젝트를 기반으로 구축되었으며, Chromium과 많은 부분을 공유한다. 크롬은 사용자 친화적인 인터페이스, Google 서비스와의 통합, 추가적인 기능 등을 포함한 Google의 독점 기능을 추가로 제공한다. 반면, Chromium은 Google의 독점 기능을 제외한 오픈 소스 버전으로, 개발자들이 자유롭게 이를 활용하여 커스터마이징하고 독립적인 브라우저를 개발할 수 있다.
• Chromium은 다양한 운영체제에서 실행되며, 개발자들이 브라우저를 개선하고 새로운 기능을 추가할 수 있는 환경을 제공한다. 이러한 열린 생태계는 웹 브라우저 기술의 발전과 혁신에 기여하고 있으며, 많은 웹 브라우저가 Chromium을 기반으로 개발되고 있다.
• 참고: The Chronium Projects

⛔️ 제약사항:

자바스크립트가 브라우저에서 할 수 없는 일

• 파일 시스템 액세스 제한: 일반적으로 브라우저에서는 자바스크립트로 로컬 파일 시스템에 직접 접근하는 것이 제한된다. 이는 사용자의 개인 정보 유출을 방지하기 위한 보안 조치이다. 사용자의 명시적인 동의를 받거나 웹 브라우저에서 제공하는 파일 API를 사용하여 로컬 파일 시스템에 접근해야 합니다. 즉, 사용자가 브라우저 창에 파일을 ‘끌어다 두거나’, input 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다. 또한 카메라나 마이크 같은 디바이스와 상호 작용하려면 사용자의 명시적인 허가가 있어야 한다.
• ‼️ Same-Origin Policy (동일 출처 정책) : 브라우저는 보안을 위해 동일한 출처(origin)를 가진 리소스들 간에만 상호작용을 허용한다. 즉, 스크립트가 로드된 웹 페이지는 동일한 출처에서 로드된 리소스와만 상호작용할 수 있다. 예를 들어 아래와 같이 출처가 다른 곳에 데이터를 요청하면, 해당 요청은 "동일 출처 정책"을 위반한 것이 된다. 브라우저에서 개발자모드로 콘솔을 확인하면 이를 확인시켜주는 에러 메시지를 발견할 수 있다.포트 번호도 출처의 일부로 간주하기 때문이다. 이처럼 다른 출처의 리소스에 대한 접근이 제한되어 정보 누출이나 크로스 사이트 스크립팅(XSS)과 같은 보안 공격을 방지한다.

• ‼️ CORS (Cross-Origin Resource Sharing): 동일 출처 정책을 우회하기 위해 서로 다른 출처의 리소스에 접근해야 할 때, 해당 리소스의 서버가 CORS 정책을 설정하여 허용해야 한다. 서버는 특정 출처들에 대한 리소스 접근을 허용하거나 특정 헤더를 사용하여 접근을 제어할 수 있다. 이에 대한 예시는 추후 다른 포스팅을 통해 다루도록 하겠다.
• 타 사이트나 도메인에서 데이터를 받아오는 건 불가능다. 가능하다 할지라도 HTTP 헤더 등을 이용하여 원격 서버에서 명확히 승인을 해줘야 한다. 이에 대한 예시 또한 추후 다른 포스팅을 통해서.. 😊

출처

1) https://ko.javascript.info/intro 2) https://aws.amazon.com/ko/what-is/javascript/ 3) https://ko.wikipedia.org/wiki/자바스크립트_엔진

1. 자바스크립트의 탄생

90년대 중반 무렵의 웹 브라우저 시장은 "넷스케이프 커뮤니케이션즈"(Netscape comunications, 이하 "넷스케이프")가 지배하고 있었다. 넷스케이프는 정적인 HTML을 동적으로 표현하고자 했고, 넷스케이프에서 일하고 있던 “브랜든 아이크”(Brendan Eich) 가 경량의 프로그래밍 언어 “자바스크립트”를 개발했다. (웹브라우져 Firefox도 개발했다. 세상에는 천재들은 많다...)

자바스크립트는 1996년 3월 웹브라우져 “Netscape Navigator 2”에 탑재되어 “Mocha”로 명명되었고, 그해 9월 “LiveScript”로 이름이 변경되었고, 12월 최종적으로 “JavaScript”라고 명명되었다.

🤔 자바스크립트와 자바는 관련이 있는가?

“JavaScript” 는 “Java” 와 어떤 관련이 있는 걸까? 당시에 자바의 인기가 아주 높은 상황이었기에, 관련인들은 자바스크립트를 자바의 ‘동생’ 격인 언어로 홍보하면 도움이 될 것이라는 의사결정을 내리고 이름을 바꿨다고 한다. 결국 이름은 자바에서 차용해 왔지만, 자바스크립트는 자바와는 독자적인 언어이다.

2. 자바스크립트란?

1. 정적인 웹페이지에 생동감을 불어넣기 위해 만들어진 언어이다. 즉, 자바스크립트는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어이다.
2. 자바스크립트로 작성한 프로그램을 스크립트(script) 부른다.
3. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있다.
4. 자바스크립트를 사용하면 브라우저는 사용자 상호 작용에 응답해서 웹 페이지의 콘텐츠 레이아웃을 변경할 수 있다.(ex. 이미지 슬라이드쇼, 클릭하면 표시되는 드롭 다운 메뉴 등)
5. 자바스크립트는 AJAX 같은 기술을 이용하여 서버와 비동기 통신으로 서버에 요청을 보내거나 파일을 업로드, 다운로드 할 수 있다.

🤔 스크립트 언어? 인터프리터 언어?

프로그래밍 언어의 한 종류로, 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어이다. 일반적으로는 개발자가 짠 코드를 기계어로 변환하는 "컴파일" 과정을 거친 후 앱이 실행이 된다. 예를 들어, 자연어 "Hello World"가 있다고 치자. 개발자는 이를 아래와 같이 코딩한다.

public class A {
    void printStr() {
        String str = "Hello World";
        System.out.println(str);
    }
    public static void main(String[] args) {
        A a = new A();
        a.printStr();
    }
}

이 코드는 컴파일 과정을 거쳐 컴퓨터가 이해할 수 있는 기계어(011000101 같은 이진수)로 변환된다. 하지만 수정이 빈번해질 때 매번 컴파일 과정이 귀찮아지는 것은 개발자라면 누구나 느끼는 감정일 것이다. 따라서 전체 문장을 컴파일 하기 보다 소스코드를 한줄 한줄 읽어(컴파일하여) 바로바로 실행하는 인터프리터 방식(대표적으로 Python) 이 많은 주목을 받고 있다. 현재 고급 프로그래밍 언어의 70% 이상이 인터프리터 방식이라고 한다. 스크립트 언어는 이러한 인터프리터 방식에서 파생된 것으로 보인다. 인터프리터와 컴파일은 개념적으로 명확한 대조를 이루는데, 스크립트 언어는 개념적으로 아직 명확한 것은 아닌 것 같다. 이 부분은 좀더 공부가 필요하며 세 가지 방식들 간 차이점에 관한 자세한 내용은 이 포스트의 범위를 넘어서기 때문에 차후 다른 포스트에서 다루도록 하겠다.

여하튼, 자바스크립트는 컴파일 과정을 거치지 않는 "인터프리터 언어"로 분류되기도 하며, 웹브라우저(이미 존재하는 응용프로그램)을 제어한다는 측면에서 "스크립트 언어"로 분류하기도 하는 것 같다.

출처:

• https://ko.javascript.info/intro
• https://poiemaweb.com/js-introduction
• https://aws.amazon.com/ko/what-is/javascript/