FrontEnd56 [Vue.js] style 태그에 있는 scoped의 의미 CSS를 정의하는 style태그에 scoped의 의미 SPA는 말 그대로 Single Page, HTML Page가 단 한개만 존재하기 때문에 Component별로 다른 파일에서 Style을 지정해주어도 각 태그, class 등에 적용되는 style이 겹칠 수 있다. 이를 해결하기 위해서 사용되는 방법은 여러가지가 있다. React에선 SCSS의 Nesting을 사용하거나, styled components를 사용해서 className을 독립적으로 지정되도록 하는것이 일반적이다. Vue.js에선 2022. 9. 18. [Vue.js] Vue CLI를 활용해서 로그인 form 만들기 Vue CLI를 활용해 사용자 입력 폼 (로그인 폼) 만들기 기초 강의의 마지막으로 로그인 폼 만들기를 해보았다. 이제 vue 개발을 시작할 준비가 되었다~! // @App.vue id: pw: login hi 2022. 9. 18. [Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기 Vue Cli를 통해 컴포넌트 만들어보기 아래와 같이 Vue CLI를 통해 AppHeader 컴포넌트를 만들고, Props 내리기, Event 올리기를 해보았다. data()로 달라진 점 주석에 설명이 되어 있으며, 해당 부분 이외엔 특별히 다른점이 없다. 이제 이정도면 Vue를 통해 개발을 시작할 준비가 되었다. 중급 강의를 들으러 가기 전 마지막 사용자 입력 폼 하나를 만들어 볼 예정이다. //@ App.vue {{ str }} // @ components/AppHeader.vue {{ propsdata }} send 2022. 9. 18. [Vue.js] vue cli와 이전 방식 비교 Vue Cli와 이전 방식의 비교 아래 코드에 주석을 통해 설명했지만, 정리해보면 new Vue({ }) 라는 인스턴스 방식에서 export default { } 방식으로 변경 const component { template : '' } 방식에서 template태그 안으로 html 부분 이동 컴포넌트 태그 영역은 kebab-case, PascalCase 모두 같다. => 아래 인스턴스 옵션 속성, 컴포넌트 옵션 속성 부분에 components: { HelloWorld } 이런 부분에 선언되어있는 것이고, 이 HelloWorld 는 'hello-world' = HelloWorld와 같다. 2022. 9. 18. [Vue.js] Computed 속성을 활용한 CSS Class 바인딩 Computed 속성을 활용한 CSS Class 바인딩 주석 처리 한 것처럼 class 네임에 인라인으로 warning을 true일 때만 넣어줄 수가 있다. computed 속성을 활용하면 인라인이 아니라 하나의 함수명으로 제어할 수 있다. Hello 2022. 9. 18. [Vue.js] Watch 속성 vs Computed 속성 watch 속성, Computed 속성 두 속성은 Data가 변경됨에 따라 실행된다는 점에서 비슷하다. 하지만 다른 점이 있다는데.... 솔찍히 모르겠고, 공식문서에서는 computed를 쓰는것을 권장하고 있습니다... 솔찍히 이유는 이해가 안되네요. 좀 더 공부해보고 경험해보면서 익혀야겠습니다. 2022. 9. 18. [Vue.js] Watch 속성 Vue에서 데이터가 변할 때마다 실행 되는 Watch 속성 데이터의 변화를 감지하여 메서드가 실행되도록 할 수 있습니다. 이 watch 속성을 사용하면 React의 useEffect처럼 특정 데이터가 변할 떄마다 어떤 행동을 하도록 만들 수 있습니다. 아래 예제를 보면 num이 변할 때마다 this.logText()라는 메서드를 실행하게 됩니다. 이런 방식은 아래 react useEffect() 훅과 비슷한 효과를 볼 수 있겠습니다. {{num}} increase // 실행은 안시켜봤는데 위 코드와 아래코드가 같은 코드인것 같습니다. num이 변할 때마다 useEffect 안의 logText()가 실행, // 단 하나 다른점은 아래 코드에서는 mount되는 시점에 logText가 한번 실행 되겠네요. i.. 2022. 9. 18. [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding v-on 디렉티브 v-on:keyup 과 같은 v-on 디렉티브를 통해 eventListener를 쉽게 붙일 수 있다. Click me add 2022. 9. 18. [Vue.js] 데이터 바인딩, 디렉티브 Vue에서 데이터를 다루는 방법은 2가지다. 데이터 바인딩 Mustach Syntax라고 불리는 방식으로 HTML내부에 직접 바인딩 할 수 있다. {{ data }} 디렉티브 v-bind, v-if, v-show, v-html 등등 v-로 시작하는 정해진 문법을 통해 html tag의 attributes에 데이터를 바인딩 할 수 있다. 아래 코드에서 v-bind로 만들어진 예제들을 확인할 수 있다. {{number}} {{doubleNum}} v-if Loading...v-if test user has been logged in v-show Loading...v-show 2022. 9. 18. [Vue.js] Axios 라이브러리 Axios 서론 SPA 프레임워크와 관계없이 가장 많이 쓰이는 것으로 알려진 AXIOS 라이브러리입니다. 부트캠프에서 React를 배울 당시 Axios를 쓰지않고, Fetch만을 사용해서 구현해보라는 제한사항이 있었습니다. 따라서 저는 Axios 사용이 처음입니다. 뷰에서는 Axios를 사용하라는 권고가 있습니다. axios이전엔 vue-resourse라는 라이브러리가 공식이었다고 하네요. Axios 사용법 (with 오픈소스 사용법) 오픈소스를 사용하기 전 확인해야 할 가장 중요한 지표는 Star 수 그 다음 커밋수와 컨트리뷰터를 보면 좋다. 마지막으로 최근의 커밋이 언제인지 확인하며 신뢰도를 확인할 수 있다. Axios 깃헙 공식 설명에 따르면 Axios는 Promise기반의 HTTP Client이다.. 2022. 9. 18. 이전 1 2 3 4 5 6 다음