몽땅뚝딱 개발자

◽ $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의 복사본을 변경하거나 동기화하는 방법을 사용해야..

보통 영역을 나눌 때 를 사용하여 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의 Built-In Components ◽ 애니메이션 처리에 필요한 빌트인 컴포넌트이다.진입 전, 벗어나기 전, 진입했을 때 등등의 타이밍을 설정하여 맞는 CSS나 Javascript 훅을 사용하여 표현할 수 있다. ◽ 의 사용 아래는 커스텀 모달을 띄웠을 때 모달 뒤를 dim 처리하기위한 이다. v-show로 출력되거나 사라질 때 css가 적용된다. 📄 HTML 📄 CSS /* dim의 css */ .cover { background-color: rgba(0, 0, 0, 0.4); overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } /* 출력되기 전, 사라지기 전에 적용할 CSS ..

두번째 포스팅은.. 내가 한번도 사용해 본적이 없는 Directive이기 때문에 직접 사용해보고 올리는 사용기이다. v-slot은 설명을 읽어도 이해가되지않아서 이 포스팅이 굉장히 미뤄지고 있었는데, 직접 프로젝트를 구현해서 사용해보다 망치로 머리를 맞은 듯 깨달았다. '그냥 컴포넌트로 쓰지 왜 슬롯을 쓰는거야?' 하다가 '슬롯 진짜 편하다!'로 끝난 여정이었다. ◽ v-slot 슬롯을 여러개 사용하는 경우 슬롯의 이름을 지정해주면 각각의 위치에 들어간다. 추천 신규 테마 달력/다이어리 더 보기 ◽ v-pre 이 엘리먼트와 모든 하위 엘리먼트에 대한 컴파일을 건너 뛴다. 컴파일의 속도를 높이기 위해 사용한다. {{ 이 곳은 컴파일을 건너 뛴다. }} ◽ v-cloak { display: none }의 규..

쿼리 한 줄을 짤 때에도 성능에 어떤 영향을 미칠 지 고민하고 짠다는 서비스회사의 얘기를 처음 들었을 때 꽤나 충격을 받았다. 그 뒤로 늘 일정에 쫓겨 '돌아가기만 하면 되는 코드'만 만들어오던 모습에서 이제는 '좋은 코드'에 가까워지기 위해 노력하고 있다. 이번에 Vue.js로 클론코딩을 진행하며 전혀 사용하지않았던 새로운 방식으로 컴포넌트를 쪼개어보았다. 그러자 컴포넌트의 depth가 많아졌고 필요한 곳마다 같은 파일을, 같은 변수를 Import하는 내 모습을 깨닫고 이건 아니다 싶어 몽땅 지워버리고 적절한 통신방법에 대해 고민하기 시작했다. 내가 알고있는 컴포넌트간의 통신방법은 3가지로 추려볼 수 있다. 1. props & emit 2. eventbus 3. Vuex 지금까지는 eventbus를 제..

먼저, 네비게이션 가드에 대한 지식이 선행되어야 한다. [Vue.js] vue-router의 네비게이션 가드 ◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 be-a-weapon.tistory.com ◽ meta 라우터에서 네비게이션 가드를 통해 라우터 이동 시 권한이나 정해진 상태값에 따라 이동에 제약을 걸 수 있다. 예를 들어, 유저가 로그인이 꼭 필요한 페이지에 접근할 때 비로그인 상태라면 로그인 페이지로 redirect 시켜야하고, 로그인이 되어있는 상태일 경우 그대로 이동시키면 된다. 이처럼 '로그인 여부'를 필수로 알..

📄 JS // camelCase로 작성하지 않고 kebab-case로 작성한다. this.$emit(‘my-event’) 📄 HTML 커스텀 이벤트를 지정할 때, 이벤트 이름을 camelCase로 작성하고 위와같이 호출하면 아무런 동작을 하지 않는다. myEvent로 작성 시에 v-on 이벤트리스너는 항상 자동으로 소문자 변환을 하기때문에 myEvent가 아닌 myevent로 변환되기 때문이다. 따라서 이벤트 이름은 kebab-case로 작성하는 것이 좋다. 출처 https://v3.ko.vuejs.org/guide/component-custom-events.html 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.