프론트엔드에서 "상태" 란

- 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터
- 상태들은 일관적이어야한다.
- 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야한다


상태관리는 왜 필요한가?

- 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달은 어렵다.

- 데이터를 부모 컴포넌트로 보내고, 다시 그 상데이터 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop Drilling이 많아지면 이 prop이 어디에서 왔는지 확인하기 정말 어려워진다. 
- 이때 사용하는 상태관리 툴이 Context API, Redux, React Query, MobX

 

React 에서 "상태"

- React에서 "상태"는 컴포넌트의 데이터를 나타내는 것을 의미한다.

- 컴포넌트의 상태는 해당 컴포넌트가 렌더링되는 동안 변할 수 있는 값입니다. 상태는 컴포넌트 내부에서 관리되며, 컴포넌트를 업데이트하거나 다시 렌더링할 때 사용됩니다.

- React에서 상태는 클래스 컴포넌트와 함수형 컴포넌트에서 모두 관리할 수 있습니다.

 

클래스 컴포넌트에서는 state 객체를 사용하여 상태를 관리

함수형 컴포넌트에서는 React의 useState 훅을 사용하여 상태를 관리

 

 

클래스 컴포넌트의 상태 예시:

 

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

 

 

함수형 컴포넌트의 상태 예시:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

이 예시에서 count는 컴포넌트의 상태를 나타내며, 버튼을 클릭할 때마다 상태가 업데이트되고, 해당 변경 사항이 UI에 반영됩니다. 상태는 컴포넌트 내에서 필요한 데이터를 저장하고 관리하는 데 사용되며, 필요에 따라 컴포넌트의 다른 부분에서 상태를 사용할 수 있습니다.

 

'CS지식 > 개발 상식' 카테고리의 다른 글

DOM 과 Virtual DOM, 그리고 React (리액트)  (0) 2023.05.17
Docker 정리  (0) 2022.06.27

웹 페이지가 렌더링되는 과정

  1. HTML 다운로드: 웹 브라우저는 서버에 웹 페이지를 요청하고, 서버는 해당 페이지의 HTML 파일을 응답으로 전송합니다.
  2. HTML 파싱: 웹 브라우저는 수신한 HTML 문서를 파싱하여 문서 객체 모델(Document Object Model, DOM)을 생성합니다. DOM은 HTML 문서의 구조와 요소들을 표현하는 트리 형태의 데이터 구조입니다.
  3. CSS 다운로드: 웹 페이지에 포함된 CSS 스타일 시트 파일들을 서버로부터 다운로드합니다.
  4. CSS 파싱: 다운로드한 CSS 파일들을 파싱하여 스타일 규칙들을 해석하고, 각 요소에 적용될 스타일 정보를 계산합니다.
  5. 렌더 트리 구성: DOM 트리와 CSS 스타일 정보를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 실제로 표시될 요소들을 포함한 구조입니다.
  6. 레이아웃: 렌더 트리의 각 요소들에 대해 위치와 크기를 계산하여 페이지의 레이아웃을 설정합니다. 이 단계에서 요소의 박스 모델과 배치 정보가 결정됩니다.
  7. 페인팅: 레이아웃 단계에서 계산된 정보를 바탕으로 실제로 화면에 픽셀을 그리는 작업을 수행합니다. 이 단계에서 각 요소의 색상, 텍스트, 배경 등이 실제 화면에 표시됩니다.
  8. 페이지 로드 완료: 위 단계들이 완료되면 웹 페이지의 로딩이 완료되고, 사용자는 렌더링된 페이지를 볼 수 있게 됩니다.

일반적인 브라우저의 동작 방식을 설명한 것이며, 실제 브라우저마다 세부적인 동작이 조금씩 다를 수 있습니다.

 

DOM (Document Object Model) 이란

- 웹 페이지의 구조와 콘텐츠를 나타내는 표준화된 인터페이스

