테라시아의 웹개발일기

Component(advanced)     Component는 상위-하위의 개념을 갖는다.     데이터 이동이 자유롭기 때문에 코딩이 쉬운 반면,     오류 발생 시 원인을 찾기가 매우 힘듬     => 규칙을 세우게 됨        데이터의 흐름은 상위 -> 하위 => props        하위에서 상위로 데이터 전송을 하려면? -> 이벤트 사용 ☆ Code Component Advanced

Axios     Vue에서 권장하는 Http 통신 라이브러리     Vue-router와 마찬가지로 설치 또는 CDN을 통해 사용 가능          axios를 활용하여 user-list를 화면에 구현     json 데이터 제공 사이트 : https://jsonplaceholder.typicode.com/users/ ☆ Code Axios Users 데이터 가져오기 {{ users }} --> {{ user.address }} {{ user.name }} ..

1. Vue Router     Vue.js 라이브러리를 사용하여 싱글 페이지 어플리케이션(SPA)     Vue Router를 사용하면 Vue로 만든 페이지 간 자유로운 이동 가능     Vue Router 사용 방법     1) npm install vue-router     2)      Vue Router 구현                  url이 변경됨에 따라 해당 컴포넌트 display         이동표시글자         페이지 이동 태그, 화면에서는 태그의 역할         to는 a 태그의 href의 역할 수행 ☆ Code Router Test Page 로그인하지마 궁금해하지마

☆ Code Celsius vs. Fahrenheit 섭씨 = 화씨

form 요소 활용하기     form 요소와 데이터 간의 연결은 v-model로 양방향 바인딩     text, 는 value 속성, input 이벤트     checkbox, radio는 checked 속성, change 이벤트     select는 value를 속성으로, change 이벤트 ☆ Code Form Component 입력된 메시지 : {{ message }} 입력된 여러 줄의 메시지 {{ message2 }} {{ checked? '클릭함':'해제함' }} 여러분이 좋아하는 아티스트를 모두 고르시오. Pica..

class 속성 변경하기     class 속성의 특징 : 여러 개의 클래스를 중복해서 적용 가능     v-bind:class={ 클래스명: 값, 클래스명2: 값2 } ☆ Code Title One Test String 빨간글자   굵은글자   큰글자   3? true:false }">Test String2 I am a student

methods, computed, watch     methods : 실행할 때마다 실행되는 함수 모음     computed : 변수의 값이 변하지 않으면 다시 실행하지 않고                caching된 값을 그대로 리턴     watch : 특정한 변수의 값이 변경되는지 모니터링 ☆ Code Watch를 통한 무슨 질문이든 받기 Yes/No로 대답할 수 있는 질문을 해보십시오. {{ answer }}

Component     코드 재사용을 위해 각 단위를 독립적으로 구성하는 것     생성 방법         Vue.component('컴포넌트명', 내용)         Vue.component('todo-item', {             template: '오늘의 할 일'         });                                ☆ Code Vue.js Components

v-model : 양식에 대한 입력 과 앱 상태를 양방향으로 바인딩 ☆ Code Vue.js v-model {{ myMessage }} {{ 1 + 3 }} {{ 5 > 3? 'a':'b' }} {{ myMessage + "입니다"}} {{ yourMessage }} {{ yourMessage2 }} {{ yourMessage3 }} Apple

Docker 사용을 위해 우선 회원가입을 해야한다. https://hub.docker.com/  회원가입을 완료하고 데스크탑용 Docker를 다운로드 받는다. https://docs.docker.com/desktop/setup/install/windows-install/  나는 X86기반의 Windows를 사용하고 있기 때문에 해당 파일을 다운로드 받는다.  해당 파일을 실행한다.  처음 실행하면 데스크탑에 바로가기를 추가할 것인지 물어본다. 원한다면 체크하고 OK를 눌러준다.  설치를 진행한다.  설치를 완료하면 윈도우를 재부팅해야 한다고 뜬다. 버튼을 누르기 전에 작업중인 모든 파일을 저장 및 종료 한 뒤에 누르자.  바탕화면에 이러한 아이콘이 뜨고  이용정책에 동의를 해준다(Accept).  추천 ..