#트랜지션 모달창을 만들다가 트랜지션을 배웠다. 여태껏 자스나 제이쿼리로 짜던걸 vue는 아주쉽게 트랜지션 클래스라는 것을 제공한다 마치 aos 플러그인 마냥 클래스를 꽂아주고 그에 따른 효과만 집어 넣으면 된다. 그렇다고 aos 플러그인 처럼 효과가 정해져 있는 것은 아니다. 본인이 css 애니메이션을 만들면 된다. 1.단일로 쓰일경우 Toggle hello 트랜지션이 필요한 부분을 감싼 후 name을 준다. 그리고 전환클래스를 붙여서 css를 작성하면 끝이다. (아래코드에서 name으로 들어간 fade를 빼면 그뒤에 부분이 트랜지션클래스이다.) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-l..
#slot 슬롯을 사용하면 등록한 컴포넌트에서 재정의가 가능 (컴포넌트 안에서 ui부분을 재사용하기 위해서 조각낸 부분이라고 이해하면 쉬움) = 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능 대표적인 예로 모달이나 버튼 등에 사용된다. 1.정의하기 - 버튼이나 모달 뭐든 좋다.(기본레이아웃 이라고 생각하고 만들면 편하다.) default header default body default footer // slot name="body 하고 등록한 후 그안에 들어가는 내용은 디폴트내용이 된다. 2.사용하기 경고! 할일을 입력 해 주세요 by.Sunny 이것을 필요한 부분에 불러와서 import하여 사용한다 그 안에 들어가는 내용은 본인이 작업하는 ui에 맞게 변경가능하다(태그도, 텍스트, 이미지 무엇이든지..
#투두리스트 만들기 1.npm install -g @vue/cli (해당프로젝트는 vue2) 2.vue create 프로젝트명 $ cd vue-todo $ npm run serve 4.컴포넌트 만들기 - 파스칼케이스법으로 작성 - 첫단어는 대문자로 시작 5.컴포넌트 등록하기 - App.vue 6.public - index.html 에 뷰포트, 파피콘 등 메타태그와 필요한 font, icon 등록하기 - cdn 이용 1 : https://www.favicon-generator.org/ - 파비콘만들기 2 : https://fonts.google.com/ - 구글 웹폰트(요즘은 눈누도 많이씀!) 3 : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_..
import _ from 'lodash'; //https://lodash.com/ //https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-lodash-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90 export const getHashPage = (hash: string, pages: string[], def: string): string => { let page = def; if (hash && hash.length > 0) { let check = hash.substr(1); if (_.indexOf(pages, check) != -1) { page = check; } } return page; } export default class..
//1.기본적인타입 type Nickname = string type HealthBar = number type Friends = Array // type Player = { // nickname:string, // healthBar:number // } type Player = { nickname:Nickname, healthBar:HealthBar } const suuun:Player = { nickname:"suuuny", healthBar:10 } // type Food = string; // const kimchi:Food = "delicious"; //2.특정값으로 타입만들기 type Team = "read" | "blue" | "pink" //특정값으로 한정지을 수 있음 - interface..
1.비동기처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성 (동기처리로 할경우 코드실행을 기다리고 기다려야하니 어플리케이션을 실행하는 대 시간이 오래걸림) -예로 setTimeout() 도 비동기 처리이다. (3초뒤에 실행하라고 했을때 뒤에 나오는 다른 코드수행을 먼저하고 3초후에 setTimeout이 실행된다.) -비동기처리로 인해 api통신을 할때 undefined가 나오므로 콜뱀함수로 특정로직이 끝났을때 동작을 실행시킬 수 있다. -비동기처리 로직을 위해 콜백함수를 연속으로 사용하면 콜백지옥에 빠질 수 있는대 이를 해결하기 위해 나온것이 Promise나 Async 이다.(콜백함수 분리) 2.자바스크립트 Prom..
1.피니아 Pinia는 Vue용 저장소 라이브러리로 구성 요소/페이지 간에 상태를 공유할 수 있다. 1)스토어 정의 import { defineStore } from 'pinia' export const useapiStore = defineStore('api', { //use스토어이름Store로 묶는것이 좋음 , 첫번째 인자인 api는 스토어의 고유 id //두번째 인자는 옵션을 사용할 수 있음, Composition API 의 setup과 유사한 방식의 스토어 정의 방법 state, getters, actions // any amount of arguments, return a promise or not return{ //위에 정의한 state, getters, actions 를 리턴하여 사용할 수 있..
1.formData에 배열넣기 async function 에이피명({a}) { const formData = new FormData(); for (let i=0; i { //이렇게 쓸수도 있음 console.log(value); } 도움받은곳 : https://joshua1988.github.io/vue-camp/syntax/watch.html 6.vue3 1) vue setup vue2에서 template ,script ,style을 한꺼번에 작업할 수 있는 SFC(싱글 파일 컴포넌트)형식으로 쓰였다. 컴포넌트 모듈을 객체형태로 선언하며 props, data, methods, 라이플사이클, computed, watch등을 객체의 속성과 메서드로 정의하여 사용하였다. vue3에서 Composition A..
alias(별칭) 타입 - 재사용에 좋음 / 변수에 할당하는 방식 type Age = number; type Name = string; type Player = { readonly name:Name, age?:Age // optional } const playerMaker = (name:string) : Player => ({name}); const suuun = playerMaker("seon"); suuun.age = 32; //suuun.name="dddd"; //readonly가 있으면 읽기 전용이므로 최초 선언 후 수정 불가 const playersuuun:Player = { name:"seon" } 함수의 리턴값에 타입을 지정하는 방식 - 위의 화살표 함수와 같음 function playerM..
# 리덕스를 쓰다가 굳이 데이터변화가 없는대 리덕스를 써야하는가 라는 의구심이 들었는대 역시나 데이터변화가 필요없을땐 단순하게 다크모드를 한다거나 레이아웃만 변경된다거나 등등 - 저서에서도 단순하게 쓸때만 사용하라고 한다. 지난번 코드를 Context로 바꿔보았음 1.세팅하기 - 리액트안에 내장된 기능이라 설치할것없음 import React, { useState, createContext} from 'react' // createContext추가 const pageInfo = createContext(); //1.생성하기 - Context api를 사용하겠다고 정의한것 export { pageInfo }; //2.다른파일에서 할경우는 export를 해줘야함 const App = () => { const ..
