본문 바로가기

34

[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 하위 컴포넌트 기능 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List)의 하위 컴포넌트 기능을 구현하는 과정입니다. 투두 리스트(Todo List) 구현하기 사전 준비 아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 투두 리스트 레이아웃(Todo List Layout) 구현하기: https://logs-jejustone.tistory.com/37 혹시라도 위에서 언급한 개념이 잘 기억나지 .. 2022. 12. 22.
[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - UI, 레이아웃(Layout) 구성/구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List) Layout을 구현하는 과정입니다. 투두 리스트 레이아웃(Todo List Layout) 구현하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5) 혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조.. 2022. 12. 21.
웹(Web)에 구글 폰트(Google Font) 적용/사용하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 구글 폰트(Google Font) 적용/사용하는 방법 웹(Web) 어플리케이션을 개발하면서 파일을 다운받지 않고 구글 폰트(Google Font)를 적용하는 과정입니다. 결과 이미지 Before After 적용 방법 1. 구글 폰트(Google Font) 공식 사이트로 접속합니다. 주소: https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 사용.. 2022. 12. 20.
[실습] 뷰(Vue)로 투두 리스트(Todo list) 구현하기 - 기획/설계하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "투두 리스트 (Todo list) 만들어보기!" 입니다. 투두 리스트를 만들기에 앞서 레이아웃과 기능에 대해서 간단하게라도 기획/설계하는 과정이 필요합니다. 본 게시글에서 다루는 사항은 투두리스트(Todo List) 중에서도 기능 구현하기 위해 기획/설계하는 과정입니다. 투두 리스트 (Todo List) 기획/설계하기 다양한 종류의 투두 리스트가 있으나 가장 기본적인 항목 추가, 수정, 삭제, 전체 삭제 기능을 위주로 기획하였습니다. UI/UX 기능 Todo를 구성하는 각 요소에 대한 설.. 2022. 12. 19.
[실습] 뷰(Vue)로 계산기 구현하기 - 웹(WEB)에 계산기 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "계산기 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 지난 게시글에서 다룬 웹 어플리케이션에 계산기를 올리기 위한 준비를 하는 과정입니다. 계산기 구현하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5) 혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다. 뷰 라우터(Vue Router) - .. 2022. 12. 15.
[실습] 뷰(Vue)로 계산기 구현하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 오늘의 Vue.js 실습 목표는 "계산기 만들어보기!" 입니다. 계산기 기능을 구현하기 위해서는 뷰 인스턴스 상태(Vue Instance State) 개념을 필수적으로 공부하고 구현해야 합니다.본 게시글에서 다루는 사항은 계산기를 구현하는 과정입니다. 계산기 구현하기 본 실습을 진행하면 기본적인 HTML과 CSS, 나아가 뷰의 인스턴스 상태(Vue Instance State) 중에서도 기본적인 data, methods에 대해 공부해볼 수 있습니다. 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링.. 2022. 12. 14.