성공과 실패의 공간

Azure Static Web App CI/CD 및 Config 설정

2021-07-16T00:00:00+09:00

1. Azure Static Web App Github Actions Config

azure static web app 최우선 config 파일
내용은 모든 링크를 rewrite 한다.

src/assets/azureConfig/staticwebapp.config.json

 {
    "routes": [
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ], 
     "navigationFallback": {
          "rewrite": "/index.html",
          "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
        }
  }

Github Actions의 워크플로우 파일
내용은 환경 변수 .env 파일 추가 후 yarn으로 빌드하고
Token의 Azure Static Web App에 Deploy 및 Config 설정

.github/workflows/deploy.yml

name: CI/CD

on:
  push:
    branches:
    - develop
  pull_request:
    types: [closed]
    branches:
    - develop
    
jobs:
  build_and_deploy_app:
    runs-on: ubuntu-latest
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v2
    
    
    - name: Setting .env
      run: |
        touch .env
        echo "$" >> .env
        # 한 줄은 echo "" > .env로 처리하는게 깔끔한가?
    
    - name: Setup Node
      uses: actions/setup-node@v2
      with:
        node-version: '14'
        cache: 'yarn'
        
    - name: Build Vue App
      run: |
        yarn install
        yarn build
    - name: Deploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: '$'
        repo_token: $
        action: 'upload'
        config_file_location: 'src/assets/azureConfig'
        app_location: 'dist'
        app_artifact_location: 'dist'

  close_pull_request_app:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request App
    steps:
    - name: Close Pull Request
      id: closepullrequest
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: '$'
        action: 'close'

Azure Static Web App, Github Actions, CI/CD

2021-07-11T00:00:00+09:00

1. Azure

1.1 Azure Account

저는 무료 체험 계정으로 계정을 생성했습니다.

1.2 Azure Static Web App

정적 웹 앱에 들어가서 새로운 인스턴스를 생성합니다. 인스턴스 생성이 완성되면 해당 인스턴스에 들어가서 배포 토큰을 복사해주세요.

2. Github Setting

2.1 Github Repository

자동 배포를 설정 할 리포를 생성하거나 결정해주세요.

2.2 Github Repository Branch

해당 리포에서 배포의 시작점을 될 브런치를 생성 및 접속해주세요.

2.3 Github Actions Workflows

해당 브런치에서 Build 작업과 Azure Static Web App Token 접근 및 Deploy Workflows를 작성합니다.

3. Build and Deploy

테스트를 위해 Push 후 생성한 정적 웹 앱에서 제공된 도메인에 접속해서 확인합니다.

번외. Docker Compose, Kubernetes, jenkins, helm, nginx

VSCODE에서 WSL2 기반 개발용 컨테이너로 VUE 개발환경 구축하기

2021-07-07T00:00:00+09:00

1. VSCODE 설치

VSCODE DOWNLOAD

2. 개발용 컨테이너 설정

microsoft dev container setting guide

3. WSL2에서 개발용 컨테이너 설정

WSL2에서 container 설정

4. 설정 완료

성공적으로 개발용 컨테이너 설정이 완료됐음을 확인 할 수 있습니다.

docker 설치 및 오류 해결

2021-07-06T00:00:00+09:00

1. docker 설치

docker 사이트에 접속해서 자신의 운영체제에 맞는 버전을 설치해줍니다.
저는 윈도우 버전을 설치했고 WSL2 사용을 체크하고 설치했습니다.

2. docker 오류 해결

설치 후 재부팅을 하고 도커를 실행해봤지만 오류로 인해 정상적으로 작동이 되지 않습니다.
WslRegisterDistribution failed with error: 0x800701bc ... 오류가 뜹니다.
구글링을 통해 해답을 찾았습니다. Microsoft-Windows-Subsystem-Linux 옵션, VirtualMachinePlatform 옵션을 업데이트하고 Linux 커널 업데이트 패키지를 설치해줍시다.

윈도우 터미널(powershell, cmd 등)에서 다음 명령어를 입력합니다.
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

  

이후 다음 링크 Linux 커널 업데이트 패키지에서 패키지를 다운받아 설치합니다.

3. Windows Terminal 앱 설치 및 윈도우용 Ubuntu 앱 설치

저는 편의성을 위해 Windows Terminal 앱을 설치하고 윈도우 Linux 커널을 사용하기 위해 윈도우용 Ubuntu 앱을 마이크로소프트 스토어에서 설치했습니다.

이후 설치한 Ubuntu 앱을 실행시키면 인스톨이 진행되고 이후 계정을 설정해주면 됩니다.
해당 과정에서 설정한 계정은 윈도우 계정과 완전히 무관합니다.

