Cpu 스케쥴링은 ready queue에 있는 프로세스 중 cpu를 할당할 프로세스를 결정하는 것이다.

cpu 스케쥴러의 두가지 종류

선점형(preemptive)

이미 작업 중인 프로세스에 대해서 우선 순위가 더 높은 프로세스가 등장한다면 context switching이 일어난다. 빠른 응답이 가능해 실시간 시스템이나 시분할 시스템에 적합니다. 하지만, context switching이 잦아 오버헤드가 발생한다.

context switching이란?

비선점형(non-preemptive)

이미 작업 중인 프로세스에 대해서 우선 순위가 더 높은 프로세스가 등장하더라도 context switching이 발생하지 않는다. 모든 프로세스에 대해 공평하게 작업이 가능하지만 앞에 긴 작업이 진행 중인 경우, 짧은 작업은 대기 시간이 길어지고 평균 처리시간이 증가한다.

선점형 vs. 비선점형

• 선점형 : 프로세스의 cpu를 강제로 뺏어서 실행
• 비선점형 : cpu를 획득한 프로세스가 스스로 반납하기 전까지 cpu를 뺏기지 않는 방법
  

디스패처

디스패처란?

Cpu할당을 결정하면 이를 이양하는 작업이 필요한데, 선택된 프로세스가 cpu를 할당받고 작업을 수행할 수 있게 환경설정하는 코드를 말한다.

• 현재 수행 중인 문맥을 pcb에저장하고, 새로운 프로세스의 문맥을 pcb로부터 복원한 후 그 프로세스에게 cpu를 넘기는 과정을 수행한다.

• 디스패처가 프로세스를 정지시키고 다른 프로세스에게 cpu를 전달하기까지 걸리는 시간을 디스패치 지연시간이라고 한다.

• 디스패치 지연시간의 대부분은 context switching 오버헤드에 해당한다.*

-> 선점형 cpu 스케쥴링에서 사용된다.

cpu 스케쥴링 알고리즘

Ready queue에 있는 프로세스를 대상으로 스케쥴링을 한다.

1) first come first served(fcfs)

• 먼저 온 순서대로 처리한다.
• 선점형 스케쥴링
• 소요시간이 긴 프로세스가 먼저 도착하면 짧은 프로세스들은 대기시간이 길어진다 (convoy effect)

  프로세스마다 대기시간은 앞의 프로세스가 완료될 때까지의 시간이고, 평균 대기시간은 이를 프로세스 수로 나눈 시간이다.

2) round robin (rr)

• 프로세스가 ready queue를 순차적으로 돌며 cpu를 할당한다.
• 비선점형 스케쥴링
• 프로세스 작업의 시간 제한이 있다. 시간이 경과하면, ready queue의 끝에 추가되고 다음 프로세스가 cpu를 할당받는다.

  할당시간을 time slice/time quantum 이라고 한다. 이 시간이 짧아질 수록 모든 프로세스가 동시에 작업하는 것처럼 보인다. 하지만, 그만큼 context switching이 많이 발생하여 오버헤드가 발생한다. 이 시간이 길어질수록 fcfs 방식과 유사해진다.

3) priority scheduling

• 우선순위가 가장 높은 프로세스에게 cpu를 할당하는 스케쥴링이다.
• 선점/비선점 둘다 가능
  • 선점형 : 더 높은 우선순위를 가진 프로세스가 오면 실행 중인 프로세스를 중지하고 cpu를 반환한다.
  • 비선점형 : 더 높은 우선순위를 가진 프로세스가 오면 ready queue의 head에 넣는다.
• 우선순위가 낮은 프로세스는 차례가 오지 않는 기아 상태(starvation)가 발생할 수 있다.
  • aging으로 시간이 지나면 우선순위를 높여 해결이 가능하다.

    aging : 기다리는 시간이 길어질 수록 우선순위를 조금씩 높임

4) shortest job first(sjf)

• cpu burst time이 짧은 프로세스에게 cpu를 할당한다.
• 비선점형으로 더 짧은 작업시간을 갖는 프로세스가 오면, ready queue에 넣는다.
• 시스템 프로세스 수를 최소회하고, 스케쥴링 부하가 감소한다.
• 메모리를 절약하여 시스템 효율이 향상된다.
• 작업시간이 길면 차례가 오지 않는 기아 상태(starvation)가 발생할 수 있다.

5) shortest remaining time first(srt)

• 잔여 실행시간이 짧은 프로세스에게 cpu를 할당한다.
• 선점형으로, 잔여 실행시간이 더 짧은 프로세스가 오면 cpu를 반납한다.
• 주어진 집합에 대해 최소 평균 대기시간을 제공한다.
• 잔여 실행 시간을 예측해야한다.

이 다섯개 이외에도, Highest response ratio nest(hrrn), multi-level queue(mlq), multi-level feedback queue(mfq) 등이 있다.

1. Vuetify 설치

npm install vuetify

node_modules 밑에 vuetify 생성확인

2. Vuetify 사용 설정

• main.js 에 아래 설정을 추가한다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// vuetify
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

Vue.config.productionTip = false

new Vue({
    router,
    store,
    vuetify: new Vuetify(),
    render: h => h(App)
}).$mount('#app')

• App.vue template 수정

<!-- App.vue -->
<template>
  <v-app id="app">

  </v-app>
</template>

3. 적용 확인

Vuetify 버튼 적용 확인하기

<!-- App.vue -->
<template>
  <v-app id="app">
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
  </v-app>
</template>

Actions 란?

Mutations 에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언한다.

그렇다면 왜 처리 로직의 성격에 따라 Mutations 와 Actions 로 나눠 등록을 해야할까?

• Mutations 의 역할은 State 관리에 초점을 두고 있다.
• => 한 데이터에 대해 여러 개의 컴포넌트가 접근할 때, 어느 컴포넌트에서 접근했는지를 알기 위해 사용한다고 배웠다.
• 상태 관리 자체가 한 데이터에 대해 여러 개의 컴포넌트가 관여하는 것을 효율적으로 관리하기 위함인데 Mutations 에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌트에서 변경을 요청했을 때, 그 변경 순서 파악이 어렵기 때문이다.

