분류 전체보기 172

Vue_8 메서드

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

Vue 2024.09.05

Vue_7 생애주기 훅

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

Vue 2024.09.05

Vue_6 디렉티브

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: ..

Vue 2024.09.05

Vue_5 (Vuex 인증 모듈 및 App.vue 사용)

로그인 정보를 전역적으로 관리하기 위해 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..

Vue 2024.09.04

Controller Annotation

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 등)를 경로에 포함시켜 동적으로 값을..

Spring Boot 2024.09.04

MyBatis_input & output

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..

카테고리 없음 2024.09.04

Vue_4 (v-if vs v-show)

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

Vue 2024.09.04

Vue_3 (Vue Query)

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

Vue 2024.09.04

Vue_2

재미로 만들던 메모 api의 화면을 vue로 만들어봤음시간이 없어서 대충 지난번에 리액트로 만들었던 프로젝트처럼라우팅은 어떻게 api 호출은 어떻게 컴포넌트는 어떻게 무슨 문법은 저렇게? 대충 스윽 훑고 간다는 느낌으로 돌아가게만 만들었고 전체 메모 리스트 api만 붙혔다.디렉터리 구조는 대충 이렇게 했고 import axios from 'axios'const API_URL = 'http://localhost:80/api/memos'export default { AddMemo(memo) { return axios.post(`${API_URL}/add`, memo) }, ModifyMemos(memo) { return axios.patch(`${API_URL}/mo..

Vue 2024.09.04