- HTML, XHTML, XML 등의 문서를 계층적인 트리 구조로 표현합니다.

- 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것

- DOM은 웹 브라우저가 HTML 문서를 이해하고 조작할 수 있도록 제공되는 프로그래밍 인터페이스이다. 이를 통해 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소에 동적으로 접근하고 수정할 수 있다.

- DOM 트리는 HTML 문서의 요소(Element), 속성(Attribute), 텍스트 등을 노드(Node)라는 객체로 표현합니다. 각 노드는 트리 구조에서 부모-자식 관계를 가지며, 서로 연결되어 문서의 구조를 형성합니다.

- DOM은 웹 페이지의 구조에 접근하고 수정하는 다양한 메서드와 속성을 제공합니다. 예를 들어, 특정 요소를 선택하거나 생성, 삭제, 수정할 수 있으며, 요소의 스타일, 내용, 속성 등을 변경할 수 있습니다.

- 또한, DOM은 이벤트 처리와 상호작용에도 사용됩니다. 사용자의 동작(클릭, 마우스 오버 등)을 감지하고, 이벤트 핸들러를 등록하여 특정 동작에 대한 응답을 구현할 수 있습니다.

- DOM은 크로스 플랫폼 및 플랫폼 독립적이며, 웹 브라우저를 비롯한 다양한 환경에서 사용될 수 있습니다.

 

웹을 동적으로 제어 = DOM 을 제어

- 웹을 개발한다는 것은 정적인 HTML만을 작성하는 게 아니라, Javascript를 통해 동적으로 동작할 수 있는 웹을 개발하는 것

그럼 DOM을 동적으로 제어(조작)해야 하는데, 이를 Javascript가 해 줄수 있도록 DOM API 라는 것이 기본적으로 제공된다.

 

DOM API

- DOM 을 조작하기 위한 프로그래밍 인터페이스

- DOM API는 웹 브라우저에서 JavaScript와 같은 스크립트 언어를 사용하여 웹 페이지의 요소에 접근하고 조작하는 메서드와 속성의 집합

- DOM API를 사용하면 웹 페이지의 요소에 동적으로 접근하고 수정 가능하다

 

- 일반적으로 DOM API는 다음과 같은 기능을 제공합니다:

  1. 요소 선택: 특정 요소를 선택하기 위해 ID, 클래스, 태그 이름 등을 사용하여 요소를 찾을 수 있습니다. getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll 등의 메서드를 사용합니다.
  2. 속성 및 내용 조작: 선택한 요소의 속성 값을 읽거나 변경할 수 있습니다. 예를 들어, getAttribute, setAttribute, innerHTML, textContent 등의 메서드를 사용하여 요소의 속성 값을 가져오거나 설정할 수 있습니다.
  3. 요소 생성 및 추가: 새로운 요소를 동적으로 생성하고, DOM에 추가할 수 있습니다. createElement, appendChild, insertBefore 등의 메서드를 사용하여 요소를 생성하고 다른 요소에 추가합니다.
  4. 이벤트 처리: 사용자의 동작(클릭, 마우스 오버 등)을 감지하고, 이벤트 핸들러를 등록하여 특정 동작에 대한 응답을 구현할 수 있습니다. addEventListener를 사용하여 이벤트 핸들러를 등록하고, 이벤트가 발생했을 때 실행될 코드를 작성합니다.
  5. 스타일 조작: 선택한 요소의 스타일을 동적으로 변경할 수 있습니다. style 속성을 사용하여 요소의 스타일을 설정하거나 변경할 수 있습니다.

이외에도 DOM API는 DOM 트리의 탐색, 노드의 추가 및 삭제, 이동, 애니메이션 등 다양한 기능을 제공합니다. DOM API는 웹 개발에서 가장 일반적으로 사용되며, 웹 페이지의 동적인 특성을 구현하는 데 중요한 역할을 합니다.

 