계정 설정까지 완료되면 이제 Windows Terminal 앱에서 곧바로 우분투에 접근 할 수 있습니다.

4. 설치 완료

성공적으로 도커가 실행됐음을 확인 할 수 있습니다.

BAEKJOON - 1316번

2021-06-30T00:00:00+09:00

1. 문제

그룹 단어란 단어에 존재하는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다. 예를 들면, ccazzzzbb는 c, a, z, b가 모두 연속해서 나타나고, kin도 k, i, n이 연속해서 나타나기 때문에 그룹 단어이지만, aabbbccb는 b가 떨어져서 나타나기 때문에 그룹 단어가 아니다.

단어 N개를 입력으로 받아 그룹 단어의 개수를 출력하는 프로그램을 작성하시오.

2. 입력

첫째 줄에 단어의 개수 N이 들어온다. N은 100보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 단어가 들어온다. 단어는 알파벳 소문자로만 되어있고 중복되지 않으며, 길이는 최대 100이다.

3. 출력

첫째 줄에 그룹 단어의 개수를 출력한다.

4. 코드

function solution(a, b){
  let answer = a;
  let tempArr = [];
  let tempStr = '';


  for(let i = 0; i < a; i++){
      tempArr = [];
      tempStr = '';
      for(let j = 0; j < b[i].length; j++){
        if(!tempArr.includes(b[i][j])){
            tempArr.push(b[i][j]);
            tempStr = b[i][j];
        }
        else if(tempArr.includes(b[i][j]) && tempStr === b[i][j])
            continue;
        else{
            answer--;
            break;
        }
      }
  }
  
  return answer;
}


let exampleA = 4;
//let exampleB = ['happy', 'new', 'year'];
let exampleB = ['abcdcc', 'abab', 'abcabc', 'aaapaaaaaa'];
solution(exampleA, exampleB);

참고 자료

BAEKJOON 1316번 문제

BAEKJOON - 2941번

2021-06-29T00:00:00+09:00

1. 문제

예전에는 운영체제에서 크로아티아 알파벳을 입력할 수가 없었다. 따라서, 다음과 같이 크로아티아 알파벳을 변경해서 입력했다.

크로아티아 알파벳	변경
č	c=
ć	c-
dž	dz=
đ	d-
lj	lj
nj	nj
š	s=
ž	z=

예를 들어, ljes=njak은 크로아티아 알파벳 6개(lj, e, š, nj, a, k)로 이루어져 있다. 단어가 주어졌을 때, 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다.

dž는 무조건 하나의 알파벳으로 쓰이고, d와 ž가 분리된 것으로 보지 않는다. lj와 nj도 마찬가지이다. 위 목록에 없는 알파벳은 한 글자씩 센다.

2. 입력

첫째 줄에 최대 100글자의 단어가 주어진다. 알파벳 소문자와 ‘-‘, ‘=’로만 이루어져 있다.

단어는 크로아티아 알파벳으로 이루어져 있다. 문제 설명의 표에 나와있는 알파벳은 변경된 형태로 입력된다.

3. 출력

입력으로 주어진 단어가 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다.

4. 코드

function solution(a){
  let answer = 0;
  let temp = [];

  temp = a.split(/dz=|lj|c=|c-|d-|nj|s=|z=/); // 정규표현식으로 특수 조건의 크로아티아 알파벳 split
  answer = temp.join().length; // split count + 알파벳 카운트
  
  return answer;
}


let exampleA = "nljjac=dz=a";
solution(exampleA);

참고 자료

BAEKJOON 2941번 문제

BAEKJOON - 5622번

2021-06-28T00:00:00+09:00

1. 문제

상근이의 할머니는 아래 그림과 같이 오래된 다이얼 전화기를 사용한다.

전화를 걸고 싶은 번호가 있다면, 숫자를 하나를 누른 다음에 금속 핀이 있는 곳 까지 시계방향으로 돌려야 한다. 숫자를 하나 누르면 다이얼이 처음 위치로 돌아가고, 다음 숫자를 누르려면 다이얼을 처음 위치에서 다시 돌려야 한다.

숫자 1을 걸려면 총 2초가 필요하다. 1보다 큰 수를 거는데 걸리는 시간은 이보다 더 걸리며, 한 칸 옆에 있는 숫자를 걸기 위해선 1초씩 더 걸린다.

상근이의 할머니는 전화 번호를 각 숫자에 해당하는 문자로 외운다. 즉, 어떤 단어를 걸 때, 각 알파벳에 해당하는 숫자를 걸면 된다. 예를 들어, UNUCIC는 868242와 같다.

할머니가 외운 단어가 주어졌을 때, 이 전화를 걸기 위해서 필요한 최소 시간을 구하는 프로그램을 작성하시오.