이러한 문제를 방지하기 위해 비동기 처리 로직은 Actions 에, 동기 처리 로직은 Mutations 에 나눠 구현한다.

따라서, setTimeout() 이나 서버와의 http 통신 처리 같이 결과를 받아올 타이밍이 예측되지 않은 로직은 Actions 에 선언한다.

:pushpin:Tip! 동기 처리(Mutations) vs. 비동기 처리(Actions)

Mutations 속성에는 state 값의 변화를 추적하기 어렵기 때문에 동기 처리 로직만 선언해주고,

state 호출, 변경 확인이 쉬운 Actions 에는 비동기 처리 로직을 선언해준다.

Actions 등록

Vuex에 Actions를 등록하는 방법은 State나 Mutations, Getters 와 유사하다.

// store.js
export const store = new Vuex.Store({
  // ...
  mutations: {
    addCounter: function (state, payload) {
      return state.counter++;
    }
  },
  actions: {
    addCounter: function (context) {
      // commit 의 대상인 addCounter 는 mutations 의 메서드를 의미한다.
      return context.commit('addCounter');
    }
  }
});

상태가 변화하는 걸 추적하기 위해 actions는 결국 mutations의 메서드를 호출(commit)하는 구조가 된다.

// store.js
export const store = new Vuex.Store({
  actions: {
    getServerData: function (context) {
      return axios.get("sample.json").then(function() {
        // ...
      });
    },
    delayFewMinutes: function (context) {
      return setTimeout(function () {
        commit('addCounter');
      }, 1000);
    }
  }
});

위처럼 HTTP get 요청이나 setTimeout 과 같은 비동기 처리 로직들은 actions 에 선언해준다.

Actions 사용

Actions를 이용해서 counter를 하나씩 늘려보자.

Actions를 호출할 때는 dispatch() 를 이용한다. (Mutations는 commit() 사용)

// App.vue
methods: {
  // Mutations 를 이용할 때
  addCounter() {
    this.$store.commit('addCounter');
  }
  // Actions 를 이용할 때
  addCounter() {
    this.$store.dispatch('addCounter');
  }
},

전체 구조도에서 dispatch 의 동작을 보면,

• App.vue에서 addCounter 이벤트가 발생하고, Vuex의 Actions에 dispatch를 한다.

• dispatch를 받은 Actions는 Mutations 에 commit 을 하고,

• Mutations 에 정의되어 있는 메서드가 호출되어 Vuex의 State를 변경시킨다.

위와 같은 흐름으로 상태 관리를 하게 되면, 어느 컴포넌트에서 어떤 순서로 State에 접근하고 변경했는지를 알 수 있게 되는 것이다.

Actions 에 인자 값 넘기기

Mutations와 유사하다.

<!-- by 와 duration 등의 여러 인자 값을 넘길 경우, 객체안에 key - value 형태로 여러 값을 넘길 수 있다 -->
<button @click="asyncIncrement({ by: 50, duration: 500 })">Increment</button>

export const store = new Vuex.Store({
  actions: {
    // payload 는 일반적으로 사용하는 인자 명
    asyncIncrement: function (context, payload) {
      return setTimeout(function () {
        context.commit('increment', payload.by);
      }, payload.duration);
    }
  }
})

mapActions

import {mapActions} from 'vuex';

export default {
  methods: {
    ...mapActions([
      'asyncIncrement',
      'asyncDecrement'
    ])
  },
}

📔 REFERENCE: [캡틴판교] https://joshua1988.github.io/web-development/vuejs/vuex-actions-modules/

Getters 란?

중앙 데이터 관리식 구조(Vuex)에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복 호출하게 되는 것이다.

예를 들어, 아래와 같은 코드가 있다.

// App.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

// Child.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

App.vue와 Child.vue 등 여러 컴포넌트에서 같은 로직을 중복 사용하고 있다. 이 때, Vuex의 데이터(state) 변경을 각 컴포넌트에서 수행하는 게 아니라, Vuex에서 수행하도록 하고, 각 컴포넌트에서 수행 로직을 호출하면, 가독성도 올라가고 성능면에서도 이점이 생긴다.

// store.js (Vuex)
getters: {
  doubleCounter: function (state) {
    return state.counter * 2;
  }
},

// App.vue
computed: {
  doubleCounter() {
    return this.$store.getters.doubleCounter;
  }
},

// Child.vue
computed: {
  doubleCounter() {
    return this.$store.getters.doubleCounter;
  }
},

Getters 등록을 위한 코드 정리

에 이어서 getters를 추가해보자.

• 지난번 코드에서 정리해야 하는 부분은 다음과 같다.

  <!-- App.vue -->
  <div id="app">
    Parent counter : {{ this.$store.state.counter }}
    <!-- ... -->
  </div>

  Vue 공식사이트에서 언급된 것처럼 Template의 표현식은 최대한 간소화해야 한다.

  따라서,

  <!-- App.vue -->
  <div id="app">
    Parent counter : {{ parentCounter }}
    <!-- ... -->
  </div>
  
  <!-- Child.vue -->
  <div>
    Child counter : {{ childCounter }}
    <!-- ... -->
  </div>

  // App.vue
  computed: {
    parentCounter() {
      return this.$store.state.counter;
    }
  },
  
  // Child.vue
  computed: {
    childCounter() {
      return this.$store.state.counter;
    }
  },

  computed 속성을 활용함으로써 Template 코드가 더 간결해지고, 가독성이 좋아졌다.

  *computed 속성이란?

  computed 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.

  • computed 속성은 인자를 받지 않는다.
  • HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다.

Getters 등록

• getters를 Vuex에 추가한다.

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        counter: 0
    },
    // getCounter 라는 getters를 추가
    getters: {
        getCounter: function(state) {
            return state.counter;
        }
    }
});

