본문 바로가기

HMWK122

[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.
[React] localStorage 로 DB 없이 데이터 저장하기 💡 실습 포인트! 강사님의 localStorage 수업을 들은 후에, "최근 본 상품" 기능을 만드는 가이드를 활용하여 내가 생각한 대로 "최근 본 상품" UI 를 만들고 기능을 구현해보았다. 처음 이 기능을 만들 때만 해도 막막했는데, 에러코드를 읽어가며 아쉬운 부분을 하나하나 추가, 수정해나가다보니 어느덧 꽤 그럴싸한 형태로 만들어졌다. 💜 localStorage 사용법 알아보기 새로고침을 하면 JS 파일들을 모두 처음부터 다시 읽어들이기 때문에 당연하게도 모든 state 의 데이터는 초기화된다. 이렇게 state 에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB 에 저장하면 되는데, 만약 별도의 서버나 DB 지식이 없다면 localStorage 에 저장하는 방법이 있다. localStorage .. 2022. 3. 31.
[React] props 대신 redux 사용해보기_5 💡 실습 포인트! 기존에 작성했던 state 를 props 로 만들어주는 함수 및 export default connect()() 는 상대적으로 예전에 쓰이던 방식이지만 현업에서 코드를 읽어낼 수 있어야 하므로 이전 수업을 통해 배워보았다. 이번에는 useSelector() 와 useDispatch() 를 이용하여 훨씬 더 쉽고 간략하게 코드를 작성할 수 있는 방법을 배워보았다. 수업에 배운 것들을 활용하여 다른 파일에도 적용해보았다. 💜 전체 코드 미리보기 // 전체 코드 미리보기 // 전체 코드의 내용이 너무 길어 불필요한 부분은 제외했다. import { useDispatch, useSelector } from 'react-redux'; function Cart(props) { let state =.. 2022. 3. 29.
[React] props 대신 redux 사용해보기_4 💡 실습 포인트! 💜 "주문하기" 버튼을 클릭한 상품을 장바구니에 담기 오늘은 redux 를 이용하여 특정 상품의 상세 페이지에서 "주문하기" 버튼을 클릭하면 장바구니 페이지로 이동되고, 장바구니 페이지에는 "주문하기" 버튼을 클릭했던 상품이 추가되어 보여지게 해보았다. 다만, 이미 장바구니에 담긴 상품을 추가 주문하면 행이 새로 만들어지는 게 아니라 수량만 추가되어야 하는데 이 부분은 아직 미완성이라 조만간 수정을 해보려고 한다. 💜 수량 조절 버튼 기능 수정하기 지난번에 장바구니 페이지의 수량 조절 버튼 기능을 만들 때, dispatch 할 때 데이터를 받아오는 방법을 몰라서 첫번째 항목만 기능이 작동하도록 하드코딩을 했었다. 그래서 이번 수업 내용을 활용하면 수량 조절 버튼 기능도 id 데이터를 받.. 2022. 3. 29.
[React] props 대신 redux 사용해보기_3 💡 실습 포인트! reducer 가 여러 개 필요한 경우 어떤 식으로 redux 를 활용해야하는지 알아보기 위해 장바구니 페이지에 알림창 UI 를 하나 만들어보았다. 하지만 이렇게 하나의 Component 에만 사용할 state 데이터라면 redux 에 굳이 저장할 필요가 없이 useState() 를 사용하는 것이 훨씬 쉽고 간단하다는 것도 알게 되었다. 이번에는 reducer 가 여러 개 필요한 경우 코드를 어떻게 작성하는지 배우기 위해 코드를 아래와 같이 작성하긴했지만, 복습하면서 useState() 를 사용한 방식으로 바꿀 예정이다. 💜 장바구니 페이지에 알림창 만들기 신규가입하면 최대 20% 할인 쿠폰을 제공한다는 알림창을 장바구니 페이지 하단에 띄우고 닫기 기능을 추가해보았다. 🤍 알림창 UI .. 2022. 3. 29.
[React] props 대신 redux 사용해보기_2 💡 실습 포인트! 오늘은 redux 를 사용하여 수량 조절 버튼을 만들어보았다. 다만 지금은 reducer() 에 0번 인덱스에 해당하는 1번 상품만 + 버튼과 - 버튼으로 수량 조절이 가능하게끔 해두어서 다른 상품들은 수량 조절이 불가하다. 파라미터로 인덱스를 넣을 수는 없을까 고민해보고 코드를 수정해보았지만 아직 redux 에 대한 공부가 부족해서인지 맘처럼 되지는 않았다. 차근차근 배우면서 구글링해보고 나중에 다시 해봐야겠다. 💜 redux 를 사용하여 state 데이터 수정하는 방법 알아보기 reducer 함수를 만들어서 데이터 수정하는 방법을 정의한다. 원하는 위치에서 dispatch() 함수를 사용하여 reducer 에 수정해달라고 요청한다. 💜 장바구니 품목 수량 조절 버튼 만들기 수량 열에.. 2022. 3. 28.
[React] props 대신 redux 사용해보기 💡 실습 포인트! 이번에는 props 를 대신하는 방법 중 하나인 redux 에 대해서 조금 공부해보았다. 아직까지는 내가 만든 프로젝트가 하위 Component 가 별로 없다보니 props 보다 편한지에 대해 논하기는 어렵긴 하다. 마지막 redux 수업까지 잘 들어서 야무지게 써먹어야겠다. 💜 props 대신에 사용할 수 있는 방법 찾아보기 props 를 대신할 수 있는 방법으로는 Context API 나 Redux 를 이용하는 방법이 있다. 이전에는 Context API 를 이용하는 방법을 살펴보았으므로, 이번에는 Redux 를 이용해보았다. 사실, React 를 이용한 실제 사이트 개발 환경에서는 redux 를 설치하여 사용하는 곳이 좀 더 많다. 💜 장바구니 페이지 만들기 🤍 장바구니 페이지에 .. 2022. 3. 28.

티스토리툴바