diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 085b48f..63fe32b 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,7 +1,14 @@ + + - + + + + + \ No newline at end of file diff --git "a/contents/[Network] \353\247\235\353\266\204\353\246\254\353\236\200.md" "b/contents/[Network] \353\247\235\353\266\204\353\246\254\353\236\200.md" new file mode 100644 index 0000000..40d00f3 --- /dev/null +++ "b/contents/[Network] \353\247\235\353\266\204\353\246\254\353\236\200.md" @@ -0,0 +1,105 @@ +--- +date: "2024-08-13" +title: "[Network] 망분리란?" +categories: ["Network"] +summary: "망분리의 정의와 종류를 알아봅시다." +thumbnail: "./망분리.jpg" +--- + +# 1. 망분리의 개념 + +망분리란 말 그대로 회사 업무를 볼 수 있는 업무망과 인터넷에 접속할 수 있는 인터넷망을 분리하는 것을 의미합니다. + +업무망에서는 인터넷에 접속할 수 없고 회사 업무만 보게하고, 반대로 인터넷망에서는 회사 업무는 볼 수 없지만 인터넷에 접속이 가능하도록 합니다. + +'정통망법(정보통신망 이용촉진 및 정보보호 등에 관한 법률) 시행렬 제 15조'에 망분리를 **의무화** 하도록 법률적으로 명시해두었습니다. + +즉 단순히 회사 대외비 유출 방지를 넘어선 법률적인 조치라는 것이죠. + +
+
+
+ + +# 2. 망분리의 종류 + +망분리를 하는 방법은 **물리적 망분리**, **논리적 망분리**(서버기반 망분리, 클라이언트기반 망분리) 총 3가지가 있습니다. + +
+ +## 1. 물리적 망분리 + +말 그대로 물리적으로 망을 분리시키는 방법입니다. 2대의 PC를 이용해 업무용 PC, 인터넷용 PC를 각각 사용하는 방식입니다. + +![물리적망분리](물리적망분리.png) + +물리적 망분리는 각각의 PC를 따로 사용하여 확연히 구분이 되고 나누기 쉬운 장점이 있습니다. + +하지만 물리적인 장비가 늘어나기 때문에 관리해야 하는 보안이슈들이 증가하고, 업무 PC에서 인터넷 구간에 있는 업무 서버에는 접근을 못하는 단점도 존재합니다. + +
+ +### 물리적 망분리 시 보안 위협 + +- 업무pc와 인터넷pc간의 자료이동 + +- 사용자의 악의적인 정보유출 가능성 + +- 보조 기억매체를 통한 정보유출 + +
+
+ +## 2. 논리적 망분리 + +논리적 망분리는 기존의 PC 1대에서 가상화로 구현된 서버를 이용하는 방법입니다. + +모든 작업을 중앙 서버를 이용하기 때문에 보안과 관리, 스마트워크까지 효율적으로 운용할 수 있는 장점이 있죠. + +논리적 망분리는 SBC, CBC 방식으로 구분할 수 있는데 **서버**를 가상화하느냐 **클라이언트**를 가상화하느냐에 따라 구분합니다. + +
+ +### 1. SBC (Server Based Computing) 서버 기반 망분리 + +![서버기반망분리](서버기반망분리.png) + +모든 어플리케이션 및 정보를 서버에 두고 100% 서버에서 실행되도록 하며, 클라이언트는 단지 서버의 실행결과만을 보여주는 컴퓨팅 환경을 의미합니다. + +중앙서버에 가상화서버를 구축하여 ‘가상 데스크탑 환경’을 클라이언트가 제공받습니다. + +이러한 망분리 방식은 다시 ‘인터넷망 가상화 방식’과 ‘업무망 가상화 방식’으로 구분됩니다. + +서버의 리소스를 활용하는 가상화 방식으로, VDI나 Application 가상화까지 포함합니다. + +리소스 및 데이터 중앙관리로 보안이 강화되고 패치가 수월하고, 효율적인 관리, 사용자의 접속 단말 기기의 사양이 낮아도 된다는 장점이 있습니다. + +하지만 서버의 리소스를 이용하기 때문에 서버팜을 구성할 때 비용이 많이 든다는 단점이 있습니다. + +
+ +### 2. CBC (Client based compution) 클라이언트 기반 망분리 + +![컴퓨터기반망분리](컴퓨터기반망분리.png) + +기존의 1대 PC에서 가상화를 통해 **업무용PC**와 **인터넷용 PC**를 만들어 망분리를 방법입니다. 즉 pc가상화 프로그램을 설치하여 분리된 **가상 데스크탑 환경**을 사용하는 클라이언트 기반 가상화 방식입니다. (VMware와 유사) + +각각의 단말 PC환경이 다양해서 이것들에 대한 호환성과 중앙의 관리가 힘들다는 단점이 있습니다. 또한, 사용자 통제가 쉽지않아 악의적인 사용자에 의한 정보유출의 가능성이 높다는 단점이 있습니다. 때문에 사용자 컴퓨터에 설치된 운영체제, 응용프로그램과의 호환성 등에 대해 충분한 검토가 필요합니다. + +서버가상화 기반 망분리 방식에 비해 별도의 가상화 서버 구축이 불필요함에 따라 비용이 상대적으로 절감되는 장점이 있습니다. + +
+
+
+ +
+ +참고문헌 + +
+ +https://potato-yong.tistory.com/4 + +
+ +
diff --git "a/contents/[React] useState \353\217\231\354\236\221\354\233\220\353\246\254.md" "b/contents/[React] useState \353\217\231\354\236\221\354\233\220\353\246\254.md" index 39d0015..6ce79da 100644 --- "a/contents/[React] useState \353\217\231\354\236\221\354\233\220\353\246\254.md" +++ "b/contents/[React] useState \353\217\231\354\236\221\354\233\220\353\246\254.md" @@ -8,7 +8,6 @@ thumbnail: "./useState아이콘.png" 비동기적으로 동작하는 useState의 성질로 인한 State 값 업데이트 이슈를 해결하면서 문득 useState의 동작원리에 대해 궁금해졌습니다. -
# 함수형 컴포넌트의 상태 관리 @@ -24,35 +23,34 @@ useState는 이 문제를 **클로저**를 통해 해결합니다. # useState는 어디서 오나? -본격적으로 useState 모듈을 분석해봅시다. +본격적으로 useState 모듈을 분석해봅시다. -우리는 useState를 사용할 때 import 구문을 사용합니다. +우리는 useState를 사용할 때 import 구문을 사용합니다. ```js -import {useState} from 'react' +import { useState } from "react"; ``` + 즉 'react'라는 모듈에서 useState를 가져온다는 뜻 입니다. 그럼 react'라는 모듈로 이동해볼까요? ![리액트모듈장소](리액트모듈장소.png) 위 사진은 node_modules/react/cjs/react.development.js 내부에 각종 hooks 함수가 선언된 곳입니다. -모든 리액트 훅들이 여기서부터 만들어진다 생각하면 될 것 같습니다. +모든 리액트 훅들이 여기서부터 만들어진다 생각하면 될 것 같습니다.
## function useState 분석 ```js - export function useState(initialState) { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } - ``` -리액트 모듈에서 찾아본 useState의 초기 상태입니다. +리액트 모듈에서 찾아본 useState의 초기 상태입니다. resolveDispatcher의 리턴 값을 dispatcher에 할당한 뒤 dispatcher의 useState 메서드에 initialState를 인자로 전달해 배열을 반환하는 구조입니다. @@ -68,14 +66,15 @@ function resolveDispatcher() { if (__DEV__) { if (dispatcher === null) { - console.error('Some error msg...'); + console.error("Some error msg..."); } } return ((dispatcher: any): Dispatcher); } ``` -그럼 resolveDispatcher 함수는 어떤 구조인지 알아보겠습니다. + +그럼 resolveDispatcher 함수는 어떤 구조인지 알아보겠습니다. resolveDispatcher 함수는 어디선가 ReactCurrentDispatcher 라는 친구를 가져와 ReactCurrentDispatcher의 current 값을 할당받습니다. @@ -84,7 +83,6 @@ resolveDispatcher 함수는 어디선가 ReactCurrentDispatcher 라는 친구를 ## ReactCurrentDispatcher 함수 ```js - const ReactCurrentDispatcher = { /** * @internal @@ -107,17 +105,17 @@ ReactCurrentDispatcher.current는 **전역**에 선언된 객체의 프로퍼티 # 정리 - useState를 포함한 hooks는 react 모듈에 선언되어있는 함수입니다. -- 실행 될 때 마다 dispatcher를 선언하고 useState 메소드 실행해서 그 값을 반환합니다. +- 실행 될 때 마다 dispatcher를 선언하고 useState 메소드 실행해서 그 값을 반환합니다. - dispatcher는 전역 변수 ReactCurrentDispatcher로부터 가져옵니다. -