DOM API 를 통해서 DOM을 조작한다는 건, 일반적으로 다음과 같은 동작을 의미합니다.

 

DOM API

1. DOM에 요소를 추가한다.
2. DOM의 요소를 수정한다.
3. DOM의 요소를 삭제한다.

 

Virtual DOM

- DOM 을 직접 조작하는 건 안정성이 떨어지고, DOM API 가 low-level 이기 때문에 이걸로 DOM 을 조작시 코드의 복잡도가 높아진다. ( = 앱의 규모가 커질수록 복잡도가 높아짐)
- Virtual DOM의 조작은  React와 같은 라이브러리가 비교적 쉽게 해준다.

- 그리고 Virtual DOM이 실제 Real DOM을 직접 조작한다. 그 조작하는 과정(Diffing 알고리즘)은 React가 알아서 해주게 됩니다.

 

 

React

- 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다.

- Facebook에서 개발되었으며, 웹 애플리케이션의 UI를 구성하는데 중점을 둔다.

 

React 특징

1. React는 컴포넌트 기반 아키텍처를 사용하여 UI를 작은 독립적인 조각으로 분할합니다. 각 컴포넌트는 자체 상태(state)와 속성(props)을 가지며, 이를 조합하여 전체 애플리케이션을 구축합니다. 컴포넌트는 재사용 가능하고 모듈화된 방식으로 작성할 수 있어 개발 생산성과 유지 보수를 향상시킵니다.

 

2. Virtual DOM(가상 DOM)을 사용하여 성능을 최적화합니다. 변경된 부분만 실제 DOM에 적용하여 업데이트하므로 효율적인 렌더링을 가능하게 합니다. 이를 통해 복잡한 UI를 효과적으로 처리하고 사용자에게 빠른 반응성을 제공할 수 있습니다.

 

3. React는 단방향 데이터 흐름을 따르는 개념인 "상태 관리"를 강조합니다. 일반적으로 Redux, MobX와 같은 상태 관리 라이브러리와 함께 사용되며, 상태를 중앙 집중식으로 관리하여 애플리케이션의 복잡성을 줄이고 데이터의 일관성을 유지합니다.

 

4. 웹 애플리케이션 개발뿐만 아니라, React Native를 통해 모바일 애플리케이션 개발에도 사용됩니다. React Native는 React를 기반으로 하여 네이티브 앱을 개발할 수 있는 크로스 플랫폼 프레임워크입니다.

 

5. React는 커뮤니티와 생태계가 활발하며, 다양한 도구와 라이브러리가 제공되어 개발자들이 효율적으로 작업할 수 있도록 지원합니다.



React에서 리렌더링이 일어나는 경우
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때.
4. 부모 컴포넌트가 렌더링되었을 때

 

React는 상태나 속성 값이 변하게 되면 리렌더링 이라는 과정을 통해서 바뀐 상태나 속성 값으로 화면을 그린다.

Virtual DOM 을 사용해서 React는 값이 변할 때 화면의 깜빡임 없이 빠른 속도로 값을 변경 시킬 수 있다.

만약 상태나 속성값이 변경된 경우, 변경된 값으로 React는 가상의 돔을 그리게 됩니다.

 

그린 Virtual DOM Real DOM을 비교하여 변경된 사항만 반영하여 해당 내용을 실제 돔에서 수정한 이후 새로운 화면을 렌더링  변경사항을 감지하고 Virtual DOM을 새로 그린 다음 Real DOM과 비교하여 바뀐 내용만 반영해서 새로 화면에 렌더링

'CS지식 > 개발 상식' 카테고리의 다른 글

프론트엔드의 상태 관리  (1) 2023.05.17
Docker 정리  (0) 2022.06.27

등장 배경

전통적 프로세스 :

- 같은 OS, CPU 등의 환경이여아 프로그램이 돌아간다, 사실상 동일기계여야 돌아감
- 마이크로 소프트웨어 PC 세데에선 OS, 환경들이 동일했으므로 같은 환경이어서 동작했었다

 

