본문 바로가기

HMWK122

[Vue.js] Nested routes 와 push 함수 사용해보기 💡 실습 포인트! 💜 nested routes 사용해보기 /detail/0/author 경로로 접속하면, detail 페이지 내에 작성자를 보여주고, /detail/0/comment 경로로 접속하면 detail 페이지 내에 댓글을 보여주는 등 route 로 나눈 페이지 안에 또다시 route 로 나눈 페이지를 보여줄 수 있다. 그리고 이렇게 특정 페이지 내에 또 route 를 나누는 것을 nested routes 라고 한다. 물론 모달창처럼 UI 만드는 방법을 활용해도 유사하게 구현할 수 있긴 하지만, 이렇게 URL 을 나눠두면 앞으로가기 혹은 뒤로가기 버튼이 동작한다는 장점이 있다. 따라서, 필요에 따라 nested routes 를 사용해보면 좋을 것 같다. 🤍 nested routes 코드 작성하기 .. 2022. 4. 5.
[Vue.js] URL 파라미터를 활용한 상세 페이지 만들기 💡 실습 포인트! 파라미터 문법을 사용하여 각 데이터 순서에 맞는 상세 페이지를 만들어주었다. 💜 파라미터 문법의 필요성 알아보기 상세 페이지를 만들려면 URL 을 어떤 식으로 작성하면 좋을지에 대한 고민이 필요하다. 보통 블로그나 쇼핑몰같은 사이트를 들어가면 상세 페이지는 보통 /seoyun/0, /seoyun/1, /seoyun/2 ... 이런식으로 디자인되어있다. 그래서 마지막 부분이 0 으로 끝나면 0 에 해당하는 페이지를, 1 로 끝나면 1에 해당하는 페이지를 보여주는 식인 것이다. const routes = [ { path: '/detail/0', component: Detail, }, { path: '/detail/1', component: Detail, }, { path: '/detail/.. 2022. 4. 5.
[Vue.js] vue-router 설치 후 라우팅하기 💡 실습 포인트! 💜 vue-router 설치 및 셋팅하기 페이지를 여러 개 만들고 싶을 때 Router 라는 것을 사용한다. Vue 에서는 vue-router 라는 라이브러리를 설치하면 Router 를 이용할 수 있다. 🤍 vue-router 4 버전 설치하기 npm install vue-router@4 위와 같이 터미널에 입력해서 vue-router 4 버전을 설치한다. yarn 이 설치되어있다면 npm install 대신에 yarn add 를 이용해도 된다. vue-router 를 설치하기 전에 만약 npm run serve 를 입력하여 프로세스가 진행중이라면 이 프로세스를 종료한 다음에 진행해주어야 에러가 발생하지 않는다. 🤍 router.js 파일 만들기 import { createWebHist.. 2022. 4. 5.
[Vue.js] 데이터바인딩을 통해 블로그 글목록 만들기 💡 실습 포인트! 데이터를 JavaScript 파일에 저장하여 export / import 해준 다음 props 문법을 활용하여 원하는 Component 로 데이터를 전송 및 등록한 후에 데이터바인딩을 해주었다. 데이터바인딩이 목적이었기 때문에 상단메뉴는 Bootstrap 을 이용해서 만들고, 전체적으로 심플하게 디자인을 해주었다. 💜 블로그 글목록 레이아웃 만들기 블로그 글목록을 보여주는 List 라는 Component 를 만들어서 App.vue 에 보여주기로 정했다. 이는 props 문법을 이용하면 되는 것이라 복습도 할겸 강의 듣기 전에 혼자서 먼저 진행해보았다. 🤍 List.vue 파일 만들어 코드 작성하기 블로그 글 제목 블로그 글 날짜 블로그 글 제목 블로그 글 날짜 블로그 글 제목 블로그 글.. 2022. 4. 5.
[Vue.js] Blog 프로젝트 생성하기 및 Bootstrap 사용하기 💡 실습 포인트! 💜 Blog 프로젝트 생성하기 vue-router 를 배우기 위해 Blog 프로젝트를 새로 만들어주었다. Vue 설치 및 프로젝트 생성, 개발환경 셋팅방법은 이전에 포스팅한 적이 있으므로 이 포스팅에서는 설명하지 않는다. (Vue 설치 및 프로젝트 생성, 개발환경 셋팅방법이 궁금하다면 여기를 클릭!) 💜 Bootstrap 설치하기 이번에는 vue 에서 Bootstrap 라이브러리를 이용해보았다. Bootstrap 은 웹페이지에 필요한 버튼, 메뉴, 카드, 리스트 등의 레이아웃을 쉽게 코드를 복사-붙여넣기하는 방식으로 만들 수 있도록 도와주는 라이브러리이다. Bootstrap 을 설치하는 방법은 다음과 같다. css.js 파일을 복사-붙여넣기하여 설치하기 터미널에서 npm 을 이용하여 설.. 2022. 4. 5.
[Vue.js] Vue 의 라이프사이클 활용하기 💡 실습 포인트! 💜 과제 1. 메인 페이지 접속하면 매 1초마다 할인 배너의 퍼센트를 1%씩 감소시키기 30초까지 기다리는 것을 GIF 로 캡처하기엔 무리가 있어서 5초만 카운트하는 걸로 수정했다. 💜 과제 2. 모달창의 input 에 2를 기입하면 알림창 띄우고 강제로 input 공란 만들기 1을 입력했을 때는 정상적으로 총 금액과 함께 출력되지만, 2를 입력하면 input 창은 공란으로 나오고, 알림창이 뜨는 것을 볼 수 있다. 💜 Vue 의 라이프사이클 알아보기 Vue 공식문서를 살펴보면, 위와 같이 Component 의 생성, 소멸 혹은 업데이트되는 과정을 step 별로 그려서 Lifecycle 을 설명하는 부분이 있다. 그리고, 위의 과정을 이해하면 이제 Lifecycle hook 이라는 것을.. 2022. 4. 4.
[Vue.js] 데이터 원본 보존의 필요성 이해하기 및 상품 정렬 기능 만들기 💡 실습 포인트! 오늘은 각종 정렬 기능 버튼과 필터 기능 버튼, 원래대로 버튼을 만들어보았다. 해당 기능들은 이전에 React 실습을 할 때 한번씩 구현했던 부분이기도 하고 이제는 쉬워서 별도로 설명을 붙이지는 않았다. (혹시나 해당 기능의 내용에 대해 자세히 보기를 원하시는 분은 여기를 클릭!) 💜 "가나다순정렬" 버튼 및 기능 만들기 🤍 코드 작성하기 가나다순정렬 titleSort(){ this.rooms = [...this.roomsOriginal].sort((a,b) => { if (a.title > b.title) return 1; if (a.title < b.title) return -1; return 0; }) } 🤍 브라우저로 미리보기 💜 "가격순정렬" 버튼 및 기능 만들기 🤍 코드 작성.. 2022. 4. 4.
[Vue.js] Vue 에서 UI 애니메이션 효과 주기 💡 실습 포인트! 이번에는 Vue 에서 제공하는 transition 을 이용한 애니메이션 효과주는 방법을 포함하여 총 2가지 애니메이션 효과를 주는 방법을 공부해보았다. 기본적인 방법으로 애니메이션 효과를 줄 때는 투명도만 0에서 1로 바뀌도록 애니메이션 효과를 줘보았고, transition 을 사용할 때는 모달창이 위에서 내려오고, 닫을 때에는 아래로 사라지도록 애니메이션 효과를 줘보았다. 나는 분명히 transition 을 이용해 애니메이션 효과를 추가한 것뿐인데, 기존에 잘 작동하던 닫기 버튼이 작동하지 않고 에러가 발생해서.. 구글링하고 에러를 수정하느라 한참 걸렸다. 그래서 모든 수정을 마친 후에 여기저기 눌러보면서 에러가 발생하지 않는지 확인까지 한 후에야 마음을 놓을 수 있었다. 💜 들어가기.. 2022. 4. 3.
[Vue.js] watcher 로 데이터 감시하기 💡 실습 포인트! 이제 1~36 사이의 숫자를 입력하면, 해당 개월 수에 맞는 금액을 자동으로 계산하여 표시해준다. 영어든 한글이든 문자를 한 개라도 입력할 경우, 상단에 "숫자만 입력하세요." 라는 알림창을 띄워준다. 입력한 개월 수가 1보다 작으면 "최소 1개월부터 선택 가능합니다." 라는 알림창을 띄운 후 months 를 다시 입력할 수 있게 공란으로 바꿔주고, 입력한 개월 수가 36개월보다 크면 "최대 36개월까지 선택 가능합니다." 라는 알림창을 띄운 후 months 값을 36개월로 바꾸어준다. 💜 들어가기 전에 사용자가 에 입력하는 데이터는 무조건 String 타입의 문자열에 해당한다. 즉, 사용자가 123 을 입력했다고 해도 저장되는 값은 '123' 이 되는 것이다. 만약 문자열을 강제로 숫.. 2022. 4. 3.
[Vue.js] 사용자의 input 받아오기 💡 실습 포인트! 사용자가 에 무언가를 입력하면 그것을 가지고 여러가지 UI 기능을 만들 수 있다. 오늘은 그 중에 상품 수량 변경 기능과 총 금액 계산 기능을 만들어보았다. 💜 사용자가 입력한 정보를 data 보관함에 저장해보기 🤍 에 입력된 데이터를 받아와 저장하기 사용자가 입력한 정보에 따라서 특정 부분을 실시간으로 바꾸고 싶으면 data 보관함에 data 로 저장해두고 필요할 때 데이터바인딩을 하면 된다. {{months}}개월 선택: {{ rooms[clickedRoom].price * months }}원 따라서, 사용자가 에 입력한 값을 data 로 저장하고 싶으면 위와 같이 코드를 작성하면 된다. @input 은 @click 과 마찬가지로 이벤트 핸들러인데, 다만 사용자가 input 에 무언.. 2022. 4. 3.
[Vue.js] Component 만들기 💡 실습 포인트! 기존에 App.vue 에 있던 내용들을 Component 로 만들어 옮기면서 정말 많은 에러를 보았다. 강사님이 Component 로 많이 쪼개놓으면 데이터바인딩해둔 부분들을 props 로 보내기 힘드니까 만들기 전에 꼭 "만들면 얻을 수 있는 이익" 을 생각하고 만들어야 한다면 각오하고 만들라고 하셨는데.. 겪어보니 그 이유를 알 것 같다. 💜 Component 알아보기 Component 란 특정 HTML 태그 덩어리를 한 글자로 축약하여 사용할 수 있게 도와주는 문법을 의미한다. Vue 의 업데이트로 인해 Component 에 해당하는 vue 파일은 2단어 이상으로 구성되어야 에러가 발생하지 않게 되었다. 예를 들어, 기존에는 Component 파일의 이름으로 Discount.vue.. 2022. 4. 2.
[Vue.js] 모달창 내에 상세 페이지 만들기 💡 실습 포인트! 이번에는 클릭한 상품의 상세 페이지를 모달창 내에 보여줄 수 있도록 만들어보았다. 진짜 부동산 어플처럼 상품마다 여러개의 사진을 썸네일로 보여주고 클릭하면 크게 볼 수 있도록 구현해보면 더 재미있었을 것 같다. 이건 별로 어렵지 않게 가능할 듯! 💜 모달창 내에 상세 페이지 만들기 🤍 하드코딩으로 모달창 내에 첫 번째 상품의 상세 페이지 만들기 데이터바인딩을 어떻게 해야할지 감을 잡기 어렵다면 먼저 하나만 데이터바인딩을 해보면서 어떤 부분을 수정하면 다른 데이터도 똑같이 적용을 할 수 있을지 감을 잡는 것이 중요하다. { id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/ro.. 2022. 4. 1.

티스토리툴바