-# 그렇다면 setState 함수는 어떻게 상태를 변경시키나? +# 그렇다면 setState 함수는 어떻게 상태를 변경시키나? 아주아주 간단하게 작성한 react 모듈 코드를 예로 들겠습니다. + > 실제 react로직은 이렇게 단순하지 않습니다. 실제 react 로직은 딥다이브할 용기가 나지않아 여기까지 하겠습니다.
@@ -125,60 +123,53 @@ ReactCurrentDispatcher.current는 **전역**에 선언된 객체의 프로퍼티 ```js // React 모듈 -let _value +let _value; export function useState(initialState) { if (_value === undefined) { - _value = initialState + _value = initialState; } const setState = (newState) => { - _value = newState - } - return [_value, setState] + _value = newState; + }; + return [_value, setState]; } ``` - - -아주 기초적인 App 함수 예시코드입니다. +아주 기초적인 App 함수 예시코드입니다. ```js -import { useState } from "react" - -function App () { +import { useState } from "react"; -const [state, setState] = useState(0) +function App() { + const [state, setState] = useState(0); -return ( -
-

{state}

- -
-) + return ( +
+

{state}

+ +
+ ); } ``` -App 컴포넌트 함수는 실행되면 먼저 useState를 호출해서 반환값을 비구조화 할당으로 추출해 변수에 저장합니다. +App 컴포넌트 함수는 실행되면 먼저 useState를 호출해서 반환값을 비구조화 할당으로 추출해 변수에 저장합니다. ```js -const [state, setState] = useState(0) +const [state, setState] = useState(0); ``` - - 여기서 중요한건, **App도 jsx를 반환하는 함수**라는 겁니다. 즉, 렌더링이 시작되면 이 App 함수가 호출되어 새로운 jsx을 반환합니다. -`react 모듈` 코드를 보면, useState 밖에 전역으로 선언된 _value가 있습니다. +`react 모듈` 코드를 보면, useState 밖에 전역으로 선언된 \_value가 있습니다. ```js -let _value +let _value; ``` -우리가 useState를 통해 관리하는 'State'는 바로 이 _value입니다. - - -즉, setState는 App함수에 선언된 state가 아니라, 자신이 선언된 위치에서 접근할 수 있는 `_value`를 변경합니다! 단지 우리 눈에는 state를 변경하는 것처럼 보이는 것이죠. 내부 로직을 모르니까요. 이때 사용되는 개념이 클로저입니다. +우리가 useState를 통해 관리하는 'State'는 바로 이 \_value입니다. +즉, setState는 App함수에 선언된 state가 아니라, 자신이 선언된 위치에서 접근할 수 있는 `_value`를 변경합니다! 단지 우리 눈에는 state를 변경하는 것처럼 보이는 것이죠. 내부 로직을 모르니까요. 이때 사용되는 개념이 클로저입니다. ## setState가 state를 변경하는 원리 @@ -189,26 +180,26 @@ let _value App은 useState를 호출하고 인수로 0을 전달합니다. ```js -const [state, setState] = useState(0) +const [state, setState] = useState(0); ``` - -useState는 실행될 때 마다 초기값을 전달받지만, 아래 로직을 통해 내부적으로 _value값이 undefined인지 확인해서, 최초의 호출에만 초기값을 _value에 할당하고, 이후 초기값은 사용되지 않습니다. +useState는 실행될 때 마다 초기값을 전달받지만, 아래 로직을 통해 내부적으로 \_value값이 undefined인지 확인해서, 최초의 호출에만 초기값을 \_value에 할당하고, 이후 초기값은 사용되지 않습니다. ```js - if (_value === undefined) { - _value = initialState - } +if (_value === undefined) { + _value = initialState; +} ``` -이후 _value와 그 값을 재할당하는 setState 함수를 배열에 담아 반환합니다. +이후 \_value와 그 값을 재할당하는 setState 함수를 배열에 담아 반환합니다. -이렇게 반환한 배열을 우리는 구조분해할당 문법을 통해 사용하는 것이죠. +이렇게 반환한 배열을 우리는 구조분해할당 문법을 통해 사용하는 것이죠.
### 2. setState(1) 호출 -전달 받은 값 인자 1을 react 모듈 상단의 _value에 할당합니다. 이때 컴포넌트 리렌더링을 trigger합니다. + +전달 받은 값 인자 1을 react 모듈 상단의 \_value에 할당합니다. 이때 컴포넌트 리렌더링을 trigger합니다.
@@ -218,42 +209,41 @@ useState는 실행될 때 마다 초기값을 전달받지만, 아래 로직을 setState가 리렌더링을 트리거하며 App함수가 두 번째로 실행되었을 때 **다시 인수 0**을 useState에 전달하며 호출합니다. - -useState는 내부적으로 _value값을 확인하고, undefined가 아닌 값이 할당되어 있기 때문에 초기값 할당문을 실행하지 않습니다. -즉 _value값은 undefined 이므로 +useState는 내부적으로 \_value값을 확인하고, undefined가 아닌 값이 할당되어 있기 때문에 초기값 할당문을 실행하지 않습니다. +즉 \_value값은 undefined가 아니므로 ```js - if (_value === undefined) { - _value = initialState - } +if (_value === undefined) { + _value = initialState; +} ``` + 해당 로직은 실행되지 않고 ```js - const setState = (newState) => { - _value = newState - } +const setState = (newState) => { + _value = newState; +}; ``` -해당 로직이 실행됩니다. +해당 로직이 실행됩니다. -즉 setState 인자로 1이 들어왔으므로 _value = 1 을 통해 _value에 1을 할당하고 - useState가 현재 시점의 _value(1)와 setState를 배열 형태로 반환합니다. - -마지막으로 두 번째 실행된 App 함수 내부에서 useState가 반환한 값을 비구조화 할당으로 추출해 변수에 할당합니다. +즉 setState 인자로 1이 들어왔으므로 \_value = 1 을 통해 \_value에 1을 할당하고 +useState가 현재 시점의 \_value(1)와 setState를 배열 형태로 반환합니다. +마지막으로 두 번째 실행된 App 함수 내부에서 useState가 반환한 값을 비구조화 할당으로 추출해 변수에 할당합니다. 즉, setState 함수는 자신과 함께 반환된 변수를 변경시키는 것이 아닙니다. ```js -const [state, setState] = useState(0) +const [state, setState] = useState(0); ``` 보시는 것처럼 우리는 const 로 변수를 할당합니다. const는 상수이기 때문에 변하지 않죠. -즉 useState는 반환할 **react 모듈의 _value**를 변경시키고, 컴포넌트를 리렌더링 시킵니다. +즉 useState는 반환할 **react 모듈의 \_value**를 변경시키고, 컴포넌트를 리렌더링 시킵니다. -그리고 변경된 값은 useState가 가져오는 것이죠. +그리고 변경된 값은 useState가 가져오는 것이죠.

