[Java] Java 란?

25 Dec 2022 in Development on Server, Java, 개념

#목차

• Java 란?
• Java의 특징
  • 객체지향 언어(Object Oriented Programming - OOP)
  • 높은 이식성
  • 인터프리터 언어
  • 메모리 자동관리(Garbage Collection)
  • 멀티 스레드
  • 동적 로딩
  • 분산환경 지원
  • 오픈소스 라이브러리가 풍부
• Java 사용 분야
  • 1.게임 개발
  • 2.클라우드 컴퓨팅(Cloud Computing)
  • 3.빅 데이터(Big Data)
  • 4.인공지능(Artificial intelligence)
  • 5.사물 인터넷(Internet of things - IoT)
• 결론!

Java 란?

“Java는 웹 애플리케이션 코딩에 널리 사용되는 프로그래밍 언어이다. 20년 넘게 개발자들 사이에서 많은 인기를 끌은 결과, 오늘날 수백만 개의 Java 애플리케이션이 사용되고 있다. Java는 그 자체로 플랫폼으로 사용할 수 있는 다중 플랫폼, 객체 지향 및 네트워크 중심 언어이다. 모바일 앱 및 엔터프라이즈 소프트웨어에서 빅 데이터 애플리케이션 및 서버 측 기술에 이르기까지 모든 것을 코딩하기 위한 빠르고 안전하며 안정적인 프로그래밍 언어이다.” - AWS

Java의 특징

객체지향 언어(Object Oriented Programming - OOP)

“프로그램을 수많은 ‘객체(object)’라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 ‘메소드와 변수(데이터)’의 묶음으로 봐야 한다. 또한 접근제한자를 통한 객체를 나누어 사용하게 된다. public, protected, default, private” - OOP

높은 이식성

“서로 다른 실행 환경을 가진 시스템간에 프로그램을 옮겨 실행할 수 있다. 또한 Java는 JRE(자바 실행 환경)이 설치 되어 있는 모든 운영체제에서 실행 가능하다.” - 이식성

인터프리터 언어

“프로그래밍한 소스파일(.java)을 컴파일 하여 2진 파일(.class)로 만든 다음 JRE가 class파일을 인터프리터 하여 실행한다.” - 인터프리터

메모리 자동관리(Garbage Collection)

“Java는 객체 생성시 자동으로 메모리 영역을 찾아서 할당하고, 사용이 완료되면 Garbage Collector를 실행 시켜 자동으로 사용하지 않는 객체를 제거하여 메모리 관리를 해준다.” - 가비지 컬렉션

멀티 스레드

“운영체제에 따라 멀티 스레드를 구현하는 방법이 다르지만, 자바는 스레드 생성 및 제어와 관련된 라이브러리 API를 제공하므로 운영체제에 상관없이 멀티 스레드를 쉽게 구현할 수 있다.” - 멀티 스레드

동적 로딩

“실행 시 모든 클래스가 로딩되는 것이 아니라 필요한 시점에 클래스를 로딩하여 사용할 수 있다.” - 동적 로딩

분산환경 지원

“Java에는 TCP/IP 라이브러리가 기본적으로 포함되어 있고, http와 http프로토콜을 기본적으로 지원한다.” - 분산환경 지원

오픈소스 라이브러리가 풍부

“Java에 대한 자료가 풍부하다.”

Java 사용 분야

1.게임 개발

“많은 인기 모바일, 컴퓨터 및 비디오 게임이 Java로 작성된다. 기계 학습이나 가상 현실과 같은 첨단 기술이 통합된 최신 게임도 Java 기술로 작성된다. 가장 대표적인 게임이 Minecraft이다.”

2.클라우드 컴퓨팅(Cloud Computing)

“Java는 WORA(Write Once and Run Anywhere - 한 번 작성하면 어느 곳에서 나 실행)라고도 하며 분산 클라우드 기반 애플리케이션에 적합하다. 클라우드 공급자는 다양한 기본 플랫폼에서 프로그램을 실행하기 위해 Java 언어를 선택한다.” - AWS

3.빅 데이터(Big Data)

“Java는 복잡한 데이터 집합과 방대한 양의 실시간 데이터를 처리할 수 있는 데이터 처리 엔진에 사용된다.” - AWS

