vue3

더보기 버튼을 만들어서 서버에 요청하는 방법을 실습해보자. 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: "/경로", ..

부트스트랩을 설치했으니 부트스트랩을 활용하여 블로그 글 목록을 만들어보자.블로그 레이아웃은 https://getbootstrap.com/docs/5.3/examples/album/ Album example · Bootstrap v5.3This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. View Edit 9 minsgetbootstrap.com을 활용 하였다. 우클릭 > 페이지 소스 보기를 클릭하면 소스를 볼 수 있다.이미 npm 으로 부트스트랩을 설치했으니 필요한 html 만 붙여넣기 하면 된다.  나는 main 태그 안의 내용..

라이프사이클에 대한 자세한 설명은 공식사이트에 기재 되어 있다. vue 공식 사이트:https://ko.vuejs.org/guide/essentials/lifecycle Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.orghttps://ko.vuejs.org/api/options-lifecycle.html Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org   크게 3단계로 보면된다 1. create 단계데이터만 존재하는 단계 (HTML 생성 전)2. mount 단계 사이에 있던 것들을 실제 HTML 로 바꿔준다.3. 컴포넌트 생성index.html 에 장착하는 단계(4. 업데이트 단계) da..

📌 버튼 누르면 상품이 가격순으로 정렬되도록 하기🔎 vue 는 {{데이터바인딩}}을 해 두면, 데이터가 변경 사항이 생길 시 HTML 에도 자동으로 실시간 반영되도록 한다.즉, 데이터를 변경만 시키면 된다. 1. 정렬 버튼 만들기가격순 정렬  버튼을 누르면 prodList 라는 상품데이터를 가격순으로 (낮은가격 -> 높은가격) 재정렬 시켜보자!그러려면 일단 클릭 이벤트를 바인딩 해야 한다. 2. 클릭 이벤트 기능 부여버튼을 클릭하면 priceSort 라는 함수가 실행되도록 하고가격순 정렬 mothods: {} 에 priceSort 함수를 추가하자.methods: { // [허위매물신고] 버튼 클릭 시 신고 수 증가 increase(i) { // 함수 내용 입력 this.c..