딩코딩 : Computer Science 블로그

<template>
  <div>
    <h1 v-focus>Directives</h1>
    <h2 v-once>유저의 이름은 {{ username }}</h2>
    <button @click="changeName">change name</button>

    <!-- pre 사용하면 해당 dom은 컴파일에서 제외되고 출력 -->
    <h2 v-pre>{{ username }}</h2>
    <input v-focus type="text" />
    highlight -> <input type="text" v-highlight />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
    };
  },
  directives: {
    focus: {
      mounted(e1) {
        e1.focus();
      },
    },
    highlight: {
      mounted(e1) {
        console.log({ e1 });
        e1.oninput = () => {
          e1.style.background = "salmon";
          e1.style.color = "#fff";
        };
        e1.onmouseout = () => {
          e1.style.background = "green";
        };
      },
    },
  },
  methods: {
    changeName() {
      console.log("name change!!!");
      this.username = "code!!!";
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

<template>
  <div>
    {{ user }}

    <!-- IME -->
    <h1>{{ user.name }}</h1>
    <hr />
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name" @input="setValue" />
      </div>
      <div>
        <label for="age">나이</label>
        <input type="number" id="age" v-model="user.age" />
      </div>

      <!-- select -->
      <div>
        <label for="city">사는 곳</label>
        <select id="city" v-model="user.city">
          <option
            v-for="option in cityOptions"
            :value="option.label"
            :key="option.code"
          >
            {{ option.kr }}
          </option>
        </select>
      </div>

      <!-- multiple select -->

      <div>
        <label for="favorite-food">좋아하는 음식</label>
        <select id="favorite-food" multiple v-model="user.favorite">
          <option
            v-for="option in foodOptions"
            :value="option.code"
            :key="option.code"
          >
            {{ option.label }}
          </option>
        </select>
      </div>

      <!-- checkbox -->
      <div>
        <label for="job">직업</label>
        프로그래머<input
          type="checkbox"
          value="programmer"
          v-model="user.job"
        />
        가수<input type="checkbox" value="singer" v-model="user.job" />
        교사<input type="checkbox" value="teacher" v-model="user.job" />
      </div>

      <!-- radio -->
      <div>
        <label for="job">성별</label>
        남
        <input type="radio" value="male" v-model="user.gender" />
        여
        <input type="radio" value="female" v-model="user.gender" />
      </div>
    </form>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      foodOptions: [
        { label: "짜장면", code: "JJ" },
        { label: "짬뽕", code: "JB" },
        { label: "탕수육", code: "TS" },
      ],
      user: {
        name: "",
        age: 0,
        city: "seoul",
        favorite: [],
        job: [],
        gender: 0,
      },
      cityOptions: [
        { kr: "서울", label: "seoul", code: "S" },
        { kr: "대전", label: "daejeon", code: "DD" },
        { kr: "대구", label: "daegu", code: "D" },
        { kr: "부산", label: "busan", code: "B" },
        { kr: "광주", label: "gwanju", code: "G" },
      ],
    };
  },
  // 한글 바로바로 업데이트하기 위한 메써드
  methods: {
    setValue(e) {
      console.log(e.target.value);
      this.user.name = e.target.value;
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

<template>
  <div>
    <h1>Hello Vue {{ name }}!</h1>
    <button v-on:click.middle="changeName">change name</button>
    <!-- <button
      v-on:mouseover="name = 'Code scalper'"
      v-on:mouseleave="name = 'Scalper'"
    >
      change name
    </button> -->
    <a v-on:click.prevent="movePage" href="https://naver.com">naver로 이동</a>
    <h2>{{ number }}</h2>
    <button v-on:click="increment($event, 1)">숫자 1증가</button>
    <button v-on:click="decrement(1)">숫자 1감소</button>
    <button v-on:click="increment(5)">숫자 5증가</button>
    <button v-on:click="decrement(5)">숫자 5감소</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      name: "Scalper",
      number: 0,
    };
  },
  methods: {
    changeName() {
      if (this.name === "Scalper") {
        this.name = "Code scalper";
      } else {
        this.name = "Scalper";
      }
    },
    movePage() {
      const check = confirm("페이지를 이동하시겠습니까?");
      if (check) {
        console.log("page 이동");
      } else {
        console.log("페이지 이동 x");
      }
    },
    increment(e, num) {
      console.log(e);
      this.number += num;
    },
    decrement(num) {
      this.number -= num;
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}
</style>

<template>
  <div>
    <div>
      <h2>5년뒤 :: {{ add(5) }}</h2>
      <h2>10년뒤 :: {{ add(10) }}</h2>
      <h2>15년뒤 :: {{ add(15) }}</h2>
      <h2>20년뒤 :: {{ add(20) }}</h2>
      <h2>동갑의 10명이 있다면 나이의 총 합은 {{ multiply(age, 20) }}</h2>
      <h2>{{ getTotalScore(1100000000000000000000, 1000) }}</h2>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      age: 30,
    };
  },
  methods: {
    add(num) {
      console.log(this);

      return this.age + num;
    },
    multiply(num1, num2 = 11) {
      return num1 * num2;
    },

    getTotalScore(num1) {
      return this.multiply(num1, num1);
    },
    // 화살표함수 쓰면 this를 통해 data 내부 변수 선택할 수 없음
    // add: (num) => {
    //   console.log(this);
    //   return this.age + num;
    // },
  },
};
</script>

