99duuk

1.   태그 조건에 따라 SQL 구문의 일부를 포함시키거나 제외시킬 때 사용함. SQL 구문test 속성: 조건식을 지정함. 이 조건이 true로 평가되면 태그 내부의 SQL 구문이 포함됨. SELECT * FROM users WHERE 1=1 AND status = #{status} AND last_login_date > #{lastLoginDate} 사용자 조회 시 status와 lastLoginDate 조건을 동적으로 적용  status가 null이 아니면 해당 status를 가진 사용자만 선택lastLoginDate가 null이 아니면 해당 날짜 이후에 로그인한 사용자만 선택  2.  태그 컬렉션을 반복 처리할 때 사용함. IN..

1. ,   태그 태그는 여러 조건 중 하나를 선택하여 SQL을 동적으로 생성할 때 사용함. 태그는 내부에서 사용되며, 특정 조건이 충족될 때 SQL의 일부를 포함시키는 역할을 함. SQL 구문1 SQL 구문2 기본 SQL 구문   태그의 test 속성: 조건식을 지정함. 이 조건이 true로 평가되면 해당 태그 내부의 SQL 구문이 실행 태그: 모든 조건이 false일 때 실행될 기본 SQL 구문을 정의    SELECT * FROM employees WHERE 1=1 AND employee_level > #{level} ..

부모-자식 간 데이터 전달은 크게 부모 -> 자식과 자식 -> 부모 두 가지 방향으로 나뉨. 1. 부모 -> 자식: propsprops는 부모가 자식에게 데이터를 단방향으로 전달할 때 쓰는 것임.부모가 데이터를 짐(Props)으로 전달하면, 자식은 그 짐을 받아서 사용할 수 있음. 다만, 자식은 그 짐을 열어볼 수는 있지만, 수정할 수는 없음. 즉, 자식은 부모에게 받은 데이터를 읽기 전용으로 처리할 수 있음 부모가 자식에게 상자를 줬다고 생각하면 됨.자식은 그 상자를 열어서 안에 든 걸 볼 수는 있지만,내용물을 바꾸는 건 안 됨.상자의 내용물을 바꾸려면 부모가 바꿔줘야 함.  {{ message }}  2. 자식 -> 부모: 두 가지 방식자식이 부모에게 데이터를 전달할 때는 두 가지 방법이 ..