• 빅 데이터 관련 프로그래밍 언어는 Python이 랭킹이 높지만 Java 또한 빅 데이터뿐만 아니라 여러 분야에 많이 사용되어 순위가 높다는 걸 알 수 있다.

4.인공지능(Artificial intelligence)

“Java는 기계 학습 라이브러리의 발전소 역할을 한다. Java는 자연어 처리 및 딥 러닝과 같은 인공 지능 애플리케이션 개발에 적합한 안정성과 속도를 갖추고 있다.” - AWS

• 인공지능 또한 Python이 랭킹이 높지만 Java 역시 여러 분야에서 많이 사용가능한 언어이다.

5.사물 인터넷(Internet of things - IoT)

“Java는 인터넷에 독립적으로 연결할 수 있는 엣지 디바이스의 센서 및 하드웨어 프로그래밍에 사용되었다.” - AWS

결론!

• Java는 객체지향 언어로 높은 이식성과 메모리 자동관리, 멀티 스레드, 분산환경, 풍푸반 오픈소스 라이브러리로 개발자들에게 많은 사랑을 받고있는 언어이다.
• 게임분야 뿐만 아니라 클라우드 컴퓨팅, 빅데이터, 인공지능, 사물 인터넷등에 사용되고 있다.

[Vue] Vue.js 라이프사이클 이해하기

22 Dec 2022 in Development on Client, Vue, Lifecycle

#목차

• Vue Lifecycle 이란?
• Vue Instance 란?
• Composition API 란?
• Vue 2 코드를 Vue 3 Lifecycle Hooks로 업데이트된 항목
• Vue Lifecycle Hooks
• Creation Hooks
• Mounting Hooks
  • beforeMount()와 onBeforeMount()
  • mount()와 onMount()
• Update Hooks
  • beforeUpdate()와 onBeforeUpdate()
  • update()와 onUpdate()
• Destruction Hooks – Cleaning Things Up
  • beforeUnmounted()와 onBeforeUnmounted()
  • unmounted()와 onUnmounted()
• Activation Hooks – Managing Keep-Alive Components
  • activated()와 onActivated()
  • deactivated()와 onDeactivated()
• Vue 3 Debug Hooks
• 결론!

Vue Lifecycle 이란?

“각 Vue 구성 요소 Instance는 생성될 때 일련의 초기화 단계를 거치게 된다. 예를 들어, 데이터 관찰(Create)을 설정하고 템플릿을 컴파일하고 DOM에 인스턴스를 마운트(Mount)하고 데이터가 변경될 때 DOM을 업데이트(Update)해야 한다. 그 과정에서 Lifecycle Hooks 이라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.” - Vue Lifecycle

Vue Instance 란?

“Instance란 모든 Vue.js 앱은 Vue를 사용하여 루트 Vue 인스턴스를 생성하여 부트스트랩된다.” - Vue Instance

즉, Instance는 Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위.
new Vue({...})로 선언하여 만들어진 객체를 Vue 인스턴스라고 부른다.

<script>
  new Vue({ // instance 생성
    // instance option properties
  });
</script>

Composition API 란?

“컴포지션(Composition) API는 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API이다. 컴포넌트 API가 생긴 이유는 Vue는 프로젝트 규모가 커질수록 관리하기 힘든 단점과 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리가 힘든 점을 보안하기 위해 등장하게 되었다.” - Composition API

beforeCreate 및 created(setup() 메서드 자체로 대체됨)를 제외하고 설정 메소드에서 액세스할 수 있는 옵션 API lifecycle hooks 중 9개가 있다.

• onBeforeMount : mounting이 시작되기 전에 호출
• onMounted : 컴포넌트가 mount될 때 호출
• onBeforeUpdate : 반응형 데이터가 변경될 때와 re-render되기 전에 호출
• onUpdated : re-render된 후에 호출
• onBeforeUnmount : Vue 인스턴스가 파괴(삭제)되기 전에 호출
• onUnmounted : 인스턴스가 파괴(삭제)된 후 호출됨
• onActivated : 보관된 구성 요소가 활성화되면 호출
• onDeactivated : 보관된 구성 요소가 비활성화되면 호출
• onErrorCaptured : 하위 구성 요소에서 오류가 캡처되면 호출

Vue 2 코드를 Vue 3 Lifecycle Hooks로 업데이트된 항목

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

Vue Lifecycle Hooks

Creation Hooks

