본문 바로가기

Vue.js

 (7)
[Vue.js] Vue 컴포넌트 내부 요소에 css 적용 방법 (딥 셀렉터) [Vue.js] 컴포넌트 내부 요소 css 적용 방법 문제 상황 Vuetify.js 컴포넌트를 사용하고 있는 중 제공되는 컴포넌트 내부 html 요소의 css를 커스텀하고자 하였다. 일반 css 작업처럼 뷰페이지 하단 영역에 css에 시도했는데 적용되지 않았다. 예를 들어 아래 같은 경우! 컴포넌트 구조의 내부 div 같은 html 요소에 스타일을 먹혀주고 싶었다. .v-image__image { // style~ } 이런 식으로 요소의 css에 직접 style을 적용해보았는데 통하지 않았다. 해결 방안 딥 셀렉터를 css 선택자 앞에 붙여서 해결하였다. ::v-deep {선택 요소 나열} /* slide banner custom */ ::v-deep .v-carousel__controls > div >..
nativescript-vue 앱 개발 도전기(라고 쓰고 포기담이라고 읽는다...) 요즘 몇 주간 블로그 기록이 뜸했다가 뜬금없이 앱 개발 도전기 라는 제목을 갖고 글을 쓴다. 한창 알고리즘 풀겠다며 올리다가 프로그래머스 2단계에서 현타오고.. 차라리 뭐라도 만드는게 낫겠다 싶어져서 이번엔 앱을 건드렸다. 사실 '도전기' 라며 올리는 거지만 '포기담'이 결론이다. 이럴거면 뭐하러 올리냐 싶겠지만 이 또한 나의 시간과 에너지를 들인 피같은 경험이기 때문에.. 더 잊기전에 간단히 내가 무엇을 하려고 했고 어떻게 포기(?)를 하게 되었는지 기록하고자 한다. 갑자기 App? 난 사실 앱 개발을 안좋아한다. 예전에 안드로이드 개발을 혼자 독학해보기도 하고 학부생때 잠깐 배워보기도 했는데 느려터진 애뮬레이터도 짜증났고 아직 개발 시작도 못했는데 설치, 환경설정 과정에서부터 에러를 너무 많이 마주쳤..
[개발일지] Vue.js Trello 만들기 - 색상 입히기, 보드 세팅, 보드 삭제 색상 입히기 [mutations] 테마 색상 셋팅하기 SET_TEHME (state, color) { state.bodyColor = color || '#ffffff' state.navbarColor = color ? 'rgba(0,0,0,.15)' : '#026aa7' } [state] 상태값 설정 bodyColor: '#ffffff', navbarColor: '#026aa7' [Home.vue] methods 추가 ...mapMutations([ 'SET_IS_ADD_BOARD', 'SET_TEHME' // 테마 세팅 메소드 추가 ]), created() this.SET_THEME() // 추가 => 작동확인해보면 mutations실행, 상태값만 변환됨. 그래서 외관적으로 아직 나타나지는 않음 [Na..
[개발일지] Vue.js Trello 만들기 - 카드 이동, 이동 리팩토링, 카드 삭제 카드 이동 드래그앤드랍 라이브러리 설치 $ npm i dragula [board.vue] import dragula from 'dragula' import 'dragula/dist/dragula.css' data() 상태값 추가 dragulaCards: null updated() 추가 - 이동작업 일어났을 때 동작 추가 updated() { // dragulaCards 초기화 작업 if(this.dragulaCards) this.dragulaCards.destroy() // 유사배열을 NodeList->Array 하고 마우스를 놓았을 때 콘솔 출력 this.dragulaCards = dragula([ ...Array.from(this.$el.querySelectorAll('.card-list')) ])...
[개발일지] Vue.js Trello 만들기 - 카드상세조회(라우팅, API 연동), 카드 수정 카드 상세 조회 - 라우팅[Board] 에 router-view 부분 추가. [CardItem] 에 router-link 추가. (링크 연결 시 board id는 state에서 가져옴, card id는 data props에서 가져옴) => card 하나씩 클릭할 때 card 컴포넌트가 router-view에 출력됨 [Card] 컴포넌트에 root div를 로 바꾸면 (모달 import,컴포넌트 등록 해야함) Card컴포넌트를 띄울 때 모달창이 뜬다. => 카드를 누르면 Modal창 뜸 카드 상세 조회 - API 연동card 누르면 api 연동해서 card 정보 불러오도록 구현하기. (api 등록) fetch 함수 만들어서 get card api 부르기. (action 등록) card 조회하는 FETCH_..
[Vue.js] router 관련 정리 vue-router 설치$ npm i vue-router --save-dev a vs router-linkLogin Login Card 1vue.js에서 router-view를 쓸 때 a 태그의 대용으로 router-link 태그를 선호합니다. 클릭 이벤트를 차단하여 페이지를 다시 로드하지 않도록 합니다.history 모드와 hash 모드가 동일하게 작동됩니다. (/#/ 유무) :to 를 사용하는 것은 데이터 바인딩 기능입니다. v-bind:to의 약식 표현이며 ${bid} 같은 변수를 연결한다는 의미입니다. 중첩 라우트 라우트 경로를 설정할 때 부모가 될 라우트의 속성으로 children을 넣어줍니다.그 안에 배열을 생성해서 자식 라우트를 설정합니다.
[Vue.js] 서버 렌더링, 브라우저 렌더링 서버 렌더링라우팅 하는 주체가 '서버'매번 주소를 요청할 때마다 화면이 갱신된다.ex) 네이버, 구글 브라우저 렌더링 (SPA)라우팅 하는 주체가 '브라우저'주소를 요청해도 매번 갱신되지 않는다. 대신 갱신되는 부분을 서버에 요청해서 갱신한다.서버 렌더링보다 좋은 점 -> 조금 더 효율적으로 갱신.ex) 구글메일, 트렐로 참고 : 인프런 - 트렐로 개발을 통한 Vue.js, Vuex, Vue-Router 프론트엔드 실전 기술

티스토리툴바