이벤트 핸들러 버튼을 클릭하면 코드 실행하기 {{ 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..

우선 데이터베이스만 사용할 경우 리액트랑 똑같기 때문에(리액트 네이티브) App으로 새 프로젝트를 만들지 않고 바로 기존 프로젝트 todoList 혹은 다른 프로젝트를 선택 ​ 우선 파이어스토어의 룰(규칙) 부터 살펴보자. 규칙의 날짜가 오버됬다면 우선 현재 날짜 이후로 간단히 수정해주고 프로젝트 완료후 규칙을 새로(인증등 적용)만들었다. 파이어베이스는 사용할려면 라이브러리를 설치해야한다. 파이어베이스를 설치한다. import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.EXPO_PUBLIC_FIREBASE_A..

현재 앱은 내가 있는 위치를 중심으로 검색이 된다. ​ 상단의 서치바를 검색할 경우 그 지역의 위도 경도를 얻어서 그 지역 위치로 검색되게 한다. ​ 우선 SearchBar 에 자동으로 나오는 주소를 클릭시 로케이션이 searchedLocation 으로 저장됨 { console.log("위치설정"); searchedLocation(details?.geometry?.location); }} ​ searchedLocation은 props로 상위 컴포넌트 HomeScreen 에서 가져옴 이때 HomeScreen의 searchedLocation을 이름없는 화살표 함수로 만드는데 이때 (위치)를 입력시 그 위치의 위도 경도를 로케이션에 저장한다. 그러면 로케이션에서 반경 5km으로 충전소를 찾아서 앱의 화면이 재..

GlobalApi.js에서 shortFormattedAddress추가하기 "places.evChargeOptions", "places.shortFormattedAddress", "places.photos", PlaceListView.jsx 생성 import { View, Text } from 'react-native'; import React from 'react'; export default function PlaceListView({placeList}) { return ( PlaceListView ); } HomeScreen.jsx 검색결과로 palceList 스테이트를 만듬 const [placeList, setPlaceList] = useState([]); //구글맵 서버에서 받은 resp.dat..

https://console.cloud.google.com/welcome/new?project=linear-rig-414323 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 구글 클라우드 무료 시작하기 사용자 인증 정보 사용자 인증 정보 만들기로 api키를 발급한다. 사용설정된 API 및 서비스 에서 검색으로 두 개 사용 클릭한다. env파일 추가해서 api키 붙여넣기한다. Seacrbar에 적용 import { View, Text } from "react-native"; import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete"; import React..

문제 설명 다음은 중고거래 게시판 정보를 담은 USED_GOODS_BOARD 테이블입니다. USED_GOODS_BOARD 테이블은 다음과 같으며 BOARD_ID, WRITER_ID, TITLE, CONTENTS, PRICE, CREATED_DATE, STATUS, VIEWS은 게시글 ID, 작성자 ID, 게시글 제목, 게시글 내용, 가격, 작성일, 거래상태, 조회수를 의미합니다. 문제 USED_GOODS_BOARD 테이블에서 2022년 10월 5일에 등록된 중고거래 게시물의 게시글 ID, 작성자 ID, 게시글 제목, 가격, 거래상태를 조회하는 SQL문을 작성해주세요. 거래상태가 SALE 이면 판매중, RESERVED이면 예약중, DONE이면 거래완료 분류하여 출력해주시고, 결과는 게시글 ID를 기준으로 ..