티스토리

최솔이의 개발 학습일지

검색하기

블로그 홈

최솔이의 개발 학습일지

solyi.kr/m

SOLYI 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

[vue]컴포넌트 자세히 알아보기 1. 섹션 소개 컴포넌트 등록 및 스타일에 대해 Component Registration & Styling 컴포넌트를 스타일링 하는 방법과 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법도 알아본다 슬롯과 동적 컴포넌트 Slots & Dynamic Components 컴포넌트 이름과 프로젝트 폴더 구조 Naming & Folder structure 2. 전역 컴포넌트Global Components와 지역 컴포넌트Local Components main.js에서 app.component('the-header', TheHeader); 처럼 설정하는건 vue앱의 전역에서 사용할 수 있는 컴포넌트다. 하지만 컴포넌트를 등록하는 방법 중에서 가장 좋은 방법은 아니다. 한가지 잠재적 단점이 있다. 모든 컴.. 공감수 1 댓글수 0 2023. 1. 10.
[vue]컴포넌트 통신 세션8: 컴포넌트 통신 Component Communication & Reusable 1. 이번 세션 학습 컴포넌트로 UI를 구성하는 방법 어떻게 컴포넌트끼리 통신하는지, 컴포넌트 사이에서 어떻게 데이터를 주고 받는지 어떤 접근법이 있고, 어떻게 선택 해야하는지 2. 외부에서 데이터 받아오기 중요!같은 컴포넌트를 여러번 사용할때 매번 다른 데이터로 설정한다는 개념 props property의 약자로 커스텀 html 속성을 의미한다. props 로 설정한 것을 vue가 인식하게 하려면 받는 component 에서 props 를 추가해주어야한다. 가장 단순하게 받는 방법은 [ ] array 이다. props: [], 그 다음 모든 커스텀 속성을 추가해준다. props: [ 'name', 'phoneNumbe.. 공감수 0 댓글수 0 2023. 1. 2.
[vue2 - error] Vue packages version mismatch: 온라인에서 다운로드받은 nuxt 프로젝트에서 오류가 발생했다. npm install > npm run dev 실행했더니 Vue Package version mismatch : 라는 오류가 발생. Vue packages version mismatch: - vue@2.6.14 - vue-server-renderer@2.6.12 package.json 파일에서 vue와 vue-server-renderer 의 버전이 명시되어있지 않아서 자동으로 최신 버전으로 업뎃을 했고, 그 결과 vue 와 vue-server-renderer의 버전이 일치하지 않는다는 내용. package.json 파일에 다음을 추가해준다. "vue": "^2.6.12", "vue-server-renderer": "^2.6.12", packa.. 공감수 0 댓글수 0 2022. 1. 31.
[vue] eslint 가 아닌 prettier 가 적용 될 때 vs code 에서 별다른 설정을 만지지 않았음에도 불구하고 내가 원했던 대로 개행이 되지 않았다. 또한 자꾸 스크립트 부분에 작은 따옴표를 사용한다고 설정 해두었는데 저장할때마다 큰 따옴표로 변경되어 불편함을 느꼈다. 검색해보니 설정이 바뀌어있었다. vscode 의 단축키 ctrl + shift + p 로 메뉴 검색을 열어서 Open Settings (JSON) 을 열어준다. ctrl + f로 formatter 라고 검색해보면 "editor.defaultFormatter": "esbenp.prettier-vscode", 이렇게 eslint 가 아닌 prettier 로 설정되어 있음을 알 수 있다. 그 부분을 아래와 같이 eslint 로 변경해주면, 성공적으로 원하던 부분에서 개행이 된다. "editor.. 공감수 0 댓글수 0 2021. 12. 25.
[vue] 정리 (최종 업데이트:2021-12-21) 최솔이의 작성 요령 개념 개념 ? 명령어 $ npm ... 주석 // 플러그인, 팁 * 주제별로 언급 @ 2021-12-07 VUE CLI / VUE 파일의 구성 요소 3가지 CLI ? Command-Line Interface 를 의미한다. 터미널을 통해 프로젝트를 손쉽게 시작할 수 있도록 도와준다. $ npm install -g @vue/cli // npm 이라는 명령어를 통해 vue cli를 전역(-g)에 설치해준다 * vue cli 공식 사이트 https://cli.vuejs.org/ $ vue create hello-world // 간단하게 프로젝트를 생성 할 수 있다. 강의 내에서 간단한 프로젝트 생성은 건너 뛰고 lint ? 코드 작성의 규칙을 정함 eslint , rules 도 마찬가지 pu.. 공감수 0 댓글수 0 2021. 12. 7.
[Netlify] 서버리스 배포 netlify.com login - functions https://docs.netlify.com/functions/overview/?_ga=2.6479674.907396097.1634890312-596079682.1634890312 netlify.toml 파일 생성 [build] functions = "functions" functions/hello.js 파일 생성 exports.handler = async function (event, context) { return { statusCode: 200, body: JSON.stringify({ name: 'choi-solyi', age: 31, email: 'choi-solyi@naver.com' }) } } --> https://unruffled-ja.. 공감수 0 댓글수 0 2021. 10. 22.
[vue3] 동기? 비동기? promise // function a(callback){ // setTimeout(()=>{ // console.log('A') // callback() // },1000) // } // function b(callback){ // setTimeout(()=>{ // console.log('B') // callback() // },1000) // } // function c(callback){ // setTimeout(()=>{ // console.log('C') // callback() // },1000) // } // function d(callback){ // setTimeout(()=>{ // console.log('D') // callback() // },1000) // } // a(function (){ .. 공감수 0 댓글수 0 2021. 10. 21.
[vue3] props, context setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ 공감수 0 댓글수 0 2021. 10. 19.
[vue3] component api 적용/미적용 예제 // 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }} 공감수 0 댓글수 0 2021. 10. 19.
[vue3] composition api 컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }} 공감수 0 댓글수 0 2021. 10. 19.
vue3 ref //App.vue Hello~~~~~.vue~~ Good!!! 공감수 0 댓글수 0 2021. 10. 19.
vue3 provide, inject app.vue -> parent -> child 부모에서 자식으로 내릴때는 props라는 개념사용. 하지만 부모에서 손자로 내릴때는 provide, inject 사용하면 더욱 편리하다. 값을 넘길때 parent 에는 필요 없는 부분을 작성해줘야했는데 그걸 편리하게 하고자 변경! app.vue에서 provide로 데이터값을 지정하고 child.vue에서 inject 로 값을 받아줄수있다. ! 주의 할점 반응성 제공을 하지않는다. 1) 한번만 출력하게 만들거나 2)반응성을 유지하게 작성하려면 추가작업을 해야함. computed (계산된 데이터) import { computed } from 'vue'를 통해 provide 에 return computed ~.. //App.vue 클릭 App: {{ messag.. 공감수 0 댓글수 0 2021. 10. 19.
vue3 slot //App.vue Banana (B) //MyBtn.vue 공감수 0 댓글수 0 2021. 10. 19.
vue3 component emit //App.vue Banana //MyBtn.vue ABC button 공감수 0 댓글수 0 2021. 10. 19.
vue3 component 속성 상속 //App.vue Banana 첫번째 두번째 공감수 0 댓글수 0 2021. 10. 19.
vue3 Componunts Apple Bananaa Melon Strawberry Cherry 공감수 0 댓글수 0 2021. 10. 19.
vue3 v-model / @input / @change / v-model.lazy / v-model.number / v-model.trim v-model 한글 입력시에는 방법이 다름 {{ msg }} {{ checked }} @input / @change / v-model.lazy / v-model.number / v-model.trim {{ msg }} 공감수 0 댓글수 0 2021. 10. 18.
vue3 @keydown @keydown.a = a키 누르면 반응 @keydown.ctrl.a = 컨트롤+a키 누르면 반응 @keydown.enter = 엔터키 누르면 반응 공감수 0 댓글수 0 2021. 10. 18.
vue3 이벤트 수식어 stop prevent capture self once passive prevent / once / prevent.once NAVER @click.stop / @click.capture / @click.self @wheel.passive 공감수 0 댓글수 0 2021. 10. 18.
vue3 event handler Click me! 1 Click me! 2 Click me! 공감수 0 댓글수 0 2021. 10. 18.
vue3 v-for @고유id를 만들때 사용 npm i -D shortid shortid.generate() 추가 {{ name }} - {{ id }} //변이 methods push, pop, shift, unshift, slice, sort, reverse //비-변이 methods filter, concat, slice 공감수 0 댓글수 0 2021. 10. 18.
vue3 v-if / v-show click me! Hello? Hello? 공감수 0 댓글수 0 2021. 10. 18.
vue3 v-if / v-else-if / v-else click me! Hello!!!! Count > 3 Good~~! 공감수 0 댓글수 0 2021. 10. 18.
vue3 클래스, 스타일 바인딩 //클래스 바인딩 Hello World ( {{ isActive }} ) 스타일 바인딩 :style 부분에 직접 color:red 를 입력하는 방식 fontStyle 오브젝트 입력 [배열, 배열] 형식으로 입력 Hello My name is Solyi 공감수 0 댓글수 0 2021. 10. 18.
vue3 watch @watch }, watch: { //데이터들의 변경 사항을 감시하는 용도 //감지가 되면 내부 로직이 실행되는 구조 //데이터, function 모두 가능 msg: function(newValue){ console.log('msg: ', this.msg, newValue) }, reversedMessage(v){ console.log('reversedMEssage : ', this.reversedMessage , v) } }, 공감수 0 댓글수 0 2021. 10. 18.
vue3 computed - getter setter {{ reversedMessage }} {{ reversedMessage }} ADD~! 공감수 0 댓글수 0 2021. 10. 18.
vue3 computed 캐싱 //중괄호 내부에서 문자 합치기, 변형하기 {{ msg+'!?' }} {{ msg.split('').reverse().join('') }} //h1 태그 내부 {{ reverseMessage() }} //methods {{ reversedMessage }} //computed. computed 캐싱 - 한번 계산을 하면 저장된 값을 - computed에서 만들어둔 데이터는 캐싱이라는 기능이 있어서 한번 연산을 해두면 반복적으로 데이터처럼 화면에 출력할때 또 계산을 하지않음. 가지고 있는 데이터를 출력해줌 - 여러차례 출력되는 데이터 일땐 계산된 가지고 있는 데이터(캐싱)를 통해서 출력을 해준다. 기본적으로 application을 만들때 데이터를 최적화 할때 캐싱 기능을 이용할수있다. computed 에는.. 공감수 0 댓글수 0 2021. 10. 18.
vue3 computed @@@Computed //계산된 데이터 computed 에 function haSFruits 생성후 v-if문에 hasFruits 입력 function reverseFruits 생성후 v-for문 fruit in reverseFruits Fruits {{ fruit }} Reverse Fruit {{ fruit }} 공감수 0 댓글수 0 2021. 10. 18.
vue3 syntax //onClick @click="펑션명" //조건문 v-if //마운트된 이후로 데이터가 변하지 않음 v-once //원시 html v-html="msg" //v-bind msg : 'active' v-bind:id="" ->> :id v-bind:class="" ->> :class {{ msg }} 공감수 0 댓글수 0 2021. 10. 18.
[유튜브] 한시간만에 끝내는 Vue.js 입문 배운것 vue 설치 (nodejs 설치 필수) - npm install -g @vue/cli 폴더 생성 방법 - vue create test ('test'라는 프로젝트 생성) bootstrap vue 설치 방법 data를 {{ }} 로 표시하는 방법 watch 의 기능 method (function) create, mount, update, destroy 타이밍 App.vue / main.js / router.js / Header.vue / Home.vue / About.vue 각 무슨 기능을 하는지 잘 모르겠음 데이터 바인딩 {{ }} 이벤트 @click @change 다중데이터 v-for 조건에 따라 보여주기 v-if : 렌더링 X v-show : 렌더링O 보여주진않음. Welcome to home~.. 공감수 0 댓글수 0 2021. 10. 13.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.