$ sudo apt update
$ sudo apt install nfs-kernel-server

Ubuntu 20.04에서는 NFS 버전 2가 사용되지 않도록 설정됩니다. 버전 3 및 4를 사용할 수 있습니다. 다음 cat 명령을 실행하여 확인할 수 있습니다.

$ sudo cat /proc/fs/nfsd/versions

# -2 +3 +4 +4.1 +4.2

$ mkdir /srv/vm1
$ chmod 777 /srv/vm1

$ vi /etc/exports
...
# 아래 내용 추가
/srv/vm1 10.10.12.*(rw,sync,no_root_squash)
...

$ sudo vi /etc/default/nfs-kernel-server
...
NEED_SVCGSSD="yes"
...

$ sudo systemctl restart nfs-kernel-server
$ sudo exportfs -a
$ sudo ufw allow 2049/tcp

# 현재 내보내기 상태 확인 방법
$ sudo exportfs -v

NFS-Client (vm1의 폴더를 공유 할 대상 VM)

$ sudo apt update
$ sudo apt install nfs-common

$ mkdir /srv/vm1
$ sudo mount -t nfs -o vers=4 <<vm1의 IP>>:/srv/vm1 /srv/vm1

Harbor 설치

mkdir -p ~/certs
cd ~/certs
openssl genrsa -out ca.key 4096

#CA인증서 생성

openssl req -x509 -new -nodes -sha512 -days 3650 \
-subj "/C=KR/ST=Seoul/L=Seoul/CN=<<IP>>" \
-key ca.key \
-out ca.crt

#개인키 생성
openssl genrsa -out harbor.ks.io.key 4096

### 인증서 서명 요청(CSR)을 생성
openssl req -sha512 -new \
-subj "/C=KR/ST=Seoul/L=Seoul/OU=Personal/CN=<<IP>>" \
-key harbor.ks.io.key \
-out harbor.ks.io.csr

cat > v3.ext <<-EOF
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
extendedKeyUsage = serverAuth
subjectAltName = @alt_names

