👀시작하기전 간단일기
회고글은 거의 2주정도만에 작성하는 것 같은데 저번주는 방학이 있었고 이번주는 강의를 열심히 듣고 한번에 정리해야겠다! 라고 생각해서 미뤄뒀다. 어제 새벽까지 강의를 전부 듣고
Vue에 관한 내용을 한번 작성해보고자 한다. ⭐
+ 복습차원에서 강의에 전반적인 내용이 많이 포함되어있습니다 !
Vue
일주일정도 Vue를 배우며 가장 크게느낀점은 쉬운데..? 였다가 HTML속성안에 문자열이었다가 동적값이었다가. props로 내려갔다가 올라왔다가.. 아직 처음이라 그렇겠지만 체계정리가 잘 되면 어렵지 않을 것 같았다. 그래서 최대한 이론적인 부분은 걷어내고 혼자 예제코드를 하나 켜놓고 부분부분 공부해보려한다.
📕 이론 !!
어플리케이션 생성과 인스턴스 생성
공식문서를 읽어보면 Vue앱은 createApp함수를 통해 앱 인스턴스를 생성하는 것으로부터 시작되고 mount되면 렌더링된다.
라고 되어있는데 인스턴스란 무엇이고 앱은 무엇이며 mount는 뭐야?
간단하게 정리해보자.
Vue 인스턴스
APP의 기본이 되는 객체이며 다양한 데이터, 메소드, 컴포넌트 등을 정의하고 하나의 컴포넌트 단위이다
mount
mount는 인스턴스를 생성한 후에 해당 인스턴스를 실제 DOM에 연결하는 역할을 한다.
잘못알았던 부분
mount메서드도 하나의 생명주기 인줄 알았다.mounted가 생명주기 훅이고 두가지는 다르다.mounted훅은 컴포넌트가 DOM에 마운트 된 직후에 호출된다.
const app = Vue.createApp({...})
a.mount('#app')위의 코드를 통해 간단하게 알아볼 수 있는데 ({ . . . })으로 생략한 부분에 컴포넌트와 관련된 내용이 포함되며 app은 Vue의 인스턴스라고 할 수 있다. mount메소드를 통해 id=app인 DOM에 연결되는 것이다.
라이프사이클
위에서 mounted는 라이프사이클 훅이라고 설명했는데 그건 또 무엇인가?
간단하게 정리해보면 "Vue인스턴스는 생성될 때 일련의 초기화 단계를 거치고, 해당 과정에서 생명주기 훅이라 불리는 함수도 실행된다. 이는 개발자가 의도해서 다양한 로직이 실행될 수 있도록 도와준다." 이다.
생명주기 훅에는 무엇이 있는가?
- beforeCreate
- created : 인스턴스가 생성된 직후에 실행되는 코드
- beforeMount
- mounted : DOM과 연결 직후라 DOM에 접근 할 수 있다.
- beforeUpdate
- updated : 상태가 업데이트 되면 실행된다.
- beforeUnmout
- unmounted
각 생명주기 훅에 다양한 특성이 있는데 궁금한점이 생기면 아래 링크를 통해 찾아보도록 하자.
Vue생명주기 훅 해당 링크를 통해 공식문서로 이동할 수 있습니다.
디렉티브
디렉티브는 v-접두사로 시작하는 템플릿 속성을 가리킨다.
내장된 디렉티브에는 v-on, v-bind, v-for , v-if등등이 있다.
사실 결론은 템플릿 내에서 UI를 조작하는 특별한 명령어이다.
각 디렉티브는 아래 예제에서 좀 더 자세히 다뤄보자
💻예제
사실 예제에 모든 코드를 작성하고 주석처리를 통해 학습하는것을 굉장히 선호하는데 해당 내용은 불가능하다 판단하고 각 내용을 대표할 수 있을만한 부분을 발췌해서 정리해보도록 하자
사실 모든 내용을 블로그에 기록한다는것은 불가능하다는 것을 알기에 최대한 대표하는 내용을 기록하고 세세한 부분은 의문점이 생길때마다 추가적으로 작성해보자.
디렉티브 관련
<template>
<div>
<h1>{{ msg }} / {{ message }}</h1>
<ul>
<li v-for="item in data" :key="item.id">
{{ item }}
</li>
</ul>
<button @click="btnClick">출력</button>
</div>
</template>export default {
data() {
return {
msg: "h0berTest",
data: [
{ id: 1, name: "h0ber", age: 20 },
{ id: 2, name: "h0ber2", age: 21 },
],
};
},
props : ['message'],
methods: {
btnClick() {
alert(this.msg);
},
},
};간단하게 작성한 코드이며 체감상 많이 사용하는 디렉티브를 많이 포함했다.
v-model v-if와 같은 더 다양한 디렉티브가 많이 존재한다 ⭕
:key = "item.id"는v-bind :"item.id"의 축약형이다.
우리가 알고있는 속성은id="app"과 같은 정적 값이지만 v-bind는 HTML속성을 동적으로 할당할 수 있게 해준다.
@click="btnClick"은v-on:click="btnClick"의 축약형이다.
HTML속성에 이벤트를 연결하며 methods에 정의된 핸들러를 실행시킨다.
v-for는 문자열내에 for문을 반드시 고유값을 포함해야 한다.:key를 통해 추가함
예시코드같은 경우 data의 각 객체를 item으로 받아 li태그 내에서 작성한다.
컴포넌트 기초
아래 코드는 상단에 작성했던 Test.vue 를 App 컴포넌트에 이어붙이는 예제이다.
<template>
<Test :message='message' />
</template>//App.js
import Test from "~/components/Test";
export default {
data(){
return {
message:'h0berProps'
}
}
components: {
Test,
},
};컴포넌트를 mount해주는것은 굉장이 간단하다. template태그 내에서 선언하고 script태그 내에서 지역등록 후 components에 추가해주기만 하면 된다.
현재 App.vue는 상위컴포넌트이며 하위컴포넌트는 Test.vue이다.
상위컴포넌트에서는 하위 컴포넌트에 props를 전달할 수 있으며:message="message"를 통해 h0berProps을 전달했고 하위컴포넌트에서는 위의 예시처럼props:['message']를 통해 전달 받을 수 있다.
실제로 nonprops, 동적컴포넌트 등 알아야 할 내용이 많지만 컴포넌트 등록에 대한 내용만 정의했다.
실질적으로 더 중요한 내용이 많을 수 있지만, 블로그에 기술적으로 풀어놓는건 개인적으로 상대적 가치가 떨어진다고 판단해서 실질적 코드로 관리하고 있다.
다만 코드를 한번 보면서 더 커스텀 이벤트라던지,
v-model같은건 많이 어렵다고 생각해서 한번 더 블로그로 작성할 것 같긴하다.
4L 회고
오늘은 4L 회고를 통해 회고를 진행하겠다.
Liked
학습시간은 잘 유지되고 있고 운동도 거의 매일 가는것 같아서 좋다.
방학 때 잘 쉬고와서 그런지 컨디션이 꽤 괜찮다.
Lacked
사이드프로젝트나 간단한 토이프로젝트를 해보고 싶은데 현재 벌려놓은 일들이 많아 시간이 부족하다는것이 아쉽다. 시간 관리가 잘 안되는 느낌이다.
Learned
Vue에 대해 많이 알게 되었고 component, Props, mount 생명주기 등 세부적인 내용을 학습했다.
Longed for
시간관리를 잘 해야겠다는 생각을 했다. 절대적인 학습시간대비 결과물이 만족스럽지 못한 것 같다.
😝느낀점
나는 발등에 불떨어졌다. 보단 지금 용암에 발 담궜다. 라는 표현을 많이 사용한다.
ㅋㅋㅋㅋㅋㅋㅋ..뭔가 더 급해야 일이 착착 진행되는 느낌이랄까....
이런 성향이 시간관리를 잘 못하게 하는 것 같다는 생각을 블로그작성하면서 많이 했다."특정 개발, 업무, 학습을 하기전에 이정도 시간에 이만큼 하겠다"
"A를 하기위해 특정 시간만큼 소요하겠다."나는 이런 계획을 전혀 세우지 않는데 이번 기회에 학습태도를 바꿔봐야겠다.
