Vue3/코딩애플 part2

우리가 실습을 통해 만든 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 태그 안의 내용..

라우터 기능들을 배우기 위해 새로운 프로젝트를 생성한다.프로젝트들이 담긴 폴더를 에디터로 오픈하고, 터미널에 명령어를 입력한다.blog_review 라는 이름으로 프로젝트를 생성했다.vue create 프로젝트명  이제 생성한 프로젝트를 에디터로 다시 open 한다. (blog_review 오픈) 📌 bootstrap 설치▼ 자세한 다운로드 방법https://getbootstrap.com/docs/5.3/getting-started/download/ DownloadDownload Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Rub..