개발자 최솔이

1. 섹션 소개 컴포넌트 등록 및 스타일에 대해 Component Registration & Styling 컴포넌트를 스타일링 하는 방법과 특정 스타일이 특정 컴포넌트에만 영향을 미치도록 하는 방법도 알아본다 슬롯과 동적 컴포넌트 Slots & Dynamic Components 컴포넌트 이름과 프로젝트 폴더 구조 Naming & Folder structure 2. 전역 컴포넌트Global Components와 지역 컴포넌트Local Components main.js에서 app.component('the-header', TheHeader); 처럼 설정하는건 vue앱의 전역에서 사용할 수 있는 컴포넌트다. 하지만 컴포넌트를 등록하는 방법 중에서 가장 좋은 방법은 아니다. 한가지 잠재적 단점이 있다. 모든 컴..

세션8: 컴포넌트 통신 Component Communication & Reusable 1. 이번 세션 학습 컴포넌트로 UI를 구성하는 방법 어떻게 컴포넌트끼리 통신하는지, 컴포넌트 사이에서 어떻게 데이터를 주고 받는지 어떤 접근법이 있고, 어떻게 선택 해야하는지 2. 외부에서 데이터 받아오기 중요!같은 컴포넌트를 여러번 사용할때 매번 다른 데이터로 설정한다는 개념 props property의 약자로 커스텀 html 속성을 의미한다. props 로 설정한 것을 vue가 인식하게 하려면 받는 component 에서 props 를 추가해주어야한다. 가장 단순하게 받는 방법은 [ ] array 이다. props: [], 그 다음 모든 커스텀 속성을 추가해준다. props: [ 'name', 'phoneNumbe..

온라인에서 다운로드받은 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..

vs code 에서 별다른 설정을 만지지 않았음에도 불구하고 내가 원했던 대로 개행이 되지 않았다. 또한 자꾸 스크립트 부분에 작은 따옴표를 사용한다고 설정 해두었는데 저장할때마다 큰 따옴표로 변경되어 불편함을 느꼈다. 검색해보니 설정이 바뀌어있었다. vscode 의 단축키 ctrl + shift + p 로 메뉴 검색을 열어서 Open Settings (JSON) 을 열어준다. ctrl + f로 formatter 라고 검색해보면 "editor.defaultFormatter": "esbenp.prettier-vscode", 이렇게 eslint 가 아닌 prettier 로 설정되어 있음을 알 수 있다. 그 부분을 아래와 같이 eslint 로 변경해주면, 성공적으로 원하던 부분에서 개행이 된다. "editor..

후기에 작성하기 전에.. 광고나 홍보가 아닌 개인적인 후기임을 알린다. 수강 계기 vue나 react를 공부하고 싶어서 웹서핑을 하다 보면 꼭 만나는 광고가 있다. 패스트 캠퍼스, ㅈㄹㅂㅇㅅ, 국비 학원 등등... 패스트캠퍼스 사이트에 들어가면 마지막 할인은 ㅇ일 ㅇ시간 남았다며 구매를 독촉하는 느낌이 들어 이미지가 좋지 않았지만 상세 페이지의 내용들은 그야말로 사람을 현혹시키는 내용이었다. 이럴 때야말로 실제 후기를 열심히 찾아보고 수강 신청해야겠다는 생각이 들었는데 패스트캠퍼스의 전반적인 후기는 썩............. ...호평은 아니었다. 혹평 혹은 비난에 가까운 게시물도 여럿 있었고, 신고를 받은 건지 알 수는 없지만 삭제된 게시물도 여럿 있었다. 하지만, 가난한 직장인으로서 다른 온라인 강의..

// 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 (){ ..

setup 내부에서 props 와 context 사용하기 // App.vue Apple //MyBtn.vue ㅇ

// 컴포넌트 api적용 XXX {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} //컴포넌트 API 적용 OO {{ count }} {{ message }}

컴포지션 API 기존에 배운 내용대로 코드를 짜게된다면 다른 로직이 서로 섞여있어서 읽기쉬운 코드가 아니다. 컴포지션 API를 사용하므로써 같은 로직은 한데 모아서 처리할수있게된다 {{ count }}

//App.vue Hello~~~~~.vue~~ Good!!!