https://docs.expo.dev/build/setup/ Create your first build Learn how to create a build for your app with EAS Build. docs.expo.dev 일단 서버를 중지하기 eas login로 로그인함 안드로이드 빌드해주면 됨 build 하는 시간이 꽤 소요됨 expo 홈페이지에는 이런식으로 build되고있다. 배포 완료 다운로드 받으면 됨

https://docs.expo.dev/versions/latest/sdk/location/ Location A library that provides access to reading geolocation information, polling current location or subscribing location update events from the device. docs.expo.dev vscode에서 현재 실행중인 터미널은 놔두고 git bash로 하나 더 열어서 설치한다. 그러면 실행중에도 설치 가능함. 그리고 app.json 에 아래의 플러그인을 추가한다. { "expo": { "plugins": [ [ "expo-location", { "locationAlwaysAndWhenInUsePer..

이전에 만들어 놓은 my-app으로 날씨앱을 만들거임 https://blog.naver.com/drv983/223292498860 React Native의 규칙 (View, Text, StatusBar, StyleSheet) native의 기본 코드 구성. 처음 보는 View, Text, StatusBar, StyleSheet View react native는 웹사... blog.naver.com React Native에는 규칙이 있다. native의 기본 코드 구성. 처음 보는 View, Text, StatusBar, StyleSheet View: react native는 웹사이트가 아니기 때문에 div 대신 View를 사용해야 한다. (div 쓰면 에러) View는 container라고 생각하면 된다..

https://www.hanl.tech/blog/native-vs-hybrid-vs-pwa/ 네이티브 앱(Native App) vs 하이브리드 앱(Hybrid App) vs 프로그레시브 웹 앱(PWA) - 정의와 장단점 | 하 첫 아이폰이 2007년 6월에 출시된 후 폭발적인 변화와 성장을 겪어온 모바일 앱 시장. 오늘 현재에는 다양한 방법으로 모바일 앱을 개발할 수 있다. 문제는 – 어느 […] www.hanl.tech 안드로이드앱과 ios앱으로 나눠지는데, 언어가 달라서 호환이 되지 않아 같이 만들 수는 없다. 안드로이드는 예전에는 자바를 많이 사용했는데, 현재는 코틀린을 주로 사용한다고 한다. IOS는 주로 스위프트라는 언어를 사용해 제작한다고 함 하지만 크로스 플랫폼을 사용하여 한 번 개발로 둘 ..

홈페이지 검색창에 검색어를 입력 후 검색 버튼을 클릭할 경우 ProductList페이지로 이동하여 검색 결과를 출력하도록 함 Navbar.jsx useState 로 search를 추가한다. 검색창(input)의 내용이 변경될 때마다 setSearch로 검색어를 저장한다. 그리고 onSubmit 이벤트로 검색 버튼을 클릭할 경우 handleSubmit을 실행하여 검색어가 공백이 아닐 경우에만 navigate를 사용해 products로 이동한다. 파라미터로는 search= 검색어에 공백을 제거해서 보낸다. const Navbar = ({ user, cartCount }) => { const [search, setSearch] = useState(""); //검색어 const navigate = useNavi..

대표 상품을 가져오기 위한 주소는 아래와 같다. [GET] 대표 상품 가져오기 - http://localhost:5000/api/products/featured 그리고 주요 제품은 3개가 들어있다. 현재는 위와 같이 주요 제품들이 표시 되는데 useData를 사용해서 백엔드에서 주요 제품을 받아온 다음에 ProductCard로 넘겨주면 되겠다. import useData from "../../Hook/useData"; import ProductCard from "../Products/ProductCard"; import ProductCardSkeleton from "../Products/ProductCardSkeleton"; import "./FeaturedProducts.css"; const Featu..

이미 로그인 되어있는 유저의 경우 login 및 signup페이지 이동 시 홈페이지로 이동한다. import React, { useContext } from "react"; import { Navigate, Route, Routes } from "react-router-dom"; import HomePage from "../Home/HomePage"; import ProductsPage from "../Products/ProductsPage"; import SingleProductPage from "../SingleProduct/SingleProductPage"; import SignupPage from "../Authentication/SignupPage"; import LoginPage from "...

orderService.js를 생성한다. 그리고 App.jsx에서 cart 프로바이더에 setCart를 추가한다. setCart는 장바구니에 담는 함수 CartPage.jsx에서 setCart를 가져온다. const CartPage = () => { const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계 const user = useContext(UserContext); const { cart, removeFromCart, updateCart, setCart } = useContext(CartContext); 그리고 결제하기를 클릭하면 실행될 checkout함수를 추가한다. //주문하기 const checkout = () => { const oldCart =..

ProductCard.jsx에 useContext를 사용해서 userContext를 가져온다. userContext에는 현재 로그인 중인 유저의 정보가 담겨있고 const ProductCard = ({ product }) => { const { addToCart } = useContext(CartContext); const user = useContext(UserContext); 장바구니 버튼에 조건을 추가하여 유저가 있을 경우에만 노출하게 한다. {/* 재고가 있을 경우 및 유저가 있을 경우에만 장바구니 담기 표시 */} {product?.stock > 0 && user && ( addToCart(product, 1)} > )} 1. 유저 없을 경우 2. 유저 있을 경우 마찬가지로 SingleProdu..

ProductsList.jsx를 {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} 아래와 같이 수정한다. {/* products가 있을 경우 반복문으로 출력 */} {data.products && data.products.map((product) => ( ))} ProductCard.jsx에서는 const ProductCard = ({ product }) => { 로 수정하고 아래의 출력할 데이터들의 앞에 . product?.를 붙여서 수정한다. import "./ProductCard.css"; import star from "../../assets/white-star.png"; import bas..