<style></style>

<template>
  <div>
    <div>
      <ul>
        <template v-for="(city, index) in cities" :key="index">
          <li v-if="city.province === '경상도'">{{ city.name }}</li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      cities: [
        { name: "서울", province: "경기도" },
        { name: "대전", province: "충청도" },
        { name: "대구", province: "경상도" },
        { name: "부산", province: "경상도" },
      ],
    };
  },
};
</script>

<style></style>

https://www.acmicpc.net/problem/1786

#include <bits/stdc++.h>
using namespace std;

int* getLps(const string& _pattern_str){
    int pattern_len = _pattern_str.length();

    int *lps = (int *)malloc(sizeof(int)* pattern_len);
    memset(lps, 0, sizeof(int)*pattern_len);

    int j=0;
    for(int i=1;i < pattern_len; i++){
        while(j>0 && _pattern_str[i]!=_pattern_str[j]){
            j = lps[j-1];
        }

        if(_pattern_str[i] == _pattern_str[j]){
            j++;
            lps[i] = j;
        }
    }

    return lps;
}

int main() {
    ios::sync_with_stdio(0); cin.tie(0);

    //Target, Pattern
    string T, P;
    getline(cin, T);
    getline(cin, P);

    int tLen = T.length();
    int pLen = P.length();
    int *lps = getLps(P);


    int cnt = 0;
    vector<int> v;

    int j = 0;

    for(int i=0; i<tLen; i++){
        while(j>0 && T[i]!=P[j]){
            j = lps[j-1];
        }

        if(T[i] == P[j]){
            if(j==pLen-1){
                v.push_back(i-pLen+1);
                cnt++;
                j = lps[j];
            }
            else{
                j++;
            }
        }

    }

    cout << cnt << '\n';
    for(auto i : v){
        cout << i + 1 << ' ';
    }


    delete lps;

    return 0;
}

int main() {
    ios::sync_with_stdio(0); cin.tie(0);

    //Target, Pattern
    string T, P;
    getline(cin, T);
    getline(cin, P);

    cout << T << '\n';
    cout << P << '\n';




    return 0;
}

https://www.youtube.com/watch?v=KXolmVUpUQQ 

#include <bits/stdc++.h>
using namespace std;

#define STR_LEN 100

//인 수: 패턴문자열
//반환:lps 배열

int* calculate_lps(char* _pattern_str){
    int pattern_len;
    int* _lps = 0; //LPS 배 열
    int i,j;

    pattern_len = strlen(_pattern_str);

    // LPS 배열
    _lps = (int *)malloc(sizeof(int)* pattern_len);

    // LPS 배열초기화
    memset(_lps, 0 , sizeof(int)*pattern_len);

    /*
     LPS 배열 계산
     */

    j = 0;

    for(int i=1; i<pattern_len; i++){
        if(j>0 && _pattern_str[i]!=_pattern_str[j]){
            j = _lps[j-1];
        }


        if(_pattern_str[i]==_pattern_str[j]){
            j++;
            _lps[i] = j;
        }
    }

    return _lps;
}


int main() {
    int i, j;

    //target string
    char target_str[STR_LEN] = "ABABABABBABABABABCABABABABBABABABABCABABABABBABABABABCABABABABBABABABABC";

    //pattern string
    char pattern_str[STR_LEN] = "ABABABABC";

    int target_len;
    int pattern_len;

    target_len = strlen(target_str);
    pattern_len = strlen(pattern_str);
    int* lps = 0;

    lps = calculate_lps(pattern_str);

    for(i = 0; i< pattern_len; i++){
        cout << i << ' ' << lps[i] << '\n';
    }


    // --- string matching

    printf("------------ start string matching of %s to %s\n", pattern_str, target_str);


    // i : target str의 현재위치 index
    // j : pattern str의 현재위치 index

    j = 0;

    for(i = 0; i< target_len; i++){
        while(j>0 && target_str[i] != pattern_str[j]){
            j = lps[j-1];
        }
        
        if(target_str[i] == pattern_str[j]){
            if(j == (pattern_len - 1)){
                cout << "Found matching at " << i - pattern_len + 1 << '\n';
                j = 0;
            }
            else{
                j++;
            }
        }
    }



    return 0;
}