🧶 𝗪𝗲𝗯

    [to-do-app] TodoList 컴포넌트 구현
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] TodoList 컴포넌트 구현

    TodoList 컴포넌트 구현 Life Cycle https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html 라이프사이클 훅 | Vue.js 라이프사이클 훅 Note 모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩되어 있으므로, data, computed 및 methods 속성에 접근할 수 있습니다. 즉, 화살표 함수를 사용해서 라이프사 v3.ko.vuejs.org // vue life cycle created() { console.log("created"); // 로컬스토리지에 데이터가 있다면 if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if ..

    [to-do-app] TodoInput 컴포넌트 구현
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] TodoInput 컴포넌트 구현

    TodoInput 컴포넌트 구현 v-model https://kr.vuejs.org/v2/guide/forms.html 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org v-model : 디렉티브를 사용하여 Input 창과 text Element 사이에서 양방향 바인딩이 가능하게 한다. v-model 을 사용하면 input 창에 입력한 문자열을 바로 element에 바인딩이 가능하며, 이는 스크립트 단에서 변경을 해도 적용이 됩니다. 즉, 동기화가 된 상태라고 보시면 됩니다. 좌측에 input 창에 hello 를 입력하니 우측 스크립트 단에 data인 [newTodoItem]이 변경된 것을 볼 수 있습니다. 아래는 코드입니다. components/..

    [to-do-app] TodoHeader 컴포넌트 구현
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] TodoHeader 컴포넌트 구현

    TodoHeader 컴포넌트 구현 componets/TodoHeader.vue To Do It! ✨ style 태그에서 scoped 를 하면 글로벌하게 적용되는 것이 아니라 SPA 로 하나의 파일에만 적용이 됩니다. css 는 cascading style sheet 로 전체로 적용이 되는데 해당 soped 키워드로 인해서 그게 무시가 되는 것입니다. src/App.vue App.vue 파일도 css 를 적용시켜 줍니다. 결과 화면 결과 화면입니다. vue 투두앱 vue todo

    [to-do-app] 파비콘, 아이콘, 폰트, 반응형 태그 설정하기
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] 파비콘, 아이콘, 폰트, 반응형 태그 설정하기

    반응형 태그 https://www.w3schools.com/css/css_rwd_viewport.asp Responsive Web Design Viewport W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com "viewport meta" 라고 구글링하면 위와 같은 사이트가 나옵니다. 위 코드를 불러들어와 [public/index.html] 코드 head 사이에 붙여 넣습니다..

    [to-do-app] Vue 컴포넌트 생성 및 등록
    🧶 𝗪𝗲𝗯/Vue

    [to-do-app] Vue 컴포넌트 생성 및 등록

    컴포넌트 생성 및 등록 우선 vue-cli 로 뷰 프로젝트를 만들면 생성되는 컴포넌트를 지워주겠습니다. 해당 파일은 components/ 폴더 밑에 있습니다. 또한 App.vue 파일도 기본 형태만 남기고 다 지워주겠습니다. App.vue 컴포넌트를 등록할 때 총 4가지로 등록할 수 있습니다. 보통 두번째나 세번째 방법을 선호합니다. TodoHeader.vue header TodoInput.vue input TodoList.vue list TodoFooter.vue footer 컴포넌트 생성 및 등록 결과 화면입니다.

    [memo-app] Firebase 6.데이터 저장과 출력
    🧶 𝗪𝗲𝗯/Firebase

    [memo-app] Firebase 6.데이터 저장과 출력

    생성되는 메모 데이터 let txt = $(".textarea").val(); // 본문 let createDate = new Date().getTime(); // 작성일 $(".textarea").val() 메소드를 사용하여 textarea 클래스의 내용 값을 가져올 수 있습니다. createDate 변수에는 타임 값을 넣도록 하겠습니다. (추후에 올바른 생성일을 넣는 코드 포스팅을 하도록 하겠습니다.) // 새로운 메모 내용 let memo = { txt: txt, createDate: createDate, }; 데이터의 저장될 메모의 json 은 다음과 같은 형태를 띄고 있습니다. 새로운 키 생성하기 // 새로운 랜덤 키 생성 var newMemoKey = database.ref().child("m..

티스토리툴바