728x90 프론트엔드111 [Vue.js] 뷰 v-model 활용하여 입력값 관리하기 [Vue.js] 뷰 v-model 활용하여 입력값 관리하기 사용자가 input 이나 textarea에 데이터를 입력하였을때 v-model을 이용하여 이를 실시간으로 저장하고 저장한 데이터를 가공할수 있다 ⭐️ 샘플 예제 {{number * 2}} 2021. 8. 14. [Vue.js] 뷰 컴포넌트간 양방향 데이터 바인딩 [Vue.js] 뷰 자식 컴포넌트와 부모컴포넌트 데이터 양방향 바인딩 ⭐️ 학습 목표 props를 통해 부모-> 자식 컴포넌트로 데이터를 전달했다면 자식 컴포넌트에서 이벤트 발생시 부모 컴포넌트로 데이터를 다시 바인딩 해야하는 경우도 있는데 아래 예제를 통해 이를 학습해보도록 하자 ⭐️ 기본 형태 부모에게 데이터 전송! ⭐️ 샘플 예제 (로직) 메뉴와 상품 리스트가 나오는 예제인데 부모 컴포넌트는 App, 자식 컴포넌트는 Menu, Product,Modal이다 자식 컴포넌트 내 상품 제목을 클릭하면 모달창이 출력되고 닫기 버튼을 클릭시 모달창이 종료되는 로직인데 자식 컴포넌트인 상품 컴포넌트에서 제목 클릭 이벤트 발생시 상품의 고유번호와 모달창 닫힘 상태를 부모 컴포넌트로 전달하고 부모 컴포넌트에서 해당.. 2021. 8. 14. [Vue.js] 뷰 props 사용 방법 [Vue.js] 뷰 props 사용 방법 ⭐️ props 란 ? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다 ⭐️ 사용 방법 부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다 ⭐️ 기본 형태 ⭐️ 샘플예제 (로직) 쇼핑몰 상품 리스트가 출력되는 예제를 만들어 보았다. App은 부모 컴포넌트, Menu와 Product는 자식 컴포넌트이고 각 자식 컴포넌트는 props를 통하여 해당하는 데이터를 전달 받아 출력하는 형식이다 ⭐️ App 컴포넌트 (부모컴포넌트) ⭐️ Menu 컴포넌트 (자식 컴포넌트 - 메뉴) {{item}} ⭐️ P.. 2021. 8. 14. [Vue.js] 뷰 컴포넌트 사용법 Vue Component [VueJs] 뷰 컴포넌트 사용 방법 Vue Component ⭐️ 컴포넌트 (Component) 란? 캡슐화된 코드 블록으로 한번 생성해 놓을시 쉽게 재사용이 가능하다. (인스타그램이나 페이스북 같이 비슷한 UI가 데이터만 다르게 반복되어 출력되는데 해당 프레임을 컴포넌트로 이해하면 쉽다) ⭐️ 컴포넌트를 왜 쓰는가? 첫번째로 코드가 복잡해지면 가독성이 기하 급수적으로 떨어지기에 이럴때 컴포넌트는 복잡한 코드를 보기쉽게 하는 장점이 있다 (복잡한 파일을 카테고리 폴더별로 정리 하는 것과 비슷) 두번째로 유지보수가 쉬워진다. 같은 코드를 여러번 반복하지 않고 여러번 사용하기에 하나의 컴포넌트만 수정하면 컴포넌트 사용한 모든 코드에 수정 사안이 반영이 된다. ⭐️ 샘플 예제 (로직) 쇼핑몰 상품 리스트가 .. 2021. 8. 14. [Vue.js] Vue.js 이벤트 사용 방법 (클릭 이벤트) [Vue.js] 뷰 태그 이벤트 사용 방법 뷰에서 클릭 이벤트를 사용하는 방법에는 두가지가 있는데 아래와 같다 그럼 하단의 샘플 예제를 통해 두 가지 이벤트 사용 방법을 알아보도록 하자 ⭐️ 기본 형태 ⭐️ 샘플 예제 간단 설명 샘플 예제에서는 좋아요 버튼과 싫어요 버튼을 클릭시 오른쪽에 좋아요 싫어요 개수가 올라가는 간단한 예제이다 ⭐️ 샘플예제 좋아요 좋아요 : {{likecnt}} 싫어요 싫어요 : {{dislikecnt}} export default { name: 'App', data(){ return { likecnt : 0, dislikecnt : 0 } } } 🌈 출력 결과 2021. 8. 12. [Vue.js] v-for를 통해 리스트 태그 작성하기 feat. 간단한 메뉴바 [Vue.js] 간단한 메뉴바를 통해 v-for 기능 알아보기 ⭐️ v-for 용도? Html 태그를 반복적으로 작성하거나 반복적인 태그를 작성하면서 동시에 배열 내 여러 값을 바인딩 해야하는 경우에 v-for를 사용하는데 (리스트 랜더링) 아래 예제 코드와 주석을 통해 알아보자 ⭐️ 샘플 예제 {{menu}} ⭐️ 결과 출력 2021. 8. 12. [Vue.js] 데이터 바인딩 (태그 속성 값 바인딩 포함) [Vue.js] 데이터 바인딩 data bind ⭐️ 데이터 바인딩 ? 데이터 값의 변경시 페이지 전환 없이 변경된 데이터가 바로 랜더링이 된다 (Single Page Application) ⭐️ 샘플 예제 React 의 State와 같이 Vue에서는 data(){return} 내의 값을 통해 데이터를 바인딩 할수 있다 또한 Html 태그 내 속성의 값 또한 바인딩이 가능하다 태그내 속성을 바인딩 하기 위해서는 속성명 앞에 : 를 붙여준다 {{title}} {{desc}} ⭐️ 출력 결과 2021. 8. 11. [Vue.js] Vue3 설치 하기 feat Vue-Cli [Vue.js] Vue3 설치하기 feat vue-cli 1. NodeJs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VSCODE 설치 (코드 에디터) https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code.. 2021. 8. 11. [Vue.js] 뷰 Vue.js 를 왜 쓰는가? [Vue.js] React, Angular, Vue 중 하필 Vue를 왜 쓰는가 ? ⭐️ Vue를 쓰는 이유 ? 웹 애플리케이션을 만들기 위해서 쓴다 즉, Single Page Application을 만들기위해 많이 사용하는 프론트엔트 프레임워크는 React, Angular, Vue 등이 있는데 그중 하나다 ⭐️ Vue를 사용하는 유명 기업 ? 카카오는 현재 신규 서비스를 만들때 Vue 50%, React 50% 정도 사용한다고 한다 네이버 내 음원 사이트 (바이브) 같은 경우에도 현재 vue를 사용 중인 것으로 알고 있다. 빠른 랜더링으로 인해 실시간 데이터를 ui에 빠르게 반영해야하는 비트 코인 거래소에서도 부분적으로 뷰를 많이 사용하고 있다 ⭐️ React 사용자가 가장 많은데 굳이 왜 Vue를 사.. 2021. 8. 11. [JavaScript] Console (출력) 관련 여러 매서드 자바스크립트 / Javascript Console 관련 여러 매서드 개발 하다 보면 디버깅을 위해 Console에 해당 상태나 값 등을 출력해볼때가 많은데 이를 Console.log() 만으로 표현하기에는 약간의 부족함이 느껴진다 Console 이라는 객체에는 log 매서드 이외에도 출력 관련 메서드가 몇개 더 있는데 해당 메서드를 이용하여 프로젝트시 각 상태별 조금더 가독성 높은 출력을 시도해 보자 🌈 기본 형태 //일반 메시지 출력 console.log() //정보 메시지 출력 console.info() //경고 메시지 출력 console.warn() //에러 메시지 출력 console.error() 🌈 출력 결과 2021. 7. 26. 이전 1 2 3 4 5 ··· 12 다음 728x90
