전체 글179 [Vue.js] a 테그의 리스트 렌더링 하는 법 Vue.js 리스트 렌더링 VueJs에서 list rendering 기능으로 다양한 복잡한 데이터 주고 받는 작업을 쉽게 해결할 수 있고 반복문을 통해 작업 시간을 줄일수 있습니다. 그렇지만 우리가 익숙한 HTML 요서들 Vue에서 바로 사용할 수 없고 특별한 Vue 문법을 사용해여 합니다. Vue.js에서는 데이터를 효과적으로 렌더링하기 위해 특별한 문법과 기능을 제공합니다. Vue.js의 주요 기능 중 하나인 "리스트 렌더링"은 반복적으로 나타나는 데이터를 간편하게 처리할 수 있도록 도와줍니다. 일반적으로 Vue에서 리스트를 렌더링하는 방법은 v-for 디렉티브를 사용하는 것입니다. 이 디렉티브를 사용하면 배열이나 객체 등과 같은 데이터를 기반으로 반복문을 수행하여 HTML 요소를 생성할 수 있습니다.. 2023. 1. 5. Tailwind CSS 설치 및 Vue.js 프로젝트 적용하는 방법 Tailwind CSS이란? Tailwind CSS은 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다. 별도의 CSS 파일이나 style 태그를 사용하지 않고 HTML의 class 속성에 입력되는 내용에 따라 스타일링이 적용되기 때문에 굉장히 간단하고 직관적으로 코드를 작성할 수 있습니다 Tailwind CSS는 커스터마이즈 가능한 디자인 시스템을 구축하기 위한 풍부한 기능을 제공합니다. 클래스 네임을 사용하여 여러 가지 스타일을 적용할 수 있으며, 반응형 디자인을 위한 클래스도 제공합니다. 또한, 테마 파일을 사용하여 전체적인 디자인을 변경할 수 있습니다. 이 프레임워크는 많은 개발자들에게 인기가 있으며, Tailwind CSS를 사용하면 일관된 디자인과 빠른 개발 속도를 유.. 2023. 1. 1. [Vue.js] 뷰 리스트 렌더링 하는 법, Vue.js List Rendering 뷰 리스트 렌더링 복잡한 웹을 만들다보면 정말 자주 마주치게 되는 상황이 있습니다. 게시판의 게시글 리스트를 보여줘야하는 상황처럼 목록이나 리스트와 같이 비슷한 내용을 반복적으로 보여줘야하는 경우가 그 예입니다. 이때 사용하는 디렉티브가 바로 v-for 디렉티브입니다. Html 요소들 데이터 값을 받아 rendering 하려면 태그 안으로 data() 데이터 보건서를 만듭니다. ... data(){ return { building : ['OneRoom', 'TwoRoom', 'ThreeRoom'], price : [100,200,300], } }, Html div 태그로 건물 데이터 실시간 렌더링 특징 {{ data }} {{building[0]}} {{price[0]}} {{building[1]}} {.. 2022. 12. 30. Vuejs Firebase 연동 오류 해결 v9버전, 2023 [solved ] 요즘 firebase에서 업데이트가 많이 하다 보니까 연동할 때 다양한 오류가 뜹니다. 공식 홈페이지나 다양한 자료를 통해 VueJs 프로젝트와 Firebase를 연동할 때 이런씩으로 설명합니다. Firebase이란? • 구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다. • 백엔드 서버 기능을 클라우드 서비스 형태로 제공합니다. • 인증(Authentication), 데이터베이스(Firestore), 분석 (Analytics) 등의 기능 제공합니다. 1. VueJs 프로젝트 main.js 내용 import firebase from "firebase"; /* code from our Firebase console */ const firebaseConfig = { apiKey: "", authDomain.. 2022. 12. 24. 이전 1 ··· 33 34 35 36 다음