“Composition API를 사용하는 Vue 3 Lifecycle Hooks의 경우 beforeCreate와 created 모두 setup() 메서드로 대체된다.” - Creation Hooks

import { ref } from 'vue';
export default {
  setup() {
    const val = ref('hello');
    console.log('Value of val is: ' + val.value); // Value of val is: hello
    return {
      val,
    }
  },
}

Mounting Hooks

“Mounting Hooks는 Component Mounting 및 Rendering을 처리한다.” - Mounting Hooks

beforeMount()와 onBeforeMount()

“컴포넌트 DOM이 실제로 렌더링되고 마운트되기 직전에 호출된다. 이 단계에서는 Root Element가 아직 존재하지 않는다. Options API에서 this.$el을 사용하여 액세스할 수 있고, Composition API에선 ref를 사용해야 한다.” - onBeforeMount()

Options API

export default {
  beforeMount() {
    console.log(this.$el);  // null
  },
}

Composition API

<template>
  <div ref="root">Hello World</div>
</template>
<script>
import { ref, onBeforeMount } from 'vue';
export default {
  setup() {
    const root = ref(null);
    /* Composition API */
    onBeforeMount(() => {
      console.log(root.value); // null
    })
    return {
      root,
    }
  },
  beforeMount() {
    /* Options API */
    console.log(this.$el); // null
  },
}
</script>

mount()와 onMount()

“Component의 첫 번째 렌더링 직후에 호출된다. 이 단계에서는 직접 DOM 액세스를 허용하는 요소를 사용할 수 있다. Options API에서는 $el을 사용하여 DOM에 액세스하고, Composition API에서 Vue 라이프사이클 훅의 DOM에 액세스하려면 ref를 사용해야 한다.” - onMount()

import { ref, onMounted } from 'vue';
export default {
  setup() {
    /* Composition API */
    const root = ref(null)
    onMounted(() => {
      console.log(root.value);  // null
    })
    return {
      root,
    }
  },
  mounted() {
    /* Options API */
    console.log(this.$el);  // <div ...>
  },
}

Update Hooks

“업데이트된 Lifecycle event는 반응형 데이터(Reactive Data)가 수정될 때마다 트리거되어 렌더 업데이트를 트리거된다.” - Update Hooks

beforeUpdate()와 onBeforeUpdate()

“데이터가 변경될 때 Component가 다시 렌더링되기 전에 실행된다. 변경 사항이 발생하기 전에 DOM을 수동으로 업데이트하기에 좋은 곳이다.” - onBeforeUpdate()

update()와 onUpdate()

“DOM이 업데이트되면 업데이트된 메서드가 호출하게 된다.” - onUpdate()

<template>
  <div>
    <p> | edited 8 times</p>
    <button @click="val = Math.random(0, 100)">Click to Change</button>
  </div>
</template>

Options API

<script>
export default {
  data() {
    return {
      val: 0,
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate() val: ' + this.val); // beforeUpdate() val: 0.random value
  },
  updated() {
    console.log('updated() val: ' + this.val);  // updated() val: 0. change random value
  },
}
</script>

Composition API

<script>
import { ref, onBeforeUpdate, onUpdated } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const val = ref(0);
    onBeforeUpdate(() => {
      count.value++
      console.log('beforeUpdate');  // beforeUpdate
    })
    onUpdated(() => {
      console.log('updated() val: ' + val.value); // updated() val: 0.random value
    })
    return {
      count,
      val,
    }
  },
}
</script>

Destruction Hooks – Cleaning Things Up

“Destruction Hooks는 Component를 제거하고, 허술하게 남은 것들을 모두 치우는 과정에서 사용된다. 제대로 처리되지 않으면 메모리 누수를 유발할 수 있는 이벤트 리스너와 항목을 제거하게 된다.” - Destruction Hooks

beforeUnmounted()와 onBeforeUnmounted()

“해당 단계는 Component가 분해되기 전이기 때문에, 전부는 아니더라도 대부분의 정리 작업을 수행해야 할 때이다. 이 단계에서 구성 요소는 여전히 완전히 작동하며 아직 손상된 것은 없다.” - onBeforeUnmounted()

Options API

export default {
  mounted() {
    console.log('mount'); // mount
    window.addEventListener('resize', this.someMethod);
  },
  beforeUnmount() {
    console.log('unmount');
    window.removeEventListener('resize', this.someMethod);
  },
  methods: {
    someMethod() {
      // do something
    },
  },
}

