비 오는 날 개구리
본문 바로가기
728x90

전체 글747

[Error] Vue import Error Vue 프로젝트 보고 있는 데 import 사용한 곳마다"export default를 사용해야 합니다", "모듈 또는 해당 형식 선언을 찾을 수 없습니다."이런 오류가 발생해서 2시간을 머리를 뜯고 있었는 데 다행히 팀장님이 도와주셔서 금방 해결할 수 있었다. Cannot find module "파일 경로" or its corresponding type declarations. 라는 에러가 발생했고, Vuex Extension을 삭제했더니 문제가 해결되었다.  Error가 어디서 발생하고 있는 건지 잘 읽어보자해결하고 나니까 오른쪽 끝에 vetur라는 글자가 보였다. 코드 설정뿐만 아니라 익스텐션도 의심해봐야 한다. Vetur뿐만 아니라 Material Icon도 문제다.json을 json이라고 인식하지.. 2024. 6. 3.
[Postman] WebSocket Mock Server 사용법 Postman 설정Postman에 접속한다.사이드바에서 Mock Servers에 접속한다. (없을 경우 Configure workspace sidebar에서 활성화시킨다.)New에서 WebSocket을 선택한다.연결 테스트를 진행한다. URL은 테스트용이기 때문에 wss://ws.postman-echo.com/raw를 사용해 주었다.Mock Server이기 때문에 Message를 Send 했을 때 동일한 값이 넘어온다.Vue에 연결하여 테스트 Postman Mock Servers Test 전송 2024. 5. 21.
[JavaScript] new Map() new Map()은 JavaScript의 내장 객체 중 하나로써 Map은 key-value 쌍을 저장하는 컬렉션입니다. 이를 사용하여 효율적으로 데이터를 저장하고 관리할 수 있습니다. 조작 방법은 아래와 같습니다.// 새로운 Map 생성ley map = new Map();// key-value 쌍 추가map.set('key', 'value');map.set('red', '빨강');// 값 가져오기const key = map.get('key');console.log(key); // value// 존재여부 확인const keyYN = map.has('key');console.log(keyYN); // true// key-value 쌍 삭제map.delete('key');// Map 크기 확인console.l.. 2024. 5. 14.
[Vue] Vuex 0️⃣ 사용하는 이유vue는 단방향 통신을 지원하는 프레임워크이기 때문에 부모에서 자식으로 props를 넘겨 데이터를 공유할 수는 있지만, 자식에서 부모로 데이터를 전송할 때는 $emit을 사용하는 방법이 있지만 이것은 권장하는 방식은 아니기 때문에 어려움이 있을 수 있고, 손자나, 형제에게 데이터를 공유할 때도 mitt 라이브러리를 사용할 수는 있지만 자주 사용하는 경우 코드가 복잡해지기 때문에 컴포넌트 간에 데이터를 많이 공유해야 하는 경우 중앙에서 일관성 있게 데이터를 유지하고, 공유하기 위해서 Vuex 상태 관리 라이브러리를 사용하면 좋습니다.👍 (※ 코드가 길어질 수 있기 때문에 데이터를 공유해야 하는 컴포넌트가 많거나, 대규모 프로젝트에서 데이터를 다뤄야 할 때 vuex를 사용하는 것이 좋습.. 2024. 4. 30.
[Vue] Nested Routes vue-router에서 중첩된 routes를 만들고 싶을 때는 Nested Routes 방식을 사용할 수 있습니다. 아래 코드처럼 기본에 routes 설정하듯이 path와 component를 설정해 주고,추가로 children이라는 배열을 추가해서 그 안에 동일하게 path와 component를 설정해 주면 됩니다.const routes = [ { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile, }, { path: 'posts', component: UserPosts, }, ], }.. 2024. 4. 27.
[Vue] Vue-Router (404 처리, URL 파라미터, $router) 1️⃣ 404 페이지 처리하는 방법: path에 사용자 정의 정규식을 사용하여 처리할 수 있습니다./routes/router.jsimport { createWebHistory, createRouter } from "vue-router";import Home from "../pages/Home"import List from "../pages/List"import Error from "../pages/Error"const routes = [ { path: "/", component: Home, }, { path: "/list", component: List, }, { path: "/:catchAll(.*)", // 사용.. 2024. 4. 27.
[Vue] LifeCycle (라이프 사이클) ⚠️ 구체적인 라이플 사이클에 대한 설명과 관련 옵션은 공식 문서를 참고해 주세요. ⚠️   https://ko.vuejs.org/guide/essentials/lifecycle  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orghttps://ko.vuejs.org/api/options-lifecycle Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org  ♾️ LifeCycle(생명 주기) 과정컴포넌트 LifeCycle(생명 주기)는 아래와 같습니다.create: 컴포넌트가 생성되고 데이터가 초기화되는 단계입니다. 이 시점에는 아직 HTML이 생성되기 전이며, Vue 인스턴스가 초기화되고.. 2024. 4. 26.
[Vue] 데이터 감시 : watcher [Vue] input에서 사용자가 입력한 값 받는 방법 (@input, @change, v-model)React에서 input을 사용할 때는 onChange()라는 이벤트 핸들러를 사용하는 것처럼,Vue에서는 input을 사용할 때 @input or @change를 사용할 수 있습니다. (@input = v-on:input) 🆚 차이점@input (= v-on:input): input 무eundol1113.tistory.com 이전에 작성했던 input 태그를 보면 number라는 data에 값을 입력받는 데특정 사용자가 Number 타입의 값이 아닌 String 값을 입력한다면 관련 기능에서 오류가 발생할 수 있는 데이 경우 watcher()라는 함수를 사용하여 데이터를 감시할 .. 2024. 4. 24.
[Vue] input에서 사용자가 입력한 값 받는 방법 (@input, @change, v-model) React에서 input을 사용할 때는 onChange()라는 이벤트 핸들러를 사용하는 것처럼,Vue에서는 input을 사용할 때 @input or @change를 사용할 수 있습니다. (@input = v-on:input) 🆚 차이점@input (= v-on:input): input 무언가를 입력할 때마다 내부에 있는 코드(함수)가 실행됩니다.@change (= v-on:change): input에 무언가를 입력한 후 커서가 다른 곳으로 이동했을 때 내부에 있는 코드(함수)가 실행됩니다.🖥️ 문법 기존에 input에 이벤트 핸들러를 사용할 때 파라미터로 받던 e.target.value (or event.target.value)는 Vue에서 앞에 $만 추가해 주면 됩니다. 또.. 2024. 4. 24.
728x90

티스토리툴바