FrameWorks70

• 

  VueRouter의 Dynamic Route Matching with params 파헤치기 :param Data BindingRouter를 통한 화면이동 중 동적으로 데이터를 넘겨주는 방법을 알아보겠습니다.이것은 마치 GET방식의 데이터 전송과 유사한데요. ?key=value&key=valeu&...형식으로 사용하는 것이 아닌 콜론(:)을 사용하는 방법입니다.이 방식은 route의 path에 key를 작성하고 패턴을 적용시키는 방법입니다.query String을 사용하는 방법은 밑에서 알려드리도록 하겠습니다.다음 예시 코드는 User.vue파일로 라우팅시 id라는 key값으로 데이터를 전달하는 방법입니다. 예시를 보겠습니다.import User from './User.vue'const routes = [ { path: '/users/:id', component: User},] .. FrameWorks/Vue 2024. 6. 21.

• 

  VueRouter의 Router Instance 파헤치기 Basic Router Tag간단한 것들만 배워보고 자세한 것들은 다른 게시글에서 상세하게 설명하겠습니다. or 일반적으로 개발을 할 경우 태그의 경우 현재 페이지에서 다른 페이지로 이동하거나, 페이지 안에서 다른 컨텐츠로 이동할 경우 사용하게 됩니다.그 외의 클릭 이벤트의 경우는 을 사용하죠. or 태그를 사용하여 URL변경시 페이지를 다시 로드하지 않고 URL 생성, 인코딩 및 기타 다양한 기능을 처리할 수 있게 하는 컴포넌트를 사용합니다. 홈 소개 Create Router Instanace각 URL에 맞게 페이지를 이동하려고 한다면 routes를 설정해 주어야 하는데요.가장 우선이 되어야 할 건 Router의 Instanace를 생성.. FrameWorks/Vue 2024. 6. 21.

• 

  Vue의 ObjectBinding Object bindingv-textExpects: String태그 안에 text값을 input 시키는 것innerTEXT와 같다(?){{ msg }}v-htmlExpects: String태그 안에 html을 input 시키는 것innerHTML과 같다(?) v-showExpects: Any표현식 값의 진위 여부에 따라 요소를 보이게 or 안보이게 하는 것v-show가 포함되어 있는 요소는 항상 랜더링되어 DOM에 남아있지만, CSS속성만 토글한다.즉, v-if는 랜더링에서 조건이 거짓이면 DOM에 없지만, v-show는 DOM에는 남아 있다.Hello! v-if & v-else & v-else-ifExpects: Any조건문을 사용 할 수 있다.tymleaf의 “th:if”와 같다고 생각하면 된.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Slot 파헤치기 Slotslot은 컨텐츠 배포 outlet 역할을 하는 커스템 Vue Eelement사용방법App.vue: props 버전 App.vue: slot 버전 Cancel Submit Slot에 default값 적용BaseButton.vue Submit Slot에 값을 제공하면 default 컨텐츠를 override(재정의) 한다.SubmitCancelCancelNamed SlotsSlot이 서로 고유하도록 설정하는 방법Slot에는 사용자 지정 식별자로 지정할 수 있는 named prop이 있다.Scoped Slots자식 props를 부모에서 사용 하고자 할 때 사용하위 Component가 상위 Component가 필요로하는 데이터를 제어하고자 할 때 사용slo.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 Props 파헤치기 Props사용방법type정의 가능한 기본 JavaScript의 데이터 타입→ String→ Number→ Boolean→ Array→ Object→ Date→ Function→ Symbolsrequired필수여부(중요값)defaultdefault값을 설정default값이 설정되어 있으면 required는 필요없다. {{ title }} {{ length }} checkProps: Custom Validation기존 props 정의 방법의 단점다음과 같이 정의되어 있을 때 image 프롭에 다음과 같이 값이 들어온다면??/images/movie-poster.pn/imagesmovie-poster.pngimages/movie-poster.png해당 prop에 있어 요구사항요구사항1 : 이미지는 반드시 루.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 watchEffect 와 watch 파헤치기 watchEffect(${function}, {${options}} )컴포넌트 렌더링 직전에 실행된다.종속성을 반응형으로 추적하면서 함수를 즉시 실행하고 종속성이 변경될 때마다 함수를 다시 실행하는 함수기본 옵션값의 flush는 ‘pre’로 설정되어 있다.드물지만 캐시 무효화 등 반응형 의존성이 변경될 때 즉시 와처를 트리거해야 하는 경우flush를 ‘sync’로 사용하여 수행할 수 있다. → 그러나, 여러 property가 동시에 업데이트 되는경우 성능 및 데이터에 문제를 야기할 수 있다.Type function watchEffect( effect: (onCleanup: OnCleanup) => void, options?: WatchEffectOptions ): StopHandle t.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ModelValue 파헤치기 :modelValuev-model은 양방향 바인딩 컴포넌트다.vue3는 내부적으로 양방향 바인딩을 단방향 바인딩으로 캐스팅하여 Props를 수정 할 수 있게 했다.props는 기본적으로 readOnly reactive object이다.위의 소스코드는 컴파일러에 의해 아래와 같이 변한된다.해당 기능을 컴포넌트에 적용 시키면 다음과 같이 변경된다. first = newValue"/>코드 부모 Component 자식 Component 참고 Reference Component v-model | Vue.js FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 nextTick() 파헤치기 nextTick( )export function nextTick( this: T, fn?: (this: T) => void): Promise { const p = currentFlushPromise || resolvedPromise return fn ? p.then(this ? fn.bind(this) : fn) : p;}nextTick( )다음 DOM 업데이트 주기가 끝난 후 실행할 지연된 콜백데이터를 수정한 직후에 이 방법을 사용하여 업데이트 된 DOM을 가져온다.const message = ref('Hello!')const changeMessage = async newMessage => { message.value = newMessage // 여기서 DOM에서 얻은 값은 이전 값입니다. .. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 BaseHandler 파헤치기 BaseHandlersHandler는 reactive 내에서 생성되는 Proxy의 핸들러 인수(객체; instanace)를 의미즉, 각 (객체; instance) 메서드는 Proxy Trap 이다.해당 모듈에서 가장 중요한 함수는 createGetter, createSetter 두 함수이다.사전에 필요한 기술적 지식Vue3는 중첩된 객체에도 반응성을 제공한다.But!! Proxy를 사용하기 때문에, 대상 객체 내부에 외부 객체가 존재할 경우, 동등 비교 시 문제가 발생한다.const obj = {};const arr = reactive([obj]);const reactiveObj = arr[0];obj !== reactiveObjVue3는 내부적으로 Proxy와의 동등비교를 기존 객체와의 비교로 변경한다.. FrameWorks/Vue 2024. 6. 12.

