태그 줄바뀜 현상 오늘은 span태그 모바일 줄바뀜 현상을 해결하는 방법을 소개하려고 합니다. 저는 어포스트에서 무료로 배포하는 티스토리 스킨을 사용하고 있습니다. 티스토리의 장점 중 하나는 HTML과 CSS를 사용할 수 있는 분들은 자신의 스타일에 맞게 수정이 가능하는 점이죠! 네이버는 세부 수정이 가능하긴 하지만 수정이 안되는 부분도 있기 때문에 티스토리를 좀 더 선호하는 편입니다. 하지만 수정을 하다보면 남이 작성한 코드이다보니 찾기 어려운 부분도 있고 적용이 잘 안되는 부분도 있더라구요. 지금은 눈에 보이는 족족 스킨을 수정하고 있는데요. 제 블로그 모바일 페이지에서 게시글 작성 날짜를 표시해주는태그가 자꾸 줄바뀜되는 현상이 있었습니다. 스킨은 반응형이고 데스크탑 해상도에서는 멀쩡하지만 모바일 환..
2020.11.19
컴포넌트와 이벤트 버스를 이용한 TodoList [Vue.js] Vue로 구현한 TodoList.app 예제 Vue로 구현한 TodoList.app 예제 See the Pen [Vue.js] TodoList.app by junheeleeme (@junheeleeme) on CodePen. Vue.js를 공부하면서 개인적으로 메모앱을 만들려고 일단 포스팅을 했지만.. 아직 완성하지도 못.. juni-official.tistory.com 이전에 구현했던 TodoList 예제를 컴포넌트화 + 이벤트 버스를 이용하여 'list-component'와 'input-component' 사이에 정보를 교환할 수 있도록 다시 코드를 작성 1. 이벤트 버스 객체 생성 2. list-component 와 template 작..
2020.11.12
뷰 인스턴스 라이프 사이클 뷰 인스턴스(instance)는 화면개발을 하기 위해서 필수로 생성해야하는 기본단위이다. 1. beforeCreate 가장 처음에 실행되는 단계로 인스턴스가 생성되었지만 아직 속성이 정의되지 않아 돔(DOM)에 접근할 수 없다. 2. Created 인스턴스의 data 속성과 methods 속성값에 접근이 가능한 단계로 아직까지 template 속성에는 접근할 수 없다. 3. beforeMount template 속성의 마크업 속성을 render function으로 변환. 인스턴스가 돔(DOM)에 부착되기 전 단계 4. Mounted 인스턴스 el 속성에서 지정한 돔(DOM)에 인스턴스를 부착하고 바로 호출되는 단계로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면요소가 최종..
2020.11.12
뷰(Vue) 이벤트 버스 객체를 이용한 통신 뷰에서 부모 - 자식 관계의 컴포넌트는 정보 전달을 위해 props와 events를 사용한다! 하지만 부모-자식 관계가 아닐 경우에는 어떻게 정보 전달이 이루어질까? 두 컴포넌트의 관계가 형제 관계 또는 부모와 손자, 증손자 관계일 경우 정보전달을 이벤트 버스(Event Bus) 객체를 만들어 사용한다. (비어있는 Vue 인스턴스를 만들어 사용) 1. created 이벤트 훅을 이용해 Vue 인스턴스가 만들어질 때 $on 메서드를 사용해 이번트 수신 정보 등록 2. 이벤트를 발신하는 컴포넌트에서는 $emit 메서드를 호출 See the Pen [Vue.js] 뷰 이벤트 버스 객체를 이용한 통신 by junheeleeme (@junheeleeme) on Code..
2020.11.12
뷰 컴포넌트 props와 event 예제 Vue 컴포넌트가 부모 - 자식의 관계로 형성되어있을 때 각 컴포넌트 내부의 데이터는 캡슐화되기 때문에 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하기 위해서는 속성(props)을 이용해야 한다. (부모에서 자식으로 단방향으로만 전달 가능, 반대로 자식에서 부모는 이벤트를 이용) SearchContactComponent (부모) ↓ SearchComponent (자식) ContactlistComponent(자식) 1. SearchComponent(자식)가 입력값을 받아서 SearchContactComponent(부모)한테 전달 2. Search-Contact-Component(부모)가 검색 기능을 수행 3. contactlist-component(자식)가 v-b..
2020.11.11
뷰(Vue) 컴포넌트 뷰 컴포넌트란? 화면을 구성할 수 있는 블록(특정 영역)단위를 의미하며, 컴포넌트를 활용하여 화면을 빠르게 구조화하여 일괄적 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 쪼개어 관리하면 나중에 유지보수가 용이하며, 남이 작성한 코드를 보다 직관적으로 이해할 수 있다. 흔히 웹의 구성화면에서 네비게이션 바, 테이블, 리스트 등과 같은 요소들을 잘게 쪼개어 컴포넌트로 관리한다. 전역 컴포넌트(여러 인스턴스에서 공통으로 사용) //인스턴스 //템플릿 전역 컴포넌트 입니다. 우선 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그를 의미하며, 컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다. 지역 컴포넌트(..
2020.11.10
See the Pen [Vue.js] TodoList.app by junheeleeme (@junheeleeme) on CodePen. Vue로 구현한 TodoList.app 예제 Vue.js를 공부하면서 개인적으로 메모앱을 만들려고 일단 포스팅을 했지만.. 아직 완성하지도 못한채 학원 수업진도를 나가면서 메모앱과 비슷한 TodoList예제를 만들어봤다. 교재에서 나온 TodoList예제는 새로고침하면 내용이 사라지는 문제가 있어 TodoList 배열을 로컬스토리지로 저장하는 함수까지 추가했습니다. addTodo(), removeTodo(), doneToggle() 메소드에 setitem을 다 넣어주면 TodoList 추가부터 완료, 삭제까지 로컬스토리지에 저장된다.
2020.11.06
뷰(Vue) 이벤트 처리 Vue.js는 이벤트처리를 v-on 디렉트브를 사용하여 처리하고 '@'로 생략하여 사용가능. 이벤트를 처리하는 메서드는 첫 번째 파라미터로 이벤트 객체를 전달받는다. ex) function(3) { ... } 이벤트 객체는 W3C 표준 모델을 그대로 따르며 추가적인 속성을 제공. 자바스크립트에서 사용하던 이벤트 객체를 거의 대부분 사용가능. 이벤트 객체 주요 속성 target : 이벤트가 발생한 HTML 요소를 리턴함. currentTarget : 이벤트리스너가 이벤트를 발생시키는 HTML 요소를 리턴함 path : 배열값, 이벤트 발생 HTML 요소로부터 documnet, window 객체로까지 거슬러 올라가는 경로를 나타냄 bubbles : 현재의 이벤트가 버블링을 일이키는 ..
2020.11.05
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev