(2021.02.24) 더보기 초심을 잃고 2월은 너무 놀아버렸다.. 겨울방학 마지막 웹개발 공부를.. 했다.. 1학기엔 더 열심히 해야지 | props 와 이벤트 전달을 이용해 해야할 일 입력 기능 개선하기 | TodoInput 컴포넌트와 TodoList 컴포넌트 수정하기 propsdata 로 바꿔주어서 새로고침을 하지 않고도 바로 목록이 갱신되도록 만들어줌 | 이벤트 전달을 이용하여 Clear All 버튼 기능 개선하기 1. 상위 컴포넌트 코드 수정하기 2. 하위 컴포넌트 코드 수정하기 | 이벤트 전달을 이용해 할 일 삭제 기능 개선하기
(2021.02.02) cd C:\Users\USER\Desktop\doit\vue-todo\vue-project npm run dev 서버 구동해주기 | 저장된 할 일 목록을 표시하는 TodoList 컴포넌트 할일 목록 만들기 이렇게 하면 텍스트 값을 하나하나 직접 입력해야해서 별로다. 로컬 스토리지의 데이터 개수만큼 목록에 추가해서 표시하는게 훨씬 좋다. 로컬 스토리지 데이터를 뷰 데이터에 저장하기 뷰 데이터의 아이템 개수만큰 화면에 표시하기 + style 태그 추가 요런식으로 리스트에 추가되는 것을 볼 수 있다 | TodoList.vue 에 할 일 삭제 기능 추가하기 할 일 목록 & 삭제 버튼 마크업 작업하기 할 일 삭제 버튼에 클릭 이벤트 추가하기 휴지통 버튼을 클릭하면 콘솔창에 clicked 라..
(2021.01.27) 컴포넌트 내용 구현하기가 이번 목표이다. TodoHeader: 애플리케이션 이름 표시 TodoInput:해야 할 일 입력 및 추가 TodoList: 해야할 일 목록 표시 및 늑정 할 일 삭제 TodoFooter: 해야할 일 모두 삭제 | 애플리케이션 제목을 보여주는 TodoHeader 컴포넌트 애플리케이션 제목 추가하기 CSS로 제목 꾸미기 | 해야할 일을 입력하는 TodoInput 컴포넌트 인풋 박스와 버튼 추가하기 텍스트를 저장하기 위한 버튼 이벤트 추가하기 입력받은 텍스트를 로컬 스토리지에 저장하기 인풋박스에 다시 문자 입력하고 추가버튼 클릭하면 크롬 개발자 도구 Application > LocalStorage > http://localhost:8080 에 값이 저장된다. a..
(2021.01.27) | 뷰 CLI를 이용한 프로젝트 생성 프로젝트 초기 구성을 위해서 뷰 CLI로 프로젝트를 생성한다. cd 명령어로 들어가주고 vue init webhack vue-project 로 프로젝트를 만들어줌 물어보는 질문들에 대해서 대답을 했다... 아니 책에는 license 랑 sass 이런거 물어보던데 나는 다른거 물어봐서 당황함 구글링해도 안나왔음.. 아무튼 대답을 하면 이제 프로젝트를 만들어준다. 쭉 설치가 진행되고, 이제 npm install 명령어를 입력해서 package.json 파일에 등록된 자바스크립트 라이브러리를 모두 다운받아준다. cd vue-project 명령어를 입력한다. npm run dev 명령어를 입력해서 실행해준다. | 프로젝트 초기 설정 반응형 웹 디자인 ..
(2021.01.23) | 뷰 CLI 설치하기 싱글 파일 컴포넌트 체계를 사용하기 위해서 CLI 도구를 이용할 수 있다. CLI 는 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구이다. CLI 에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있다. 크게 3가지 단계를 거쳐 뷰 CLI를 설치하여 편하게 프로젝트를 구성할 수 있다!! 1. node.js 설치하기 2. npm 설치하기 3. 뷰 CLI 설치하기 1. node.js 설치하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine...
(2021.01.18) 뷰 라우터도 어려웠다.... 너무 복잡하다.... 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 라우팅 : 웹 페이지 간의 이동방법 라우팅을 이용하면 화면 간의 전환이 매끄럽고, 애플리케이션의 사용자 경험을 향상시킬 수 있다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하고 있다. 뷰 라우터 태그 설명 페이지 이동 태그 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시 태그 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 1. 각 는 화면 상에서 Main 컴포넌트로 이동, Login 컴포넌트로 이동 이라는 버튼 태그로 변환되어 표시된다. 이 버튼을 클릭하면 to="" 에 정의된 텍..
(2021.01.12) 이 책으로 공부하면서 가장 이해하기 어려웠던 부분이다. 앞부분은 전에 공부했던거랑 내용이 비슷했는데 이거는 처음 보는 부분이라 그런건지 한번에 이해하기 어려웠다... 정리해놓고 여러번 읽어봐야할 것 같다. book.naver.com/bookdb/book_detail.nhn?bid=13256615 Do it! Vue.js 입문 Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j book.naver.com 참고도서: 두잇뷰입문 상 하위 컴포넌트 관계 뷰 프레임워크 자체에서 컴포넌트는 각각의 범위가 있기 때문에 직접 다른 컴..
(2021.01.12) 두잇뷰입문 책의 3-2장은 뷰 컴포넌트에 관한 내용이다. book.naver.com/bookdb/book_detail.nhn?bid=13256615 Do it! Vue.js 입문 Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j book.naver.com 참고 도서: 두잇뷰입문 뷰 컴포넌트 뷰 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 전역 컴포넌트: 여러 인스턴스에서 공통으로 사용가능 지역 컴포넌트: 특정 인스턴스에서만..
(2021.01.12) vue의 가장 기본인 뷰 인스턴스와 컴포넌트를 공부했다. 3장도 생각보다 양이 적었다. 진짜 하루 2시간 7일 완성 가능한 책일지도 모르겠다는 생각이 들었다.... book.naver.com/bookdb/book_detail.nhn?bid=13256615 Do it! Vue.js 입문 Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! 실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! 실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.j book.naver.com 참고도서: 두잇뷰입문 뷰 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다. 뷰 인스턴스 형식 new Vue ({ ... ..
(2021.01.11) Vue.js 공부를 위해 뷰 개발자 도구를 설치하고, 뷰 개발자 도구를 열려고 했는데 계속 이렇게 뜨면서 뷰 개발자 도구가 열리지 않았다... 계속 끙끙대다가 이것저것 눌러보고, 책을 뒤져보다가 해결법을 찾았다!! 크롬 > 도구 더보기 > 확장 프로그램 으로 들어간다. 파일 URL에 대한 액세스 허용에 체크해주면 된다!
(2020.11.02) HTML, CSS, java script의 기본적인 지식들을 가지고 vue.js 공부를 해보려고 한다!! 그런데 vue 설치부터 막혀서 지금까지 배운 것들을 이용해서 나만의 웹의 토대를 만들어 보았다. 요즘 핸드폰 어플리케이션을 보니까 계좌랑 카드에 연결해서 알아서 가계부를 써주는 게 있었다. 거기에서 영감을 받아서 나는 자발적으로 작성하고 생각하는 소비 관리 WEB을 만들기로 결심했다. 웹의 공식적인 명칭은 아직 생각하지 못했고 일단은 소비 관리 WEB으로 부르기로 했다. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 ..