dev_0hoon

1. 헬스앱 사이드 프로젝트 진행 중 기획자에게 연락이 왔다. 2. "센터 관장이 센터 등록할 때 로딩이 너무 긴것 같아서.. 중간에 이탈이 발생할 것 같아요. 속도를 빠르게 할 수 없을까요?" 3. 물론 안되죠! 라고 말하고 싶었지만, 나는 '친절한 개발자'이다. 4. 로직을 살펴 봤다. @Transactional public void saveCenterFirst(HttpServletRequest request, SaveCenterFirstReqeust saveCenterFirstReqeust) { Users findUser; try { // 1) 로그인 사용자 가져오기 UsersDto user = UserContext.getU..

사이드 프로젝트 중 상세에서 목록으로 이동할 때에 들어왔던 상태의 화면을 표시하려 했다. 1. KeepAlive 방식(시도)// app.vue - NuxtPage에 keepalive 활성화// 페이지 파일 - 캐시할 페이지에 keepalive: truedefinePageMeta({ layout: 'member', keepalive: true }) KeepAlive는 Vue와 Nuxt에서 컴포넌트의 상태를 메모리에 박제(캐싱) 해두는 기능이다.사용자가 A페이지에서 B페이지로 이동하면, A컴포넌트는 파괴(Unmount)되고 메모리에서 사라진다.하지만 KeepAlive로 감싸주면 컴포넌트가 파괴되지 않고 '비활성화(Deactivated)' 상태로 메모리에서 머물다가, 다시 돌아왔을 때 이전의 데이터, 입력값,..

개인 운동기록 & 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는..