Composition API

import { onMounted, onBeforeUnmount } from 'vue';
export default {
  setup() {
    const someMethod = () => {
      // do smth
    }
    onMounted(() => {
      console.log('mount'); // mount
      window.addEventListener('resize', someMethod);
    })
    onBeforeUnmount(() => {
      console.log('unmount');
      window.removeEventListener('resize', someMethod);
    })
  },
}

• 코드가 업데이트되면 일부 구성 요소가 자체적으로 마운트 해제 및 마운트가 된다.

unmounted()와 onUnmounted()

“이 시점에서 대부분의 구성 요소와 구성 요소의 속성이 사라지므로 수행할 수 있는 작업이 많지 않다. 다시 한 번, 일부 데이터를 스캔하여 정확히 무엇이 남아 있는지, 프로젝트에 유용할 수 있는지 확인하는 단계이다.” - onBeforeUnmounted()

import { onUnmounted } from 'vue';
export default {
  setup() {
    /* Composition API */
    onUnmounted(() => {
      console.log('unmounted');
    })
  },
  unmounted() {
    /* Options API */
    console.log('unmounted');
  },
}

Activation Hooks – Managing Keep-Alive Components

“<keep-alive> 태그는 동적 Component의 wrapper element 이다. 동적 Component가 변경될 때마다 Vue가 완전히 새로운 인스턴스를 생성할 필요가 없도록 비활성 구성 요소에 대한 캐시된 참조를 저장하게 된다.” - Activation Hooks

activated()와 onActivated()

“이 메서드는 활성 상태로 유지된 동적 구성 요소가 "활성화"될 때마다 호출됩니다. 즉, 동적 Component의 active view가 됩니다.” - onActivated()

<template>
  <div>
    <span @click="tabName = 'Tab1'">Tab 1 </span>
    <span @click="tabName = 'Tab2'">Tab 2</span>
    <keep-alive>
      <component :is="tabName" class="tab-area" />
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';
import { ref } from 'vue'
export default {
  components: {
    Tab1,
    Tab2,
  },
  setup() {
    /* Composition API */
    const tabName = ref('Tab1');
    return {
      tabName,
    }
  },
}
</script>

• Tab1.vue Component 내에서 활성화 후크에 다음과 같이 액세스할 수 있다.

<template>
  <div>
    <h2>Tab 1</h2>
    <input type="text" placeholder="this content will persist!" />
  </div>
</template>
<script>
import { onActivated } from 'vue';
export default {
  setup() {
    onActivated(() => {
      console.log('Tab 1 Activated');
    })
  },
}
</script>

deactivated()와 onDeactivated()

“활성 상태 유지 Component가 더 이상 동적 구성 요소의 active view가 아닐 때 호출된다. 이 Hooks는 특정 뷰가 포커스를 잃고 애니메이션을 트리거할 때 사용자 데이터를 저장하는 것과 같은 사용 사례에 유용할 수 있다.” - onDeactivated()

import { onActivated, onDeactivated } from 'vue';
export default {
  setup() {
    onActivated(() => {
      console.log('Tab 1 Activated');
    })
    onDeactivated(() => {
      console.log('Tab 1 Deactivated');
    })
  },
}

• 이제 탭을 전환하면 각 동적 구성 요소의 상태가 캐시되고 저장된다.

Vue 3 Debug Hooks

“Vue 3은 디버깅 목적으로 사용할 수 있는 두 개의 후크를 제공한다.” - Debug Hooks

• onRenderTracked
• onRenderTriggered
  이 두 이벤트 모두 Vue 인스턴스에서 다시 렌더링을 일으키는 원인을 알려주는 DebuggerEvent를 사용한다.

export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  },
}

결론!

• Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다.
• 이 과정에서 Vue는 각각의 단계에서, Vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공하게 된다. 일반적으로 많이 사용하는 종류로는 beforeCreate 및 created(setup() 메서드 자체로 대체됨), beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있다.

Back to [Vue] Vue.js 란?

[Vue] Vue.js 란?

21 Dec 2022 in Development on Client, Vue

#목차

• Vuejs 란?
• 특징
• SPA(Single Page Application)
• SSR(Server Side Rendering)
• MVVM 패턴이란?
• Vue Insctance
• 가상 DOM(Virtual DOM) 이란?
• 컴포넌트(Component)
• Vue Lifecycle
• 결론!

