[개발] Practice/Vue.js32 [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. [Vue.js] import / export 사용하여 데이터바인딩하기 💡 실습 포인트! data.js 파일을 만들어 데이터를 담아준 다음 import / export 문법을 사용하여 App.vue 파일로 데이터를 불러와 데이터바인딩을 해보았다. 이제 그 다음에는 모달창에 데이터바인딩을 진행해볼 것이다. 그나저나 허위매물신고 버튼에 왜 커서를 올리기만 하고 클릭을 안했지..? 괜히 기능 작동 안하는 것처럼 보이게... 💜 사용할 상품 데이터 미리보기 [{ id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000 }, { id : 1, title: "Ch.. 2022. 4. 1. [Vue.js] v-if 와 모달창 만들기 💡 실습 포인트! 오늘은 모달창 UI 와 기능을 만들어보았다. 이미 모달창 UI 와 관련해서는 JavaScript 나 React 로도 많이 만들어봤기 때문에 만드는 과정만 잘 기억하고 있으면 문법만 조금씩 바꿔주면 되어 어려운 점은 없었다. 그래서 상품명을 클릭하면 모달창 UI 를 띄우고, 모달창 내에서 닫기 버튼을 클릭하면 모달창 UI 를 숨기는 것에 그치지 않고 구글링을 통해 어두운 배경을 클릭했을 때에도 모달창이 닫힐 수 있도록 코드를 수정해주었다. 처음에 시도를 했을 때에는 닫기 버튼과 모달창의 하얀 배경만 클릭해봐서 잘 되는 줄 알았는데, 이것저것 누르다보니 코드를 잘못 작성했는지 모달창 내의 내용을 클릭하면 모달창이 닫혀버리는 경우도 발생해서 당황스러웠지만 코드를 다시 작성해서 이제는 오류가 .. 2022. 4. 1. [Vue.js] Vue 이벤트 핸들러로 click 감지하기 💡 실습 포인트! 이번 시간에는 JavaScript 나 React 에서 사용하던 click 이벤트 핸들러를 Vue 에서는 어떤 식으로 사용하는지 알아보았다. 💜 "허위매물신고" 버튼 클릭시 신고 수 표시하기 🤍 레이아웃 만들기 {{ rooms[0] }} {{ prices[0] }}만원 허위매물신고 신고 수: 0 위와 같이 코드를 작성하여 허위매물신고 버튼을 만들고, 그 옆에 신고 수를 표시하는 레이아웃을 만들어보았다. 🤍 "허위매물신고" 버튼 옆 신고 수 부분 데이터바인딩하기 먼저, 신고 수를 기록 및 저장할 수 있는 변수나 데이터가 필요하므로, data 보관함 안에 report 라는 array 자료형을 값으로 가지는 object 를 하나 추가해주었다. 위 html 코드에는 버튼이 하나지만, 전체 htm.. 2022. 4. 1. [Vue.js] Vue 반복문 v-for 사용해보기 💡 실습 포인트! 반복문 없이 상단메뉴를 만든 후 v-for 을 사용하여 코드를 수정해보았다. 💜 반복문 없이 상단메뉴 만들기 🤍 HTML Home Rooms About 반복문 없이 상단메뉴를 만드는 것이므로 메뉴바가 될 div 태그 안에 a 태그 3개를 넣어 메뉴를 3개 추가해주었다. 🤍 CSS .navbar { padding: 15px 0; background: #6667AB; color: white; font-size: 20px; border-radius: 5px; } .navbar a { padding: 5px 10px; margin : 0 10px; } .navbar a:hover { background: white; cursor: pointer; border-radius: 5px; color:.. 2022. 3. 31. [Vue.js] Vue 데이터바인딩하기 💡 실습 포인트! 💜 Vue 의 데이터바인딩 문법 알아보기 document.getElementById('태그_혹은_클래스_혹은_아이디').innerHTML = 데이터; JavaScript 에서 변수나 데이터를 HTML 에 데이터바인딩하기 위해서는 위와 같이 길게 한줄을 써야 가능했다. 반면 Vue 에서 데이터바인딩을 하기 위해서는 다음과 같이 진행하면 된다. 파일 내 특정 위치에 데이터를 보관한다. 보관한 데이터를 {{ 데이터 }} 와 같은 문법으로 HTML 중간에 내용으로 넣어준다. 🤍 HTML 작성하기 OO 원룸 OO만원 OO 원룸 OO만원 OO 원룸 OO만원 모든 HTML 코드는 위와 같이 에 작성해주면 된다. 이외에 JavaScript 기능은 에 작성하고, style 은 에 작성하면 된다. 🤍 데.. 2022. 3. 31. [Vue.js] Vue 설치하기 및 개발환경 셋팅하기 💡 실습 포인트! 💜 들어가기 전에 Vue 를 설치하기 전에 node.js 최신버전과 VSCode 에디터 설치가 필요하다. 설치방법은 어렵지 않기 때문에 별도의 설명은 생략했다. 설치를 진행하다보면 위와 같이 Vue 버전과 package manager 를 선택하라고 나와서 나는 Vue3 버전과 yarn 을 설치해주었다. (방향키로 버전 선택 가능) 💜 Vue 설치하기 🤍 작업용 폴더를 만든 후에 VSCode 에디터로 폴더 열기 나는 vue.js 라는 폴더를 만들어서 VSCode 에디터로 열어주었다. 🤍 VSCode 에디터에서 터미널을 열어 Vue 설치하기 터미널을 열었을 때 좌측에 내가 연 폴더명이 제대로 보이면 폴더를 제대로 연 것이다. // npm 을 이용하는 경우 npm install -g @vue.. 2022. 3. 31. 이전 1 2 3 다음
