99duuk

데이터베이스 쿼리에서 결과는 동일하지만 방식이 다른 세 가지 방법이 있음.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: ..

로그인 정보를 전역적으로 관리하기 위해 Vuex store를 사용,App.vue에서 이를 초기화하고 관리 => 애플리케이션 전체에서 일관된 로그인 상태를 유지 가능 // store/modules/auth.jsimport api from '@/api' // API 호출을 위한 가상의 모듈export default { namespaced: true, state: { user: null, token: null }, mutations: { SET_USER(state, user) { state.user = user }, SET_TOKEN(state, token) { state.token = token } }, actions: { async logi..

1. @RequestParam역할: URL 쿼리 파라미터에서 값을 추출합니다.주로 사용되는 경우: GET 요청에서 URL 뒤에 붙은 쿼리 스트링(?key=value)에서 값을 받아올 때.@GetMapping("/search")public String search(@RequestParam("keyword") String keyword) { return "Search result for: " + keyword;} GET /search?keyword=spring 요청 시, keyword 값은 "spring"으로 바인딩.2. @PathVariable역할: URL 경로에 포함된 변수를 메소드 파라미터로 매핑주로 사용되는 경우: RESTful API에서 리소스 식별자(ID 등)를 경로에 포함시켜 동적으로 값을..

List users = userMapper.selectAllUsers();1. parameterType역할: SQL 쿼리에 전달할 입력 파라미터의 타입을 명시함.용도: Java 기본 타입, Java 객체, 또는 사용자 정의 객체(POJO)를 쿼리에 전달할 때 MyBatis가 해당 파라미터를 올바르게 매핑하도록 도와줌. SELECT * FROM users WHERE id = #{id} parameterType="int": 이 쿼리에 전달될 파라미터의 타입이 정수형임을 명시함.Java 메서드에서 정수형 파라미터를 전달하게 됨:int userId = 1;User user = userMapper.selectUserById(userId);  객체를 사용할 때 INSERT INTO users (name, ema..

v-if와 v-show는 Vue에서 조건부 렌더링을 위해 사용되는 디렉티브임 두 가지 모두 요소를 조건에 따라 보여주거나 숨기는 데 사용되지만, 작동 방식에 중요한 차이가 있음  사용자 프로필 환영합니다, {{ username }}님! 로그아웃 로그인이 필요합니다. 로그인  v-if:조건이 false일 때 요소를 DOM에서 완전히 제거조건이 변경될 때 요소를 생성하거나 제거하므로, 초기 렌더링 비용이 낮지만 토글 비용이 높음자주 변경되지 않는 조건에 적합v-show:조건에 관계없이 항상 요소를 렌더링하고, CSS의 display 속성을 사용하여 보이거나 숨김초기 렌더링 비용이 v-if보다 높지만, 토글 비용이 매우 낮음자주 토글되..

기본 방식과 Vue Query 사용의 차이점그냥 쓴 것과 Vue Query를 사용한 것의 주요 차이는 캐싱과 리페칭임기본 방식 (그냥 쓴 것):서버에서 데이터를 가져오면: 컴포넌트가 만들어질 때 서버에서 데이터를 직접 가져옴데이터 캐싱이 없음: 데이터가 컴포넌트에 로드될 때마다 서버에 다시 요청해야 하며, 캐싱을 위한 별도의 처리 없이 API가 매번 호출됨리페칭 없음: 데이터 변경이나 네트워크 상태 변화를 자동으로 반영하지 않습니다. 수동으로 다시 데이터를 가져오는 로직을 추가해야 함  Vue Query를 사용한 방식:자동 캐싱: 데이터를 한 번 가져오면 캐시에 저장되며, 동일한 데이터를 여러 번 요청할 필요가 없음자동 리페칭: 데이터가 변경되거나, 브라우저 포커스가 다시 맞춰지거나, 네트워..