[alt_names]
DNS.1=<<IP>>
[DNS.2=harbor.ks.io](http://dns.2=harbor.ks.io/)
DNS.3=harbor

EOF

#v3.ext하여 Harbour 호스트에 대한 인증서를 생성
openssl x509 -req -sha512 -days 3650 \
-extfile v3.ext \
-CA ca.crt -CAkey ca.key -CAcreateserial \
-in harbor.ks.io.csr \
-out harbor.ks.io.crt

mkdir -p /data/cert
cp harbor.ks.io.crt /data/cert/
cp harbor.ks.io.key /data/cert/

#/root/certs 에서 진행한다.
openssl x509 -inform PEM -in harbor.ks.io.crt -out harbor.ks.io.cert
mkdir -p /etc/docker/certs.d/harbor.ks.io/
cp harbor.ks.io.cert /etc/docker/certs.d/harbor.ks.io/
cp harbor.ks.io.key /etc/docker/certs.d/harbor.ks.io/
cp ca.crt /etc/docker/certs.d/harbor.ks.io/

# root 에서 실행, Harbor Offline 설치
wget "https://github.com/goharbor/harbor/releases/download/v2.1.3/harbor-offline-installer-v2.1.3.tgz "
tar xfvz harbor-offline-installer-v2.1.3.tgz
cd /harbor
cp harbor.yml.tmpl harbor.yml

# 아래 내용처럼 yml 수정
-------------------------------------------------
hostname: harbor.ks.io

https:
  # https port for harbor, default is 443
  port: 443
  # The path of cert and key files for nginx
  certificate: /data/cert/harbor.ks.io.crt
  private_key: /data/cert/harbor.ks.io.key

harbor_admin_password: <<password>>
-------------------------------------------------

./prepare
./install.sh

다른 VM에서 Harbor proxy 사용 방법

• 전제 조건
  • docker가 이미 설치되어있어야 함

1. Harbor가 설치된 서버의 인증서를 docker image가 필요한 서버로 복사한다.

    #root 사용자로 전환 후 아래 내용 입력
   
    $ cd /data/cert
    $ scp /etc/docker/certs.d/harbor.ks.io/* <VM의 IP>:/etc/docker/certs.d/harbor.ks.io/

2. 대상 VM docker 재시작

3. 대상 VM hosts 파일에 호스트 추가

    <<IP>> harbor.ks.io

4. docker pull 테스트

    docker pull harbor.ks.io/proxy/<도커네임스페이스>/<docker 이미지명?>
   
    ex) docker pull harbor.ks.io/proxy/pytorch/pytorch

문제 설명

과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다.

• 한 상자에 사과를 m개씩 담아 포장합니다.
• 상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다.

과일 장수가 가능한 많은 사과를 팔았을 때, 얻을 수 있는 최대 이익을 계산하고자 합니다.(사과는 상자 단위로만 판매하며, 남는 사과는 버립니다)

예를 들어, k = 3, m = 4, 사과 7개의 점수가 [1, 2, 3, 1, 2, 3, 1]이라면, 다음과 같이 [2, 3, 2, 3]으로 구성된 사과 상자 1개를 만들어 판매하여 최대 이익을 얻을 수 있습니다.

• (최저 사과 점수) x (한 상자에 담긴 사과 개수) x (상자의 개수) = 2 x 4 x 1 = 8

사과의 최대 점수 k, 한 상자에 들어가는 사과의 수 m, 사과들의 점수 score가 주어졌을 때, 과일 장수가 얻을 수 있는 최대 이익을 return하는 solution 함수를 완성해주세요.

제한사항

• 3 ≤ k ≤ 9
• 3 ≤ m ≤ 10
• 7 ≤ score의 길이 ≤ 1,000,000
  • 1 ≤ score[i] ≤ k
• 이익이 발생하지 않는 경우에는 0을 return 해주세요.

입출력 예

입출력 예 설명

입출력 예 #1

• 문제의 예시와 같습니다.

입출력 예 #2

• 다음과 같이 사과 상자를 포장하여 모두 팔면 최대 이익을 낼 수 있습니다.

따라서 (1 x 3 x 1) + (2 x 3 x 1) + (4 x 3 x 2) = 33을 return합니다.

제출 코드

• 최초에 sort를 오름차순으로 정렬해서 로직을 구성해서 최대 수익으로 계산이 안됨
• 내림차순 정렬로 변경하여 계산 시 성공

function solution(k, m, score) {
    let answer = 0;
    let arr = [];
    const sortedScore = score.sort((a, b) => b - a);
    for (let i = m-1; i<score.length; i+=m){
        let temp = [];
        for(let j = i-(m-1); j<=i; j++) {
            temp.push(sortedScore[j]);
        }
        arr.push(temp);
    }
    console.log(arr)
    for(let a of arr) {
        answer += a[a.length-1]*m;
    }
    return answer;
}

⭐ 여러개의 개발 프로젝트를, 잘 정의된 관계를 통해서 하나의 Repo에 담은것

• 새 project를 만드는데 편리
• 쉽게 다른 project에 기여 가능

monorepo와 monolith repo는 다름.

Monolithic은 project 끼리 분리가 안되있고 거대하지만 Monorepo는 repo만 하나 일 뿐 project끼린 분리가 잘 되어 있다.

페이지를 구분 없이 섞어서 구성하고 마구잡이로 참조해 독립이라는 느낌이 안드는 모듈화 없는방식이 Monolitic Repository라고 한다면, Monorepo는 페이지가 같은 리포지토리에 있지만 확실히 구분을 짓는다. 서로 패키지처럼 참조하도록하고 코드 내부에는 참견하지 않도록 구성한다.

⭐ 핵심은 모듈화

• 각 기능을 모듈로 잘 분리함으로써 캡슐화를 이룰 수 있다
• 기능이 잘 분리되어있으므로 대규모 프로젝트에서 수많은 코드를 들춰봐야 하는 수고를 줄인다.
• 소프트웨어 확장이 쉬워진다.
• 테스트가 쉬워지고, 모듈의 대체성을 높일 수 있으므로 A/B 테스트도 쉬워진다.

모듈화 자체는 PolyRepo로도 잘 구축할 수 있지만, MonoRepo의 각 패키지를 넘나드는 작업이나 서로 참조하기가 쉽다는 특징과 모듈화가 잘 합쳐지면 그 시너지가 크다.

Polyrepo

일반적으로는 하나의 리포지토리에 하나의 프로젝트가 들어가게 된다. 각 프로젝트는 자율성이 높으며 독립적인 개발, 린트, 테스트, 빌드, 게시, 배포 파이프라인이 존재한다. 팀의 자율성이라는 큰 이유로 이 방식을 선호하지만 단점 또한 존재한다.

• 번거로운 프로젝트 생성
  • 새로운 공유 패키지를 생성할 때마다 다음과 같이 번거로운 과정을 거친다.
  • 저장소 생성 > 커미터 추가 > 개발 환경 구축 > CI/CD 구축 > 빌드 > 패키지 저장소에 publish
• 패키지의 중복 코드 가능성
  • 위의 번거로움을 피하기 위해 각 프로젝트에서 공통 구성 요소를 자체적으로 작성한다면, 초기 시간을 아낄 수 있지만 시간이 지날수록 보안 및 품질 관리 부담을 증가시킨다.
• 관리 포인트 증가
  • 늘어난 프로젝트 저장소의 수만큼 관리 포인트가 늘어난다. 린트, 테스트, 개발 모드 실행, 빌드, 게시, 배포 등의 과정을 저장소의 수만큼 반복해야 한다.
• 일관성 없는 개발자 경험(DX)
  • 각 프로젝트는 테스트 실행, 빌드, 테스트, 린트, 배포 등을 위해 고유한 명령 집합을 사용한다. 이러한 불일치는 여러 프로젝트에서 사용할 명령을 기억해야 하는 정신적 오버헤드를 만든다.
• 다른 패키지의 변경 사항 파악
  • 관련 패키지의 변화를 지켜보거나 통지받지 않으면 문제가 발생할 수 있다.
• 교차 저장소의 리팩터링 비용
  • 관련 패키지의 변화가 있을 때 여러 저장소에 걸쳐 변화를 반영하는 것은 쉬운 일이 아닐 것이다.

참고 멀티리포 vs 모노리포

장점

⭐Unified Versioning

• 하나의 레포지토리는 버전 관리를 한 번에 할 수 있다. 여러 레포지토리로 굴러갈 때는 각자 버전을 관리하다보니 누락되거나 다른 레포지토리와 연결할 때 버전을 계속 확인 및 맞춰줘야 하는 귀찮음이 있다.
• 하지만 한 레포지토리로 관리하면 아예 버전을 하나로 관리하거나, 여러 모듈의 버전을 관리하기 수월해진다.

⭐Extensive Code Sharing & Reuse

• 가끔은 다른 팀이 만든 코드에 있는걸 사용해야 할 때가 있다. 이를 적절히 공유하고 재사용할 수 있으므로 업무 효율을 높일 수 있다.

⭐ Simplified Dependency Management

• 외부 라이브러리를 사용하는 경우도 분명히 있을텐데, 그런 외부 디펜던시의 버전을 맞추기 용이해진다. MonoRepo를 잘 사용하면 베이스 라이브러리만 변경되더라도 Final Product 단까지 잘 적용할 수 있다.

⭐Atomic Changes

• 변경 사항을 보다 Atomic하게 관리할 수 있다.

  (원자적이라는 말은 더 쪼개지지 않는, 그 중간 과정을 확인할 수 없다는 의미로 받아들이면 된다.)

• 만약 어떤 라이브러리 코드를 바꿔서, 이를 이용하고 있는 다른 PolyRepo 레포지토리들을 돌아다니면서 하나 바꾸고 커밋 찍고, 또 하나 바꾸고 커밋 찍고… 이런 과정이 연속적으로 이뤄지게 된다. 이런게 변화하는 중간 과정이 보인다고 생각할 수 있다. 만약 각 커밋마다 테스트가 돌아간다면 각 레포에서 커밋을 찍을 때마다 테스트가 터져서 마음이 아프기도 할 것이다.

• 하지만 MonoRepo로 하면 어떤 변경 사항을 여러 독립된 프로젝트에서 적용해야 하면 한번에 고쳐서 하나의 커밋으로 관리할 수 있다. 이걸 변화 과정이 원자적이라고 말할 수 있을 것이다.

⭐ Large Scale Refactoring

• 여러 독립적인 프로젝트에 적용되어야 하는 변화사항의 경우 각각 돌아다니면서 고치는 것보다는 한 레포지토리에서 고치는게 훨씬 쉽다.

⭐ Flexible Team Boundaries and Code Ownership

• 팀 간 협업이 자유로워진다. 서로 같은 코드 베이스에서 일하고 있기 때문에 변경 사항이 있거나 협업할 일이 있으면 보다 유연하게 코드를 왔다갔다 할 수 있다. 동시에 코드에 대한 Ownership도 자유로워질 것이다.

단점

⭐Dependency 충돌 문제

• 특정 패키지가 특정 버전의 모듈을 필요로 하는 경우, 다른 버전의 모듈을 사용하는 패키지와 Dependency 충돌이 발생할 수 있다.

⭐ 단일 리포지토리 문제

• 여러 프로젝트를 하나의 리포지토리에서 관리하기 때문에 오히려 관리가 어려워 질 수 있다.MonoRepo 로 관리하는 패키지가 많지 않을 경우에는 해당되지 않지만, 관리하는 패키지가 증가함에 따라 오히려 가독성이나 여러가지 측면에서 비효율적이게 될 수 있습니다.

⭐ 긴 초기 프로젝트 설정시간

• MonoRepo 로 포함되는 모든 프로젝트를 사용한다면 상관없지만, 그 중 일부만 필요한 경우에도 node_module 설치가 이루어져야 한다.

참고

팀규모, 프로덕트 규모에 따라서 정하는 것이 적절하다.

대규모 회사 또는 프로덕트를 가진 경우에는 어려 프로젝트를 한 개발팀이 담당할 경우가 많기 때문에 이런 경우에 MonoRepo를 사용하는 것이 좋다.

 PolyRepo를 사용하던 콴다팀의 MonoRepo 변경 일지

모노레포의 문화적 의의

모던 프론트엔드 프로젝트 구성 기법 - 모노레포 개념 편

문제

문제 설명

ROR 게임은 두 팀으로 나누어서 진행하며, 상대 팀 진영을 먼저 파괴하면 이기는 게임입니다. 따라서, 각 팀은 상대 팀 진영에 최대한 빨리 도착하는 것이 유리합니다.

지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다.

위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며, 게임 맵을 벗어난 길은 갈 수 없습니다.아래 예시는 캐릭터가 상대 팀 진영으로 가는 두 가지 방법을 나타내고 있습니다.

• 첫 번째 방법은 11개의 칸을 지나서 상대 팀 진영에 도착했습니다.

• 두 번째 방법은 15개의 칸을 지나서 상대팀 진영에 도착했습니다.

위 예시에서는 첫 번째 방법보다 더 빠르게 상대팀 진영에 도착하는 방법은 없으므로, 이 방법이 상대 팀 진영으로 가는 가장 빠른 방법입니다.

만약, 상대 팀이 자신의 팀 진영 주위에 벽을 세워두었다면 상대 팀 진영에 도착하지 못할 수도 있습니다. 예를 들어, 다음과 같은 경우에 당신의 캐릭터는 상대 팀 진영에 도착할 수 없습니다.

게임 맵의 상태 maps가 매개변수로 주어질 때, 캐릭터가 상대 팀 진영에 도착하기 위해서 지나가야 하는 칸의 개수의 최솟값을 return 하도록 solution 함수를 완성해주세요. 단, 상대 팀 진영에 도착할 수 없을 때는 -1을 return 해주세요.

제한사항

• maps는 n x m 크기의 게임 맵의 상태가 들어있는 2차원 배열로, n과 m은 각각 1 이상 100 이하의 자연수입니다.
  • n과 m은 서로 같을 수도, 다를 수도 있지만, n과 m이 모두 1인 경우는 입력으로 주어지지 않습니다.
• maps는 0과 1로만 이루어져 있으며, 0은 벽이 있는 자리, 1은 벽이 없는 자리를 나타냅니다.
• 처음에 캐릭터는 게임 맵의 좌측 상단인 (1, 1) 위치에 있으며, 상대방 진영은 게임 맵의 우측 하단인 (n, m) 위치에 있습니다.

입출력 예

입출력 예 설명

입출력 예 #1주어진 데이터는 다음과 같습니다.

캐릭터가 적 팀의 진영까지 이동하는 가장 빠른 길은 다음 그림과 같습니다.

따라서 총 11칸을 캐릭터가 지나갔으므로 11을 return 하면 됩니다.

입출력 예 #2문제의 예시와 같으며, 상대 팀 진영에 도달할 방법이 없습니다. 따라서 -1을 return 합니다.

알고리즘 분류

• bfs

제출 코드

• 다른 사람의 코드 참고함 ㅠ

from collections import deque

def solution(maps):
    answer = 0
    n = len(maps)
    m = len(maps[0])
    visited = [[False]* m for _ in range(n)]

    # 동, 서, 남, 북
    position_x = [1,-1,0,0]
    position_y = [0,0,1,-1]

    queue = deque()
    queue.append((0,0)) # 시작
    visited[0][0]=True

    while queue:
        y, x = queue.popleft()

        # 동서남북 확인
        for i in range(4):
            nx = x + position_x[i]
            ny = y + position_y[i]
            # 벽이 아니고 1인 경우 확인
            if 0 <= nx < m and 0 <= ny < n and maps[ny][nx] == 1:
                if not visited[ny][nx]:
                    visited[ny][nx] = True
                    queue.append((ny, nx))
                    maps[ny][nx] = maps[y][x]+1
    if maps[n-1][m-1]==1:
        return -1
    else:
        return maps[n-1][m-1]

문제 설명

오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.

정답은 아무에게도 말하지 마세요.

콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?

단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.

문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. 이 경우 상빈이는 총 10 + 5 + 2 + 1 + 1 = 19병의 콜라를 받을 수 있습니다.

문제를 열심히 풀던 상빈이는 일반화된 콜라 문제를 생각했습니다. 이 문제는 빈 병 a개를 가져다주면 콜라 b병을 주는 마트가 있을 때, 빈 병 n개를 가져다주면 몇 병을 받을 수 있는지 계산하는 문제입니다. 기존 콜라 문제와 마찬가지로, 보유 중인 빈 병이 a개 미만이면, 추가적으로 빈 병을 받을 순 없습니다. 상빈이는 열심히 고심했지만, 일반화된 콜라 문제의 답을 찾을 수 없었습니다. 상빈이를 도와, 일반화된 콜라 문제를 해결하는 프로그램을 만들어 주세요.

콜라를 받기 위해 마트에 주어야 하는 병 수 a, 빈 병 a개를 가져다 주면 마트가 주는 콜라 병 수 b, 상빈이가 가지고 있는 빈 병의 개수 n이 매개변수로 주어집니다. 상빈이가 받을 수 있는 콜라의 병 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

• 1 ≤ b < a ≤ n ≤ 1,000,000
• 정답은 항상 int 범위를 넘지 않게 주어집니다.

입출력 예

입출력 예 설명

입출력 예 #1

• 본문에서 설명한 예시입니다.

입출력 예 #2

• 빈 병 20개 중 18개를 마트에 가져가서, 6병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 8(20 – 18 + 6 = 8)개 입니다.
• 빈 병 8개 중 6개를 마트에 가져가서, 2병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 4(8 – 6 + 2 = 4)개 입니다.
• 빈 병 4 개중 3개를 마트에 가져가서, 1병의 콜라를 받습니다. 이때 상빈이가 가지고 있는 콜라 병의 수는 2(4 – 3 + 1 = 2)개 입니다.
• 3번의 교환 동안 상빈이는 9(6 + 2 + 1 = 9)병의 콜라를 받았습니다.

제출 코드

function solution(a, b, n) {
    var answer = 0;
    let bottle = n;
    console.log(Math.floor(bottle / a));
    while (Math.floor(bottle / a) >= 1) {
        const sell =  Math.floor(bottle / a) * a;
        // 가져다 줄 수 있는 병 체크
        if(sell > 1){
            answer += Math.floor(bottle / a) * b;
            bottle = bottle - sell + (Math.floor(bottle / a) * b);
        }
    }
    return answer;
}

문제 설명

주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요.

제한사항

• nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다.
• nums의 각 원소는 1 이상 1,000 이하의 자연수이며, 중복된 숫자가 들어있지 않습니다.

입출력 예

입출력 예 설명

입출력 예 #1[1,2,4]를 이용해서 7을 만들 수 있습니다.

입출력 예 #2[1,2,4]를 이용해서 7을 만들 수 있습니다.[1,4,6]을 이용해서 11을 만들 수 있습니다.[2,4,7]을 이용해서 13을 만들 수 있습니다.[4,6,7]을 이용해서 17을 만들 수 있습니다.

제출 코드

function solution(nums) {
    var answer = 0;
    const len = nums.length;
    for(let i = 0; i < len; i++) {
        for(let j = i+1; j < len; j++) {
            for(let k = j+1; k < len; k++) {
                const sum = nums[i] + nums[j] + nums[k];
                if(check(sum)) answer++;
            }
        }
    }

    return answer;
}

// 소수 판별 알고리즘
function check(num) {
    for (let i=2; i<=num-1; i++){
        if(num % i === 0) {
           return false;
         }
    }
    return true;
}

신종 바이러스인 웜 바이러스는 네트워크를 통해 전파된다. 한 컴퓨터가 웜 바이러스에 걸리면 그 컴퓨터와 네트워크 상에서 연결되어 있는 모든 컴퓨터는 웜 바이러스에 걸리게 된다.

예를 들어 7대의 컴퓨터가 <그림 1>과 같이 네트워크 상에서 연결되어 있다고 하자. 1번 컴퓨터가 웜 바이러스에 걸리면 웜 바이러스는 2번과 5번 컴퓨터를 거쳐 3번과 6번 컴퓨터까지 전파되어 2, 3, 5, 6 네 대의 컴퓨터는 웜 바이러스에 걸리게 된다. 하지만 4번과 7번 컴퓨터는 1번 컴퓨터와 네트워크상에서 연결되어 있지 않기 때문에 영향을 받지 않는다.

어느 날 1번 컴퓨터가 웜 바이러스에 걸렸다. 컴퓨터의 수와 네트워크 상에서 서로 연결되어 있는 정보가 주어질 때, 1번 컴퓨터를 통해 웜 바이러스에 걸리게 되는 컴퓨터의 수를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에는 컴퓨터의 수가 주어진다. 컴퓨터의 수는 100 이하이고 각 컴퓨터에는 1번 부터 차례대로 번호가 매겨진다. 둘째 줄에는 네트워크 상에서 직접 연결되어 있는 컴퓨터 쌍의 수가 주어진다. 이어서 그 수만큼 한 줄에 한 쌍씩 네트워크 상에서 직접 연결되어 있는 컴퓨터의 번호 쌍이 주어진다.

출력

1번 컴퓨터가 웜 바이러스에 걸렸을 때, 1번 컴퓨터를 통해 웜 바이러스에 걸리게 되는 컴퓨터의 수를 첫째 줄에 출력한다.

알고리즘 분류

• 그래프 이론
• 그래프 탐색
• 너비 우선 탐색
• 깊이 우선 탐색

제출 코드

• 이전 dfs, bfs 문제를 열심히 풀어서.. 쉽게 풀었는데 1부터 시작해서 1 본인을 제외하는 -1을 놓침

import sys

sys.setrecursionlimit(10**9)
input = sys.stdin.readline
#  컴퓨터의 수
n = int(input())
# 네트워크 상에서 직접 연결되어 있는 컴퓨터 쌍의 수
m = int(input())
graph = [[] for _ in range(n + 1)]
visited = [False] * (n+1)

for _ in range(m):
    a, b = map(int, input().split())
    graph[a].append(b)
    graph[b].append(a)

def dfs(value):
    visited[value] = True
    for v in graph[value]:
        if visited[v] == False:
            dfs(v)

dfs(1)
print(visited.count(True)-1)

그래프를 DFS로 탐색한 결과와 BFS로 탐색한 결과를 출력하는 프로그램을 작성하시오. 단, 방문할 수 있는 정점이 여러 개인 경우에는 정점 번호가 작은 것을 먼저 방문하고, 더 이상 방문할 수 있는 점이 없는 경우 종료한다. 정점 번호는 1번부터 N번까지이다.

입력

첫째 줄에 정점의 개수 N(1 ≤ N ≤ 1,000), 간선의 개수 M(1 ≤ M ≤ 10,000), 탐색을 시작할 정점의 번호 V가 주어진다. 다음 M개의 줄에는 간선이 연결하는 두 정점의 번호가 주어진다. 어떤 두 정점 사이에 여러 개의 간선이 있을 수 있다. 입력으로 주어지는 간선은 양방향이다.

출력

첫째 줄에 DFS를 수행한 결과를, 그 다음 줄에는 BFS를 수행한 결과를 출력한다. V부터 방문된 점을 순서대로 출력하면 된다.

예제 입력 1

4 5 1
1 2
1 3
1 4
2 4
3 4

예제 출력 1

1 2 4 3
1 2 3 4

예제 입력 2

5 5 3
5 4
5 2
1 2
3 4
3 1

예제 출력 2

3 1 2 5 4
3 1 4 2 5

예제 입력 3

1000 1 1000
999 1000

예제 출력 3

1000 999
1000 999

알고리즘

• 그래프 이론
• 그래프 탐색
• 너비 우선 탐색
• 깊이 우선 탐색

제출 코드

• 몇 부분이 헷갈리는 부분이 있지만 DFS는 어느정도 개념을 숙지함
• BFS는 할때마다 헷갈림..

from collections import deque

n, m, v = map(int, input().split())

graph = [[] for _ in range(n + 1)]

for i in range(m):
    a, b = map(int, input().split())
    graph[a].append(b)
    graph[b].append(a)
    graph[a].sort()
    graph[b].sort()

dfs_visited = [False] * (n + 1)
bfs_visited = [False] * (n + 1)

def DFS(v):
    dfs_visited[v] = True
    print(v, end=' ')
    for i in graph[v]:
        if not dfs_visited[i]:
            DFS(i)

def BFS(v):
    queue = deque([v])
    bfs_visited[v] = True
    while queue:  # 더이상 큐에 아무것도 남아 있지 않을때까지 반복
        pop = queue.popleft()
        print(pop, end=' ')
        for i in graph[pop]:
            if not bfs_visited[i]:
                queue.append(i)  # 방문할 때 큐에 넣기
                bfs_visited[i] = True

DFS(v)
print() # print 없으면 같은 줄에 출력됨
BFS(v)

• 현재 프로젝트에서 코드 에디터 관련 기능을 제공해야 함. -> 미리 실험적으로 구현 가능 여부와 제공할 기능 범위 파악이 필요하여 기본적인 기능 구현이 필요했음. 기본적인 기능 구현 외에도 기능을 추가하여 공통 컴포넌트화 하여 사용 할 수 있음.

사용한 라이브러리

• vue3-ace-editor

  https://github.com/CarterLi/vue3-ace-editor

사용 환경

• typescript
• vite
• vue3

설치

npm i vue3-ace-editor --save

사용 방법

1. config파일 작성

• ace-editor에서 구문 체크나 검색 박스 등의 추가 기능을 사용하기 위해서는 config 파일을 import 해서 사용해야 한다. 따라서, config폴더 하위에 aceConfig파일을 생성한다.

    import ace from 'ace-builds';
  
    import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
    ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
  
    import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url';
    ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl);
  
    import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url';
    ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl);
  
    import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url';
    ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl);
  
    import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url';
    ace.config.setModuleUrl('ace/theme/github', themeGithubUrl);
  
    import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
    ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
  
    import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url';
    ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl);
  
    import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url';
    ace.config.setModuleUrl('ace/mode/base', workerBaseUrl);
  
    import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url';
    ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
  
    import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url';
    ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
  
    import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url';
    ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl);
  
    import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url';
    ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl);
  
    import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url';
    ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl);
  
    import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url';
    ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl);
  
    import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url';
    ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl);
  
    import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url';
    ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl);
  
    import 'ace-builds/src-noconflict/ext-language_tools';
    import 'ace-builds/src-noconflict/ext-searchbox';
    ace.require('ace/ext/language_tools');
    ace.require('ace/ext/searchbox');
  
    export default ace;

2. code editor 컴포넌트 생성

1. CodeEditor.vue 파일을 생성한다. (이름 마음대로 생성)

2. config 파일과 vue3-ace-editor 라이브러리를 import 한다.

    <script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import '@config/aceConfig'; // 코드 에디터 설정 (필요시 추가 설정 후 임포트해서 사용)
    import { VAceEditor } from 'vue3-ace-editor';

3. 코드 에디터로 표시할 language와 테마 등 옵션과 변수를 설정한다. (props로 부모 컴포넌트에서 값을 받아오는 방법으로 수정 가능함)

    const lang = 'json'; // json / html / yaml / javascript 등등
    const theme = 'github'; // monokai / github 등등
   
    const options = {
      cursorStyle: 'wide',
      useWorker: true,
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      highlightSelectedWord: true,
    };
   
    let edit = ref<typeof VAceEditor | null>(null);
    let value = ref<string>('');

4. 코드 에디터 Init 함수와 Json을 불러오는 Init 함수를 작성한다. (해당 예시에선 vue의 package.json 파일을 불러온다.)

    // 코드 에디터 Init 함수
    function editorInit(editor: typeof VAceEditor) {
      edit.value = editor;
    }
   
    // 예시 Json Init 
    async function initJson() {
      value.value = '';
      value.value = (await import('../../../../package.json?raw')).default;
    }

5. Vue의 onMounted 사이클에서 InitJson 함수를 호출하는 코드를 작성한다.

    onMounted(() => {
      initJson();
    });

6. 템플릿 태그 안에 코드 에디터 태그를 사용하여 코드 에디터를 화면에 표시한다.

    <template>
        <div class="code-wrap">
              <v-ace-editor
                v-model:value="value"
                :lang="lang"
                :theme="theme"
                :options="options"
                :readonly="true"
                :wrap="true"
                :default="true"
                :min-lines="20"
                :max-lines="30"
                @init="editorInit"
              />
        </div>
    </template>

3. 단어 검색 및 코드 펼치기 접기 기능 추가

1. 검색창, 이전/다음 버튼 UI와 펼치기 접기 버튼을 추가로 만들고 code editor에서 제공하는 아래 함수들을 이용하여 기능을 추가 제공 할 수 있다.

    // 코드 검색
    function onFind(keyword) {
      if (edit.value) {
        edit.value.findAll(keyword, {
          backwards: false,
          wrap: true,
          caseSensitive: false,
          wholeWord: false,
          regExp: true,
        });
      }
    }
   
    // 다음 검색
    function onNext() {
      if (edit.value) {
        edit.value.findNext();
      }
    }
    // 이전 검색
    function onPrevious() {
      if (edit.value) {
        edit.value.findPrevious();
      }
    }
    //펼치기
    function onFold() {
      if (edit.value) {
        edit.value.session.expandFolds(edit.value.session.getAllFolds());
      }
    }
    // 접기
    function onUnFold() {
      if (edit.value) {
        edit.value.session.foldAll();
      }

참고

• 설정 옵션

  Configuring Ace

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

제한사항

• 1 ≤ numbers의 길이 ≤ 9
  • 0 ≤ numbers의 모든 원소 ≤ 9
  • numbers의 모든 원소는 서로 다릅니다.

입출력 예

입출력 예 설명

입출력 예 #1

• 5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다.

입출력 예 #2

• 1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야 합니다.

제출 코드

• 분명.. 더 쉬운 방법이 있을거라는 생각을 하긴 했는데 생각나는대로 바로 써내려감..

def solution(numbers):

    answer = -1
    compare = [1,2,3,4,5,6,7,8,9]
    for num in compare:
        if num not in numbers:
            if answer == -1 : answer = 0
            answer += num
    return answer

다른 사람 코드

• ㅎㅎ 나만 바보된 것 같은 알고리즘이다.. 두줄이면 끝나는거였다니.. 문제를 보면 어차피 숫자는 한개씩만 나온다고 했어서 1~9까지 모두 더한 합계 45에서 빼기를 하면 되는 문제였다.

def solution(numbers):
    return 45 - sum(numbers)

문제 설명

문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다.예를 들어, s="banana"라고 할 때,  각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다.

• b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
• a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
• n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다.
• a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다.
• n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다.
• a는 자신보다 두 칸, 네 칸 앞에 a가 있습니다. 이 중 가까운 것은 두 칸 앞이고, 이는 2로 표현합니다.

따라서 최종 결과물은 [-1, -1, -1, 2, 2, 2]가 됩니다.

문자열 s이 주어질 때, 위와 같이 정의된 연산을 수행하는 함수 solution을 완성해주세요.

제한사항

• 1 ≤ s의 길이 ≤ 10,000
  • s은 영어 소문자로만 이루어져 있습니다.

입출력 예

입출력 예 설명

입출력 예 #1지문과 같습니다.

입출력 예 #2설명 생략

알고리즘

• 완전 탐색 = 모든 경우의 수를 다 체크해서 정답을 찾는 방법

제출 코드

• 나의 문제 풀이 방법

  처음에 파이썬의 rfind함수를 활용하여 반복문 돌면서 현재 위치를 기준으로 뒤쪽에서부터 찾는 로직을 짰는데 테스트 케이스에서 4문제 정도 실패하였다.

def solution(s):
    set_idx = {}
    answer = []
    for index, char in enumerate(s):
        if char in set_idx: # 딕셔너리에서 해당 알파벳 키 있는지 확인(최종 마지막값 저장)
            answer.append(index-set_idx[char])
            set_idx[char] = index
        else:
            answer.append(-1)
            set_idx[char] = index

    return answer

다른 사람의 풀이

• rfind 함수 활용

def solution(s):
    answer = []

    for i in range((len(s))):
        t = s[:i]
        idx = t.rfind(s[i])
        if idx == -1:
            answer.append(-1)
        else:
            answer.append(i-idx)

    return answer

문제 설명

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.

예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.

제한사항

• 1 ≤ p의 길이 ≤ 18
• p의 길이 ≤ t의 길이 ≤ 10,000
• t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.

입출력 예

알고리즘

• 완전 탐색 = 모든 경우의 수를 다 체크해서 정답을 찾는 방법

제출 코드

• 나의 문제 풀이 방법

  오랜만에 파이썬을 사용하다보니 for문 돌리는 방법을 까먹었다 ^^; 자바스크립트랑 같이 사용하다보면 for in, for of 등등의 for문이 자꾸 머릿속에 맴돈다.

  문제를 보자마자 문자열을 잘라서 비교하는걸 생각했지만 p와 t의 문자열 길이가 동일할 경우 의 체크를 하지 않아서 문제 제출 할 때 몇개 실패했다.

  해당 부분을을 꼭 if조건에서 실행하여 오류가 나지 않게 하는 것이 중요했던 문제인 것 같다

def solution(t, p):
    answer = 0
    p_length = len(p) # p의 문자열 길이
    for start in range(0, len(t)):
        end = start + p_length
        t_str = t[start:end]
        if (p_length == len(t_str) and int(t_str) <= int(p)):
            answer+=1

    return answer

참고 자료

• 공식 깃허브

  GitHub - pantsel/konga: More than just another GUI to Kong Admin API

• Kong & Konga 설치 블로그

  Kong API Gateway #2 - Konga & API 등록/요청

환경

1. Virtual Machine
2. 우분투 18.04.2
3. 도커 환경

설치 방법

1. 도커 이미지 Pull

docker pull pantsel/konga

2. 데이터베이스 셋팅

Konga의 Bootstrap환경을 위해 DB 마이그레이션이 필요함

Kong 설치시 생성한 환경(시리즈 1)을 그대로 사용하므로 네트워크는 kong-net DB 접속정보 역시 kong-database로 입력하여 prepare  명령 실행

• 공식 문서

docker run -p 1337:1337 \
             --network {{kong-network}} \ // optional
             --name konga \
             -e "NODE_ENV=production" \ // or "development" | defaults to 'development'
             -e "TOKEN_SECRET={{somerandomstring}}" \
             pantsel/konga

• 내가 run 한 방법
  • kongpass = kong 설치할때 설정한 DB 비밀번호
  • 명령어
    • -c = 명령어
    • -a = 어댑터 (can be postgres or mysql)
    • -u = 전체 데이터베이스 연결 URL

docker run --rm --network=kong-net pantsel/konga:latest \
-c prepare -a 'postgres' \
-u postgresql://kong:kongpass@kong-database:5432/konga

3. Konga 실행

기본포트 1337

네트워크는 kong-net

환경변수 TOKEN_SECRET - 본인 맘대로

DB 접속정보 등 설정

docker run -p 1337:1337 --network=kong-net -e "TOKEN_SECRET=<<난수 생성해서 입력>>" -e "DB_ADAPTER=postgres" -e "DB_URI=postgresql://kong:kongpass@kong-database:5432/konga" -e "NODE_ENV=production" --name konga pantsel/konga

4. Konga 접속

브라우저로 접속

localhost:1337

5. Konga admin 계정 생성

6. Konga connection 설정

name = admin
admin url = http://kong-gateway:8001

1. Virtual Machine

2. 우분투 18.04.2

3. 도커 환경

   Install Kong Gateway on Docker - v3.1.x | Kong Docs

설치 방법

1. 도커 네트워크 설정

docker를 이용하기 때문에 DB, Kong 컨테이너 간 통신을 위해서 docker network를 생성하여 네트워크를 구성

docker network create kong-net

2. 데이터 베이스 설치 및 구동

PostgreSQL로 설치

docker run -d --name kong-database \
  --network=kong-net \
  -p 5432:5432 \
  -e "POSTGRES_USER=kong" \
  -e "POSTGRES_DB=kong" \
  -e "POSTGRES_PASSWORD=kongpass" \
  postgres:9.6

3. 데이터 베이스 셋팅

2번에서 Database를 PostgreSQL로 설치는 완료했지만, 저 DB는 현재 아무것도 없는 껍데기 상태의 DB이기 때문에, kong의 bootstrap환경을 migration하여 DB 스키마를 최초 설정

docker run --rm --network=kong-net \
  -e "KONG_DATABASE=postgres" \
  -e "KONG_PG_HOST=kong-database" \
  -e "KONG_PG_PASSWORD=kongpass" \
  -e "KONG_PASSWORD=test" \
 kong/kong-gateway:3.1.1.2 kong migrations bootstrap

4. Kong Gateway에서 컨테이너 실행

docker run -d --name kong-gateway \
  --network=kong-net \
  -e "KONG_DATABASE=postgres" \
  -e "KONG_PG_HOST=kong-database" \
  -e "KONG_PG_USER=kong" \
  -e "KONG_PG_PASSWORD=kongpass" \
  -e "KONG_PROXY_ACCESS_LOG=/dev/stdout" \
  -e "KONG_ADMIN_ACCESS_LOG=/dev/stdout" \
  -e "KONG_PROXY_ERROR_LOG=/dev/stderr" \
  -e "KONG_ADMIN_ERROR_LOG=/dev/stderr" \
  -e "KONG_ADMIN_LISTEN=0.0.0.0:8001" \
  -e "KONG_ADMIN_GUI_URL=http://localhost:8002" \
  -e KONG_LICENSE_DATA \
  -p 8000:8000 \
  -p 8443:8443 \
  -p 8001:8001 \
  -p 8444:8444 \
  -p 8002:8002 \
  -p 8445:8445 \
  -p 8003:8003 \
  -p 8004:8004 \
  kong/kong-gateway:3.1.1.2

5. 구동 확인

curl이 설치되어 있지 않으면

apt install curl

localhost:8001번의 /services 엔드포인트로 GET요청하여 확인

curl -i -X GET --url http://localhost:8001/services

브라우저를 열어서도 확인 가능

http://localhost:8002

OpenStack에 대한 다른 정의들

• 퍼블릭 클라우드와 사설 클라우드 구출을 가능하게 하는 오픈 소스 소프트웨어
• 서버, 스토리지, 네트워크와 같은 자원들을 모두 모아, 이들을 제어하고 운영하기 위한 클라우드 오퍼레이팅 시스템
• 오픈 소스를 기반으로 클라우드를 구축하고 운용하고자 하는 오픈소스 개발자, 회사, 사용자들이 주축이 되어 발전하는 커뮤니티

릴리즈 관련

• 6개월 주기로 릴리즈 발표하며 새로운 특징 및 핵심 기능들은 보통 1년을 주기로 많은 변화가 생김
• 기본적으로 업그레이드 버전업 미지원하나 최근부터 지원하기 시작함

구성 요소

• Compute
  • Nova - VM 인스턴스 관리
• Storage
  • Swift - 오브젝트 스토리지 관리
  • Cinder - 블록 스토리지 (가상 하드디스크) 관리
  • Glance - VM이미지 관리 (CentOS 등)
• Identity
  • Keystone - 로그인 등 통합 인증 관리 (인가, 인증)
• Network
  • Neutron (Quantum) - 가상 네트워크 관리
• Template
  • Heat - 템플릿 관리 (상황별 가상머신 몇개, 디스크 몇 등등 지정)
• Metering
  • Ceilometer - 얼마나 썻는지

• 주의 사항
  1. typescript + vue3 + vite 등의 환경 예시입니다.
  2. quasar 디자인 프레임워크를 사용한 예시입니다.

1. StoryBook 설치

npx -p @storybook/cli sb init --type vue

2. 디렉토리 및 script 확인

• 프로젝트 루트 디렉토리에서 1번 명령어 실행시 루트 디렉토리에 .storybook, ./scr/storybook 폴더가 생성되며 package.json에 storybook, build-storybook 명령어가 추가로 자동 생성됨

• npm run storybook 으로 6006포트에서 storybook 페이지가 열리는지 확인

• package.json 참고

  • 설치 날짜에 따라 버전은 다를 수 있으므로 참고만

    "scripts": {
      ...
      "storybook": "start-storybook -p 6006",
      "build-storybook": "build-storybook"
    }, 
    "dependencies": {
      ...(생략)
    },
    "devDependencies": {
      ...
      "@storybook/addon-actions": "^6.5.8",
      "@storybook/addon-essentials": "^6.5.8",
      "@storybook/addon-interactions": "^6.5.8",
      "@storybook/addon-links": "^6.5.8",
      "@storybook/builder-vite": "^0.1.36",
      "@storybook/testing-library": "^0.0.11",
      "@storybook/vue3": "^6.5.8"
    }
    }

3. src/storybook 폴더 수정

• src/storybook 하위 폴더에 기본으로 생성되는 파일 중 example 파일 (introduce 파일)은 우선 삭제하지 않고 그 외 모든 파일은 js 파일이기 때문에 삭제해도 됨 (우리는 ts 파일로 생성 할 것!)

• src/components/ButtonComp.vue 파일 생성

    <template>
      <q-btn
        :label="props.label"
        flat
        :disable="props.disable"
        @click="emit('click:clicked')"
      />
    </template>
  
    <script lang="ts" setup>
    import { defineProps, ref } from 'vue';
    // emit
    const emit = defineEmits(['click:clicked']);
    // button 인터페이스
    interface Button {
      label?: string; // 버튼 라벨
      disable?: boolean; // disable 여부
    }
    const props = withDefaults(defineProps<Button>(), {
      label: '버튼 라벨명',
      disable: false,
    });
  
    </script>

• src/storybook/button.stories.ts 파일 생성

    import GButton from '@/components/ButtonComp.vue';
    import { Meta, StoryFn } from '@storybook/vue3';
  
    export default {
      title: 'Atoms/Button',
      component: GButton,
      argTypes: {
        label: { control: 'text' },
        disable: { control: 'boolean' },
      },
    } as Meta<typeof GButton>;
  
    // 기본
    export const Basic: StoryFn<typeof GButton> = (args) => ({
      components: { GButton },
      setup() {
        return { args };
      },
      template: `
      <g-button v-bind="args"/>
      `,
    });
  
    // 라벨
    export const Label: StoryFn<typeof GButton> = (args) => ({
      components: { GButton },
      setup() {
        return { args };
      },
      template: `
      <g-button v-bind="args"/>
      `,
    });
  
    Label.args = {
      label: '라벨명',
    };
  
    //  선택 불가
    export const Disable: StoryFn<typeof GButton> = (args) => ({
      components: { GButton },
      setup() {
        return { args };
      },
      template: `
      <g-button v-bind="args"/>
      `,
    });
  
    Disable.args = {
      disable: true,
    };
  

4. 지원되지 않는 플러그인 직접 수정

• 위 내용까지만 진행해도 실행은 되겠지만 화면에 보이는 source code를 확인해보면 template 부분만 보이지 않고 export const~ 부터 모든 코드가 노출되는 것이 확인됨.

• 아직 플러그인이 지원되지 않는 문제가 있음

• .storybook/withSource.js 파일 작성

  • 코드 참고

    https://github.com/storybookjs/storybook/issues/13917

  • 주의사항 = lodash 설치 필요

    import { addons, makeDecorator } from '@storybook/addons';
    import kebabCase from 'lodash';
    import { h, onMounted } from 'vue';
    
    // this value doesn't seem to be exported by addons-docs
    export const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`;
    
    function templateSourceCode(
    templateSource,
    args,
    argTypes,
    replacing = 'v-bind="args"'
    ) {
    const componentArgs = {};
    for (const [k, t] of Object.entries(argTypes)) {
      const val = args[k];
      if (
        typeof val !== 'undefined' &&
        t.table &&
        t.table.category === 'props' &&
        val !== t.defaultValue
      ) {
        componentArgs[k] = val;
      }
    }
    
    const propToSource = (key, val) => {
      const type = typeof val;
      switch (type) {
        case 'boolean':
          return val ? key : '';
        case 'string':
          return `${key}="${val}"`;
        default:
          return `:${key}="${val}"`;
      }
    };
    
    return templateSource.replace(
      replacing,
      Object.keys(componentArgs)
        .map((key) => ' ' + propToSource(kebabCase(key), args[key]))
        .join('')
    );
    }
    
    export const withSource = makeDecorator({
    name: 'withSource',
    wrapper: (storyFn, context) => {
      const story = storyFn(context);
    
      // this returns a new component that computes the source code when mounted
      // and emits an events that is handled by addons-docs
      // this approach is based on the vue (2) implementation
      // see https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/sourceDecorator.ts
      return {
        components: {
          Story: story,
        },
    
        setup() {
          onMounted(() => {
            try {
              // get the story source
              const src = context.originalStoryFn().template;
    
              // generate the source code based on the current args
              const code = templateSourceCode(
                src,
                context.args,
                context.argTypes
              );
    
              const channel = addons.getChannel();
    
              const emitFormattedTemplate = async () => {
                const prettier = await import('prettier/standalone');
                const prettierHtml = await import('prettier/parser-html');
    
                // emits an event  when the transformation is completed
                channel.emit(
                  SNIPPET_RENDERED,
                  (context || {}).id,
                  prettier.format(`<template>${code}</template>`, {
                    parser: 'vue',
                    plugins: [prettierHtml],
                    htmlWhitespaceSensitivity: 'ignore',
                  })
                );
              };
    
              setTimeout(emitFormattedTemplate, 0);
            } catch (e) {
              console.warn('Failed to render code', e);
            }
          });
    
          return () => h(story);
        },
      };
    },
    });

• .storybook/main.ts 수정

    const { loadConfigFromFile, mergeConfig } = require('vite');
    const path = require('path');
  
    module.exports = {
      stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
      addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
      ],
      framework: '@storybook/vue3',
      core: {
        builder: '@storybook/builder-vite',
      },
      typescript: {
        check: false,
        checkOptions: {},
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
          shouldExtractLiteralValuesFromEnum: true,
          propFilter: (prop) =>
            prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
        },
      },
      features: {
        storyStoreV7: true,
      },
  
      async viteFinal(previousConfig) {
        const { config } = await loadConfigFromFile(
          path.resolve(__dirname, '../vite.config.ts')
        );
  
        return mergeConfig(previousConfig, {
          ...config,
          plugins: [],
        });
      },
    };

• .storybook/preview.js 파일 수정

    import '@quasar/extras/roboto-font/roboto-font.css';
    // These are optional
    import '@quasar/extras/material-icons/material-icons.css';
  
    // Loads the quasar styles and registers quasar functionality with storybook
    import 'quasar/dist/quasar.css';
    import { app } from '@storybook/vue3';
    import { Quasar } from 'quasar';
    import '@styles/index.scss';
  
    import { withSource } from './withSource';
    // This is also where you would setup things such as pinia for storybook
    app.use(Quasar, {});
  
    export const parameters = {
      actions: { argTypesRegex: '^on[A-Z].*' },
      controls: {
        matchers: {
          color: /(background|color)$/i,
          date: /Date$/,
        },
      },
    };
  
    export const decorators = [withSource];

5. 결론

• 위 내용까지 수정 후 run storybook으로 실행하면 source code가 원하는 모습으로 출력됨.
• 하지만 위 소스 중 template 부분이 문자열 형태로 삽입되어 있음.
• 추후에 오타 입력시 바로 확인이 어렵고 멀티 컴포넌트를 구성 할 경우 알아보기 힘든 큰 단점이 있음.
• 따라서, vue로 storybook을 구성하는 것은 현재로썬.. 어려워보임

1. 모두 select절에 넣어서 하나하나 select를 했음에도 null인 값들은 아예 select해주지 않음

원인

1. myBaitis 3.2.2 버전 이후로 resultType에 HashMap(or Map)을 사용하면 데이터가 Null인 컬럼은 Map의 KeySet에 제외가 됨

해결방법

1. mybatis config xml 파일에 아래 설정 추가

   <settings>
        <setting name="callSettersOnNulls" value="true"/>
   </settings>

우선 Spring Cloud Gateway 에서 사용하는 3가지 용어에 대해서 먼저 알아볼 필요가 있다.

1. Route
2. Predicate
3. Filter

Route (라우트)

목적지의 URI와 Predicates라는 조건들의 목록 그리고 필터들을 이용하여 어떤 곳으로 Routing 할 것인지를 명시하는 역할을 한다.

우리는 Routes 에 대한 속성과 정보를 입력하여 Spring Cloud가 어떤 방식으로 동작하라고 지시할 수 있게 된다.

Predicate

쉽게 조건이라고 생각하면 된다.

아래에서 우리는 Predicates 를 작성할 것인데, 다음과 같이 작성한다.

predicated: -Path=/user/**

그럼 user 라는 모든 경로를 지정한 것이다.

• Handler Mapping 시에 필요한 Uri 정보나, Path 정보를 확인하는 주체가 된다.

Filter

프록시 방식으로 동작하며, 한 필터에 pre / post 동작을 정의 할 수 있다.

모든 pre 필터가 처리된 후 요청이 처리되고 나오면서 모든 post 필터가 처리된다.

들어오는 요청과 응답, Request, Response을 특정 필터를 타게 함으로 우리가 원하는 방식으로 요청을 보내거나 헤더를 조작할 수 있고, 해당 필터를 이용해서 로그 파일을 작성하게 할 수 도 있다.

• Handler Mapping이 된 후 들어온 요청에 대한 필터 작업을 수행할 수 있다.
• 2개의 필터로 크게 나뉘며 사전(Pre Filter)와 사후(Post Filter)로 나눌 수 있다.
  • Pre Filter
    • 특정 작업이 일어나기 전에 지정
  • Post Filter
    • 특정 작업이 끝난 후에 지정

Spring Cloud Gateway 절차

1. Client 는 Spring Cloud Gateway 에 요청을 보낸다.
2. Gateway Handler Mapping 에서 해당 요청에 대한 Route와 Predicates가 일치한다고 판단하면 해당 요청은 Gateway Web handler로 보내진다.
3. handler 에서 Filter Chain 을 이용해서 사전 필터 혹은 사후 필터로 나누어 동작한다.
4. 필터링이 된 후 실제 마이크로서비스에게 전달된다.

• wsl 환경에서 centos 사용 할 때 systemctl 명령어를 지원하지 않음

해결 방법

• 거의 하루하고도 반나절동안 이 오류에 부딪쳐서 아무것도 할 수 없다가 centos8 키워드를 제거해서 wsl centos systemctl 이라고 검색하니 아래와 같은 해결책을 찾을 수 있었다.