qcoding

- 크롤링 사이트 확인 -> 음식점 정보를 얻기 위해서 여러 웹사이트를 통해서 크롤링이 가능하지만 평소 사용하는 DiningCode를 통해 음식점 정보를 얻기로 결정하였다. 검색어를 통해 지역별로 검색을 통해서 크롤링을 하여 정보를 가져오려고 한다. https://www.diningcode.com/list.php?query=%EC%84%9C%EC%9A%B8%20%EA%B5%AD%EB%B0%A5 '서울 국밥' 빅데이터 맛집 순위 Top100 - 다이닝코드 '서울 국밥' 맛집 애성회관 한우곰탕(곰탕, ★4.4), 중앙해장(해장국, ★4.3), 소문난 성수 감자탕(감자탕, ★4.1) 등 4,618곳의 전체 순위,식당정보,방문자리뷰,사 www.diningcode.com 우선 사이트에 들어가보면 왼쪽에 보이는 것..

1) 목적 -> 각 종 온라인 강의와 유튜브를 통해 많은 것을 배웠음에도 아직 무언가를 스스로 만드는 것 자체에 부담감이 많이 있는 와중에 ReactNative를 공부한 후 App제작에 대한 흥미가 생겨 Android로 출시하기 위해 사이드 프로젝트를 진행하고자 한다. 주제를 어떤 것을 정할까 하다가 다양한 기능 중에서 지도기반의 위치를 보여주는 기능을 해본적이 없다는 것을 생각하여 내가 좋아하는 국밥을 지도상에서 표시하고 정보를 전달하는 App을 만들기로 결정하였다. 2) 개발계획 - 개발환경 1) React Native Cli -> expo cli 사용과 고민하였지만, 추후에 기능을 추가로 넣을 수 있고 ReactNative Cli에만 지원되는 라이브러리 등이 있어서 결정하였다. https://rea..

* 본 강의는 nomad coder의 react native master class를 듣고 공부를 위해 작성하였습니다. Image 형태에 따른 useAsset 사용법 1) Local Image 사용 (asset 폴더 내에 있을 시) import { Asset } from 'expo-asset'; const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]); if (!assets) { return ; } 2) Image fetch를 통한 uri 사용 시 * 단일 이미지 // useAssets 배열내에 image uri 주소를 넣어준다. const [assets] = useAssets([`uri주소`]) * 여..

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. https://reactnative.dev/docs/layoutanimation LayoutAnimation · React Native Automatically animates views to their new positions when the next layout happens. reactnative.dev -> State가 변하기 전에 layoutAnimation을 선언하여, state가 변경될 때 적용하도록 할 수 있음. 1) import // Android의 경우 UIManager도 불러와야함 import React, { useState } from "react"; import { Layo..

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. 1) Realm SDK DB 사용 https://docs.mongodb.com/realm/sdk/react-native/install/ Install Realm for React Native — MongoDB Realm Docs Home → MongoDB RealmThe MongoDB Realm React Native SDK enables development of React Native applications using the JavaScript and TypeScript languages. React Native enables you to build cross-platform iOS and A..

https://reactnative.dev/docs/panresponder PanResponder · React Native PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. reactnative.dev 1) 스마트폰 화면에서 사용자의 터치입력을 받아서 위치를 변경할 수 있는 Api이다. 아래 처럼 여러 props가 있으며 docs를 통해서 사용법을 확인할 수 있다. Object { "getInteractionHandle": [Functi..

* nomad coder React Native Master class 수강 하면서 정리하는 글 Animation 사용법 1) useRef랑 같이 사용하는 이유 --> UI=Component(state), 로 UI는 state가 변경될 때 component가 다시 렌더링 되게 된다. 이때 리렌더링 되면 값이 초기값으로 적용이 되게 되는데, useRef()를 쓰면 새롭게 렌더링 되지 않고 값이 유지 되게 된다. 애니메이션이 되고 원래 위치로 돌아가는 것을 방지하는 데 사용한다. 즉, 리렌더링 시 값이 초기화 되는 것을 막기 위해서 사용한다. import React,{useState,useRef} from 'react' import { Animated,TouchableOpacity,Easing } from ..

FlastList & React query 사용하여 무한 스크롤을 구현한다. 1) Flat List --> FlastList props 중에서 onEndReached , props를 사용한다. 2) React Query --> react query에서 infinitie-queries를 사용한다. 2-1 ) Fetch 시에 기존에 data 받아오는 구조 변경하기 https://react-query.tanstack.com/guides/infinite-queries Infinite Queries Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.c..