2024.07.06

김무영·2024년 7월 5일

Component

사용자 인터페이스를 구성하는 독립적이며, 재사용 가능한 단위.
컴포넌트를 사용하면 애플리케이션을 더 작은 단위로 나누어 관리하기 쉽게 만들 수 있다.
컴포넌트는 자체적인 HTML, CSS, JavaScript 로직을 포함할 수 있다.
- HTML : <template>
- CSS : <style>
- JavaScript : <style>
등록하여 사용.

전역 등록

  import 컴포넌트명 from "사용할컴포넌트";
  new Vue({
      el:"#app"
  })

지역 등록

  import 컴포넌트명 from "사용할컴포넌트";

  export default{
      components:{
          이름 : 컴포넌트명

      }
  }

  <template>
      <이름 : 변수명=""/>

components폴더에서 component를 만든다.

부모 컴포넌트에서 자식 컴포넌트의 변수를 사용

부모 컴포넌트 : App.vue
자식 컴포넌트 : MessageDisplay.vue

YAML

서로 다른 시스템 간의 데이터를 주고 받을 필요가 있을 때 사용.

연동과 호환성을 위한 포맷 : CSV, XML, JSON, properties, YAML

- CSV (Comma-Separated Values)
  - 텍스트 파일 형식으로, 각 행이 데이터 레코드를 나타내며 각 필드는 쉼표로 구분됩니다.
  - 간단하고 많은 시스템에서 지원되지만, 데이터 구조가 복잡해지면 관리가 어려울 수 있습니다.
- XML (eXtensible Markup Language):
  - 데이터 객체를 계층적이고 가독성 있는 형식으로 표현합니다.
  - 다양한 시스템과의 호환성이 높으며, 데이터를 구조화하고 검증하기 위한 스키마를 사용할 수 있습니다.
- JSON (JavaScript Object Notation):
  - 경량 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고 기계가 분석하고 생성하기 쉽습니다.
  - 대부분의 프로그래밍 언어와 웹 API에서 널리 사용됩니다.
- Properties:
  - 주로 Java 애플리케이션에서 설정 파일로 사용됩니다.
  - 키-값 쌍의 형태로 구성되며, 간단한 설정 정보를 저장하는 데 적합합니다.
- YAML (YAML Ain't Markup Language):
  - 사람이 쉽게 읽을 수 있도록 설계된 데이터 직렬화 표준입니다.
  - 중첩된 데이터 구조를 표현하는 데 적합하며, 구문이 간단하고 가독성이 좋습니다.

XML
- 사용하기 까다롭다.
- 가독성이 떨어진다.

<부모노드명>
	<자식노드명>
    	<자식노드명>값</자식노드명>
        <자식노드명>값</자식노드명>
        <자식노드명>값</자식노드명>
    </자식노드명>
	<자식노드명>
    	<자식노드명>값</자식노드명>
        <자식노드명>값</자식노드명>
        <자식노드명>값</자식노드명>
    </자식노드명>
</부모노드명>

JSON
- 주석을 달 수 없다.
- 괄호는 짝, 문자열은 ",'로 묶여야한다.
- 값의 구분은 ,

{
	"이름" : 
    [
    	{
    	"이름":"값",
    	"이름":"값",
    	"이름":"값",
    	},
    	{
    	"이름":"값",
    	"이름":"값",
    	"이름":"값",
    	}
	]
}

YAML
- 주석을 달 수 있다.
- 괄호를 사용하지 않고, 값의 구분(,)을 사용하지 않는다.
- Code가 줄어든다.

이름:
- 이름: 값
  이름: 값
  이름: 값
- 이름: 값
  이름: 값
  이름: 값

YAML

YAML Ain't Markup Language
2001년 Clark Evans에 의해 최초로 제안된 새로운 포맷팅 언어.
YAML 또는 YML 파일 확장자를 사용한다
- YML : OS중에 확장자를 3자만 인식하는 OS를 위해 제공. => 요즘에는 사용하지 않는다.
  - MS-DOS, Windows 95, Windows 98
사람이 쉽게 읽을 수 있도록 설계된 데이터 직렬화 표준
중첩된 데이터 구조를 표현하는 데 적합하며, 간단한 구문과 가독성을 제공
주석 지원
2001년 clark evans에 의해 최초로 제안된 새로운 포맷팅 YAML / YML
들여쓰기(띄어쓰기)로 데이터를 구분한다. (PyThon도 동일)
json2yaml.com => (JSON <-> YAML로 변환하는 일)
CI(Continuous Integration) 툴에서 주로 사용 (Jenkins)
작성법 )
- 키와 값의 쌍 ( 값은 공백으로 구분하기 위해선 ' : '을 사용하며, 값은 공백으로 구분)
  key : value