Getters 사용

등록된 getters를 각 컴포넌트에서 사용하려면 this.$store를 이용하여 getters에 접근한다.

// App.vue
computed: {
  parentCounter() {
    this.$store.getters.getCounter;
  }
},

// Child.vue
computed: {
  childCounter() {
    this.$store.getters.getCounter;
  }
},

mapGetters

Vuex에 내장된 helper함수, mapGetters로 이미 위에서 한번 가독성이 올라간 코드를 더 직관적이게 작성할 수 있다.

<!-- App.vue -->
<div id="app">
  Parent counter : {{ parentCounter }}
  <!-- ... -->
</div>

// App.vue
import { mapGetters } from 'vuex'

// ...
computed: mapGetters({
  parentCounter : 'getCounter' // getCounter 는 Vuex 의 getters 에 선언된 속성 이름
}),

또는, 아래와 같이 간단하게 선언할 수도 있다.

<!-- App.vue -->
<div id="app">
  Parent counter : {{ getCounter }}
  <!-- ... -->
</div>

// App.vue
import { mapGetters } from 'vuex'

computed: mapGetters([
  'getCounter'
]),

Mutaions 란?

Mutations 란, Vuex의 데이터 즉 state의 값을 변경하는 로직들을 의미한다.

Getters와의 차이점은

1. 인자를 받아 Vuex에 넘겨줄 수 있고
2. computed가 아닌 methods에 등록한다.

또한, Actions 와의 차이점은

1. Mutations 는 동기적 로직을 정의
2. Actions 는 비동기적 로직을 정의

Mutations 의 성격상 안에 정의한 로직들이 "순차적"으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수가 있기 때문이다.

지금까지 counter를 변경할때 아래와 같이 직접 state에 접근하여 변경하였다.

return this.$store.state.counter++;
return this.$store.state.counter;

하지만, 이 방식은 안티패턴으로써 Vue의 상태관리 패턴에 맞지 않는 방식이다.

안티패턴인 이유는 여러 개의 컴포넌트에서 같은 state 값을 동시에 제어하게 되면, state 값이 어느 컴포넌트에서 호출해서 변경된건지 추적하기 어렵기 때문이다.

하지만, 상태변화를 명시적으로 수행함으로써 테스팅, 디버깅, Vue의 Reactive 성질 준수의 혜택을 얻는다.

아래와 같이 commit을 이용하여 state를 변경한다.

:pushpin:Tip!

• Mutations 가 낯설다면 기억하기 쉽게 Setters 로 이해할 수 있다.

Mutations 등록

getters와 마찬가지로 Vuex 에 mutations 속성을 추가한다.

// store.js
export const store = new Vuex.Store({
  // ...
  mutations: {
    addCounter: function (state, payload) {
      return state.counter++;
    }
  }
});

Mutations 사용

App.vue의 기존 코드는 addCounter에서 state의 counter 값을 바로 접근하여 1을 더하는 코드였다.

state를 컴포넌트에서 직접 접근하여 증가시키는 부분을 mutations 를 이용하는 코드로 바꾸자.

<!-- App.vue(parent) -->
!<template>
  <div id="app">
    Parent counter : {{ parentCounter }} <br>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>
   <child></child> 
  </div>
</template>

<script>
import Child from "./Child.vue";
import { mapGetters } from 'vuex';

export default {
  components: {
    child : Child
  },

  computed: mapGetters({
    parentCounter : 'getCounter'
  }),

  methods: {
    addCounter(){
      // this.$store.state.counter++;
      // commit을 이용하여 mutations 이벤트를 호출해야한다.
      this.$store.commit('addCounter'); 
    }
  }
};
</script>

Mutations 에 인자 값 넘기기

각 컴포넌트에서 Vuex 의 state를 조작하는데 필요한 특정 값들을 넘기고 싶을 때는 commit() 에 두번째 인자를 추가한다.

this.$store.commit('addCounter', 10);
this.$store.commit('addCounter', {
  value: 10,
  arr: ["a", "b", "c"]
});

이를 Vuex 에서 아래와 같이 받을 수 있다.

mutations: {
  // payload 가 { value : 10 } 일 경우
  addCounter: function (state, payload) {
    state.counter = payload.value;
  }
}

mapMutations

mapGetters와 마찬가지로, Vuex 에 내장된 mapMutations 를 이용하여 코드 가독성을 높일 수 있다.

// App.vue
import { mapMutations } from 'vuex'

methods: {
  // Vuex 의 Mutations 메서드 명과 App.vue 메서드 명이 동일할 때 [] 사용
  ...mapMutations([
    'addCounter'
  ]),
  // Vuex 의 Mutations 메서드 명과 App.vue 메서드 명을 다르게 매칭할 때 {} 사용
  ...mapMutations({
    addCounter: 'addCounter' // 앞 addCounter 는 해당 컴포넌트의 메서드를, 뒤 addCounter 는 Vuex 의 Mutations 를 의미
  })
}

📔 REFERENCE: [캡틴판교] https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/

프로그램을 실행하는 도중에, 예기치 않은 상황이 발생할 경우 현재 실행 중인 작업을 즉시 중단하고 발생된 상황을 우선 처리한 후 실행 중이던 작업으로 복귀하여 계속 처리하는 것이다.

지금 수행중인 일보다 더 중요한 일(ex. 입출력, 우선순위연산 등)이 발생하면 그 일을 먼저 처리하고 나서 하던 일을 계속해야한다.

• 외부/내부 인터럽트는 CPU의 하드웨어 신호에 의해 발생
• 소프트웨어 인터럽트는 명렁어의 수행에 의해 발생

외부 인터럽트

입출력 장치, 타이밍 장치, 전원 등 외부적인 요인으로 발생 전원 이상, 기계 착오, 외부 신호, 입출력

내부 인터럽트

Trap이라고 부르며, 잘못된 명령이나 데이터를 사용할 때 발생

• Division by zero, Overflow/Underflow, 기타 Exception

소프트웨어 인터럽트

프로그램 처리 중 명령의 요청에 의해 발생한 것 (SVC 인터럽트 : SuperVisor Call)

사용자가 프로그램을 실행시키거나 감시프로그램(Supervisor)을 호출하는 동작을 수행하는 경우 소프트웨어 이용중 다른 프로세스를 실행시키면 시분할 처리를 위해 자원 할당 등의 동작이 수행된다.

✨ 인터럽트 발생 처리 과정

1. 주 프로그램 실행
2. 인터럽트 발생
3. 복귀주소 저장
4. 인터럽트 백터로 점프
5. 인터럽트 처리
6. 인터럽트 처리완료
7. 복귀주소 로드
8. 마지막에 실행되던 주소로 점프
9. 주 프로그램 실행

인터럽트 백터(Interrupt vector) : 인터럽트가 발생했을 때, 그 인터럽트를 처리할 수 있는 서비스 루틴들의 주소를 가지고 있는 공간이다.

시나리오 주 프로그램이 실행되다가 인터럽트가 발생했다.

현재 수행 중인 프로그램을 멈추고, 상태 레지스터와 PC 등을 스택에 저장한 뒤에 인터럽트 서비스 루틴으로 간다. -> 잠시 저장하는 이유는 인터럽트 서비스 루틴이 끝난 뒤 다시 원래 작업으로 돌아와야 하기 때문

만약 인터럽트가 없다면 컨트롤러는 특정한 어떤 일을 할 시기를 알기 위해 계속 체크를 해야 한다. (== 폴링(Polling))

폴링을 하는 시간에는 원래 하던 일에 집중할 수가 없게 되어 많은 기능을 제대로 수행하지 못하는 단점이 있었다.

✨ 인터럽트 우선순위 판별 방법

컨트롤러가 입력을 받아들이는 방법(우선순위 판별방법)에는 두가지가 있다.

소프트웨어적인 방법(Polling)

인터럽트 요청 플래그를 차례로 비교하여 우선순위가 가장 높은 인터럽트 자원을 찾고, 이에 해당하는 인터럽트 서비스 루틴을 수행한다. 속도가 빠른 장치에 높은 등급을 부여한다. 우선순위 변경이 쉽다. 많은 인터럽트가 있을 경우 하드웨어 적인 방법에 비해서 우선순위 판단 속도가 느리다. 회로가 간단하고 융통성이 있으며, 별도의 하드웨어가 필요 없다.

하드웨어적인 방법(Vectored Interrupt)

인터럽트를 요청할 수 있는 장치와 CPU사이에 장치번호를 식별할 수 있는 버스를 직렬/병렬로 연결한다. 인터럽트 벡터는 인터럽트를 발생한 장치가 분기할 곳에 대한 정보이다.

소프트웨어적인 방법에 비해 비경제적이다. 회로가 복잡하고 융통성이 없으나, 별도의 소프트웨어가 필요없이 하드웨어로 처리되므로 속도가 빠르다.

하드웨어적인 방법은 아래 2가지로 나뉜다.

1) Daisy Chain 인터럽트가 발생하는 모든 장치를 하나의 직렬 회선으로 연결한다. 우선순위가 높은 장치를 상위에 두고 우선순위 차례대로 배치한다.
2) 병렬(Parallel) 우선순위 부여 방식 인터럽트가 발생하는 모든 장치를 하나의 직렬 회선으로 연결한다. 각 장치별 우선순위를 판별하기 위한 Mask register에 bit를 설정한다. Mask register상 우선순위가 높은 서비스 루틴 수행중 우선순위가 낮은 bit들을 비활성화 시킬 수 있다. 반대로 우선순위가 높은 인터럽트는 낮은 인터럽트 수행 중에도 우선 처리된다.

인터럽트 방식은 하드웨어로 지원을 받아야 하는 제약이 있지만, 폴링에 비해 신속하게 대응하는 것이 가능하다. 따라서 실시간 대응이 필요할 때는 필수적인 기능이다.

즉, 인터럽트는 발생시기를 예측하기 힘든 경우에 컨트롤러가 가장 빠르게 대응할 수 있는 방법이다.

• APRANET이 개발된 이후 현재의 인터넷으로 발전해나가는 과정에서 대부분의 데이터 통신이 TCP와 IP 기반으로 이루어졌기 때문에 인터넷 프로토콜 그 자체를 표현하는 용어

• 사실상 인터넷 프로토콜을 대표하는 용어로 사용

• TCP/IP는 현재 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 통신규약(프로토콜)의 모음이다.

  
  

1계층 - 네트워크 액세스 계층(Network Access Layer)

• OSI 7계층의 물리계층과 데이터 링크 계층에 해당
• 물리적인 주소로 MAC을 사용
• CSMA/CD, MAC, LAN, X25, 패킷망, 위성 통신 등
• Ethernet(이더넷), Token Ring, PPP 등

2계층 - 인터넷 계층(Internet Layer)

• OSI 7계층의 네트워크 계층에 해당
• 통신 노드 간의 IP패킷을 전송하는 기능과 라우팅 기능을 담당
• IP, ICMP, ARP, RARP, OSPF 등

3계층 - 전송 계층(Transport Layer)

• OSI 7계층의 전송 계층에 해당
• 통신 노드 간의 연결을 제어하고, 신뢰성 있는 데이터를 전송
• TCP, UDP 등

4계층 - 응용 계층(Application Layer)

• OSI 7계층의 세션 계층, 표현 계층, 응용 계층에 해당
• TCP/UDP 기반의 응용 프로그램을 구현할 때 사용
• SMTP, FTP, HTTP, SSH, DNS 등

컨텍스트 스위칭에 대해서 알아보자.

Context Switching이란?

CPU 사용을 A 라는 프로세스에서 B 라는 다른 프로세스에 넘겨주는 과정을 말한다.