But 웹의 등장 이후 :

- 모든 소프트웨어는 웹에서 서비스 하게 되었다.

- VM 은 같은 OS여도 보조 앱들이나 라이브러리 디펜던시가 다를 수도 있다.

- VM은 비교적 무거움

 

Image vs Container

- Image : 조리법(레시피), Container는 만들어진 요리, 실제 사용되는 프로세스
- Stopped Container : 만들어서 냉장고에 보관한 요리

 

세상의 모든 SW는 Containerized 되어 제공된다.

- Container 배포 = SW 배포
- Container 테스팅 = SW 테스팅
- Containerized된 어플리케이션 앱 = 프로세스

- 그 앱이 실행되는데 필요한 환경, OS, 커널, 비표준 라이브러리 등의 환경(Helper Process)까지 장착하여 한 패키지로 되어 어디서나 실행할 수 있도록 만들어짐

- Container Engine : 컨테이너를 동작시키기 위한 OS 수준에서 Virtualize 를 해준다.

 

Docker Hub

- Container 이미지들을 모아둔 Github 같은 저장소이다. 하지만 최근 대부분 Github 사용

 

VM vs Container

- VM : OS가 다같이 들어있으므로 과도한 메모리 점유, 느린 부팅시간, 여러 VM 실행시 성능 저하, Portability 제한, VM 사이 데이터 공유 불가능, 낮은 효율

- Container : 낮은 메모리 점유, (각 app은 미니멀하게 dependancy만 가지고 있다), 빠른 부팅 시간, 훨씬 많은 수의 container 실행 가능, platform에 좌우되지 않음, 여러 Container끼리 데이터 공유 가능, 높은 효율

 

Container

- App 과 App 실행에 필요한 모든 Dependency 를 묶은 Package

- 지정된 OS 위에서는 Container가 실행될 수 있도록 container engine을 기계에 장착 = 이건 OS level에서의 virtualization 을 app에 제공하는 것.

 

Container의 일생

- Docker Hub 에서 pull/push 로 Image를 가져옴, 이건 환경을 만드는데 필요한 템플릿(코드,시스템,OS 다 포함됨) 이다.

- 또한 Docker File 이라는 텍스트 파일에 이미지 생성 명령과 규정을 적어두고 BUILD(코드+환경까지 같이 컴파일) 해서 Image를 만들수도 있다.

- 이 Image를 RUN 시켜서 Container 를 만듬, 이건 이미지의 instance 라고 볼 수 있음

- Container는 STOP과 DELETE 하면 사라짐

 

Docker 설치 및 기본 명령

sudo apt-get install docker.io
docker run hello-world

- hello-world 라는 dockerhub의 기본 이미지를 가져와서 run하는것. 실제로는 pull 후 run 해야하지만 이건 맛보기

sudo usermod -aG docker $USER

- docker란 그룹에 나를(ubuntu) add 해란 뜻-> sudo 쓸 필요 없다.

cat /ect/group

- add 됐는지 확인 가능

 

Docker 기본 명령 (ubuntu 사용 예시)

docker pull ubuntu // ubuntu 커널 가져오기
docker images //현재 가져온 이미지 확인하기, 이미지 사이즈 확인 가능

 

#RUN(이미지로부터 컨테이너 만듬)

docker run -it -d ubuntu // 여기선 우분투를 RUN

= interactive 하게 우분투 커널을 detached 모드로 RUN 실행만 시키겠다, OS를 demo로 만들어서 동작시켜라

-> terminal 하게 bash shell에서 쓸수있도록, 즉 현재 ubuntu 기계에서 ubuntu OS 를 쓰도록 해준다.

docker ps

= 현재 process 들의 상태를 알려준다.

 

#EXEC(그 컨테이너 실행)

docker exec -it <container id> <prorm in the container>

