서버가 있으면 서버에서 데이터를 받아와서 보여주는게 일반적이지만 우리는 그런게 없으니 가짜 데이터를 직접 준비했습니다. 위의 코드를 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 문법을..

프로그래밍이란? 컴퓨터가 똑똑한 이유는 컴퓨터가 안에 담겨있는 프로그램 덕분 프로그래밍 : 사람이 우너하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위 따라서, 자바스크립트는 HTML과 CSS와 다르게 프로그래밍 언어라고 불리운다. 웹 프로그래밍이란? 웹 프로그래밍 : '웹 브라우저'를 동작시키는 프로그램을 작성하는 것 백엔드 프로그래밍 : 서버에서 데이터 관리를 프로그래밍 프론트엔트 프로그래밍 : 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍 자바스크립트의 특징 모든 웹 브라우저에서 작동한다. 웹 브라우저에서 실행 결과를 즉시 확인할 수 있다. 풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램을 만들 수 있다. 다양한 자바스크립드 공개 API를 사용할 수..

서버리스(ServerLess) 서버리스 아키텍처란? 서버리스는 언뜻 단어로만 보면 'Server + Less'로 '서버가 필요 없다'는 뜻으로 생각될 수 있습니다. 하지만 실제 의미는 클라우드 서비스 공급자가 서버를 관리, 실행하며, 요청이나 특정 이벤트가 있을 때 클라우드의 서버를 이용하거나 서비스 할 어플리케이션을 동작시키는 것입니다. 이를 통해 사용자(개발자)는 서버 관리에서 완전히 자유로워지며 실제 구현해야 할 기능에 더 집중할 수 있게 됩니다. 서버리스는 보통 '서버리스 컴퓨팅' 또는 '서버리스 아키텍처'로 불립니다. 서버리스 개념은 어플리케이션 관점에서 BaaS(Backend as a Service)와 FaaS(Function as a Service)로 나누어 살펴보면 이해가 더 용이합니다. ..

Cloud 개념 클라우드 컴퓨팅이란 인터넷 기반의 컴퓨팅을 말합니다. 인터넷 상의 가상화된 서버에 프로그램을 두고 필요할때마다 컴퓨터나 스마트폰 등에 불러와 사용하는 서비스입니다. 클라우드(Cloud)라는 단어가 말해주듯, 인터넷 통신망 어딘가에서 구름에 싸여 보이지 않는 컴퓨팅 자원(CPU, 메모리, 디스크 등)을 원하는 대로 가져다 쓸 수 있습니다. 구름에 싸여 있다는 것은 그 내부를 보려고 하거나 알지 않아도 얼마든지 내가 원하는 것을 꺼내어 사용할 수 있다는 것이며, 인터넷이 연결된 어느 곳에서든 이것을 보장 받을 수 있다는 뜻입니다. 장점 웹서비스 운영자 입장에서 클라우드를 바라본다면 다음과 같은 장점이 있습니다. 서버를 직접 구매할 때 고려해야 할 전력, 위치, 확장성을 고민하지 않고 데이터 ..