본문 바로가기

전체 글

(127)
input 로그인,회원가입 심플 디자인 코드 html / css -html Google Material Design in CSS3Inputs Name Email a tutorial by scotch.io  -css* { box-sizing:border-box; }/* basic stylings ------------------------------------------ */body { background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); }.container { font-family:'R..
조건문 ?? 의미 useToast().error(errorMessage ?? '에러가 발생했어요.') ?? 같은경우는 앞에꺼가 없을경우 무조건 ?? 뒤에거가 실행되게끔 하는 조건문이다.
Vue3 라이프 사이클 자주 쓰는 메써드 3종류. 렌더링전 = Created 렌더링후 = Mounted 데이터변경후 > 리렌더링 후거나 Property가 변경된후 변경된돔에 접근할때. = Updated
Vue3 - onMounted - 온마운티드 변경 안녕 온마운트는 템플릿코드가 실행된후에 실행되는것이다. 그래서 함수를 만들고 html 그려진후에 실행하려면 온마운트를 사용해서 함수를 그안에 넣어주면 실행하게된다. 그러면 온마운티드를 이용해서 html 이 그려진후에 데이터를 불러와서 넣어주면 좋지않을까? 와치같은경우는 리액트의 유스이펙트의 useEffect 의 [] 부분에 해당하는 느낌이다. onMounted 는 html이 그려진후에 적용되는 것이다.
MVC / FLUX 패턴 공부
Vue - 에서 이미지 동적경로 방법. (방법이 다 다름.) vue3, vite를 사용할시 동적경로를 만들어서 넣어야하는경우 function getImageUrl(name) { return new URL(`/src/assets/images/${name}.png`, import.meta.url).href; } 그외는 require를 사용하는데. 이런식 으로 해야 적용이된다.
vue - 함수를 만들어서 연동하기 데이터 끝나는 부분에 methods : {}, 를쓰고 그안에 여러 함수들을 넣을수있다. 데이터를 가져오려면 this.를 붙여줘야한다. this 바인딩 문법. this가 가르키는 것은 제일외곽 오브젝트를 뜻하는중이다. 함수를 더 추가하고싶으면 , 콤마를찍고 함수를 여러개를 작성하면된다. Vue를 개발 할때는 데이터를 어떻게 만들지 먼저 생각하는게 팁이다.
Vue - 이벤트 핸들러 적용방법 (이벤트종류) onClick 에 vue 방식으로 이벤트를 넣을때는 v-on:click="" (Vue 일반적 방식) @click="" (단축어 방식) 두가지 종류가 있다. 이벤트 클릭 데이터 연동 클릭 말고도 여러가지 이벤트 명령어들이 있다.