@@ -262,22 +252,17 @@ const [state, setState] = useState(0) 정리하자면 -- useState는 클로저를 활용해서 값을 업데이트합니다. -- setState는 state를 변경시키는게 것이 아니라 react 모듈 내부의 _value를 변경시킵니다 -- 변경된 _value는 useState를 통해 가져오고 그것을 우리가 사용하는 것 입니다. \ -- setState 호출 이후 로직에서도 state의 값은 이전과 동일합니다. - - -> 위 예시는 react로직을 아주 단순히 표현했을 뿐, 실제와 많이 다릅니다.
useState를 여러번 사용해도 각기 다른 상태 값과 갱신 함수를 사용할 수 있는건 단순히 _value가 아니라 여러 값을 저장하고 있기 때문입니다.
이에 관해서는 딥다이브하기 무서워서 한 발 물러서겠습니다.. - +- useState는 클로저를 활용해서 값을 업데이트합니다. +- setState는 state를 변경시키는게 것이 아니라 react 모듈 내부의 \_value를 변경시킵니다 +- 변경된 \_value는 useState를 통해 가져오고 그것을 우리가 사용하는 것 입니다. \ +- setState 호출 이후 로직에서도 state의 값은 이전과 동일합니다. +> 위 예시는 react로직을 아주 단순히 표현했을 뿐, 실제와 많이 다릅니다.
useState를 여러번 사용해도 각기 다른 상태 값과 갱신 함수를 사용할 수 있는건 단순히 \_value가 아니라 여러 값을 저장하고 있기 때문입니다.
이에 관해서는 딥다이브하기 무서워서 한 발 물러서겠습니다..