2. 입력

첫째 줄에 알파벳 대문자로 이루어진 단어가 주어진다. 단어의 길이는 2보다 크거나 같고, 15보다 작거나 같다.

3. 출력

첫째 줄에 다이얼을 걸기 위해서 필요한 최소 시간을 출력한다.

4. 코드

function solution(a){
  let answer = 0;

  for(let i = 0; i < a.length; i++){
      let charNum = a[i].codePointAt();
      answer += charNum < 68 ? 3 :
                charNum < 71 ? 4 :
                charNum < 74 ? 5 :
                charNum < 77 ? 6 :
                charNum < 80 ? 7 :
                charNum < 83 ? 8 :
                charNum < 86 ? 9 :
                charNum < 89 ? 10 :
                charNum < 93 ? 11 :
                12
  }

  return answer;
}


let exampleA = "UNUCIC";
solution(exampleA);

참고 자료

BAEKJOON 5622번 문제

BAEKJOON - 2908번

2021-06-27T00:00:00+09:00

1. 문제

상근이의 동생 상수는 수학을 정말 못한다. 상수는 숫자를 읽는데 문제가 있다. 이렇게 수학을 못하는 상수를 위해서 상근이는 수의 크기를 비교하는 문제를 내주었다. 상근이는 세 자리 수 두 개를 칠판에 써주었다. 그 다음에 크기가 큰 수를 말해보라고 했다.

상수는 수를 다른 사람과 다르게 거꾸로 읽는다. 예를 들어, 734와 893을 칠판에 적었다면, 상수는 이 수를 437과 398로 읽는다. 따라서, 상수는 두 수중 큰 수인 437을 큰 수라고 말할 것이다.

두 수가 주어졌을 때, 상수의 대답을 출력하는 프로그램을 작성하시오.

2. 입력

첫째 줄에 상근이가 칠판에 적은 두 수 A와 B가 주어진다. 두 수는 같지 않은 세 자리 수이며, 0이 포함되어 있지 않다.

3. 출력

첫째 줄에 상수의 대답을 출력한다.

4. 코드

function solution(a){
  let answer = 0;
  let temp = 0;

  for(let i = 0; i < 2; i++){
      temp = (parseInt(a[i]/100) + parseInt((a[i]/10%10))*10 + parseInt(a[i]%10)*100);
      if(temp > answer) answer = temp;
  }

  return answer;
}


let exampleA = [734, 893];
solution(exampleA);

참고 자료

BAEKJOON 2908번 문제

BAEKJOON - 1152번

2021-06-26T00:00:00+09:00

1. 문제

영어 대소문자와 띄어쓰기만으로 이루어진 문자열이 주어진다. 이 문자열에는 몇 개의 단어가 있을까? 이를 구하는 프로그램을 작성하시오. 단, 한 단어가 여러 번 등장하면 등장한 횟수만큼 모두 세어야 한다.

2. 입력

첫 줄에 영어 대소문자와 띄어쓰기로 이루어진 문자열이 주어진다. 이 문자열의 길이는 1,000,000을 넘지 않는다. 단어는 띄어쓰기 한 개로 구분되며, 공백이 연속해서 나오는 경우는 없다. 또한 문자열의 앞과 뒤에는 공백이 있을 수도 있다.

3. 출력

첫째 줄에 단어의 개수를 출력한다.

4. 코드

function solution(a){
  let answer = 0;
  
  answer = a.trim().split(" ").length;
  
  return answer;
}


let exampleA = " jaejun heo"
solution(exampleA);

참고 자료

BAEKJOON 1152번 문제

BAEKJOON - 1157번

2021-06-25T00:00:00+09:00

1. 문제

알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다.

2. 입력

첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다.

3. 출력

첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다.

4. 코드

function solution(a){
  let answer = '';
  let tempEng = Array.from({length:26}, (n, i)=>{return String.fromCharCode(65+i)});
  let tempArr = Array.from({length:26}, ()=>0);
  let max = 0, temp = 0, temp2 = 0;


  for(let i = 0; i < a.length; i++){
    let strUpper = a[i].toUpperCase();
    tempArr[tempEng.indexOf(strUpper)]++;
  }

  for(let i = 0; i < 26; i++){
    console.log(temp, temp2)
    if(tempArr[i] > temp) {max = i; temp = tempArr[i];}
    else if(tempArr[i] === temp || tempArr[i] != 0) temp2 = tempArr[i];
  }
  
  if(temp === temp2) answer = '?';
  else answer = tempEng[max];
  return answer;
}


let exampleA = "Mississipi"
solution(exampleA);

참고 자료

BAEKJOON 1157번 문제