import역할: 외부 모듈이나 라이브러리를 가져오는 거임. Vue.js에서 다른 컴포넌트를 쓰거나 라이브러리, 유틸리티 함수 등을 가져올 때 씀.import ChildComponent from './ChildComponent.vue';import axios from 'axios'; export default {}역할: Vue.js에서 컴포넌트를 정의하는 객체를 내보내는 거임. 여기서 export default는 이 컴포넌트를 다른 곳에서 쓸 수 있도록 내보내는 거임.export default { // 컴포넌트의 모든 정의가 여기에 들어감}name역할: 컴포넌트 이름 정의함. 다른 컴포넌트에서 참조할 때 쓰이고, Vue DevTools에서 디버깅할 때도 유용함.export default { name:..

뮤테이션은 state를 변경하는 useState[test, setTest]의 setTest 같은 거고, (commit 통해 호출) action은 api통신 후 데이터를 가지고 상태 변경을 위해 뮤테이션을 호출하는 놈이고, (dispatch 통해 호출) getter은 react에서 loginState.getToken 처럼 저장된 상태를 다른 컴포넌트에서 꺼내 쓰기 위한 놈    State:애플리케이션의 중앙 집중식 상태 저장소예: state: { count: 0, user: null }Mutations:State를 변경하는 유일한 방법commit을 통해 호출예:mutations: { INCREMENT(state) { state.count++ } }컴포넌트에서 사용: this.$store.commit(..

데이터베이스 쿼리에서 결과는 동일하지만 방식이 다른 세 가지 방법이 있음.CTE(WITH ... AS), 서브쿼리, 그리고 HAVING 절을 사용한 쿼리 방식임. 여기서는 가독성, 재사용성, 그리고 성능 측면에서 각 방식이 어떻게 다른지,데이터가 많을 때와 적을 때 성능 차이가 어떻게 나는지 알아볼 것임. 1. CTE (WITH ... AS) 사용CTE는 쿼리를 단계별로 나누어 작성할 수 있어서 가독성이 좋음. 중간 결과를 임시 테이블처럼 사용하기 때문에 재사용성도 높음.WITH RecentSales AS ( SELECT employee_id, SUM(sales) AS total_sales FROM sales_table WHERE sale_date > '2024-01-01' GROU..

라우트 라우트(route)란 URL과 뷰의 정보를 저장한 레코드를 말함. 어떤 url에 어떤 페이지를 표시해야 하는지에 대한 정보라고 생각하면 됨어플리케이션을 구성하는 페이지마다 라우트를 정의하고 사용할 라우트를 지정하면 해당 라우트가 연결된 페이지로 이동함 예를 들어 /goods 라는 url에 goods 컴포넌트를 노출하도록 라우트를 정의하면 /goods에 접근했을 대 라우트가 goods 페이지가 표시되도록 함 vue Route의 라우트는 Vue.js의 컴포넌트를 특정 URL에 대응시킨 객체 형태를 가짐. 이 객체를 라우터 생성자를 사용해 라우터를 초기화할 때 routes 옵션으로 설정함

메서드이름 그대로 Vue 인스턴스의 메서드를 말함Vue 인스턴스의 생성자 옵션 객체에서 method 프로퍼티로 정의함methods는 데이터 수정 및 서버에 HTTP 요청을 보낼 때 사용함 method: { 메서드명: function() { // 처리 }} 정의된 메서드는 Vue 인스턴스의 메서드로 호출할 수 있음 v-on 디렉티브의 속성값에 바인딩하고 뷰에서 이벤트가 발생했을 때 호출되는 형태로 사용하는 것이 가장 흔함. 템플릿에서도 {{메서드명}}과 같은 형태로 텍스트 전개에 사용할 수 있음  예) 버튼을 클릭했을 때, 입력한 값을 서버로 전송하는 상황.구매  1. 메서드와 computed의 차이:methods는 호출할 때마다 항상 실행되고, 값을 캐싱하지 않음. 반면, computed는 의존성에 따..

생애주기 훅 beforeCreate: 인스턴스 생성 전 (데이터, 이벤트 등 초기화 전)created: 인스턴스가 생성되고 데이터가 초기화된 후 (DOM에 연결되기 전)beforeMount: 인스턴스가 마운트되기 직전 (DOM이 아직 렌더링되지 않음)mounted: 인스턴스가 DOM에 마운트된 후 (DOM에 접근 가능)beforeUpdate: 반응형 데이터가 변경되어 DOM이 업데이트되기 직전updated: DOM이 업데이트된 직후beforeDestroy: 인스턴스가 파괴되기 직전 (이벤트 리스너, 타이머 정리)destroyed: 인스턴스가 완전히 파괴된 후 1. created 훅인스턴스가 생성되고 데이터가 초기화된 시점에 실행됨아직 DOM 요소가 인스턴스와 연결된 상태가 아님 그러므로 아직 인스턴스의 ..

Vue.js 자주 사용하는 디렉티브 정리1. v-bind: 동적 속성 바인딩**v-bind**는 HTML 요소의 속성(예: class, src, href)에 Vue.js의 데이터를 바인딩하여 동적으로 값을 설정할 때 사용됨. 2. v-if, v-else-if, v-else: 조건부 렌더링**v-if**는 특정 조건에 따라 요소를 렌더링함. **v-else-if**와 **v-else**를 함께 사용해 복잡한 조건부 렌더링도 가능함.Admin ViewUser ViewGuest View 3. v-show: 조건부 표시**v-show**는 요소를 조건에 따라 표시하거나 숨기며, 요소가 DOM에서 제거되지 않고 **display: none**으로만 숨겨짐.This text is visible. 4. v-for: ..