살려줘
📚금일 학습 내용 Vue
월간회고 작성, VUE 3일차 강의 수강, 티스토리 다크모드 뜯어고치기, 데스크톱 셋업 등..
🏫데브코스
📌VUE Day3
역대급으로 실습 페이지가 많이 나온 날, 하지만 내일은 오늘의 x2 분량이다.
📌 v-if, v-else-if, v-else
세 키워드를 포함한 HTML 태그는 붙어있어야 한다. 만약 부득이하게 떨어트려야하는 경우가 생긴다면 <div>태그나 div태그 출력이 싫다면 <template>태그로 감싸서 분리하자.
📌 v-if, v-show
v-if, v-show 모두 내용을 보여주거나 보여주지 않을 수 있다. 하지만 둘에는 차이가 있다.
v-if의 경우에는 값이 false이면 아예 구조적으로 생성하지 않는다, 이후 값이 true로 바뀌면 그제서야 생성해서 화면에 출력해준다.(게으르다 라고 표현한다)
초기 렌더링 비용 낮고, 화면 전환 비용 높음
v-show는 정 반대이다. 일단 구조적으로 생성해두고 style의 display: none;을 활용해 값이 false이면 해당 스타일을 추가하여 감추고 true이면 해당 값을 없애 보이게 해준다.
초기 렌더링 비용은 높지만, 화면 전환 비용이 낮음
상황에 따라 잘 사용하도록!
❗ v-cloak 디렉티브
v-cloak 디렉티브는 v-show와 같이 사용해야한다 왜냐하면 화면에 뜬금없이
이런 값이 나올 수 있기 때문이다. 따라서 v-show를 사용할 때는 v-cloak을 사용하여 Vue 인스턴스가 화면에 마운트되기 전에 보이지 않도록 설정해야한다.
📌 v-for, v-model, $emit
이 개념 솔직히 이해 안간다. 다 이해가 안가는게 아니라 $emit을 사용하는 것에서 아직 어렵다. 여튼 정리를 해보자면
v-for은 어제와 그제도 언급하였듯 어떤 태그요소를 반복해서 출력하는 뷰의 문법이다.
v-model은 Vue에서 양방향 데이터 바인딩을 쉽게 구현할 수 있도록 도와주는 디렉티브이다.
강의 코드에서 이처럼 데이터가 단방향으로만 흐를 때 빠르고 간단하게 양방향으로 바꿔주는 문법으로 이해했다.
❗ $emit
이후 Vue 내부를 컴포넌트화 하는 과정에서 선언된 함수를 불러오지 못하는 문제를 발견했다. $emit 키워드는 이때 동작하는데 여기 코드에서 3번 돌려봤는데도 잘 이해가 안가서 일단 넘겼다.
📌 $event, 함수 여러개 쓰기
$event는 이벤트 객체를 참조할 수 있는 특별한 변수이다.
<div id="app">
<!-- 이름만 작성하면 이벤트 객체가 알 아 서 들어온다. -->
<!-- 하지만 파라미터를 따로 지정해서 받을 수 있다. 아래처럼 -->
<!-- <h1 @click="say('123123')">{{ msg }}</h1> -->
<h1 @click="say($event, 'Hello~')">{{ msg }}</h1>
</div>
<script>
... 중략 // 앞으로는 전체 코드를 올리는 것은 지양하려고 한다.
methods: {
say(event, message) {
console.log(message, event);
},
},
};
</script>Vue에서 하나의 클릭 이벤트에 여러 함수 실행을 걸어줄 수 있다. 쉼표나 세미 콜론으로 구분만 해줘도 되고 궁금해서 그냥 혼용해봤는데 잘 실행됐다. 물론 코드 가독성 부분에서 절대 사용하지 말아야겠지?
<body>
<div id="app">
<!-- 여러개를 쓰고 싶나? 쉼표 혹은 세미 콜론으로 구분하도록 -->
<!-- 혼용도 가능하네 세미콜론은 2버전 쉼표는 3버전, 3버전에서는 둘 다 지원 -->
<h1 @click="a(); b(), c()">Hello Vue!</h1>
</div>
<script>
...중략
methods: {
a() {
console.log("A");
},
b() {
console.log("B");
},
c() {
console.log("C");
},
},
};
</script>
</body>📌체이닝을 통해서 수식어 붙이기
.prevent 수식어, 클릭 뒤에 체이닝을 통해서 뒤에 붙이면 e.preventDefault()와 같은 동작을 가진다.
.once 수식어, 역시 체이닝을 통해 뒤에 붙이면 한번만 해당 설정이 동작하고 이후에는 기본동작이 수행된다
.capture 수식어와 .stop 수식어, .capture는 이벤트가 캡처 단계에서 처리되도록 하고, .stop은 이벤트의 전파를 중지시킨다.
<a href="https://google.com" target="_blank" @click.prevent.once="log">Google</a>
<div class="parent" @click.capture="log">
<div class="child" @click.stop="log">아래처럼 클릭이나 keyup에 키보드 키를 입력하면 같이 입력을 받아야한다.
하지만 meta키는 keyup에서 사용이 불가능하다
정확하게 모든 키가 딱 맞아야 동작하는 .exact 수식어도 존재한다.
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>
<!-- @keyup.alt.arrow-down 요렇게 하면 alt + arrow donw 두개 다 같이 눌러야함 -->
<!-- 아래 코드를 그냥 사용하면 ctrl, alt를 같이 사용해도 동작한다. -->
<!-- <input @keydown.arrow-down="log" /> -->
<!-- 그걸 방지하여 정확하게 입력을 받으려면 exact 수식어를 사용하면 된다. -->
<input @keydown.arrow-down.exact="log" />📌v-model, 폼 입력 바인딩
v-model 은 @input="msg = $event.target.value의 단축 속성이다. 아래 코드는 서로 동일하게 동작한다.
<!-- 하지만 한글을 입력할때는 v-model은 글자 단위로 입력되기에 즉각적으로 입력되는 -->
<!-- 화면을 구현하려면 @input을 사용해야한다. -->
<!-- <input type="text" :value="msg" @input="msg = $event.target.value" /> -->
<input type="text" v-model="msg" />v-model은 속성보다 우선순위를 가진다.
<!-- v-model이 붙어있으면 나머지 속성을 무시하고 시작한다. -->
<!-- 즉 v-model에 연결된 데이터의 우선순위가 훨씬 높다. -->
<input v-model="checked" type="checkbox" checked />@change는 값에 변화에 대응하여 특정 메서드를 호출한다.
<textarea v-model="msg" @change="log"></textarea>
<h1 style="white-space: pre-line">{{ msg }}</h1>
... 중략
methods: {
log() {
console.log(this.msg);
},
},value 키워드를 사용하면 해당 값을 watch에서 함수를 통해 확인할 수 있다.
<!-- value를 쓰면 배열로 들어간다 -->
<input v-model="checked" value="Leon" type="checkbox" />
<input v-model="checked" value="Evan" type="checkbox" />
<input v-model="checked" value="Lewis" type="checkbox" />
<input v-model="checked" value="Emily" type="checkbox" />
... 중략
watch: {
checked(newValue) {
console.log(newValue);
},
},
----------------------------------------------------------------
<!-- 아까와 다르게 ratio는 택1 -->
<input v-model="picked" type="radio" value="Leon" />
<input v-model="picked" type="radio" value="Evan" />
<input v-model="picked" type="radio" value="Lewis" />
... 중략
watch: {
picked(newValue) {
console.log(newValue);
},
},폼 입력 바인딩에서 특이한 점은 같은걸 또 고르면 그때는 동작하지 않는다는 것이다.
v-model의 여러 수식어들
<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" />
자동으로 숫자로, 단 문자열이 껴있으면 동작하지 않음
<input v-model.number="age" type="number" />
앞 뒤 공백제거
<input v-model.trim="msg" />그리고 객체를 입력할 때 밸류와 태그 내용이 같다면 생략이 가능하다.
<!-- <option value="apple">사과</option> -->
<!-- 하지만 두 값이 같다면 밸류를 생략가능하다. -->
<!-- <option>사과</option> -->
<!-- <option value="banana">바나나</option> -->
<!-- <option value="cherry">체리</option> -->📌 컴포넌트 기초
여기 내용도 완벽하게 이해 못했다. 함수가 어떻게 넘어가는 건지 정말 이해 안가고 어렵다
위 링크를 참고해서 복습해야하고 특징적인 것만 좀 적어보면
<!-- name도 데이터를 받는 형식이기 때문에 :바인드 붙여줘야함 -->
<upper-name v-for="fruit in fruits" key="fruit.id" :hello="fruit.name" @to-upper="toUpper(fruit, $event)"
>{{ fruit.name }}
</upper-name>
<!-- props 이름 마음대로 가능-->
props: ["hello"], //['마음대로']🚨티스토리 스킨 고치기
저번에 다크모드 적용한 것이 댓글창에서 제대로 적용이 안되는 문제와 사용자 프로필이 제대로 로딩되지 않는 문제가 생겼다. 하지만 이제 이정도 CSS는 수리할 수 있다.
이렇게 태그 확인해가면서 미디어쿼리 다크모드 부분에 없는 값이면 추가해주고 만약 다른데서 영향을 받아서 제대로 코드가 동작하지 않는 것이라면 해당 부분을 수정해줬다.
의외로 문제가 되었던 부분이 user profile 부분에 이미지가 제대로 적용되지 않는 현상인데, 재우형 티스토리를 같이 뜯어보니까 이미지를 불러오는 cdn URL이 나랑 달랐다.
https://img1.daumcdn.net ~으로 진행되어야 했는데 이상한 값이였다. 아마 구형 cdn링크인 것 같다. 아예 404에러가 발생했다. 여튼 이런 저런 부분을 고쳐주니
잘 수정된 것을 확인할 수 있다.
📖소회
🔧 5년만에 데스크톱 셋업 중
결국 주말까지 기다리지 못하고 모니터를 뜯었다. 딱히 결점이라고 할 건 없고 빛샘이야 뭐...익숙하지만 약간 뿌연 LG 모니터의 감성은 아직 잘 적응이 안된다.
근데 문제는 오늘 저녁에 하려고 했던 것들을 하나도 못했고 지금 데스크탑 선을 다 뽑아놔서 문제가 커졌다. TIL도 오랜만에 맥으로 쓰니까 오래걸리네; 치트키인 에미넴 플레이리스트를 틀고 하는데도 쉽지 않았다.
오늘 많은 동기들의 MIL을 봤다. 역시나 고수들이 굉장히 많았다..! 그리고 함께 같은 길을 걷는 사람들의 글을 보면서 더더욱 동기부여를 받을 수 있었다. 내 MIL에 달린 댓글들도 너무 감사한 말씀들을 해주셔서 기분이 좋았다. 내일은 진짜 바쁘다, 역대급 강의량에 커피챗까지 있다. 오전을 잘 활용하자.
내일도 가봅시다~🔥🔥
TIL 작성 소요시간 약 45분
