99duuk

1. 동기 vs 비동기 방식동기(Synchronous) 방식작업이 순차적으로 실행됨한 작업이 완료될 때까지 다음 작업은 대기FIFO(First In First Out) 큐와 유사한 동작비동기(Asynchronous) 방식작업이 병렬적으로 실행 가능한 작업의 완료를 기다리지 않고 다음 작업 시작 가능JavaScript의 이벤트 루프 모델을 따름Web API, 태스크 큐, 이벤트 루프의 상호작용2. API 호출: 동기 vs 비동기동기적 API 호출의 문제점화면 멈춤: API 응답 대기 중 UI 동결사용자 경험 저하: 사용자가 앱이 멈춘 것으로 인식리소스 낭비: 대기 시간 동안 다른 작업 불가성능 저하: 여러 API 호출 시 전체 로딩 시간 증가비동기적 API 호출의 장점반응성 유지: API 호출 중에도 UI..

부모-자식 간 데이터 전달은 크게 부모 -> 자식과 자식 -> 부모 두 가지 방향으로 나뉨. 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(..

라우트 라우트(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..

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