일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 이슈
- 클라우드
- react
- AWS
- BFS
- 리액트
- 컴퓨터공학
- 알고리즘
- HTML
- 백엔드
- 웹
- next.js
- 백준
- 타입스크립트
- docker
- CSS
- JavaScript
- 가상화
- TypeScript
- 프론트엔드
- es6
- 쿠버네티스
- 파이썬
- 이더리움
- 솔리디티
- 블록체인
- node.js
- 자바스크립트
- kubernetes
- k8s
- Today
- Total
목록VUE (4)
즐겁게, 코드
리액트와 비교했을 때 뷰의 장점 중 하나는 유용한 빌트인 컴포넌트를 제공한다는 점이라 생각한다. 이 중 컴포넌트는 정말 유용하게 사용하고 있는 중인데, 페이지 전환 시에도 트랜지션 효과를 줄 수 있다고 한다. Home About Contact nuxt가 아닌 vue-router로 라우터를 구성하면 위와 같이 router-view 컴포넌트를 사용한다. Home About Contact 그리고 으로 를 감싸면 애니메이션이 잘 적용된 것처럼 보이나, 콘솔에 경고가 출력된다. Home About Contact 대신 router-view는 "Component" 라는 named slot을 expose하는데, expose된 Component 슬롯을 동적으로 렌더한다. (※ 여기서 Component 는 현재 경로에서 ..
어플리케이션의 규모가 커지면 인증 정보, 장바구니 목록, 어플리케이션 설정 등 전역으로 관리해야 할 요소의 성격이 완전히 다른 경우가 종종 생기는데요, React와 redux를 사용할 때는 이처럼 둘 이상의 관심사가 있을 때 여러 스토어를 만들고 combineReducers 함수를 사용해 스토어를 하나로 묶어 사용했습니다. 오늘은 Vue의 Vuex를 사용해 스토어를 구성할 때, 관심사별로 유사한 상태를 묶어 관리할 수 있도록 해주는 네임스페이스(namespace) 에 대해 소개해보도록 하겠습니다. 🙂 네임스페이스의 등장 배경 어플리케이션이 하나의 스토어를 가질 때는 store 라는 폴더 안에 index.js, mutations.js, actions.js, getters.js 라는 이름을 가진 각 파일(v..
조건부 렌더링 뷰(Vue.js)에서는 특정 조건을 만족할 때만 컴포넌트나 블록을 렌더링하는 조건부 렌더링 을 위해 v-if 와 v-show 라는 두 종류의 지시자(directive)를 사용합니다. v-show를 사용한 블록 v-if를 사용한 블록 그런데, 왜 뷰는 동일한 역할을 수행하는 지시자를 둘이나 구현해둔 걸까요? v-if 지시자 사실 두 지시자는 엄밀히 다른 방식으로 조건부 렌더링을 구현합니다. 먼저 v-if 지시자를 볼까요? v-if를 사용한 블록 [렌더링 결과 : isVisible이 true일 때] v-if를 사용한 블록 [렌더링 결과 : isVisible이 false일 때] v-if 지시자는 조건이 참일 때는 블록을 새로 생성해 DOM 트리에 추가하고, 조건이 거짓으로 변하면 해당 블록을 D..
뷰를 조금씩(정말 조금씩..) 공부하고 있는데, 의아한 점이 하나 생겼습니다. 바로 컴포넌트의 데이터를 관리하는 부분에서 name 이라는 속성을 내보내고 있는데, name 속성은 있으나 없으나 에러나 경고를 출력하지 않았기 때문입니다. 찾아본 결과, name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 합니다. 컴포넌트 구조가 재귀적일 때 : 재귀 컴포넌트에 대한 내용은 리액트에서는 들어보지 못한 개념이라 생소하지만, name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다고 합니다. Vue 개발자 도구를 사용할 때 Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여줍니다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 ..