Vuejs 란?

“뷰(Vue)는 사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크이다. 표준 HTML, CSS, 자바스크립트를 기반으로 구축되며 단순하든 복잡하든 사용자 인터페이스를 효율적으로 개발할 수 있도록 도와주는 선언적이고 구성요소 기반의 프로그래밍 모델을 제공.” - Vuejs

특징

“데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적”

• MVVM 패턴을 사용과 Virtual DOM의 사용
• Angular에서 지원하는 양방향 데이터 바인딩(two-way binding)을 동일하게 제공
• 컴포넌트 간 통신의 기본 골격은 React의 단방향(one-way binding) 데이터 흐름(부모 -> 자식)을 사용
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름
• 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

SPA(Single Page Application)

“SPA는 서버에서 전체(HTML, CSS 및 JavaScript) 새 페이지를 로드하는 대신 현재 페이지를 동적으로 다시 작성하여 사용자와 지속적으로 상호 작용을 기반으로 추가 데이터를 검색하는 단일 페이지 웹 어플리케이션 이다.” - SPA

SSR(Server Side Rendering)

“SSR이란 서버에서 렌더링해서 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다. 웹사이트의 JavaScript가 웹사이트의 서버에서 렌더링되면 완전히 렌더링된 페이지가 클라이언트로 전송되고 클라이언트의 JavaScript 번들이 참여하여 SPA 프레임워크가 작동하게된다.” - SSR

MVVM 패턴이란?

“Backend 로직과 Client 의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식에서 기인하였다. 간단하게 생각해서 화면 앞단의 회면 동작 관련 로직과 뒷단의 DB 데이터 처리 및 서버 로직을 분리하고, 뒷단에서 넘어온 데이터를 Model 에 담아 View 로 넘어주는 중간 지점이라고 보면 되겠다.” - MVVM 패턴, WIKI

Vue Insctance

“new Vue({ ... })로 선언하여 만들어진 객체를 vue 인스턴스라고 부른다.”

• el : 태그에 지정한 id, 클래스명, 태그명으로 해당 태그와 vue 인스턴스를 연결하는 옵션.
• data : key와 value를 지정하는 json형식으로 데이터 입력 옵션.
• computed : getter/setter를 지정하는 옵션.

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello instance'
  },
  computed: {
    ...
  }
});

가상 DOM(Virtual DOM) 이란?

“DOM(Document Object Model) 요소가 많아지면 자바스크립트로 DOM을 핸들링하는 일이 무거워진다. 그래서 DOM과 비슷한 구조로 자바스크립트를 만들게 된다. 이것은 Real DOM과는 달리 메모리에 올라가있는 것이기 때문에 비교적 매우 빠른 성능을 보인다. Vue js가 가상돔(Virtual DOM)을 수정하면 DOM을 수정하는 것보다 빠르다. vue는 가상돔(Virtual DOM)이 변경될 때마다 Real DOM과 비교해서 차이를 찾고 차이난 부분의 DOM만 수정하는 동작을 하게 된다.” - Virtual DOM

컴포넌트(Component)

“화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트이다. Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다. 전역 등록과 지역 등록 존재한다.”

Vue는 재사용이 가능한 컴포넌트로 웹 페이지를 구성할 수 있다.
확장자가 .vue인 단일 파일에 HTML, Javascript, CSS 코드로 구성하여 사용한다.

Vue Lifecycle

• Creation — 구성요소를 작성할 때 실행된다.
• Mounting — DOM이 마운트될 때 실행된다.
• Updates — 사후 대응 데이터가 수정될 때 실행된다.
• Destruction — 요소가 파괴되기 직전에 실행된다.

Continue with [Vue] Vue.js 라이프사이클 이해하기

결론!

• 뷰(Vue)는 사용자 인터페이스를 구축하기 위한 자바스크립트 프레임워크이다.
• SPA와 SSR로 사용자에게 편의성을 제공한다.
• MVVM 패턴을 사용과 Virtual DOM의 사용이 가능.
• 양방향 데이터 바인딩(two-way binding)과 단방향(one-way binding) 데이터 바인딩이 가능하다.
• 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠르다 또한 문법이 단순하고 간결하여 다른 프레임워크 보다 비교적 배우기 수월하다.

