저택이의 이것저것

# HTML
- Hypertext Markup Language의 줄임말
- 브라우저에게 구조가 어떤식으로 되어있는지, 어떤걸 나타내는지 설명한다
  - 브라우저야 이게 title이야~

# CSS
- Cascading Style Sheets의 줄임말
- HTML과 같이 사용해야한다.
- 브라우저에게 웹사이트가 어떻게 보여줘야하는지 알려준다
  - 브라우저야 title은 초록색이야~

# JavaScript
- 동적 상호작용이 필요하면 사용(애니메이션)
  - ex) 클릭하면 어떤 기능을 수행
   

computed는 종속되어있는 값(age)가 바뀌면 자동으로 본인도 값을 바꿔준다

사용방법은 다음 코드와 같다.

<!-- vue 3.0 불러오기 -->
<script src="https://unpkg.com/vue@next"></script>

<div>20살이 넘으면 성년이 true로 바뀌게 만드는 코드(computed 사용)</div>
<hr>
<div id="vue-app">
    이름 : {{name}}
    <br>
    나이 : {{age}}
    <br>
    성년 : {{isAdult}}
</div>

const VueApp = {
    setup() {
        const name = "wjxor";
        const age = Vue.ref(1);
        const isAdult = Vue.computed(()=> age.value >= 20);

        setInterval(() => {
            age.value = age.value + 1;
            
            isAdult.value = age.value >= 20;
        }, 1000);
        
        return {
            name,
            age,
            isAdult
        }
    }
};

Vue.createApp(VueApp).mount('#vue-app');

지정해놓은 시간마다 반복되도록 할 수 있다.

다음 코드는 1초마다 age의 값이 하나씩 올라가도록 해놓은 것이다.

<!-- vue 3.0 불러오기 -->
<script src="https://unpkg.com/vue@next"></script>

<div id="vue-app">
    나이 : {{age}}
</div>

const VueApp = {
    setup() {
        const age = Vue.ref(22);

        setInterval(() => {
            age.value = age.value + 1;
        }, 1000);
        
        return {
            age
        }
    }
};

Vue.createApp(VueApp).mount('#vue-app');

1. var, let과는 다르게 const는 초기값을 설정해줘야 한다.

2. 변수 선언 방식

2-1 var

var name = "wjxor"
console.log(name);
// wjxor

var name = "wjxor2"
console.log(name);
// wjxor2

var를 쓰면 에러없이 다른 값이 출력이 된다.

간단하게 쓰기엔 좋으나 코드가 길어지면 중간에 값이 바뀔 수 있으니 주의해야 한다.

2-2 let

let name = "wjxor"
console.log(name);
// wjxor

let name = "wjxor2"
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared 

이미 name이 선언되었다는 에러 메시지가 나온다.

변수 재선언이 불가능하다.

그렇다면 let과 const의 차이는 무엇일까?

let name = 'wjxor'
console.log(name);
// wjxor

name = 'wjxor3'
console.log(name);
// wjxor3

다음과 같이 let은 변수의 값을 다시 바꿔줄 수 있다.

2-3 const

그러나

const name = 'wjxor'
console.log(name);
// wjxor

name = 'wjxor3'
console.log(name);
// Uncaught TypeError: Assignment to constant variable.

const는 변수에 값을 바꿀수가 없다.

3. 정리

변수 선언에는 기본적으로 const를 사용하고, 변수 재할당이 필요한 경우에 let 을 사용하는 것이 좋다.