BEOTIZA♥

화면을 개발할 때 자주 나오는 구성 요소 중 하나가 모달(Modal)창이다. 하나의 페이지에서 하나의 작은 다른 페이지를 띄우고 부가적인 일들을 처리할 수 있게 만드는 기능이다. 사용자로부터 특정 동작/메세지에 대한 주목이 필요할 때 모달을 사용한다. 팝업(Popup)과의 차이점 팝업은 새 브라우저 페이지를 띄우는 것 모달창 만들어 보기 1. html에 간단하게 모달을 열 버튼과 modal창을 위한 div영역은 잡아준다. 영양 정보/원산지 정보 제품 영양 정보(업데이트 예정) 1회 제공량 나트륨 단백질 포화지방 당류 제공되는 영양 정보는 메뉴 기본 옵션 항목을 기반으로 하며 사용자별로 선택한 옵션을 반영하지 않습니다. 성인과 청소년(13세 이상)은 하루 평균 2,000칼로리가 필요하고 어린이(4~12세)..

페이지를 여러개 만들고 싶을 때 라우터를 사용한다. /여기로 , /저기로 이렇게 페이지로 접속 할 수 있다. vue-router 라이브러리를 설치하고 이용해야 한다. 1. 라우터 셋팅 방법 npm install vue-router@4 yarn add vue-router@4 // 오류 생길시 실행하고 있던 npm run serve은 [Ctrl+C] 로 끄고 입력하길 권장함. 아니면 오류 생김. vue add router 2. 라우터 파일을 만들어 준다. src폴더 안에 router.js 파일을 만들고 아래 코드를 복사한다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/이동할경로", compone..

vue에서의 반복문은 v-for로 적는다. HTML에 반복되는 부분이 보이면 v-for을 쓰면 된다. 반복1 반복2 반복3 v-for 반복문 적는 법 1. 태그에 v-for="변수 in 반복할횟수" 를 적고 2. :key="변수" 를 추가한다. :key 속성은 반복한 요소들을 각각 구분하기 위한 속성이다. 반복 반복문을 사용할 때 array, object 데이터를 집어 넣을 수도 있다. data(){ return { List : ['반복A', '반복B', '반복C'] } } 이제 List 데이터를 반복문으로 수정할 수 있다. 반복시킬 횟수에 array자료를 집어 넣을 수 있다. {{ a }} 1. List 안의 개수만큼 반복된다. 2. 작명한 변수 a는 반복될 때마다 List 안에 있던 데이터가 된다. ..

Ajax 요청을 하려면 axios를 쓰면 된다. 1. axios 터미널 설치 npm install axios yarn add axios 오류가 발생활 확률이 높음 검색해서 방법을 찾음 npm install axios --legacy-peer-deps //설치 오류 해결 2. GET, POST 차이 server에게 데이터를 요청하려면 url로 GET / POST 요청함 GET은 데이터를 가져올 때 사용하며 서버가 요구하는 URL을 사용하고 POST는 서버로 데이터를 보낼 때 사용하고 역시 서버가 요구하는 URL사용함. 3. 원하는 URL로 GET요청하기 import axios from 'axios'; axios.get('서버URL').then( 함수() => { // 요청 성공시 실행할 코드 }).catc..

mitt은 모든 컴포넌트 간 데이터 통신을 지원한다. 현재 작업의 경우 SizePrice.vue -> OrderPrice.vue 컴포넌트간의 데이터 전송이 필요했다. SizePrice.vue에서 데이터에서 받아오는 각 사이즈(S, M, L) 가격을 클릭하면 OrderPrice.vue에 보내주고, OrderPrice.vue 구매수량에 맞춰 총가격을 구하는 작업이다. (Vue2에서는 Event Bus을 이용해 멀리 있는 컴포넌트간 데이터를 전송했지만 Vue3에서는 사용이 불가해서 mitt 외부 라이브러리를 사용한다.) 1. mitt설치하고 main.js파일에 가서 mitt 설정한다. mitt 설치 npm install mitt 설치 후에 main.js파일에 가서 mitt 설정 import { createAp..

Snippet을 사용하면 Vue 컴포넌트 개발 시 가장 자주 사용하게 되는 코드 조각을 간단한 키워드로 빠르게 사용할 수 있다. Visual Studio Code에서는 나만의 snippet을 만들고 등록하여 사용하면 작업 속도가 빠르다. 아래는 Vue 컴포넌트의 기본 구조를 포함한 1)스니펫을 만들고 2)등록하는 방법을 소개하겠다. snippet 설정 1. Visual Studio Code에서 Code -> Preferences -> Configure User Snippets 을 선택하면 Snippets을 등록할 파일 유형을 선택하는 창이 나타난다. (mac기준) 2. 'Vue'검색하여 Vue.json파일을 연다. 아직 등록된 snippets이 없기 때문에 아래와 같이 snippets을 등록하는 방법이 ..

쇼핑몰 구매수량에 맞춰 총합계 구해보는 기능을 만들어 보겠다. HTML에서 어떤 요소를 클릭했을 때 뭔가 액션이 만들고 싶으면 이 안에 자바스크립트를 집어넣었다. Vue에서는 으로 작성한다. 구매수량이 + 버튼을 누르면 1 증가하고, -버튼을 누르면 1 감소하는 기능을 만들어 보겠다. ( html은 Bootstrap을 적용했으니 참고 바란다.) 구매수량 최대 구매수량 10개 - + 또 구매수량에 따라 가격이 변하는 기능도 추가하겠다. 총 상품 금액 배송비 2500원 포함된 금액 총 합계 원 script에 변수를 저장하는데 1) 구매수량 count 2)가격 price 3) 총합계 totalPrice 를 data 저장한다. +, - 이 실행된 함수 html에 그대로 적용해도 되지만, 코드가 길 경우엔 함수를..

HTML에 자바스크립트 데이터를 넣고 싶을 때 "데이터바인딩"을 이용한다. VUE에서 데이터 바인딩 문법 1)데이터 보여주기 2)속성에 데이터바인딩 을 소개해 보겠다. HTML코드들은 안에 넣는다. 안녕하세요 곧 크리스마스네요 크리스마스 날짜는 12월 25일 입니다. //스타일 JavaScript에서 HTML에 변수나 데이터를 넣으려면 getElementById 메서드를 사용하여 HTML 요소를 가져온 후, innerHTML 속성을 사용하여 해당 요소의 내용을 변경했다. document.getElementById(ABCDE~~).innerHTML = 데이터; Vue 데이터 바인딩은 JavaScript에서 HTML을 동적으로 조작하는 전통적인 방법과 비교할 때 간결하고 가독성 좋은 코드라는 장점이 있다. ..