[JS] Javascript는 싱글 스레드(Single Threaded)인데 어떻게 병렬처리(다중처리)가 가능할까?

12 Dec 2022 in Development on Client, Javascript, Threaded

#목차

• JavaScript의 Runtime환경
  • Thread 란?
  • Memory Heap 이란?
  • Call Stack 이란?
    • Stack Overflow
  • WEB APIs 란?
  • Tasks(Callback) Queue 란?
  • Event Loop 란?
• 결론!
  • 작동원리
  • 이해를 돕기위한 그림(Call Stack, WEB APIs)
• 추가 자료
  • 콜 스택(Call Stack)과 힙(Heap)
  • 예제를 통한 동작 원리
    • 1. GEC(Global Execution Context - 글로벌 실행 컨텍스트)가 생성되고 원시 값은 콜 스택에, 참조 값은 힙에 저장된다.
    • 2. 함수 func() 을 실행하게 되고 새로운 FEC(Function Execution Context)가 생성되며 동일하게 원시 값은 스택에, 참조 값은 힙에 저장된다.
    • 3. 이후, 함수 func() 이 객체 obj 를 리턴해서 o 에 저장된다. 리턴하기 때문에 FEC는 콜 스택에서 제거된다.
    • 4. 전체 코드가 실행이 끝나고 GEC가 콜 스택에서 제거된다. GEC가 제거됨에 따라서, 힙의 객체를 참조하는 스택의 값이 없기 때문에 가비지 컬렉터(Garbage Collector, GC)에 의해 제거된다.
• 추후 공부할 것
• Reference

JavaScript의 Runtime환경

Thread 란?

“Thread는 브라우저가 사용자 이벤트를 처리하고 디스플레이를 렌더링하여 화면에 그려주고, 일반적인 웹 페이지 또는 앱을 구성하는 코드의 대부분을 실행하는 데 사용한다.” - MDN

Memory Heap(변수,객체 저장소): 객체와 변수를 할당하는 데 사용되는 비구조화 메모리의 한 부분.
Call Stack(코드 실행): 실행 될 코드들이 메모리(Heap)에 할당된 변수 또는 객체를 찾아 호출되면서 코드가 실행되고 실행된 코드들은 Stack에서 제거.

• 즉, 위의 그림처럼 Javascript Engine(Single Threaded)에는 Memory Heap과 Call Stack으로 각 1개씩 구성되어 있다.

Memory Heap 이란?

“JavaScript는 객체가 생성될 때 자동으로 메모리를 할당하고 더 이상 사용되지 않을 때 메모리에서 제거한다(garbage collection).
이 자동성은 잠재적인 혼란의 원인된다. 왜냐하면, 개발자에게 메모리 관리에 대해 걱정할 필요가 없다는 잘못된 인상을 줄 수 있다.” - MDN

Memory life cycle

1. 필요한 메모리 할당
2. 할당된 메모리 사용(읽기, 쓰기)
3. 할당된 메모리가 더 이상 필요하지 않을 때 해제(제거)

JavaScript에서의 할당

• 값 초기화.
• 자바스크립트는 초기에 값이 선언될 때 자동으로 Memory Heap에 할당한다.

var a = 10;                             // stack에 저장
let b = 'hello';                        // stack에 저장
const varPI = Math.PI;                  // stack에 저장
const singleThreadExample = () => {     // stack에 저장
  return b + " " + (varPI * a);
}

Call Stack 이란?

“Call Stack은 인터프리터(웹 브라우저의 자바스크립트 인터프리터)가 여러 함수를 호출하는 스크립트에서 자신의 위치를 추적하는 메커니즘.” - MDN

• 스크립트가 함수를 호출하면 인터프리터는 함수를 호출 스택에 추가한 다음 함수를 수행하기 시작.
• Heap영역에 있는 해당 함수에 의해 호출되는 모든 함수는 스택에 추가되고 호출이 된 곳에서 기능을 실행.
• 현재 기능이 완료되면 인터프리터는 스택에서 해당 기능을 제거하고 마지막 코드 목록에서 종료한 위치에서 실행을 다시 시작.

const multiply = (x, y) => {    
    return x * y;
}
function printSquare(x) {   
    let s = multiply(x, x);
    console.log(s);
}
printSquare(5); // Call Stack 영역

// 25

Stack Overflow