-  <ps로 확인한 컨테이너이름> bash 로 작성했었다.

-> </ps로 확인한 컨테이너이름>이후 우분투 OS root로, 즉 컨테이너 안으로 들어옴

exit

- 그 우분투 OS 에서 나가기

 

#STOP

docker stop <container id>
docker kill <container id>
docker ps -a //모두 확인

#REMOVE

docker rm-f <container id> //컨테이너 프로세스를 제거
docker rmi-f <image id> //이미지를 제거

 

Containerized Web Service 실습
docker exec -it <container id> bash 이후, 즉 EXEC 이후

1. apache2 설치

apt-get update
apt-get install -y apache2

2. vim 설치 후 /var/www 에서 html 문서 작성하기

cd /var/www
apt get install -y vim
vim 1.html // 작성함

3. 우분투 root에서 빠져나옴

exit

4. 은 laker99/firstweb 처럼 내가 웹 서비스 컨테이너를 이미지로 만든것임

docker commit <container id> <new image name>

5. 이미지 및 프로세스 확인

docker images // image size 확인가능
docker ps // 실행중인 프로세스 확인 가능

6. #WEBSERVICE CONTAINER 실행

6-1. 이 이미지를 81번 포트로 포트포워딩 함. (디폴트는 TCP80)

6-2. EC2의 security inbound rule 에서 TCP 81 열기 브라우저는 IP:81

docker run -it -p 81:80 -d laker99/firstweb
docker ps
docker exec -it <container id> bash //docker ps 에서 확인한 container id 를 적기

7. #CONTAINER 속에서

Service apache2 status //상태확인
Service apache2 start //시작
Exit

 

Dockerfile

= Docker image를 만들기 위해 내리는 순차적인 command들을 모아둔 text 파일

- docker command 들을 입력하여 container 를 수동으로 생성하는 대신에 Dockerfile 안의 Docker build command를 사용해서 container 생성

 

기존 vs Dockerfile

기존: image -> RUN -> container -> EXEC -> inside the container -> do jobs -> exit -> COMMIT -> save a new image

Dockerfile 이용 : Dockerfile -> BUILD -> Docker Image -> RUN -> Docker container

 

Dockerfile 기본 구문

FROM : base image 지정, 기본적으론 OS ex)ubuntu
RUN : base image 위에 추가 SW 계층 설치, image 생성 시점에 사용할 명령어 지정
ADD : ADD <source> <컨테이너내 목적지> 로 파일들을 복사함. COPY와 다른점은 source로 url 을 사용가능
CMD : container 안에서 실행하려 하는 command, container 실행 시 실행되는 명령어를 지정한다.
ENTRYPOINT : CMD 와 유사
ENV : container에서 사용할 Environment 환경 변수를 지정

 

예시

docker run -it ubuntu bash // docker 구문

- entrypoint는 /bin/sh -c (Docker 는 /bin/sh-c를 디폴트 entrypoint )

- image는 ubuntu

- command는 bash

Dockerfile 예시 

- 반드시 vim Dockerfile 라는 이름으로 해야함

FROM ubuntu ##이 커널을 쓸테니 dockerhub에서 ubuntu 이미지를 가져와라

ENV DEBIAN_FRONTEND noninteractive
ENV DEBCONF_NONINTERACTIVE_SEEN true
## 이걸 쓰면 이미지 만들때 Timezone설정하라는 등 뭐 안나옴. interactive 모드 끄는것

RUN apt-get update ## docker image만드는데 필요한 명령어니까 RUN 작동
RUN apt-get install -y apache2

ADD . /var/www/htm
## 현재 디렉토리, 즉 커널 디렉토리의 모든 파일을 모두 다 특정 디렉토리 (html)로 카피(add)하란 명령어임

