서버가 있으면 서버에서 데이터를 받아와서 보여주는게 일반적이지만 우리는 그런게 없으니 가짜 데이터를 직접 준비했습니다. 위의 코드를 data() 란에다가 보관한 후 {{데이터바인딩}} 하면 되겠습니다. 하지만 데이터가 상당히 길어보입니다. 그대로 붙여넣으면 복잡해질 것 같으니 import/export 문법을 이용해서 다른 js파일에 보관한 뒤 가져오도록 합시다. export default / import 문법 어떤 js 파일에서 만든 변수나 자료를 다른 js 파일에서 사용하고 싶은 경우 export와 import 문법을 씁니다. 일단 다른파일에서 export 하셔야 다른 파일에서 import를 할 수 있습니다. 막번역을 하자면 수출을 해야 수입을 할 수 있습니다. 예를 들어서 oneroom.js 에 있는..

상품을 누르면 뜨는 상세페이지를 만들어볼 건데 실제 페이지를 다르게 이동시키는건 아니고 모달창 스타일로 만들어봅시다. ▲ 모달창이 뭐냐면 그냥 배경까맣고 안에 하얀 창있는 UI를 뜻합니다. 상품명을 클릭하면 이걸 띄워볼겁니다. 하지만 모달창만 배웠다고 모달창만 만들 수 있는 사람이 되면 안되기 때문에 Vue로 동적인 UI 만드는 Step을 설명해드리겠습니다. 1. 현재 HTML UI의 상태를 데이터로 저장해둠 (지금 보이는지 안보이는지 이런거) 2. 그 상태에 따라 HTML UI을 보여줄지 말지를 Vue문법으로 작성함 이것만 기억해두시면 모달창 말고도 탭, 서브메뉴 등 누르면 동작하는 UI들은 구글 도움 없이도 알아서 만들 수 있게됩니다. 말이 추상적이라 뭔지 아직 모르겠으면 모달창이나 따라 만들어봅시다..

어떤 HTML 요소를 클릭했을 때 뭔가 일이 일어나게 만들고 싶으면 이 안에 자바스크립트를 집어넣습니다. Vue에서는 살짝 다르게 집어넣으면 됩니다. @click="" 이걸 집어넣으면 됩니다. 문법만 설명하면 다음날 다 까먹을게 분명하니 저번시간까지 만들던 부동산 사이트에 허위매물 신고버튼과 기능을 만들어보며 배워봅시다. 허위매물 신고버튼과 신고수를 만들어봅시다 일단 저번시간 반복문 돌린건 복잡해보이니까 다시 원래대로 복구시킵니다. {{products[0]}} 50만원 {{products[1]}} 50만원 {{products[2]}} 50만원 여기다가 버튼을 하나 추가해보자는겁니다. {{products[0]}} 50만원 허위매물신고 신고수 : 0 이거 버튼을 누르면 옆에 있는 신고수가 1 증가하는 기능을..

HTML을 짜다보면 비슷한 이런게 수백번 출몰하지 않습니까. 그걸 보고 있으면 비슷한 들을 간단하게 for 반복문 같은 걸로 축약하고 싶은 충동이 들지 않습니까. 리액트나 Vue를 쓰면 가능합니다. 그리고 그런 장점 때문에 리액트와 Vue를 쓰는겁니다. 하지만 for, map, forEach 이런 문법 배우다 포기하셨다면 Vue 반복문은 100배 쉬우니 걱정하지 맙시다. 상단 메뉴를 만들어봅시다 페이지가 여러개 있는 것은 아니지만 심심하니 상단메뉴를 만들어봅시다. HTML과 CSS는 다음과 같이 작성합니다. CSS는 vue파일 하단 태그 안에 넣으면 됩니다. Home Products About .menu { background : darkslateblue; padding : 15px; border-rad..

원룸파는 쇼핑몰을 한번 만들어봅시다. 일단 레이아웃 부터요. XX 원룸 XX 만원 XX 원룸 XX 만원 HTML 코드들은 안에 집어넣으면 됩니다. 자바스크립트 기능은 script 태그 안에 data(){ return { } } 이걸 열고 데이터를 object 형식으로 저장하시면 됩니다. 이게 Vue의 data보관함, 변수보관함이라고 보시면 되겠습니다. 중요한 데이터는 다 여기 보관하십시오. 중괄호니까 object 형식에 맞춰서요. 그럼 이제 price1 이라는 데이터를 HTML안에 꽂아넣어서 유저에게 보여주고 싶으면 {{ price1 }} 이것만 쓰면 됩니다. {{ price1 }} 만원 저장하면 브라우저에 60만원이라고 잘 뜹니다. Q. 뭐임 그냥 애초에 60만원 이렇게 하드코딩하면 되는데 굳이 데이터..

1. nodejs 최신버전 설치 우측 최신버전이 뭔가 에러가 덜 납니다. 그래도 에러나면 LTS 왼쪽 버전으로 바꾸실 수 있습니다. 제어판에서 삭제 후 재설치하면 됩니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS code 에디터 설치 구글 검색해서 다운받고 설치 3. 아무데나 작업용폴더 만들고 에디터로 오픈 코딩실력이 부끄럽다면 은밀한 곳에 만들어줍니다. 에디터 상단 메뉴에 open folder라고 있을겁니다 그렇게 오픈하셈 ▲ 에디터 왼쪽 위에 아까 만든 폴더명이 떠야합니다. 4. 에디터에서 터미널 열고 npm install -g ..

이건 web-app을 만들 때 씁니다. Web-App은 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻합니다. 쉽게 말해서, 페이지 전환시 페이지를 새로 요청하는게 아니라 자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것입니다. 근데 그냥 자바스크립트로 이런거 만들려면 귀찮고 코드가 길어집니다. 그래서 Vue React Angular 이런거 쓰면 쉽게 개발이 가능합니다. 근데 굳이 다른거 냅두고 Vue 쓰는 이유를 아십니까. 1. 쉬워서 씁니다. 이게 진짜 중요한 이유입니다. React Vue Angular 전부 똑같이 웹앱을 만들어낼 수 있습니다. Angular는 매우 방대하고 Typescript를 강제로 써야하고 React는 기존 JS문법을 매우 많이 활용하고 Vue는 Vue 문법을..