• 스택이 할당된 공간보다 더 많은 공간을 차지하면 “stack overflow” 오류가 발생합니다.

const foo = () => {
  foo();
}
foo();

WEB APIs 란?

“웹 API는 자바스크립트 엔진의 일부는 아니지만 브라우저가 제공하는 런타임 환경의 일부이다. 현대의 브라우저에는 매우 다양한 것을 가능하게 하는 수많은 API가 있다.”

• Manipulate documents(문서 조작): 가장 일반적으로 사용되는 웹 API 중 하나는 개발자가 HTML과 CSS를 조작할 수 있게 해주는 DOM API로 HTML을 사용하면 HTML을 생성, 변경 및 제거하고 웹 페이지에 스타일을 동적으로 적용할 수 있다.
• Draw and manipulate graphics(그래픽 그리기 및 조작): 브라우저에서 널리 지원되는 Canvas API 및 Web Graphics Library API를 사용하면 <canvas> 요소에 포함된 픽셀 데이터를 프로그래밍 방식으로 업데이트할 수 있다.
• Fetch data from a server(서버에서 데이터 가져오기): Fetch API는 Request 및 Response 개체의 일반적인 정의를 사용하여 네트워크를 통해 리소스를 가져오는 인터페이스를 제공.

이벤트 수신기, 타이밍 함수 및 AJAX 요청과 같은 기능은 모두 작업이 트리거될 때까지 웹 API 컨테이너에 저장한다. 요청이 데이터 수신을 완료하거나 타이머가 설정된 시간에 도달하거나 클릭이 발생하면 콜백 함수가 콜백 대기열로 전송한다. - WEB APIs

Tasks(Callback) Queue 란?

“Tasks(Callback) Queue는 웹 API에서 전송된 콜백 함수를 추가된 순서대로 저장한다. 이 대기열은 선입선출로 실행되는 데이터 구조이다. 큐는 배열 푸시 방식을 사용하여 큐의 끝에 새로운 콜백 함수를 추가하고 배열 이동 방식을 사용하여 큐의 첫 번째 항목을 제거한다.”

콜백 함수는 콜 스택이 비워질 때까지 대기열에 저장된 다음 이벤트 루프에 의해 스택으로 이동이 된다.

Event Loop 란?

“Event Loop의 역할은 콜 스택과 콜백(Tasks Queue) 대기열의 상태를 지속적으로 모니터링하는 것이다. 스택이 비어 있으면 콜백 큐에서 콜백을 가져와 콜 스택에 배치하여 실행을 예약한다.”

결론!

• 이것이 자바스크립트가 단일 스레드 언어임에도 불구하고 비동기적으로 실행될 수 있는 것으로 묘사되는 이유이다.
• 자바스크립트는 한 번에 하나의 기능만 실행할 수 있기 때문에 동기화되지만 웹 API에서 콜백 큐로 콜백을 푸시 할 수 있고 이벤트 루프가 이러한 콜백을 지속적으로 콜 스택에 추가할 수 있기 때문에 자바스크립트는 비동기적으로 실행될 수 있다고 생각한다.

작동원리

1. JS Engine이 Heap영역에 변수를 저장해 놓는다.
2. JS Engine이 Stack영역에 작성한 코드들을 넣고 실행한다.
3. setTimeout, Ajax, async, Event Listener과 같은 비동기 작업들은 WEB APIs에 작업들을 넘긴다.
4. WEB APIs에서의 작업들은 Queue영역에와서 Stack영역이 비어있을때 Event Loop가 Stack영역으로 작업을 올려준다.

이해를 돕기위한 그림(Call Stack, WEB APIs)

그림출처

Call Stack

그림출처

WEB APIs

추가 자료

콜 스택(Call Stack)과 힙(Heap)

• 콜 스택(Call Stack) : 원시타입 값과 함수 호출의 실행 컨텍스트(Execution Context)를 저장하는 곳.
  • 원시타입이란? : 객체가 아니면서 메서드도 가지지 않는 데이터 타입(string, number, bigint, boolean, undefined, symbol, null)
  • 실행 컨텍스트(Execution Context)란? : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
    • 예제

var temp = 'temp';
function b () { console.log('안녕하세용'); }
function a () { b(); }
a();

실행 컨텍스트 환경

