코드공부방

Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 컴포넌트 생성 및 등록(2) 컴포넌트 구현 > TodoList TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. /* /src/components/TodoList.vue > */ export default { data(){ return { todoItems: [] } }, created(){ if(localStorage.length > 0){ for(var i = 0; i < localStorage.length; i++){ this.todo..

Vue.js To Do List 만들기 #2 컴포넌트 구현(1) 컴포넌트 생성 및 등록(1) 프로젝트 초기 구성을 완료하였으니 애플리케이션에 필요한 컴포넌트들을 생성하고 등록한다. To Do List에 필요한 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 4개이다. /src/경로 아래에 components 폴더를 생성 후 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일을 생성한다. 각각의 파일을 열어 아래와 같이 컴포넌트의 기본 구조를 잡는다. 각 컴포넌트 명 생성한 컴포넌트를 등록하여 화면에 나타내기 위하여 최상위 컴포넌트인 App.vue에 등록한다. /src/App.vue에 기본적으로 들어있는 ..

Vue.js To Do List 만들기 #1 프로젝트 생성 난 이미 포스팅을 하기 전 책을 보고 한번 쭉 따라 만들어보았다. 지겨운 To Do List 이다. 구글에 "Vuejs to do list" 라고 검색하면 수많은 검색결과가 나온다. 그만큼 간단하지만 매우 중요한 것을 담고 있는 예제라는 것을 증명하는 것이라 생각된다. 실제로 한번 따라해보니 CRUD(Create, Read, Update, Delete)를 모두 경험할 수 있었다. 프로젝트를 통해 경험하는 것이 가장 학습에 도움이 되겠지만 실무에서는 사용 할일이 없다보니 제한적이다. 때문에 사이드 프로젝트를 통해 익숙해져야 하는데 아직은 문법도 익숙치 않으니 To Do List를 한번 더 만들어보려고 한다. 설치, 프로젝트 생성 이 예제에서는 웹팩..

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙 1. HTML 스타일 규칙 1.1 Document Type HTML5를 사용한다. XHTML이 아닌 HTML을 사용한다. 홀태그는 닫지 않는다. 1.2 HTML 유효성 W3C HTML Validator 같은 툴을 활용하여 유효성을 검증한다. 1.3 Semantics 목적(의미)에 맞는 HTML 요소를 사용한다. 생성된 용도에 대하여 태그가 아닌 요소를 사용한다. (예를 들어 표는 표 요소, 단락에는 P요소, 앵커 요소 등..) HTML을 목적에 따라 사용하는 것은 접근성과 재사용 및 코드 효율성에도 중요하다. All recommendations All recommendations 1.4 멀티미디어 대체 멀티미디어를 위한 대체 콘텐츠를 제공한다..

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트 상단, 하단에 모두 고정 메뉴나 콘텐츠가 있는 경우 모바일 환경에서는 콘텐츠를 볼 수 있는 영역이 좁아 부담스러울 수 있다. 따라서 사용자가 스크롤을 올리는지, 내리는지 체크하여 하단고정메뉴를 노출 또는 비노출 처리하여 콘텐츠를 볼 수 있는 영역을 유동적으로 넓힐 수 있다. Scroll check Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ..

무한스크롤 (Infinity Scroll) UI 구현하기 쇼핑몰이나 상품 또는 게시글 목록에서 갯수가 많아지면 자연스럽게 페이징(Page nate, pagenation 등으로도 불리운다) 처리를 하게 된다. 근데 PC에서 쓰이는 페이징 UI를 모바일로 그대로 가져올 경우, 원하는 페이지로 넘어가기 위하여 숫자버튼을 눌러야 하는데 매우 불편하다. 때문에 모바일에서는 보통 상품 목록을 화면에 노출시킬때 Infinity Scroll UI / 무한스크롤 UI를 사용한다. 모든 상품을 한번에 불러올 경우 페이지 로딩 속도에도 문제가 생기기 때문에 최초 특정 갯수 만큼만 노출 로드시킨 뒤, 사용자가 스크롤을 하면서 최초 노출시킨 목록을 다 보게되면 또 특정 갯수만큼의 목록을 로드하여 사용자로하여금 별도의 행동없이 ..

구글 로그인 인풋박스(Google Login Inputbox) UI Clone 오래전부터 구글의 로그인폼을 보면 쌈박하다는 생각이 들었다. 요즘은 꽤 대중화된(?) 방식이지만 자칫 딱딱해보일 수 있는 form label에 저런 인터랙션을 넣을 생각을 하다니.. (구글이 최초로 시도한 건지는 모르겠지만..) 혹시 네이버나 다음도 내가 인지하지 못하고 있는 사이에 바뀌었을까? 라는 생각에 로그인 페이지에 들어가보았다. 하지만 아주 오래전부터 사용하던 그 것. 내가 알고 있는 form의 딱딱함. 그대로였다. (그 와중에 다음은 로그인페이지에 광고까지 붙여놓았다ㅠㅠ) 물론 로그인페이지의 form에 꼭 인터랙션을 넣는 것이 좋다고 할 수는 없으니 이 얘기는 여기까지 하는걸로 하고 오늘은 구글의 로그인페이지 Inp..

HTML 구글 스타일가이드 자세히보기 #intro HTML 마크업에도 스타일가이드가 있을까? 당연히 존재한다. HTML 마크업 작업도 여러 작업자가 협업하여 진행하는 경우가 발생하기 때문에 일관된 스타일로 코드를 유지하기 위해서는 CSS와 마찬가지로 작성 규칙이 필요하다. 사실 CSS와 비교하면 HTML마크업에는 많은 규칙이 필요하진 않는다. 지금 머릿속에 어떤 규칙들이 있을지 떠올려봐도 떠오르는 것이라고는 들여쓰기, 따옴표, 뭐 어떤 태그의 사용 정도? (애초에 HTML코드를 작성하는 방식(?)이 다양하지도 않다) 그래서 구글 HTML 스타일 가이드에는 어떤 내용들이 있는지 자세히 보았다. GOOGLE CSS 스타일 가이드와 마찬가지로 구글에서 제공하는 공식 스타일가이드 문서를 참고하였고, 최대한 해당..