전체 글

📌 mitt 라이브러리 설치FilterBox.vue -> Container.vue -> App.vue 까지 데이터를 전송시켜보자 단순히 바로 위 상위 컴포넌트로 데이터를 전송할 때는 custom event 를 쓰면 됐었다.상위상위 컴포넌트로 데이터로 전송시키고 싶을 때는 mitt 라이브러리를 이용할 수 있다.  1. 터미널을 열고 mitt 라이브러리 설치한다.npm install mitt  2. main.js 에 mitt 라이브러리 등록import { createApp } from 'vue'import App from './App.vue'import mitt from 'mitt'let emitter = mitt();let app = createApp(App)app.config.globalProperti..

📌 slot 으로 부모 -> 자식 데이터 전송법1. 자식은 구멍 뚫기// FilterBox.vue  2. 태그 사이에 데이터 넣기// Container.vue 데이터~~~  데이터~~~ 가 자리에 들어간다.  필터명을 노출시키고 싶다면 {{ filter }}    slot 보다 간단하지만태그 안에 데이터바인딩 할 때만 slot 사용 가능하다. (속성에 바인딩 불가) / HTML 태그처럼만 사용 가능 🔹 Named Slots  : slot 여러 개 사용하는 법1. 자식 컴포넌트에서 2. 부모 컴포넌트에서보낼거보낼거 이름은 자..

📌 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 속성을..

우리가 실습을 통해 만든 Vue 페이지를 다른 사람들도 볼 수 있게 배포하려면 build용 파일을 생성해야 한다.웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있다.=> 브라우저는 .vue 파일을 읽을 수 없다 그래서 build 를 하면 브라우저 친화적인 HTML CSS JS 파일로 바꿔준다빌드 된 것을 웹에 올리면 이제 다른 사람들도 내 사이트를 방문할 수 있다. 📌 Vue 프로젝트 build 하기1. vue 프로젝트에서 터미널 열기2. npm run build or yarn build // 에러가 있으면 build 되지 않음 3. Vue 프로젝트 내 dist 폴더 생성 확인   dist 폴더 안에 index.html , css파일, js 파일이 전부 담겨 있다.build 하면 파일 ..

📌 Hash mode vs HTML mode현재는 아래와 같이 셋팅했다.import { createRouter, createWebHistory } from 'vue-router'const router = [];const router = createRouter({ history: createWebHistory(), routes,})  history: createWebHistory() 로 셋팅했음 요 부분을 다르게 셋팅할 수 있다.import { createRouter, createWebHashHistory } from 'vue-router'const router = [];const router = createRouter({ history: createWebHashHistory(), routes,}..

📌 Nested routes특정 페이지 안에서 route 를 나누고 싶을 땐 nested route 를 쓴다.  /detail/0/author 로 접속하면 작가 소개 페이지로 이동시켜주고 싶다면?/detail/0/comment 로 접속하면 댓글 페이지로 이동시켜주고 싶다면? detail 페이지 안에서 또 페이지를 쪼개는 것을 Nested routes 라고 한다. 컴포넌트를 숨겼다가 보여 주는 식으로 만들어도 되지만,다른 URL 로 나누고 싶다면 nested routes 를 쓴다. children : [ { path: "경로", component: "컴포넌트" }, { path: "경로", component: "컴포넌트" },]  i..

현재 노출되고 있는 블로그 리스트가 3개이니, 상세페이지도 총 3개가 필요하다.이럴 때 활용할 수 있는 것이 URL 파라미터이다. /detail/N 으로 접속하면N번 게시글을 보여주도록 해보자. router.js 의 path 에/detail/:id /:id 를 붙여주면 된다. /detail/:id/:id2/:id3/:id4처럼 파라미터를 여러 개 붙여줄 수 있다.  /detail/아무문자로 접속하면 /detail 로 보내준다는 의미이다(콜론 => 아무문자 의미한다고 생각) // router.js{ path: "/detail/:id", component: Detail,}, /detail/0 으로 접속해도,/detail/1 로 접속해도Detail.vue 를 보여주게 된다.    detail/0 일..

📌 vue-router 설치 / 라우팅 실습1. vue-router4 버전 설치npm run serve 가 실행 중이라면 터미널을 종료 시키고 새로운 터미널을 연다.터미널에 다음을 입력한다. npm install vue-router@4  설치 완료된 것을 확인하려면 package.json 을 확인하자  2. 라우터 파일을 만든다.main.js 에서 라우터 설정을 해야 하는데 코드가 길어서 다른 파일에 만든 후 가져오는 것이 일반적이다.src 파일 밑에 router.js 파일을 만든다. router.js 안에는 아래 코드를 복붙한다. import { createWebHistory, createRouter } from "vue-router";const routes = [ { path: "/경로", ..