• 힙(Heap) : 객체(Object), 배열(Array), 함수(function)와 같이 크키가 동적으로 변할 수 있는 참조타입 값을 저장하는 곳.

예제를 통한 동작 원리

let a = 10;
let b = 35;
let arr = [];
function func() {
  const c = a + b;
  const obj = { d: c };
  return obj;
}
let o = func();

1. GEC(Global Execution Context - 글로벌 실행 컨텍스트)가 생성되고 원시 값은 콜 스택에, 참조 값은 힙에 저장된다.

GEC 컨텍스트 JS Single Thread

2. 함수 func() 을 실행하게 되고 새로운 FEC(Function Execution Context)가 생성되며 동일하게 원시 값은 스택에, 참조 값은 힙에 저장된다.

FEC 컨텍스트 JS Single Thread

3. 이후, 함수 func() 이 객체 obj 를 리턴해서 o 에 저장된다. 리턴하기 때문에 FEC는 콜 스택에서 제거된다.

작업을 마친 FEC 컨텍스트 JS Single Thread

4. 전체 코드가 실행이 끝나고 GEC가 콜 스택에서 제거된다. GEC가 제거됨에 따라서, 힙의 객체를 참조하는 스택의 값이 없기 때문에 가비지 컬렉터(Garbage Collector, GC)에 의해 제거된다.

추후 공부할 것

• 크롬브라우저로 확인하는 inner 방법
• [Javascript] Execution Context와 Lexical Environment
• JavaScript 식별자 찾기 대모험

Reference

• 콜 스택(Call stack)과 힙(Heap)
• JS Execution Context (실행 컨텍스트) 란?

[Programming] Do It! Vue.js 입문

30 Nov 2022 in Books on Tech, Programming

“읽은 기간 : 2022-10-19 ~ 2022-11-30”

Do It! Vue.js 입문

책 정보

• 제목 : Do It! Vue.js 입문
• 부제 : 예제로 이해하고 실전 프로젝트로 완성한다!
• 저자 : 장기효
• 쪽수 : 232쪽
• 발행(출시)일자 : 2018년 01월 27일

[Programming] Do It! HTML+CSS+자바스크립트

13 Nov 2022 in Books on Tech, Programming

“읽은 기간 : 2022-10-26 ~ 2022-11-13”

Do It! HTML+CSS+자바스크립트

책 정보

• 제목 : Do It! HTML+CSS+자바스크립트
• 부제 : 한 권으로 끝내는 웹 기본 교과서
• 저자 : 고경희
• 쪽수 : 648쪽
• 발행(출시)일자 : 2021년 01월 22일

[Math] 수학의 쓸모

27 Sep 2022 in Books on Math, Book

“읽은 기간 : 2022-09-06 ~ 2022-09-27”

수학의 쓸모

책 정보

• 제목 : 수학의 쓸모
• 부제 : 불확실한 미래에서 보통 사람들도 답을 얻는 방법
• 저자 : 닉 폴슨, 제임스 스콧 벨
• 쪽수 : 384쪽
• 발행(출시)일자 : 2020년 04월 02일

[Math] 공식의 아름다움

05 Sep 2022 in Books on Math, Book

“읽은 기간 : 2022-08-06 ~ 2022-09-05”

공식의 아름다움

책 정보

• 제목 : 공식의 아름다움
• 부제 : 원자폭탄에서 비트코인까지 세상을 바꾼 절대 공식
• 저자 : 양자학파
• 쪽수 : 448쪽
• 발행(출시)일자 : 2021년 11월 10일

[Math] 수학으로 생각하기

06 Aug 2022 in Books on Math, Book

“읽은 기간 : 2022-07-21 ~ 2022-08-06”

수학으로 생각하기

책 정보

• 제목 : 수학으로 생각하기
• 부제 : 복잡한 것을 단순하게 보는 사고의 힘
• 저자 : 스즈키 칸타로
• 쪽수 : 224쪽
• 발행(출시)일자 : 2022년 06월 29일

[Math] 알수록 재미있는 수학자들

20 Jul 2022 in Books on Math

“읽은 기간 : 2022-07-05 ~ 2022-07-20”

알수록 재미있는 수학자들

책 정보

• 제목 : 알수록 재미있는 수학자들
• 부제 : 고대에서 근대까지
• 저자 : 김주은
• 쪽수 : 208쪽
• 발행(출시)일자 : 2022년 07월 15일