Web/JavaScript
Vue.js - import, export (유튜브 코딩애플 6강)
1. 다른 파일의 변수 또는 함수 가져오기 js 파일를 새로 만든 뒤 변수 또는 함수 작성 후 export default 변수_또는_함수명 App.vue에 import 임의의_변수_또는_함수명 from './js파일_경로' 2. 다른 파일의 변수 또는 함수 2개 이상 가져오기 js 파일를 새로 만든 뒤 변수 또는 함수 2개 이상 작성 후 export { 변수_또는_함수명 } App.vue에 import { 사용할_변수_또는_함수명 } from './js파일_경로' 3. Vue 파일 가져오기 모듈의 이름: HelloWorld props: 부모에게 받을 데이터 (데이터_이름: 데이터_타입) import 임의의_모듈_이름 from './모듈_파일_위치' components: 사용할 모듈 이름 입력 (입력 안하..
Vue.js - assets(이미지 등), v-if(조건문) (유튜브 코딩애플 5강)
1. assets src 폴더 안에 asstes 폴더에 이미지 파일 등 넣어서 사용 파일 사용 방법: ./asstes/파일이름 2. v-if(조건문) HTML 태그 안에 v-if="조건문" 이용 (조건문이 참일 경우 해당 태그가 보임, 거짓일 경우 해당 태그가 보이지 않음) 조건문이 변경 될 경우 실시간으로 바뀜 (참에서 거짓으로 변경될 경우 해당 태그가 사라짐) v-else / v-else-if v-show: v-if는 거짓일 경우 보이지 않지만 v-show는 거짓일 경우 display:none이 됨 참고 링크: https://mine-it-record.tistory.com/358 동영상 링크: https://youtu.be/UyESqYSb0gY
Vue.js - 이벤트 핸들러, 함수 (유튜브 코딩애플 4강)
1. 이벤트 핸들러 자바스크립트에서는 onClick인데 Vue에서는 @click 임 @이벤트_핸들러 또는 v-on:이벤트_핸들러로 사용하면 됨 참고 링크: https://kr.vuejs.org/v2/guide/events.html 2. 함수 export default 안에 data() 다음에 methods: { object형식 } object형식에 함수 입력 함수이름: function() {} 혹은 함수이름() {} 으로 사용하면 됨 동영상 링크: https://youtu.be/Agm-F366ZwY
Vue.js - v-for 문 (반복문) (유튜브 코딩애플 3강)
HTML 태그 속성으로 v-for="value in items" :key="value" 사용하고 태그 안에 {{ value }} 이용 "items"는 배열임 "items"에 있는 데이터들의 개수만큼 반복 "value"는 "items"에 있는 데이터 값임 인덱스 필요 시 v-for="(value, index) in items" :key="index" 사용 동영상 링크: https://youtu.be/T4N9wjx7_E4
Vue.js - 데이터 바인딩(v-bind) (유튜브 코딩애플 2강)
에서 변수(데이터)를 직접 다룰 수 있음 (데이터 바인딩) 안에 {{ 데이터_이름 }} 이용 안에 data() { return { object } } 이용 (object → 데이터_이름: 데이터_값) style 등 html 태그의 속성에 사용 시 속성 앞에 ":" 붙임 (v-bind:style → :style) Vue의 실시간 자동 렌더링 기능이 있음 (데이터가 변경이 되면 데이터 값이 자동으로 변경 됨 v-bind 안에 정적 문자열 사용 시 `${ 데이터 이름 }` 사용 동영상 링크: https://youtu.be/0BbF7UxKKvg
Vue.js - 설치 및 설정 (유튜브 코딩애플 1강)
Node.js 설치 (링크: https://nodejs.org/ko/) Visual Studio Code 설치 (링크: https://code.visualstudio.com/) Visual Studio Code 실행 Vue.js 개발환경 설정 상단메뉴 → Terminal → New Terminal → npm install -g @vue/cli 설치 에러날 경우 yarn으로 설치 (yarn global add @vue/cli) Visual Studio Code 부가기능 설정 상단메뉴 → View → Extensions 혹은 왼쪽 메뉴바 Vetur 설치 (Vue.js 도구) HTML CSS Support 설치 Vue 3 Snippets 설치 (Vue.js 도구) 프로젝트 생성 프로젝트 폴더 생성 (아무 곳이..