- -
참고문헌 diff --git "a/contents/\353\247\235\353\266\204\353\246\254.jpg" "b/contents/\353\247\235\353\266\204\353\246\254.jpg" new file mode 100644 index 0000000..c917f7e Binary files /dev/null and "b/contents/\353\247\235\353\266\204\353\246\254.jpg" differ diff --git "a/contents/\353\254\274\353\246\254\354\240\201\353\247\235\353\266\204\353\246\254.png" "b/contents/\353\254\274\353\246\254\354\240\201\353\247\235\353\266\204\353\246\254.png" new file mode 100644 index 0000000..637a525 Binary files /dev/null and "b/contents/\353\254\274\353\246\254\354\240\201\353\247\235\353\266\204\353\246\254.png" differ diff --git "a/contents/\354\204\234\353\262\204\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" "b/contents/\354\204\234\353\262\204\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" new file mode 100644 index 0000000..d8a663f Binary files /dev/null and "b/contents/\354\204\234\353\262\204\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" differ diff --git "a/contents/\354\273\264\355\223\250\355\204\260\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" "b/contents/\354\273\264\355\223\250\355\204\260\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" new file mode 100644 index 0000000..5759457 Binary files /dev/null and "b/contents/\354\273\264\355\223\250\355\204\260\352\270\260\353\260\230\353\247\235\353\266\204\353\246\254.png" differ