![]()
📌 Tab 만들기// App.vue 내용0 내용1 내용2 버튼0 버튼1 버튼2 data () { return { data, moreNum : 0, step : 0 // tab 구분값 }} step 이 0이면 내용0 이 노출,step 이 1이면 내용1 이 노출된다. 버튼에 클릭이벤트를 넣음으로써 step 의 state 를 변경시켜준다. ⚡ 여러 페이지를 만들 때 vue-router 를 써도 되지만 간단한 UI 는 탭으로 만들어도 된다.⚡ 중요한 데이터들은 웬만하면 상위 컴포넌트에 저장하자 (App.vue) 📌 서버 없이 업로드한 이미지 다루기 / URL.createObjectURL()이미지 업로드한 걸 HTML 에 보여주려면 업로드 한 걸 서버로..
![]()
더보기 버튼을 만들어서 서버에 요청하는 방법을 실습해보자. GET 요청 : 데이터 서버에서 가져올 때POST 요청 : 서버로 데이터를 보낼 때 GET or POST 요청하면 브라우저가 새로고침됨ajax 를 쓰면 새로고침 없이도 GET or POST 요청이 가능하다. 🔎 AJAX 요청하려면 ?1. axios 라이브러리 사용2. 기본 fetch 함수 사용(호환성 때문에 대부분 1번 사용) 📌 axios 설치하기1. 미리보기 띄운 것이 있다면 끄고 터미널 열기2. npm install axios (에러나면 yarn add axios) 📌 axios 로 ajax 요청하기실습 전 더보기 버튼을 미리 만들어두자.더보기 버튼을 누르면1) 서버에서 추가 게시물을 가져오고2) 그 게시물을 컴포넌트에 노출시킨다 ..
![]()
part3 는 복습 & 새로운 개념 적용을 하며 프로젝트를 만드는 것이기 때문에 프로젝트에 필요한 개념 & 코드만 정리하고 넘어가려고 한다.직접 실습하는 것이 제일 실력이 향상된다. 📌 뷰스타그램(vuestargram) 레이아웃 생성프로젝트명을 vuestagram 으로 생성했다.레이아웃 구성은 App.vue 안에 Container.vue 가 있고, Container.vue 안에 Post.vue 가 있다.html, css 를 적용하고 화면에 노출시킬 데이터를 app.vue 에서 import 하고 데이터 바인딩 & props 를 적용했다. 잘 적용되었다. 아직 이미지는 데이터 바인딩 하기 전이다. 📌 stylge 속성 데이터 바인딩style="" 여기에 object 데이터 형태로 여러가지 css 속성을..
