dev_0hoon

개인 운동기록 & pt 매칭 프로그램을 만들며 Nuxt를 사용하게 됐다. 몇 주간 Nuxt을 개인적으로 공부하며 잡힌 사용 방법에 대해 기록한다.  ✅ 파일구조1️⃣ 서문나는 백엔드를 주로 사용하던 개발자로써 기존 아키텍처에 대해 익숙하다- 컨트롤러 -> 서비스 -> 맵퍼- 컨트롤러 -> 서비스 -> 레파지토리 그리고 데이터를 운반하는 dto, vo, entity의 개념이 익숙하다.  1) domain별로 컨트롤러,서비스,레파지토리, dto, entity로 레이어드 아키텍처 파일구조 이거나2) presentation, domain, infrastructure 로 클린 레이어드 아키텍처의 파일구조2가지를 주로 사용한다. 2️⃣ Nuxt의 파일구조에 대한 생각기존 vue에 대한 개념을 잡고 싶어 인프런의 캡..

위를 보면 소스가 많이 더럽지 않지만, setup안은 실무레벨에서는 엄청나게 길어 질 것으로 보인다. 이때에 커스텀 컴포넌트를 사용한다. /hooks/useTodo.jsimport { onBeforeMount, ref } from "vue";function useTodo() { const todoItems = ref([]); //methods function fetchTodos() { const result = []; for(let i = 0; i { todoItems.value = fetchTodos(); }) return {todoItems, fetchTodos, addTodo }}export {useTodo}//app.vueim..

watch API도 컴포지션 API에서 사용하는 watch 속성을 의미한다. watch 속성watch API export default { props:['todoItems', 'userId'], setup(props, context) { function remove(item,index) { localStorage.removeItem(item); context.emit('remove',index); } watch(props.todoItems, (newValue)=>{ console.log({newValue}); }) ..

인스턴스 라이프사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미합니다. 인스턴스가 생성되고 나면 라이브러리 내부적으로 다음과 같은 과정이 진행됩니다.data 속성의 초기화 및 관찰 (Reactivity 주입)뷰 템플릿 코드 컴파일 (Virtual DOM -> DOM 변환)인스턴스를 DOM에 부착 인스턴스 라이프사이클 훅: 컴포넌트 생명 주기에 따라 특정 로직을 실행할 수 있는 속성 함수. created, beforeMount() 등, 옵션API에서 사용하던 것 라이프사이클 API: 컴포지션 스타일로 작성된 인스턴스 라이프사이클 훅 https://joshua1988.github.io/vue-camp/composition/lifecycle.html#%E1%84%8B%E1%85%B5%E1%8..

setup(props, context) { function remove(item,index) { localStorage.removeItem(item); context.emit('remove',index); } props.todoItems props.userId return {remove} } 위처럼 코드를 생각하면 setup({todoItems, userId}, context) { function remove(item,index) { local..

컴퓨티드 api는 컴포지션 Api에서 사용된 컴퓨티드 속성을 의미한다.   {{ reversedMessage }}문자열을 반대로 정리해주는 computed가 보인다. 특정 연산을 담아두는 속성이라고 보면 된다. 기본이 되는 data를 다른 값으로 표현해주게끔 사용한다. (converter 같은 느낌도 들고?) 위는 속성으로 'computed 속성'이라 부른다.  {{appTitle}} {{ newTitle }}컴포지션 API에서는 컴퓨티드API라고 부른다. 여기에서 왜 컴퓨티드가 아니라 메소드를 사용하는 걸까? computed와 method의 차이점캐싱computed는 결과를 캐싱해.즉, computed에 사용된 종속 데이터(의존성)가 변하지 않는 이상 재계산을 하지 않아.반면 method는..

createApp(){ setup(){ const message = ref('hi'); const changeMessge = () => { message.value = 'hello'; } return { message } }} ref가 없다는 가정하에 'hi'만 message로 초기화 할 경우 'hi'가 바뀐 것을 추적하려면 proxy같은 것이 필요하다. https://dev0hoon.tistory.com/404 Vue 3 Reactivity - Proxy 소개new Proxy()를 통해서 프록시 객체를 만들었다. 프록시란 값을 넣어 모방하는 객체라고 볼 수 있다. 가짜 객체와도 비슷한데 여기에서는 값을 사용할 ..

/composible/useMessage.jsimport { ref } from "vue";function useMessage() { //data const message = ref('hello'); //methods const changeMessage = () => { message.value = 'hi'; } return {message, changeMessage}}export { useMessage }/App.vueexport default { setup() { const {message, changeMessage} = useMessage;꺼내기가 가능하다. 위처럼 useMessage.message가 아닌 const에서 객체상태로 꺼낼 수 있는 ..