- 값을 공백으로 구분하지 않으면 하나의 문자열로 인식하여 문법 에러가 발생.
  key:value
- 콤마를 표기하지 않는다.(JSON과 달리 여러 개의 데이터가 있어도 엔터로 개행처리하면 된다.)
  name : 윤웅찬
  age : 20
  addr : 경기도 수원시

들여쓰기 (indent)

YAML은 계층구조로 데이터를 표현(Python도 동일)
들여쓰기는 기본적으로 2칸 또는 4칸 지원
이름, 나이, 학과가 student의 포함이 되어야 하면 들여쓰기를 한다.

예 )

student : 
  name : 김동섭
  age : 25
  major : 컴퓨터공학

값에 ' : ' 기호가 포함되는 경우 사용.

YAML은 문자열이나 숫자를 자동으로 인식한다.

name : 김동섭
addr1 : 서울시 강남구	#값을 문자열로 인식
addr2 : "강남구 역삼동"	# " 나 '로 묶어서 사용
addr3 : '윤웅찬의 옆집'	#값을 문자열로 인식
age : 20				#값을 숫자로 인식
value : "1:2"			# " 나 '로 묶어서 사용

"와 '의 차이

특수문자를 구분할 때 차이가 난다.
" : 특수문자를 해석한다.

' : 특수문자를 일반 문자열로 해석한다. (\t가 그냥 출력된다.)

str1 : "\t tab \n newLine" =>	tab
								newLine
                              
str2 : '\t tab \n newLine' =>\\t tab \\n newLine

단순배열

YAML은 -로 시작하면 배열로 인식 (하위 요소는 - 생략하고 들여쓰기로 맞추면 된다.)
-를 쓰지 않고 [] 로 묶으면 리스트로 인식을 한다.

member :
- 우미연
- 정명호
- 홍성강

member : [우미연 , 정명호 , 홍성강]

객체배열(JSONArray에 JSONObject가 들어있는 것)

문법 )
동일 객체의 멤버라면 -를 생략하고 들여쓰기로 쓴다.

키 :
- 이름 : 값
  이름 : 값
  이름 : 값
- 이름 : 값
  이름 : 값

boolean

yes, no, true, false : 4가지를 사용한다.
"YES", "NO"를 하면 문자열로 취급된다.

주석

# 으로 주석 처리

#학생정보
student:
.
.

여러줄 사용

> , | 를 사용하여 값을 여러 행으로 나눠서 작성가능
- > (folded block scalr)
  >기호는 엔터만 기술된 부분을 줄 변경으로 처리한다.
  -를 기술하면 가장 마지막에 \n이 붙지 않는다.
```
  ```
    data : >
    abc
    def
    
    ghi
    ddd
    
    data : >-
    abc
    def
    
    ghi
    ddd
  ```
```

| (literal block scalar)
- 엔터는 모두 \n으로 인식
- -를 기술하면 가장 마지막에 \n이 붙지 않는다.
```
  ```
  data : |
  abc
  def
  
  ghi
  ddd
  
  data : |-
  abc
  def
  
  ghi
  ddd
  ```
```

Multiple Document

--- 를 넣으면 여러 파일을 하나의 파일에 포함 시켜줄 수 있다.
spring boot에서 사용.

spring1:
  profile: dev
  datasource:
    url: 192.168.0.1

---
spring2:
  profile: prod
  datasource:
    url: 211.63.89.11

Jenkins

LocalSystem 계정은 Windows에 높은 권한을 가진 기본 시스템 계정
추가적인 사용자 설정이 없어서 설정이 간단하다.
Port를 넣고 충돌이 발생하지 않는지 확인.
초기 비밀번호 확인 가능
플러그인 자동 설치

계정 생성
cmd 관리자 권한 실행 후 systeminfo
4가지가 전부 "예" 여야함

Window 용 Docker와 VirtualBox가 충돌하지 않도록 설정
- 현재 온라인 상태의 Windows 설치에 활성화된 기능과 비활성화된 기능을 표 형식으로 나열
  - dism /online /get-features format:table
HypervisorPlatform , VirtualMachinePlatform 활성화 시키기
- dism /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
- dism /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart