리액트에 익숙해져있고, vue를 독학해서 사용해보니 아직 어색해서... 컴포넌트로 props를 전달할 때는 어떻게 하나 찾아보다가 까먹을까봐 작성함 1. CreditCart 컴포넌트 {{ price }} 원 총 {{ count }}건 발송가능합니다 1건당 15원에 결제가능합니다 {{ credit }} 크레딧 + 10% 기본 크레딧 {{ basic }} 추가 크레딧 + {{ add }} 구매하기 export default { props: { price: { type: String, }, count: { type: String, }, credit: { type: String, }, basic: { type: String, }, add: { type: String, }, }, }; script의 props에 ..

svg파일을 사용해야하는데 간편하게 사용할 수 있는 라이브러리를 찾았다. https://www.npmjs.com/package/vite-svg-loader vite-svg-loader Vite plugin to load SVG files as Vue components. Latest version: 5.1.0, last published: 3 months ago. Start using vite-svg-loader in your project by running `npm i vite-svg-loader`. There are 93 other projects in the npm registry using vite-svg-loader. www.npmjs.com 에 나와 있는 사용 설명대로 설치하면됨 npm in..

https://router.vuejs.org/installation.html Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org 라우터를 설치한다. src -> router 폴더를 생성하고 index.js를 생성한다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "ex) /list", component: ex) List, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default ro..

https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com https://v2.tailwindcss.com/docs/guides/vue-3-vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com 테일윈드 사용법을 보고 따라해본다. code . 로 코드를 열어본다. 위와같이 수정한다. /** @type {import('tailwindcss').Config} */ exp..

상세페이지임 상세페이지 내용임 body { margin: 0; } div { box-sizing: border-box; } .black-bg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; padding: 20px; } .white-bg { width: 100%; background: white; border-radius: 8px; padding: 20px; } 모달창은 클릭하면 출력되어야한다. 1. ui의 현재 상태를 저장해둠 2. 이 데이터에 따라 ui가 어떻게 보일지 작성함 1. 현재 모달창의 상태를 만들어놓는다. export default { name: "App", data() { return {..

이벤트 핸들러 버튼을 클릭하면 코드 실행하기 {{ products[0] }} 50 만원 허위매물신고 이벤트 핸들러를 추가하기 위한 버튼을 추가한다. @click 또는 v-on export default { name: "App", data() { return { 신고수: 0, 메뉴들: ["Home", "Shop", "About"], products: ["역삼동원룸", "천호동원룸", "마포구원룸"], }; }, components: {}, }; 신고수는 data()로 관리한다. 클릭이벤트에는 이렇게 허위매물신고 신고수 : {{ 신고수 }} 버튼을 클릭하면 신고수가 증가한다. 만약에 코드가 길어지면 보기 힘들기 때문에 함수로 만들어서 관리할 수 있다. 함수만들 때 주의 사항 export default { n..

export default { name: "App", components: {}, }; #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } 정리한다 . XX 원룸 XX 만원 XX 원룸 XX 만원 export default { name: "App", components: {}, }; #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: ..

https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 리액트만 사용해보다가 vue에 도전하게 됐다. 어떻게 시작할지 찾아보다 유튜브 강의를 보면서 배워보기로 한다. 1. node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org -> 기본 경로는 건드리지 않기 최신으로 설치 안하면 오류 날 수 있음 2. vscode 설치 3. vscode 에서 개발환경 세팅 확장 프로그램 설치 바탕화면 오픈해서 터미널로 vue create 프로젝트명으로 프로젝트를..

https://docs.expo.dev/develop/development-builds/create-a-build/ Create a development build Learn how to create development builds for a project. docs.expo.dev

import { View, Text, ActivityIndicator } from 'react-native'; import React from 'react'; export default function FavoriteScreen() { return ( 로딩... ); } PlaceListView와 같이 파이어스토어에서 데이터를 가져온다. export default function FavoriteScreen() { const { user } = useUser(); const [favList, setFavList] = useState([]); useEffect(() => { user && getFav(); }, [user]); const getFav = async (del = false) => { setFa..