📚금일 학습 내용
Vue Composition과 빠른 개발 구성, OptionsAPI와 다른 CompositionAPI에서의 Vue 메서드 활용방법, pinia 사용법, vercel Dev 구성
🏫데브코스
📌Vue Day9
오늘도 역시 VUE를 중심으로 여러 프로젝트 세팅에 대한 강의였다.
그래도 다행인 점은 강의를 밀리지 않았다는 것인데 내일은 오늘보다 더 많다..!
📌CompositionAPI vs OptionsAPI
Vue에서 사용되는 스타일으로 CompositionAPI가 상대적으로 최신 문법이다. 특히 CompositionAPI는 data()와 같은 강제되는 옵션이 최소화되어 구조를 유연하게 작성 가능하고 특히 TS를 가능하는 데에 있어서 호환성이 좋다는 장점이 있어서 선호된다.
사용법이 굉장히 다른데 몇 가지 특징적인 점을 마크다운에 코드블럭 안에 나열해보자면
// 기본 데이터를 선언하는 방식이 다르다.
// 참고로 TS이지만 타입 선언을 안하는 이유는 초기 속성이 number값이라 타입 추론을 하기 때문이다.
//CompositionAPI 변수를 참조하기 위해서 ref를 사용하는데 뒤에 .value값을 붙여서 읽어야한다.
<script setup lang="ts">
const count = ref(0)
function increase() {
count.value += '1' // count 는 하나의 참조 객체이다
}
//---------------------------------
// OptionsAPI와 다르게 CompositionAPI는 몇개의 기능은 가져와서 사용해야한다.
import { ref, computed, watch } from 'vue'
const double = computed({
get() {
return count.value * 2
},
set(newVal: number) {
count.value = newVal / 2
}
})
...중략
watch(count, (newVal, oldVal) => {
console.log('Count: ', newVal, oldVal)
})
//---------------------------------
// 반면에 CompositionAPI에서 Props를 가져올 떄는 defineProps()<< 이 키워드를 사용하면 된다.
// 차이는 아래 사진과 같다. 매우 간단하다.
이외에도 기본 타입을 지정하는 문법인 withDefaults와 emit 사용법, 선택 속성을 사용하는 방법에 대해서 학습할 수 있었다.
withDefaults(
defineProps<{
modelValue: string
name?: string
active?: boolean
}>(),
{
name: '',
active: false
}
)
//---------------------
const emit = defineEmits(['update:modelValue'])
const inputHandler = (event: Event) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)
}
//---------------------
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs, props.modelValue, props.modelValue, props.name)📌Pinia
vuex를 대체하고 나온 Vue에서의 상태관리 라이브러리이다. 상태를 어디서든 변경할 수 있기에 주의해야하지만 매우 편리하다. 사용법은 굉장히 간단하다. 정리해둔 코드블럭으로 대체한다.
// store/count.ts
import { defineStore } from 'pinia'
// 첫번째 인수로 이름이 필요하고
// 2번째 인수로는 옵션이 필요하다.
export const useCountStore = defineStore('count', {
// 늘 함수로!!!!!!!!!!
// 일반, 화살표 상관 X
state: () => ({
count: 1
}),
getters: {
double(state) {
return state.count * 2
}
},
actions: {
increase() {
// 여기서는 특이하게 this로 접근 가능하다.
// vuex에서는 아래와 같이 꺼내서 사용해야했지만
// const { state, getters, commit, dispatch} = context
// pinia는 this키워드로 한방에 가능하다.
this.count++
},
decrease() {
this.count--
}
}
})
// app.vue
<script setup lang="ts">
import { useCountStore } from './store/count'
const countStore = useCountStore()
</script>
<template>
<h1>{{ countStore.count }}</h1>
<h2>{{ countStore.double }}</h2>
<button @click="countStore.increase">Increase</button>
<button @click="countStore.decrease">Decrease</button>
</template>⁉️문제점 해결 목록
❕ ./App.vue에서 형식을 찾을 수 없습니다.
프로젝트를 시작하자마자 나를 반겨준 에러 메세지이다. 저 메세지를 무시하고 개발을 해도 문제는 없지만 거슬린다. 이 말은 즉슨? 특별히 문제는 아니지만 개발을 도와주는 확장도구에 문제가 있다는 것이다.
해당 내용을 검색해보니 역시나 관련된 포스팅이 나왔고 Ctrl + Shift + P를 눌러서 Show Built-in extentions 에서 @builtin typescript를 검색하여 비활성화 시켜주었다. 그렇게 하니 문제가 해결됐고 takeover 모드도 잘 실행된 것을 확인 할 수 있었다.
❕ Delete ␍ eslint 에러
eslint와 prettier의 충돌 오류를 많이 해결했다고 생각했는데 아니였다. 또 충돌이 났는데 이 역시 개발과정과는 큰 연관은 없지만 거슬려서 해결해줘야겠다고 생각했다.
원인은 OS별로 다른 줄바꿈이 원인이라고 한다. Line Feed로 알려진 \n 과 Carriage Return으로 알려진 \r의 줄바꿈 방식이 충돌해서 발생하는 것이라고 한다...여튼 아래 명령어를 .eslintrc.json에 추가해줘서 해결했다. "endOfLine": "auto"로 설정하여 운영체제별로 맞는 endOfLine을 알아서 설정하게 해주니 해결되었다.
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
}❗❗❗ 나의 하루를 앗아간 극악무도한 에러
저 3줄짜리 에러가 나의 하루를 빼았았다. 이미 코어타임때 모든 강의 수강, 정리를 다 끝냈는데 저 문제가 강의에서 나온대로 해결이 안된채로 넘어갔고 결국 마지막 강의 말미에서 다시 문제를 해결해야하는 상황에 직면했다.
대충 검색 기록을 뒤져보니 약 4시간 정도 저 문제에 할당했는데 일단 이걸 해결하기 위해서 했던 노력은 다음과 같다.
- 노드 모듈 재설치(변화 X)
- 전역 타입스크립트 삭제 후 재설치(변화 X)
- git bash 명령어로 이것저것 해보기 (변화 X)
- npm 최신버전 설치(오래 걸렸지만 변화X)
- VSCODE 초기화 후 재설치(변화 X)
머리 끝까지 화가 났고, 오늘 이거 해결 못하면 잠 안잔다 마인드로 검색했는데 빛과 소금 같은 글을 하나 발견했다. 바로 이 원인은 node_modules, package-lock.json, .vercel 폴더에 캐싱된 내용이 포함될 수 있기 때문에, 전부 제거하고 다시 설치를 해서 해결했다. 의 실마리가 있었다.
그렇다. node_modules, .vercel은 삭제 후 재설치를 해봤는데 package-lock.json이 범인일줄이야.. package-lock.json을 삭제 후 재설치를 하니 잘 실행되었다.
4기 선배님의 기록 덕분에 해결해서 다행이긴한데 너무 허무했다. 여튼 만약에 이 글을 보는 누군가가 같은 과정을 겪고있다면 package-lock.json도 삭제 후 재설치를 해보기를 강력하게 권장한다.
❕ Unauthorized
근데 결국 API 호출은 실패했는데 아마 5기 인원들에 대한 권한이 설정이 안되어있는 것으로 파악된다. 다른 username키를 넣고 POST를 해보니 잘 동작했기에... 이 부분은 강사님 혹은 매니저님께 문의를 드려야겠다.
☕커피챗 & 📺영웅님의 특강세션
우리 팀한테 오늘 일정은 가혹한 일정이였다. 각자 삶이 있었을텐데 거기에 1시부터 밤 11시까지 공적인 일정도 가득차있었다. TIL에 기록할만한 내용도 많지만 과감히 생략하려고한다.
다만 오늘도 느낀 것이라면 영웅님처럼 명확한 용어를 쓰며 이야기하는 것이 역시나 중요하고 희진 멘토님처럼 도움되는 이야기를 많이 해줄 수 있는 사람이 되고 싶다.
📖소회
나 오늘 너무 많은 일이 있었어... 쉽지 않은 하루였고 과제도 손도 못댄 하루였다. 하지만 그래도 주어진 것을 다해서...다행이다. 내일도 역대급이다. TIL 빠르게 끗..🔥🔥
TIL 작성 소요시간 약 40분
