희락코딩

export default / import 문법 어떤 데이터 자료를 다른 js파일에서 사용하고 싶은 경우 export와 import 문법을 사용합니다. 예를 들어 data.js에 있는 변수를 app.vue에서 쓰고 싶을 경우 아래와 같습니다. // data.js const teemo = ['버섯','화살촉'] export default teemoDate // App.vue import 작명 from './data.js파일경로' 만약 export 할게 많으면 구조분해 할당을 사용해서 받아올수 있습니다. // data.js const teemo = ['버섯','화살촉'] const joycoding = ['지옥','..

vue v-if를 활용한 모달창 우선 뷰에서 모달창을 만드는 기본적인 스텝이 있다. 첫번째는 현재 HTML UI의 상태를 데이터로 저장합니다.(지금 보이는지 안보이는지) 그다음 그 상태에 따라 HTML UI를 보여줄지 말지를 Vue 문법으로 작성하면 된다. 1. 현 모달창의 상태를 데이터로 저장한다. data(){ return { isModal : false, } }, 2. 데이터 상태에 따라 UI를 보여줄지 말지 뷰 문법으로 작성. 상세페이지임 상세페이지 내용임 닫기 html태그 안에서 v-if="조건식" 을 사용 하면 됩니다. /* 모달 css */ body { margin : 0 } div { box-sizing: border-box; } .black-bg { width: 100%; height: ..

vue 이벤트 헨들러 자바스크립트에서는 어떤 이벤트 헨들러 함수를 쓸때 식으로 자바스크립트를 넣습니다. 하지만 뷰에서는 @click="" 이걸 넣으면 됩니다. //...생략 {{products[i]}} {{ price[i] }} 만원 좋아요! 좋아여 :{{like[i]}} //...생략 // 데이터 보관함 data(){ return { like : [0,0,0], products : ['강아지','고양이','악어'], price :['50','40','70'] } }, @click 말고도 @mouseover, @input 등 다양한 이벤트 함수들이 존재합니다. 함수를 만들어서 사용 가능 뷰에서는 함수를 만들어서 데이터 ..

v-for HTML 반복문1 vue는 반복문이 엄청 간단하고 편리하게 사용 할 수있습니다. 기본적인 문법은 아래와 같습니다. 아무거나 첫번째는 원하는 태그에 v-for="작명 in 반복횟수" 를 적습니다. 그리고 제일 중요한 :key 속성은 반복문을 돌릴 때 꼭 필요합니다. 반복한 요소들을 각각 구분짓기 위한 속성이기 때문입니다. 안적으면 에러가 생깁니다. v-for HTML 반복문2 반복문을 사용할 때 array, object데이터를 집어 넣을수도 있습니다. //...생략 data(){ return { menu : ['hello','joycoding','teemo'] } } 예를 들어 위와 같이 데이터에 메뉴 객체가 있다고 가정했을 때 아래와 같이 반복을 표현..

vue의 데이터 바인딩 문법 뷰는 데이터 보관이 용의하고 보관한 데이터를 {{데이터}} 문법으로 감싸서 넣으면 끝이다. 아래는 뷰의 기본적인 틀입니다. template에서는 HTML코드들을 작성하면 되고 자바스크립트는 script 스타일은 style에서 코드를 작성하면 됩니다. 중요 포인트 데이터 보관함은 아래와 같고 object 형식으로 저장하면 된다. 즉 스크립트 태그 안에 data(){return{}} 이걸 열고 데이터를 오브잭트 형식으로 저장하면 됩니다. 이것이 뷰의 데이터 보관함, 변수보관함이 됩니다. 아래 예를 들어 데이터 보관함에 price 정보를 넣었다고 가정하고 {{price}}를 활용해서 html 데이터 바인딩이 가능하다. {{ price }} 만원 export default { nam..

vue 설치 아래와 같이 터미널에 입력하고 Vue3버전을 방향키 엔터로 선택한다. npm i -g @vue/cli 설치 후 개발 할 폴더를 하나 만들고 거기 안에서 다시 아래와 같이 터미널에 입력 vue create 폴더명작명 vue 브라우저 키 터미널에 아래와 같이 치면 브라우저에서 확인 할 수 있습니다. npm run serve 추가 에디터 부가기능 설치 익스텐션에서 vetur, vue3 snippets 설치하자!!

#문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. #제한 사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. #입출력예시 participant completion return ["leo", "ki..

#문제 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. #제한 사항 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. #입출력예시 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "e F d" # 문제 풀이 및 코드작성 이번 문제는 너무 어려웠다....문제 자체를 이해 못해서..