ENTRYPOINT apache2ctl -D FOREGROUND
## FOREGROUND 의미 : 이게 없으면 Entrypoint에 지정되어있는 apache2ctl을 호출하고 그냥 끝난 후 container process stop되어 아무일도 안벌어짐
## ENTRYPOINT는 반드시 한줄만 있으며 container를 run 시킨 후 해당 container에 entry 하는것 == 위에 bash해서 그 안에서 Service apache2 start 와 같다

ENV env_var_name <변수 이름>

- 이렇게 dockerfile 작성후 이 dockerfile 로 빌드하자

 

BUILD

docker build . -t <image name>
ex) docker build . -t laker99/test

1.

- docker file로부터 이미지 만들기 ex) laker99/test

- .는 현재 디렉토리의 (dockerfile)의미, t는 태그를 의미, image name은 만들 이미지 이름

docker run -it -p <host port #:container port#> -d <image>
ex) docker run -it -p 81:80 -d laker99/test
docker run -it -p <port #:port #> -v <local dir : mounting point dir in container> -d <image>
ex) docker run -it -p 81:80 -v ~/dockerfile:/var/www/html -d laker99/test

= 호스트기계의 디렉토리(~/dockerfile)를 컨테이너의 디렉토리(/var/www/html)에 마운트 시킨것이다.

= volume 쓰면 실행 이후 즉 kill 하지 않은 돌고 있는 상태에서 html 파일을 고칠수있다. 파일내용 업데이트 시 그대로 반영

 

* Docker에서 “마운트"는 컨테이너 외부에있는 데이터를 컨테이너에서 사용할 수 있는 상태가 될 것을 의미한다.

 

Docker-compose

- 다수의 docker container들을 규정하고 실행하고 관리하는 automation 도구 (서로 연동법등 규정)

- 여태까지 했던 것들은 단일 container를 만드는 것이었다.
- but 요즘 웹서비스는 한덩어리 프로그램이 아님. 여러개가 돌아감.

 

Monolithic App vs Microservices

Monolithic App : 비현실, 비효율, 낮은 생산성, 하나의 앱 vs
Microservices : 각 단일 서비스가 서로 느슨하게 결합, 그 사이에서는 HTTP 통신 프로토콜을 이용해서 데이터 교환(REST-API JSON)

 

* 여러개의 프로세스들 = 개별적인 container들 이 모여서 하나의 서비스

- 그래서 다수의 컨테이너를 만들어야함 -> docker compose 사용

 

Docker-compose 를 우분투에 깔아보자

mkdir test;
cd test;
vim docker-compose.yml

- docker compose 사용위해선 이 .yml 포멧의 텍스트파일 사용해아함. 이게 2개이상이 한 디렉토리에 있어선 안된다.

 

version: '3.9' //compose file version
service:
    hello-world: // 컨테이너 하나
        image: hello-world:latest // 가장 최신걸로 이미지인 hello-world를 가져와라

- 키는 version, ' ' 으로 value 와 key 구분
- service의 value는 또다른 key-vaule 짝
- hello-world 의 value는 또다른 key-value 짝
- image의 value는 hello-world:latest

 

.yml 파일 작성 후

docker-compose up -d // .yml을 실행해라, 지금은 연습이니 container 하나만 docker ps

.yml 실행하기

 

예시. wordpress 를 만들어보자

- 여기선 1개 host기계에서 2개 컨테이너를 실행할 것이지만 실제로는 2개 host에서 함

