목록이안의평일코딩 (114)

이안의 평일코딩

[Vue] Vuex(1) - 설치 및 셋팅 (store.js, $store.state.데이터명)

Vuex 설치 및 셋팅 Vuex를 왜 사용할까? 하위컴포넌트 전송 props, 상위컴포넌트 전송 custom event, 또는 mitt는 데이터 주고받기 어렵다. Vuex는 모든 컴포넌트가 데이터를 공유할 수 있는 js파일로 모든 컴포넌트가 직접 꺼내쓸 수 있다. 컴포넌트, 데이터가 많을 때 Vuex를 쓰고 간단할 때는 props를 쓰자. Vuex 4 설치 npm install vuex@next 또는 yarn add vuex@next Vuex 4 셋팅 모든 컴포넌트가 쓸 수 있는 데이터 저장용 js파일 만들어야한다. src폴더에 store.js를 생성한다 import { createStore } from 'vuex' const store = createStore({ state () { return { n..
Front-end/Vue 2021. 5. 18. 13:15
[meta] 카카오톡 링크 공유 썸네일 및 웹 사이트 정보 넣기

index.html head태그안에서 meta태그를 통해 정보를 넣어주면 된다. 해당하는 썸네일 이미지 크기는 800x400으로 맞춰주면 된다. 아래는 썸네일 관련 카카오 개발자의 답변이다.
Front-end/Project 2021. 5. 18. 11:29
[Vue] 라이브러리 전역에서 사용하기

Vue 전역 라이브러리 예를들어, axios를 전역에서 사용하고 싶다면 일단 설치를 한다. yarn add axios 그리고 main.js에서 셋팅해준다. main.js import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' let app = createApp(App) app.config.globalProperties.axios = axios; app.mount('#app') app.config.globalProperties.는 글로벌한 변수보관함으로 보관함에 { axios : axios } 추가한 것이다. 그리고 app이라는 변수로 받았기 때문에 createApp(App)을 app으로 수정해주면 된다. 자..
Front-end/Vue 2021. 5. 17. 18:51
[JS] 기초 (2) - 문자대체, 찾기, 개수, 중복제거, 대소문자 변환

문자대체 .replace(/원래문자/, '변경할문자'); 문자찾기 .split(a) a에 해당하는 문자를 잘라낸다 대문자찾기 .toUpperCase() 대문자로 변경 .charCodeAt() ASCII코드로 변경. 대문자 65~90, 소문자 97~122 대문자로 통일 ASCII 소문자 a 97, 대문자 A 65. 차이는 32 대소문자 변환 .toUpperCase() .toLowerCase() 가장 긴 문자열 Number.MIN_SAFE_INTEGER 최대값을 찾기위해 먼저 가장 작은 정수로 잡는다. 가운데 문자 출력 Math.floor() 소수점 내림, 나눈 몫 구하기 .substring(2, 4) : 2번 인덱스부터 3번 인덱스까지. length => ng .substr(2, 4) : 2번 인덱스부터 ..
Study/JS Algorithm Rocket 2021. 5. 17. 15:40
[JS] 기초 (1) - 최솟값, 삼각형, 개수, 합, 홀수, 10부제, 일곱난쟁이

최솟값 삼각형 판별 만약 c가 max라면 a+b>max여야 삼각형 조건이 성립된다. 연필 다스 수 (12개당 1다스) Math.ceil, Math.floor 1부터 N까지의 합 최솟값 구하기 홀수 x%2!=0 https://iancoding.tistory.com/226
Study/JS Algorithm Rocket 2021. 5. 17. 11:18
[Vue] props 대신 slot을 써보자

slot으로 부모 -> 자식 데이터 전송법 FilterBox.vue (자식) 1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치) Container.vue (부모) {{filter}} 2. 태그사이에 데이터를 넣는다. slot 여러개 사용하기 name 속성을 주면 된다. (복잡하니 그냥 props 쓰자) FilterBox.vue (자식) 1. Container.vue (부모) 데이터1 데이터2 2. 보낼거 slot props slot 사용할 때 부모가 자식데이터 필요한 경우. FilterBox.vue (자식) 1. Container.vue (부모) {{작명.msg}} 2. 부모는 {{작명.자식데이터}} slot의 한계 slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. 즉..
Front-end/Vue 2021. 5. 14. 18:28
[JavaScript] 배열(Array)의 unshift(), push(), shift(), pop()

배열에 값 추가 .unshift() 배열의 맨 앞값 추가 .push() 배열의 맨 뒷값 추가 var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var unshift = fruits.unshift("Grape"); console.log(fruits); //"Grape","Apple", "Banana", "Orange", "Strawberry" var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var push = fruits.push("Grape"); console.log(fruits); //"Apple", "Banana", "Orange", "Strawberry","Grape" 배열에 값 제거 .sh..
Front-end/JavaScript 2021. 5. 14. 17:21
[Vue] 이미지 업로드 및 불러오기

이미지 업로드한 것을 HTML에 보여주려면 두가지 방법이 있다. FileReader() : 파일을 글자로 변환해준다. URL.createObjectURL() : 이미지의 가상 URL을 생성해준다. (다만 새로고침하면 사라진다.) => background-image속성으로 집어넣으면 된다. multiple을 넣으면 다수의 파일을 선택할 수 있다. accept="image/*"를 넣으면 이미지 파일을 가져올 수 있게 기본으로 설정된다. var file = e.target.files; file[0].type과 같이 자바스크립트에서 .type 사용하면 image/png 와 같이 확장자 검사가 가능하다. 조건문을 사용해 일부 확장자만 가능하게끔 설정을 해주면 된다. App.vue URL.createobjectUR..
Front-end/Vue 2021. 5. 14. 16:53
Prev 1 2 3 4 5 6 ··· 15 Next