• 

  Vue의 ref 파헤치기 ref( )단일 값을 갖을 수 있다.안타깝게도 Proxy는 객체에 대해서만 동작하므로 단일 값을 객체에 집어 넣어야 한다.통상적인 Vue의 ref( )의 구현은 reactive( )를 활용하지 않고, 객체 접근자를 통해 구현되어 있다.reactive( )를 활용한 구현function ref(initialValue){ return reactive({value : initalValue});}객체 접근자를 활용한 구현JavaScript Object 접근자JavaScript Object Accessors는 JavaScript computed 속성이라고도 한다.주의!! Vue computed 속성과 혼동하지 말것!!(나의 생각) Java에서 객체를 생성하는 방식으로 getter, setter와 유사하며, jso.. FrameWorks/Vue 2024. 6. 12.

• 

  실행중인 도커, Jenkins Container TimeZone 변경하기 계기매일 새벽 3시에 프로젝트를 배포 시키려고 배치를 설정해 놓았습니다.Jenkins 글로벌 설정에서 한국 시간으로 타임존을 변경 했지만...웹페이지 상의 시간만 한국 시간으로 나올 뿐!!실제로 배치가 도는 시간은 변경되지 않고 이상한 시간에 배포가 되고 있었습니다....오늘은 이를 고쳐보도록 합시다.젠킨스 컨테이너 접속우선 가장 먼저 해야 할 것이 컨테이너 안으로 접속을 해야 합니다./bin/bash는 우리가 사용할 shell을 선택해 주는 것입니다.sudo docker exec -it ${container_name} /bin/bash(option) vim 설치기본적은 cat이나 다른 텍스트 에디터를 사용해도 무방합니다.저는 vim이 변하기 vim을 설치해보도록 하겠습니다.api-get updateap.. FrameWorks/Jenkins 2024. 5. 15.

• 

  MyBatis의 foreachf를 이용한 동적 쿼리 처리 계기개인 프로젝트 중 배열에 선언되어 있는 여러 P.K. 값을 기준으로 데이터를 꺼내와야 하는 경우가 발생해 사용하게 되었다.다음과 같은 원인으로 foreach문을 사용해서 해결하고자 한다.반복문을 통해 여러번 쿼리를 날릴 수 있다. 하지만, DB는 커넥션을 맺는 cost가 매우 비싸 조회해 올 데이터가 많아지면 cost의 낭비가 너무 심하다.사용방법argumentscollection : 전달받은 인자의 데이터 타입 (list or array 소문자로만 입력해야한다.)item : 전달 받은 데이터를 사용할 변수명open : 구문이 시작될 때 삽입할 문자close : 구문이 끝날 때 사입할 문자separator : 각 데이터를 넣을 때 마다 넣어줄 구분자index : 반복되는 구문 번호. 0부터 순차적으로.. FrameWorks/MyBatis 2024. 5. 6.