version: "3.9"
service:
    db: //라는 컨테이너임
        image: mysql:5.7
        volumes: //DB 서비스가 사용하는 volume을 create 함.
          - db_data:/var/lib/mysql // name volume 이다. db-data는 volume이름을 작명한 것이고 docker가 이걸 알아서 volume을 만듬
        restart: always
        environment:
          MYSQL_ROOT_PASSWORD: somewordpress
          MYSQL_DATABASE: wordpress
          MYSQL_USER: wordpress
          MYSQL_PASSWORD: wordpress // MYSQL에 필요한 것들을 environment 변수로 작성해줌
    wordpress: //wordpress 컨테이너
        depends_on: -db // db란 이름의 서비스에 depend한다는 의미, 즉 위에 있는 db의 결과를 사용한다. db:가 wordpress: 보다 위에 써져있어야만 함
        image: wordpress:latest // 가져와
        volumes:
          - wordpress_data:/var/www/html //name volume이다. wordpress_data를 여기 /var/www/html에 마운트 시키란 의미
        ports: - "8000:80" //8000번으로 포트포워딩 시키기
        restart: always
        environment:
          WORDPRESS_DB_HOST: db
          WORDPRESS_DB_USER: wordpress
          WORDPRESS_DB_PASSWORD: wordpress
          WORDPRESS_DB_NAME: wordpress
volumes: //named volumes
  data_base: {}
  wordpress_data: {}

이 .yml 파일 작성 후 그 디렉토리에서 docker-compose up -d 하면 됨

 

Docker Volume 

 

메모리 구조

- container의 가상파일시스템(var/lib/mysql) 이 있고 그 바깥에 host machine의 host의 file system 이 있다.

 

Docker Volume 배경

Container에는 그 안 자체의 메모리앱이 있다., 모두 in 메모리 os리소스이다.

Container를 만든 의도는 메모리상에서만 실행되면 되는 app들을 위해 만들어진것이다.

하지만 persistant한 storage에 OS를 write/read file 서비스 하는 container를 만들어야 할때를 위해 docker volume을 만든 것.

-> 호스트 기계의 on-disk persistent filesystem을 컨테이너의 in-memory virtual filesystem에 mount 하여, 컨테이너가 종료되어도 데이터가 사라지지 않고 호스트 기계의 파일 시스템에 저장되어 다시 동일 컨테이너가 시작되어 과거 데이터를 사용할 수 있도록 제공된 기능.

- DB를 사용하는 컨테이너의 경우에는 필수적

 

Docker Volume의 세가지 타입

1. Host volume

docker run -v /home/mount/data:/var/lib/mysql/data 

- : 의 앞에서 : 뒤로 마운트, 호스트 기계의 파일 시스템 디렉토리가 앞,

- 이게 호스트 볼륩 방식으로 마운트 시키기인데 실제론 사용안함

- 이유: 내 마음대로 원하는 호스트기계 파일 디렉토리 만드는거라 다른 사람들은 경로를 모른다.

 

2. Anonymous volume

docker run -v /var/lib/mysql/data

- 호스트 기계의 볼륨을 지정안했음

- docker가 호스트 기계의 정해진 경로에 폴더를 생성하는데 random hash하여 경로 이름을 달리함.

- yml 설치 이후 이 디렉토리에 호스트 볼륨 자동으로 만들어줌

- 이름 필요없을때 사용

 

3. named volume

docker run -v name:/var/lib/mysql/data

- docker가 생성하게 하되 생성된 볼륨에 이름을 붙여서 여러 컨테이너가 이름을 통해 공유할수있도록함.

 

 

컨테이너 간 통신

- 독립된 OS 가진 다른 컨테이너끼리는 같은 기기더라도 네트워크 통해 통신해야하는데 이때 내부 private network에서 rest-api (json)형식으로 통신한다.

 

+ docker swarm 또는 전통적인 분산환경에서의 동일한 종류의 서비스 제공은 서로 다른 호스트에 같은 서비스를 제공하는것, 외부로부터의 서비스 요구를 여러 호스트에 나누어 할당하는 reverse proxy 이용

 

*curl : 컴과 컴 사이에서 데이터를 주고받는 어플리케이션, 그 사이에서 프로토콜의 지정없이 귀찮은 작업을 다 해줌 확인가능

'CS지식 > 개발 상식' 카테고리의 다른 글

프론트엔드의 상태 관리  (1) 2023.05.17
DOM 과 Virtual DOM, 그리고 React (리액트)  (0) 2023.05.17

+ Recent posts