기록

Eslint와 같이 사용해서 발생하는 에러로, Vue에서는 컴포넌트 이름을 항상 단일 단어가 아닌 두 개 이상의 단어를 조합하여 만드는 것을 추천. (HTML 요서와 혼동을 일으킬 수 있는 요소를 제거하기 위해서 두개의 단어 이상을 합쳐서 설정 권장) * 해결방법: 1. vue/cli 를 사용해서 프로젝트를 만들면 생성되는 vue.config.js 파일을 하기와 같이 수정하고, 서버 재실행. const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, }); 2. package.json 파일 내 "rules" 항목에 하기와 같이..

v-for v-for="작명 in 몇회" :key="작명" 작명은 자유롭게 몇회는 몇번 반복할지 :key 안쓰면 오류남, 반복문 쓸때 꼭 써야함, 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀. * Vue 반복문 특징: - array/object 집어넣기 가능 -> 자료안의 데이터 갯수만큼 반복됨. -> 작명한 변수는 데이터안의 자료가 됨. - 변수 작명 2개까지 가능 -> 왼쪽변수는 array내의 데이터 -> 오른쪽변수는 1씩 증가하는 정수 {{ a }} data() { return { 메뉴들: ["Home", "Shop", "About"], }; }, 1. 메뉴들안의 자료 갰수만큼 반복됨. 2. 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 됨. -> array, object 데이터 안에 있..

{{ 데이터바인딩 }} 언제? 왜? 쓰는지?? {{ 데이터바인딩 }} 하는 이유 : 1. HTML에 하드코딩해놓으면 나중에 변경 어려움. 2. Vue의 실시간 자동 렝더링 기능 사용을 위해. -> 웹 앱 같은 사이트 만들기 가능. 자주 변할거 같은 데이터들은 데이터로 보관(저장)하고, HTML에 {{ 데이터 }} 꽂아 넣기! * 사이트 이름이나 로고 처럼 바뀔일이 없는 경우에는 데이터 바인딩 불필요 * HTML 속성도 데이터바인딩 가능: :속성 = "데이터이름" // HTML 코드들은 안에 집어 넣기 xx 원룸 // HTML 속성도 데이터바이딩 가능. {{ price1 }} 만원 // {{ 데이터 }} 형식으로 HTML에 데이터 꽂아넣기 출처: 코딩애플 https://codingapple.com

광광 웁니다ㅠㅠ

LifeCycle : 인스턴스의 상태에 따하 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 함. LifeCycle Hook : 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 함. 라이프 사이클: 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기. 커스텀 로직: 개발자가 임의로 작성한 추가 로직 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개의 라이프 사이클 속성이 있음 : created, beforeCreate, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 라이프 사이클을 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된..

🎉이번 주 학습 예정 목록: - vue.js 의 개념 및 프로젝트 생성법 학습 - vue.js 인스턴스와 컴포넌트의 개념 학습 - 컴포넌트간의 통신 이해 - DOM 에 대한 이해 - vue.js 라이프 사이클 이해 - SPA 에 대한 이해 - vue.js 라우터에 대한 이해 - LIST 폴더 구조 생성 실습 🎉 목표: - CLI를 통해 vue 프로젝트를 생성할 수 있다. - 프로젝트 생성시, 초기 세팅을 적용할 수 있다. - vue.js의 라이프 사이클을 이해하고 순서에 맞게 적용할 수 있다. - SPA를 이해하고 주소창을 통해 원하는 페이지로 이동할 수 있다. - 본인이 작업하고 있는 화면을 크롬 개발자 도구를 이용하여 소스 코드가 있는 파일 위치를 찾을 수 있다. - vue - component - ..

📒문제 설명 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. 🚫제한사항 • -10,000 ≤ numbers의 원소 ≤ 10,000 • 1 ≤ numbers의 길이 ≤ 1,000 📄입출력 예 numbers result [1, 2, 3, 4, 5] [2, 4, 6, 8, 10] [1, 2, 100, -99, 1, 2, 3] [2, 4, 200, -198, 2, 4, 6] 📑입출력 예 설명 입출력 예 #1 [1, 2, 3, 4, 5]의 각 원소에 두배를 한 배열 [2, 4, 6, 8, 10]을 return합니다. 입출력 예 #2 [1, 2, 100, -99, 1, 2, 3]의 각 원소에 두배를 한 배..

📒문제 설명 첫 번째 분수의 분자와 분모를 뜻하는 denum1, num1, 두 번째 분수의 분자와 분모를 뜻하는 denum2, num2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 🚫제한사항 • 0 (a % b === 0 ? b : gcd(b, a % b)); // a를 b로 나눈 나머지가 0이면, b가 최대공약수, 0이 아니면, 다시 b를 a % b로 나누기를 반복해서 최대공약수 구하기 minNum = gcd(y, x); // 최대공약수를 minNum에 담기 answer = [y / minNum, x / minNum]; // answer에 분자와 분모를 최대공약수로 나눈 값들을 담기 ..