몽땅뚝딱 개발자

Vue2에서 커스텀 컴포넌트를 사용한경우 사용한 컴포넌트에 v-model을 사용하면 props로 받을 때 'value'라는 명칭으로 받을 수 있었고, Vue3에서는 .sync를 사용하지않아도 [v-model:value]라는 문법을 사용하면 .sync의 역할이 대체된다. Vue 2.x 📄 부모컴포넌트 부모컴포넌트에서 아래와 같이 v-model로 값을 할당한다. 📄 자식컴포넌트 - myComponent.vue 출처 v-model | Vue.js v-model 개요 변경내용: BREAKING: 커스텀 컴포넌트를 사용할때, v-model prop 와 event 기본 명칭이 변경 되었습니다: prop: value -> modelValue; event: input -> update:modelValue; BREAKI..

에러 eslint syntaxerror cannot read config file 원인 오늘도 바람 잘 날 없는 나의 프로젝트.. package.json의 마지막 콤마를 없애주자. 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

에러 ESLint: Error: Fauled to load config "standard" to extend from. 해결 처음에 [eslint --init] 명령어를 실행하여 설정할 때 JSON으로 잘못설정했다가 js로 바꾸는 과정에서 생긴 에러이다. 이 명령어를 다시 실행하여 js로 다시 설정하고 IDE를 껐다 키니 잘 돌아간다. eslint --init 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ $attrs Vue 2의 $attrs은 부모가 class, style 속성을 제외하고 모든 속성들을 자식에게 넘겨주는 속성이다. Vue 3의 $attrs은 class, style 속성을 포함하여 모든 속성들을 자식에게 넘겨준다. 또한 자식에서 부모에게 전달되는 이벤트를 모아놓은 $listeners가 사라지고 $attrs 안으로 이벤트가 존재한다. ◽ $attrs 예제 📄 부모 컴포넌트 attrs 📄 자식 컴포넌트 {{ $attrs.menu1 }} {{ $attrs.menu3 }} ◽ inheritAttrs: true/false 부모컴포넌트에서 오는 속성이 자식컴포넌트에 상속되는 것을 막는다. export default { inheritAttrs: false, } 출처 [Vue.js] 새로운 v-mod..

새삼 생각나는 코딩테스트 때 watch 남발했다가 '왜 이렇게 쓰신거예요?'라는 물음에 놀라고 제대로 개념 잡힌 기억..(🥲) watch는 어떤 때에 쓰는 것이며, 성능에 어떤 영향을 미치는지 매우 친절히 설명해주셔서 그 뒤로는 plan B로 사용하게 됐다. 예전에 내가 짠 코드를 보면 왜 그렇게, 왜 그곳에서 써야하는지 명확한 이유도 없이 마구잡이로 사용했었다. 물론 지금도 100% 적절하게 쓴다고 확신할 수는 없지만 그래도 함수 하나, 데이터 하나를 선언할 때도 과연 적절한 옵션에서 사용하고있는건지 고민해보고 판단하는 단계까지는 왔다. ◽ computed 계산해야하는 목표데이터를 정의하는 방식으로, 선언적 프로그래밍 방식이다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 실행되며 캐..

서론 ◽ Vuex가 나온 이유 Vue는 단방향 데이터 흐름이다. state(=data), view(=template), actions(=methods)이 단방향으로 흘러간다. 하지만 공통의 state, 즉 data를 공유하는 여러 컴포넌트가 있는 경우 이 단순함이 깨질 수 있다. 1. 여러 view들은 동일한 state에 의존한다. == 그래서 아주 많은 중첩으로 이루어진 경우 props를 사용하면 더 복잡해질 수도 있다. == 형제 컴포넌트에서는 이 해결방법이 작동하지 않을 수도 있다. 2. 다른 view에서 작업하더라도 동일한 state에 반영해야 할 수도 있다. == 따라서 반영하기위해서는 직접 부모-자식 인스턴스를 참조해야한다. == 여러 state의 복사본을 변경하거나 동기화하는 방법을 사용해야..

◽ 차이점 로컬 스토리지(Local Storage)의 데이터는 사용자가 지우지 않는 이상 사라지지 않고 영속적이다. 세션 스토리지(Session Storage)의 데이터는 사용자가 윈도우나 브라우저 탭을 닫을 경우 사라진다. 출처 https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

보통 영역을 나눌 때 를 사용하여 id나 class를 주어 영역을 구분하지만, 협업 시엔 그 의미를 파악하기 어렵다. 그래서 직관적인 이름을 사용하여 해당 영역을 효율적으로 파악할 수 있도록 돕는 것이 시맨틱 태그(semantic tag)이다. 각 회사의 프로젝트 성향, 정책마다 달리 적용된다. ◽ 사용하는 이유 1. 검색엔진(SEO)의 최적화 2. 웹접근성: 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 용이하다. 3. 유지보수성: 개발자들이 한 눈에 알아보기가 쉽다. ◽ 종류 [레이아웃] - header: 헤더 영역 - main: 문서의 주요 contents 영역 - footer: 푸터 영역 - section: contents 영역으로 반드시 제목(h1~h6)을 가짐 - arti..

◽ navigator.userAgent() navigator의 프로퍼티 중 하나로 브라우저가 User-Agent HTTP 헤더에 넣어 전송하는 문자열이다. 이 프로퍼티를 통하여 현재 사용자가 사용하고 있는 디바이스를 체크할 수 있다. ◽ navigator.userAgent() 예제 userAgent()를 출력하면 "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3; rv:11.0) like Gecko" 같은 값이다. 때문에 indexOf()나 match()를 사용하여 일치하는 문자열을 찾는다. // 안드로..

몇번이고 다시 읽어봐야 되는 글.. [Vue.JS] 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance) Vue.js에서 대용량 데이터 처리 시에 성능을 최적화하는 방법에 대해 알아보자. 남들은 모르는 Vue.js 성능 개선과 Vue.js에서 대용량 데이터를 처리하는 방법을 배워보자. Vue.js 성능 개선에서 가장 kdydesign.github.io