: 현재 진행하고 있는 Task(Process, Thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽어 적용하는 과정

어떤 프로세스에게 CPU 사용을 넘겨줄지에 대해서는 CPU Scheduling에 의해 결정된다.

why?

"멀티 프로그래밍"의 이점을 살리기 위해서다.

• 컴퓨터가 매번 하나의 Task만 처리할 수 있다면?
  • 해당 Task가 끝날 때 까지 다음 Task는 기다려야 한다.
  • 또한, 반응속도가 매우 느리고 사용하기 불편하다.
• 다양한 사람들이 동시에 사용하는 것처럼 하기 위해서는?
  • 멀티테스킹을 통해 빠른 반응속도로 응답할 수 있다.
  • 빠른 속도로 Task를 바꿔가며 실행하기 때문에 사람의 눈으론 실시간 처럼 보이게 된다.
  • CPU가 Task를 바꿔가며 실행하기 위해 Context Switching이 필요하게 되었다.

Context Switching은 어떻게 진행될까?

• Task의 대부분 정보는 Register에 저장되고 PCB(Process Control Block)로 관리된다.
• 현재 실행하고 있는 Task의 PCB 정보를 저장. (Process Stack, Ready Queue)
• 다음 실행할 Task의 PCB 정보를 읽어 Register에 적재하고 CPU가 이전에 진행했던 과정을 연속적으로 수행한다.

Thread 간의 Context Switching 비용이 낮은 이유?

프로세스 간의 Context switching 시 PCB 값 전체를 바꿔야 한다.

하지만, Thread는 data, heap, code 영역을 공유하고 있기 때문에 stack 과 PC register의 값이 들어있는 TCB만 바꾸면 되기 때문에 Cost가 낮은 것이다.

교착상태 (deadlock 데드락)의 발생조건!

NCS 전공 시험에서도 자주 출제되고, 기술면접에서도 자주 물어보는 개념이다.!

1. 데드락이란?

• 프로세스가 자원을 얻지 못해 다음 처리를 하지 못하는 상태로, '교착 상태'라고도 하며, 시스템적으로 한정된 자원을 여러 곳에서 사용하려고 할 때 발생한다.

  

  p1과 p2가 리소스1,2 둘 다를 얻어야 한다고 가정할 때,

  t1에 p1이 리소스 1을 얻고, p2가 리소스 2를 얻었다면, t2때 p1은 리소스 2를, p2는 리소스 1을 기다리게 된다.

  하지만 서로 원하는 리소스가 상대방에게 할당되어 있기 때문에 이 두 프로세스는 무한정 기다리게 되는데 이러한 상태를 DeadLock 상태라고 한다.

발생되는 상황 예시

• 멀티 프로그래밍 환경에서 한정된 자원을 사용하려고 서로 경쟁하는 상황 발생
• 어떤 프로세스가 자원을 요청했을 때, 그 시각에 그 자원을 사용할 수 없는 상황이 발생할 수 있고, 그 때는 프로세스가 대기 상태로 들어감.
• 대기 상태로 들어간 프로세스들이 실행 상태로 변경 될 수 없을 때 교착 상태 발생

🔒 데드락의 발생 조건 4가지

교착 상태는 한 시스템 내에서 다음의 4가지 조건이 동시에 성립할 때 발생한다.

1. 상호 배제(Mutual Exclusion)

   : 자원은 한 번에 한 프로세스만이 사용할 수 있어야 한다.

2. 점유 대기 (Hold and Wait)

   : 최소한 하나의 자원을 점유하고 있으면서 다른 프로세스에 할당되어 사용되고 있는 자원을 추가로 점유하기 위해 대기하는 프로세스가 있어야 한다.

   즉, 이미 자원을 사용중인데, 다른 프로세스가 사용중인 자원을 사용하기 위해 대기하고 있는 상태의 프로세스가 존재해야 한다.

3. 비선점 (No preemption)

   : 다른 프로세스에 할당된 자원은 사용이 끝날 때까지 강제로 빼앗을 수 없어야 한다.

4. 순환 대기 (Circular wait)

   : 프로세스의 집합에서 P0은 P1이 점유한 자원을 대기하고 P1은 P2가 점유한 자원을 대기하고, P2...Pn-1d은 Pn이 점유한 자원을 대기하며 Pn은 P0이 점유한 자원을 요구해야 한다.

컴파일러와 인터프리터는 모두 고급 언어(java, c언어 등)를 PC가 읽을 수 있는 언어(2진법)로 변환하는 장치이다.

인터프리터와 컴파일러의 차이를 보면,

1. 인터프리터란, 고급 언어로 작성된 원시 코드 명령문들을 한번에 한 줄씩 읽어들여서 실행하는 프로그램이며,
2. 컴파일러란, 특정 프로그램 언어로 작성된 문장을 처리하여 기계어 또는 컴퓨터가 사용할 수 있는 코드로 변경시켜주는 특수한 용도의 프로그램이다.

컴파일러와 인터프리터의 가장 큰 차이점은 해석을 한번에 하느냐 아니면 실행과 동시에 부분적으로 해석을 하느냐 이다.

1. 컴파일러는 프로그램 전체를 한번에 기계어로 편집하는 것을 말하고,
2. 인터프리터는 작성한 프로그램을 한 줄씩 번역하면서 실행하는 것이다.

실행순서

• 컴파일러의 실행과정
  1. 어휘 분석
  2. 구분 분석
  3. 의미 분석
  4. 중간 코드 생성
  5. 기계어 코드 생성
• 인터프리터의 프로그램 실행 과정
  1. 한 명령어를 메모리에서 가져옴
  2. 가져온 명령어 해석
  3. 필요한 데이터 가져옴
  4. 명령 실행

컴파일러와 인터프리터의 차이 요약 정리

Vue.js의 컴포넌트와 컴포넌트간 통신 방법을 알고 있다는 전제하에 시작한다.

Vuex란?

• Vue.js의 상태 관리를 위한 패턴이자 라이브러리.

• 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있다.

Vue의 상태관리는 왜 필요할까?

• 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성한다.
• 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다.

상태 관리란?

상태 관리란, 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴을 의미한다.

상태 관리로 해결할 수 있는 문제점?

상태 관리는 중대형 규모의 웹 애플리케이션에서 컴포넌트 간에 데이터를 더 효율적으로 전달할 수 있다.

일반적으로 앱의 규모가 커지면서 생기는 문제점들은 아래와 같다.

1. 뷰의 컴포넌트 통신 방식인 props, event emit 때문에 중간에 거쳐야할 컴포넌트가 많아지거나
2. 이를 피하기 위해 Event Bus를 사용하여 컴포넌트 간 데이터 흐름을 파악하기 어려운 것

이러한 문제점을 해결하기 위해 모든 데이터 통신을 한 곳에서 중앙 집중식으로 관리하는 것이 상태 관리다.

상태 관리 패턴

[상태 관리 구성요소]

• state: 컴포넌트 간에 공유할 data
• view: 데이터가 표현될 template
• actions: 사용자의 입력에 따라 반응할 methods

new Vue({
  // state = > 공유할 데이터
  data() {
    return {
      counter: 0
    };
  },
  // view
  template: `
    <div>{{ counter }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.counter++;
    }
  }
});

위 구성요소는 아래와 같은 단방향 흐름으로 동작한다.

🎨 예제 #1 - 간단한 Vue App

뷰엑스를 알아보기 위해 버튼으로 숫자를 늘리고 줄일 수 있는 카운터 앱을 만들어보자. Vue CLI로 프로젝트를 생성한 다음 아래와 같이 Parent, Child 컴포넌트를 제작한다.

App.vue (Parent component)

<!-- App.vue(parent) -->
<template>
  <div id="app">
    Parent counter : {{ counter }} <br>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

    <!-- Child 컴포넌트를 등록하고 counter 데이터 속성을 props로 전달한다. -->
    <child v-bind:num="counter"></child>
  </div>
</template>

<script>
// chilc 컴포넌트 import
import Child from "./Child.vue";

export default {
  components: {
    // child 컴포넌트를 App.vue의 하위 컴포넌트로 등록
    child : Child
  },

// data 등록
  data(){
    return {
      counter: 0
    };
  },
  methods: {
    // 이벤트 추가
    addCounter(){
      this.counter++;
    },
    subCounter(){
      this.counter--;
    }
  }
};
</script>

Child.vue (Child Component)

<template>
    <div>
        <hr>
        Child counter : {{ num }} <br>
        <button>+</button>
        <button>-</button>
    </div>  

</template>

<script>
export default {
    // 상위 컴포넌트에서 내려준 counter 속성을 num으로 받음
    props: ["num"]
};
</script>

하위 컴포넌트인 Child.vue는 App.vue에게서 props 속성으로 counter를 받는다.

그래서, 결국은 App.vue의 +를 누르거나 -를 눌러도 child.vue의 counter도 같은 값을 가지게 된다.

다르게 말해, 같은 데이터 속성을 2개의 컴포넌트에서 접근하여 같은 값을 표현하고 있다는 것이다. 이 구조는 뷰의 props 속성을 이용한 기본적인 컴포넌트 통신 방법이다.

• 만약 한 화면에서 표시해야 할 컴포넌트의 갯수가 무한정 많아진다면?
• 최상위 컴포넌트에서 최하위 컴포넌트에 데이터를 전달하기 위해 중간 계층의 컴포넌트에 모두 props, event emit을 선언해야 한다.

이 비효율적인 컴포넌트 간 데이터 전달 방식을 Vuex로 해결할 수 있다!:mask:

🎨 Vuex 예제 #2 - Vuex 설치 및 등록

1. Vuex 설치

npm install vuex

2. 뷰엑스를 등록할 .js 파일 새로 생성. 이름은 관례에 따라 store.js로 지정

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // ...
});

3. 프로젝트의 main.js 파일로 가서 store.js를 불러와 등록한다.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// store.js를 불러오는 코드
import { store } from "./store.js";

Vue.config.productionTip = false;

new Vue({

  // 뷰 인스턴스의 store 속성에 연결
  store: store,
  router,
  render: h => h(App)

}).$mount("#app");

🎨 Vuex 예제 #3 - state 등록

state를 vuex에 추가한다.

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // counter 라는 state 속성을 추가
  state: {
    counter: 0
  }
});

state에 정의된 counter속성은 Parent 컴포넌트에서 사용하던 data 속성 counter와 동일한 역할을 합니다. 이미 앞 상태 관리 패턴에서 설명했듯이, state는 컴포넌트 간에 공유할 data 속성을 의미한다.

🎨 Vuex 예제 #4 - state 접근

vuex의 state에 등록한 counter 속성은 컴포넌트 템플릿 코드에서 $store.state.counter로 접근할 수 있다.

<!-- App.vue(parent) -->
!<template>
  <div id="app">
    Parent counter : {{ $store.state.counter }} <br>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

  <!-- 기존코드 -->
    <!-- Child 컴포넌트를 등록하고 counter 데이터 속성을 props로 전달한다. -->
   <!-- <child v-bind:num="counter"></child> -->
   <child></child> 
  </div>
</template>

<script>
// chilc 컴포넌트 import
import Child from "./Child.vue";

export default {
  components: {
    // child 컴포넌트를 App.vue의 하위 컴포넌트로 등록
    child : Child
  },

/* 기존코드
// data 등록
  data(){
    return {
      counter: 0
    };
  }, */
  methods: {
    addCounter(){
      //this.counter++;
      this.$store.state.counter++;
    },
    subCounter(){
      //this.counter--;
      this.$store.state.counter--;
    }
  }
};
</script>

위 코드는 기존 App.vue 코드와 2가지가 다르다.

1. data 속성으로 선언한 counter 값 제거
2. Child 컴포넌트로 counter를 전달하지 않음 (props 사용 x)

결국 Parent 컴포넌트에서 관리하던 counter 데이터를 Vuex의 state에 넘겨줬다.

Child 컴포넌트에서 접근하던 Parent 컴포넌트의 data 속성이 Vuex로 갔기 때문에 이제 Child에서는 Vuex의 state를 바라보면 된다.

이제 Parent와 Child 모두 state에 접근할 수 있게 된 것. 이외에 모든 컴포넌트는 state에 접근을 할 수 있다.

Vuex를 사용하고 나서도, Parent 컴포넌트의 + 버튼을 눌렀을 때 동일하게 동작하는 것을 볼 수 있다.

동일하게 Child 컴포넌트에도 뷰엑스 적용해보자.

!<template>
    <div>
        <hr>
        Child counter : {{ $store.state.counter }} <br>
        <button>+</button>
        <button>-</button>
    </div>  
</template>

<script>
export default {
    // 상위 컴포넌트에서 내려준 counter 속성을 num으로 받음
    /* 기존 코드
    props: ["num"]
    */
};
</script>

Parent 컴포넌트에서 props 속성으로 counter를 전달받던 방식에서 Vuex의 state인 counter를 바로 접근하는 방식으로 변경했다.

📕 REFERENCE: [캡틴판교] https://joshua1988.github.io/web-development/vuejs/vuex-start/

🔔 Vue.js란 무엇인가?

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리

[ 장점 ]

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

• View와 Model간 양방향 바인딩 가능

• 하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용

• 가장 적은 러닝커브(문법 이해가 쉽다)

• 매우 적은 크기(30.67kb min+gzip)

• 공식 사이트의 상세한 설명

• 가장 최근에 릴리즈 시작한 프레임 워크(2014년)

• React와 Angular의 장점 적용

MVVM 패턴

Backend 로직과 Client의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴의 방식과 유사하다.

Frontend단의 화면 동작 관련 로직과 Backend단의 DB 데이터 처리 및 서버 로직을 분리하고, Backend에서 넘어온 데이터를 Model에 담아 View로 넘겨주는 중간지점이다.

🔔 Vue.js 시작

설치방법

• <script> include

  • 다운로드

  • CDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• NPM 으로 설치

• CLI

🔔 Vue Instance

인스턴스는 Vue.js로 화면을 개발하기 위해 꼭 생성해야 하는 필수 단위이다.

Vue Instance 생성자

new Vue({
    // instance option properties
})

Vue는 객체 생성시 필요한 정보를 함께 넘길 수도 있다.

{
    key: value
    key: value
        .
        .
        .
}

{}안에 들어가는 내용들이 객체 형식으로 전달된다.

new Vue({
    template: "",
    el: "",
    methods: {}
    // ...
})

Vue앱은 Vue 함수로 인스턴스를 만드는 것부터 시작한다!

Vue.js el

el: "css 선택자" or HTML Element, Vue가 적용될 요소를 지정한다.

new Vue({
    el: "#app" 
    // el은 객체 하나당 하나씩만 등록이 가능하기 때문에 문자열로 나타낸다
})

Vue.js Data

Vue에서 사용되는 정보 저장. 형식: 객체나 함수

new Vue({
    el: "#app",
    data: {
        msg: 'Vue 반가워'
        // 관리할 data가 하나가 아니기 때문에 객체로 나타낸다.
        // 화면과 상호작용을 할 수 있는 data가 된다.
    }
})

<div id="app">
    <h2>
        {{msg}}  <!-- Interpolation. v-text와 같은 기능 -->
    </h2>

</div>

Vue.js 기초문법 1 - 선언적(정적) 렌더링1(Rendering)

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '안녕하세요! Vue!'
        }
    })
</script>

🔔 Vue.js [Directive 지시문]

Directive의 종류

• v-text

  : {{}} (Interpolation 보간법)과 똑같이 작용

• v-html

  : html형식으로 렌더링

• v-show

  : 해당 엘리먼트의 visibility를 결정

• v-if, v- else, v-else-if

  : 일반적인 조건문

• v-pre

  : 특정 엘리먼트를 무시하는 directive

• v-cloak

  : Javascript가 실행되기 전에 즉, Vue.js instance가 제대로 준비되기 전까지 우리의 템플릿을 위한 HTML 코드를 숨기고 싶을 때 사용하는 directive

• v-once

  : 초기에 딱 한번만 렌더링

  변동이 없고 한결같은 정적인 부분에 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex1</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <h1 v-if="value > 5">value가 5보다 크군요</h1>
        <h1 v-else-if="value===5">value가 정확히 5네요</h1>
        <h1 v-else="value > 5">value가 5보다 작아요</h1>
        <h2> {{ value + 1 }}</h2>
        <h2 v-once>초기 값: {{value}}</h2>
        <h2>현재 값: {{value}}</h2>
        <h1 v-pre>{{ 그대로 렌더링 }}</h1>
        <h2 v-show = "visible">{{ visible }} 보이냐</h2>
    </div>
    <script>
        var app=new Vue({
            el: '#app',
            data: {
                name: "<i>italic</i>",
                visible: false,
                value: 0
            }
        })
    </script>

</body>

</html>

• v-bind

  : 엘리먼트의 속성값을 바꾸는 데 사용하는 directive

  생략이 가능하며 내부에서 JavaScript 코드 사용이 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex2</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <h1>Hello, {{name}}</h1>
        <h2>{{Date()}}</h2>
        <img :src="smile ? feelsgood : feelsbad"/>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data :{
                name: "Vue",
                smile: true,
                feelsgood: "https://i.cbc.ca/1.4986551.1548087152!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/smile-emoji.jpg?",
feelsbad: "https://i.pinimg.com/originals/4f/49/65/4f4965192fc86eeb8057219075ebc2bd.png"
            }
        })
    </script>
</body>
</html>

• v-for

  : for문이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex3</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <h2>To do</h2>
        <ul>
        <li v-for="(todo, index) in todos">{{index}}. {{todo.text}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                todos: [
                    {text: 'Vue 공부하기'},
                    {text: 'Vue 마스터 하기'}
                ]
            }
        })
    </script>
</body>
</html>

• v-model

  : 양방향 데이터 바인딩을 위한 directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>양방향 바인딩</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello, {{ name }}</h1>
        <h3>
            <input type="checkbox" v-model="smile"/> smile emoji
        </h3>
        <img :src="smile? feelsgood : feelsbad"/>

    </div>
    <script>
        new Vue({
            el: "#app",
            data : {
                smile: true,
                feelsgood: "https://i.cbc.ca/1.4986551.1548087152!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/smile-emoji.jpg?",
feelsbad: "https://i.pinimg.com/originals/4f/49/65/4f4965192fc86eeb8057219075ebc2bd.png"
            }
        })

    </script>
</body>
</html>

• v-on

  : 이벤트를 처리하기 위한 directive

  Vue Object의 methods에 있는 함수 이용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ex5</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Counter: {{number}}</h1>
        <button @click="increment">increment</button>
        <button v-on:click="decrement">decrement</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                number: 0
            },
            // app Vue instance를 위한 methods
            methods: {
                increment: function(){
                    this.number++;
                },
                decrement: function(){
                    this.number--;
                }
            }
        });
    </script>
</body>
</html>

• 참고
  • https://geonlee.tistory.com/151
  • https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

어떤 작업을 위해 실행할 수 있는 파일

프로세스(Process) 란?

• 사전적 의미

  • 컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램
  • 메모리에 올라와 실행되고 있는 프로그램의 인스턴스(독립적인 개체)
  • 운영체제로부터 시스템 자원을 할당받는 작업의 단위
  • 즉, 동적인 개념으로는 실행된 프로그램을 의미한다.

• 특징

  • 프로세스는 각각 독립된 메모리 영역(Code, Data, Stack, Heap의 구조)를 할당받는다.

  • 기본적으로 프로세스 당 최소 1개의 스레드(메인 스레드)를 가지고 있다.

  • 각 프로세스는 별도의 주소 공간에서 실행되며, 한 프로세스는 다른 프로세스의 변수나 자료 구조에 접근할 수 없다.

  • 한 프로세스가 다른 프로세스의 자원에 접근하려면 프로세스 간 통신 (IPC, inter-process communication)을 사용해야 한다.

    ex. 파이프, 파일, 소켓 등을 이용한 통신 방법

스레드(Thread) 란?

• 사전적 의미

  • 프로세스 내에서 실행되는 여러 흐름의 단위
  • 프로세스의 특정한 수행 경로
  • 프로세스가 할당받은 자원을 이용하는 실행의 단위

• 특징

  • 스레드는 프로세스 내에서 각각 Stack만 따로 할당받고, Code, Data, Heap 영역은 공유한다.
  • 스레드는 한 프로세스 내에서 동작되는 여러 실행의 흐름으로, 프로세스 내의 주소 공간이나 자원들(힙 공간 등)을 같은 프로세스 내에 스레드끼리 공유하면서 실행된다.
  • 한 스레드가 프로세스의 자원을 변경하면, 다른 이웃 스레드(Sibling thread) 도 그 변경 결과를 즉시 볼 수 있다.

ie. 자바 스레드 (Java Thread)란

• 일반 스레드와 거의 차이가 없으며, JVM이 운영체제의 역할을 한다.
• 자바에는 프로세스가 존재하지 않고, 자바 스레드는 JVM에 의해 스케쥴되는 실행 단위 코드 블록이다.
• 아래와 같은 스레드와 관련된 많은 정보들도 JVM이 관리한다.
  • 스레드가 몇개 존재하는가?
  • 스레드로 실행되는 프로그램 코드의 메모리 위치는 어디인가?
  • 스레드 우선순위는 무엇인가?
• 즉, 개발자는 자바 스레드로 작동할 스레드 코드를 작성하고, 스레드 코드가 생명을 가지고 실행을 시작하도록 JVM에 요청만 하면 된다.

통신이 일어나는 과정을 단계별로 알 수 있고, 특정한 곳에 이상이 생기면 그 단계만 수정할 수 있기 때문이다.

1) 물리(Physical)

단지 데이터를 전기적인 신호(0,1)로 변환해서 주고 받는 기능을 진행하는 공간이다.

즉, 데이터를 전송하는 역할만 수행한다.

ex) Repeaters, Hubs, Wireless

2) 데이터 링크(Data Link)

물리 계층으로 송수신되는 정보를 관리하여 안전하게 전달되도록 도와주는 역할

Mac 주소를 통해 통신한다. 프레임(Frame)에 Mac 주소를 부여하고 에러검출, 재전송, 흐름제어를 수행한다.

ex) Bridges, Switch

3) 네트워크(Network)

데이터를 목적지까지 가장 안전하고 빠르게 전달하는 기능을 담당한다.

라우터(Router)를 통해 이동할 경로를 선택하여 IP주소를 지정하고, 해당 경로에 따라 패킷을 전달해 준다.

라우팅, 흐름 제어, 오류 제어, 세그멘테이션 등을 수행한다.

ex) Router, IP

4) 전송(Transport)

TCP와 UDP 프로토콜을 통해 통신을 활성화한다. 포트(port)를 열어두고, 프로그램들이 전송을 할 수 있도록 제공해준다.

• TCP: 신뢰성, 연결지향적
• UDP: 비신뢰성, 비연결성, 실시간

5) 세션(Session)

데이터가 통신하기 위한 논리적 연결을 담당한다. TCP/IP 세션을 만들고 없애는 책임을 지닌다.

ex) API, Socket

6) 표현(Presentation)

데이터 표현에 대한 독립성을 제공하고 암호화하는 역할을 담당한다.

파일 인토딩, 명령어를 포장, 압축, 암호화한다.

ex) JPEG, MPEG 등

7) 응용(Application)

최종 목적지로, 응용 프로세스와 직접 관계하여 일반적인 응용 서비스를 수행한다.

사용자 인터페이스, 전자우편, 데이터베이스 관리 등의 서비스를 제공한다.

HTTP, FTP, DNS 등