'프레임워크' 카테고리의 글 목록
본문 바로가기

프레임워크160

[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.
[Vue] 컴포넌트 다중 단어 네이밍 규칙 설정 Vue 프로젝트를 만들고, 코드를 컴포넌트화 시키거나 페이지를 만들기 위해.vue 파일을 생성해서 name을 설정하다 보면아래와 같은 오류가 발생합니다.  이 오류는 Vue.js의 linting 규칙 중 하나인 'vue/multi-word-component-names'를 사용하여 컴포넌트 이름을 다중 단어로 지정하도록 하는 규칙입니다. 기본값이 true이기 때문에 따로 설정해주지 않는 이상 name을 두 단어 이상으로 설정해주어야 합니다. 이 경우 package.json > eslintConfig > rules에 해당 설정을 아래와 같이 false로 바꿔주고 서버를 재구동하면 오류가 사라집니다. "eslintConfig": { ... "rules": { "v.. 2024. 4. 24.
[Vue] 이미지 데이터 바인딩 (Require) / v-bind = : & v-on = @ / props, emit 1️⃣ 이미지 데이터 바인딩 (Require)for in을 사용해서 반복문 돌리면서 img src에 데이터 바인딩을 해야 하는 경우가 있었는 데 그 경우 "'./assets/imgs/img' + i + 'jpg'"를 하면 이미지가 정상적으로 노출되지 않는다. 왜냐하면 저렇게 이미지를 불러오는 경우 String 형태로 인식하기 때문에 이 경우 require()를 사용하여 템플릿 내에서 동적으로 이미지 경로를 생성할 수 있습니다.  🖥️ 코드 📹 참고 [Vue.js] img 태그의 src 바인딩 하는 방법Vue.js에선 element의 속성을 동적으로 처리할 때 v-bind라는 Directive를 사용한다. (Vue.js의 Direct...blog.naver.com 2️⃣ .. 2024. 4. 23.
728x90

티스토리툴바