ksw_devlog

리뷰 작성 및 읽어오기 firebase를 이용하여 리뷰 작성하는 기능을 구현하기로 했다. // C - 생성 const [modalContent, setModalContent] = useState(''); const [ratings, setRatings] = useState(0); const getRatings = (rating) => { setRatings(rating) }; const addReview = async () => { //addDoc을 이용해서 내가 원하는 collection에 내가 원하는 key로 값을 추가 await addDoc(collection(dbService, 'reviews'), { contents: modalContent, createdAt: Date.now(), rating..

모달창 만들기 import { Modal } from "react-native" import styled from "@emotion/native" import { useState } from "react" import { Rating } from "react-native-ratings" export default function ReviewModal({isOpenModal, setIsOpenModal}) { const [modalContent, setModalContent] = useState(''); const [ratings, setRatings] = useState(0); const getRatings = (rating) => { setRatings(rating) }; return( 평가 내용 se..

[React Native] 리액트 네이티브 수업을 들으면서 한 주를 보냈다. 초기설정과 기초 UI를 만드는 것, Stack Navigate, API 연결, 각종 UI hook들을 써보았다. ...............................

모든 리뷰가 들어있는 페이지 UI만들기 import { Text, View, FlatList } from 'react-native'; import styled from '@emotion/native'; import ReviewsCard from '../components/ReviewsCard'; export default function Reviews() { return ( ); } ------- import React from "react"; import styled from '@emotion/native'; export default function ReviewsCard() { const url = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSX..

구조분해할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. const { results } = await fetch(`${BASE_URL}/now_playing?api_key=${API_KEY}&language=en-US&page=1`).then((res) => res.json()); { dates: {...}, page: 1, results: [...], total_page: 84 } -> 서버에서 results만 빼옴 const Root = () => { return ( //Initial Screen ); }; export default Root; 각각의 서로 다른 네비게이터들을 병합 Initila Screen : T..

[ React Native 영화 페이지 UI 만들기] 화면과 이미지를 겹치게 하고 싶을 떄 -> style={StyleSheet.absoluteFill} height="100%" -> 자식이 가진 크기만큼만 --> 이미지 스타일 width, height 값 안 넣어주면 화면에 이미지 안 보임.. -> 화면 꽉 채움 -> Swiper에 height 100% 주기 // => showPagination, autoplay, loop 등등 추가 가능 ------ {movie.title} ⭐{movie.vote_average} {movie.overview.slice(0, 150)} {movie.overview.length > 150 && "..."} const SwiperChildView = styled.View`..

이미지 사이즈에 맞게 넣기 react-native에서 이미지 사이즈에 맞게 넣는 방법에 대해 알아보겠습니다. 이미지를 쉽게 적용하기 위해 react-native-auto-height-image라는 라이브러리를 사용해보겠습니다. 만약 위 라이브러리를 사용하지 않으면 어떻게 이미지를 넣어야 가로 세로 비율을 유지한채 이미지를 넣을 수 있을까요? width, height를 이미지의 원본 그대로 유지한채 이미지를 넣는다. 다양한 모바일 기기의 width를 고려하여 useWindowDimensions를 이용하여 기기의 width을 알아 낸후, 이미지의 width를 정한 후, 이미지의 width와 height의 ratio를 고정시키기 위해 image height을 원본이미지 width/height로 나눈 값을 원본..

리액트 네이티브 버튼 -> 리액트 네이티브에선 보통 버튼을 안 쓰고 touchableopacity 사용 [onChangeText] 프로젝트를 진행하다가 간단한 input데이터를 state에 저장하고 싶어서 찾아보다가 onChangeText라는 속성에 대해 알게됐다. 보통 input데이터를 뽑아오기 위해서는 onChange속성의 value값을 뽑아서 다시 그 value값을 state에 저장한다. 하지만, onChangeText의 반환값은 text 단 하나로 오직 내가 쓴 input데이터를 뽑아올 때 오기 편하다. 비교 📌onChange 반환 값 onChange의 event를 뽑아보면 아래와 같이 세 개의 값을 반환한다. 그 중 input데이터는 text라는 변수에 저장되어 있는걸 볼 수 있다. 사용법 ....