솧디의 개발로그

리액트네이티브도 리액트 라우터처럼 화면이 이동하는 라우터 설정을 해줘야한다. 여기서 사용되는것은 react-navigation/stack이다! ▼react-navigation 공식문서▼ https://reactnavigation.org/docs/native-stack-navigator/ https://reactnavigation.org/docs/native-stack-navigator/ reactnavigation.org 설치진행! yarn add @react-navigation/native-stack App.js설정 import "react-native-gesture-handler"; import { NavigationContainer } from "@react-navigation/native"; im..

검색기능이 잘 구현된다면 추천검색어는 아주 쉬워진다! 추천검색어는 만들고 있는 앱특성상 장소가 고정값이기에 장소로 추천검색어를 등록하였다. 현업에서 일하다보니 느낀것은 절대 하드코딩금지!!!!!! 물론 이번플젝은 공부용 팀플이지만 실제 회사에서는 절대 하드코딩을 쓰지않는다는점..!! 데이터 컴포넌트를 만들어 사용하던지 json 파일을 만들어 사용한다! 나는 데이터컴포넌트를 만들어 진행하였다! const RecommendSearchData = () => { const datas = [ { id: 1, name: "세종문화회관", }, { id: 2, name: "부산문화회관", }, { id: 3, name: "예술의전당", }, { id: 4, name: "금호아트홀", }, { id: 5, name: ..

이번 앱에서 검색기능 중에서도 제일 고민했던부분은 추천검색어 부분이였다! 추천검색어 하기전에 검색 기능부터! 추천검색은 다음포스팅에 남길게요!ㅎㅎ 검색기능은 키워드를 담고 서버에 param으로 키워드와 함께 보내는 방식이라고 생각하면된다! 일단 검색기능을 구현하려면 keyword를 작성 후 버튼이벤트가 발생하면 useState에 keyword가 담겨 검색할수 있도록 로직을 구현하였다. 이렇게해야 추천검색어 기능도 할수있기에..ㅎㅎ const onChangeSearch = (keyvalue, e) => { setSearchWord({ ...searchWord, [keyvalue]: e, }); }; ▲ 키워드를 담아주는 로직 리액트네이티브에서는 이벤트와 키밸류를 함께 받아주어함!ㅎㅎ const getSea..

이번엔 네이티브에서 가장 활용을 잘할 수 있는 CSS? 아이템이다! 바로 FlatList 기존에 데이터를 map을 돌려 사용했다면 FlatList는 renderItem을 이용해 CSS처리하면서 같이 사용할수있는 아이템이다! map처리하는 로직을 줄일수있다!! 위 의 캐러셀이나 리스트를 뿌려줄 때 사용 할수있다! 캐러셀을 hook으로 만들어 컴포넌트에서 재활용 할 수있게 하였다. import React from "react"; import { Dimensions, Image } from "react-native"; import styled from "styled-components/native"; export default function Page({ item, style }) { return ( {/* ..

현재 리액트 네이티브로 어플을 만드는 중!!! 네이티비는 리액트랑 같으면서도 다른특징이 있는데 플젝하며보니 CSS가 가장다르다! import React from "react"; import { ScrollView, StyleSheet, Text, View } from "react-native"; function ScrollViewLayout(props) { return {props.children}; } export default ScrollViewLayout; const styles = StyleSheet.create({ LayoutView: { // backgroundColor: "pink", padding: 20, }, }); StyleSheet.create 메소드를 이용해 스타일 object를 작..

현재 진행하는 플젝에서 위치를 받아오는 부분이다. 이 부분을 expo-location라이브러리로 구현하였다. 하.지.만! 위치 재설정을 해야하는...로직이라... 고민하던 찰나에 재사용성을 위해 hook으로 만들 것으로 결정!!! location 공식문서 https://docs.expo.dev/versions/latest/sdk/location/ Location docs.expo.dev GPS 사용 확인 여부를 물어보는 로직과 실제 위치를 가져오는 로직 이렇게 2가지의 훅을 만들어야했다. import React, { useState, useEffect } from "react"; import styled, { css } from "styled-components/native"; import Theme f..

사용하는 MAC OS에서 React-Native 개발 환경을 구축하는 방법에 대해 정리해놓고자 한다. React-Native 개발 환경에는 크게 Expo CLI와 React-Native CLI, 2가지가 있다. 그 중에서 React-Native CLI를 구축하는 방법을 정리한다. 1. Homebrew 설치 Homebrew는 Mac에서 필요한 애플리케이션이나 개발 환경 등을 설치하는 데 유용하게 쓰인다. Homebrew에 대한 설치 방법은 Homebrew 홈페이지에서도 확인할 수 있다. 다음 코드를 Terminal 에 입력하여 Homebrew를 설치한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/in..

현재 만들고 있는 사이트의 모습입니다. 사이트 특성상 사진 업로드가 많습니다. 사진을 대용량으로 많이 받아오다보니 속도가 저하되는 이슈가 발생하였습니다. const onChangeImage = async e => { const imageFile = e.target.files[0]; const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true, }; try { const compressedFile = await imageCompression(imageFile, options); setcommunityImage(compressedFile); } catch (error) { console.log(error); } let reader = ..

현제 카냐에서 마이페이지를 개발하는 중에 데스크탑 버전을 먼저 만들고 데스크탑부분에서는 outlet처리를 하여 카테고리별 컴포넌트가 나올수있도록 구성하였다. 이 후 미디어쿼리로 모바일 버전을 제작하며 outlet처리한 비지니스로직을 활용하기에 최대한 컴포넌트 재활용을 위해 모바일버전에도 outlet를 살리되 프로필부분을 전역관리해 쓰고자하였다. outlet처리한 로직을 모바일로 바꾸다보니 내가 쓴글을 클릭하면 아래와 같이 프로필과 함께 컴포넌트가 나왔다. 그래서 프로필부분을 전역으로 관리해 카테고리 클릭 시 나오지않게 하도록하였다. boolean타입만 받아오면 되는 로직이라 이것을 현재 사용하는 상태관리 라이브러리인 리덕스에 추가하기위해서는 많은 과정을 걸치게된다. [ REDUX 버전 ] 1. 리덕스 폴..

아래의 코드로 무한 스크롤 구현하니 로그인시 마이페이지 첫 겟요청시 리랜더링 이슈 발생, 새로고침해야 데이터가 캐싱되었습니다. const fetchPostList = async (pageParam) => { const res = await axios.get( `http://localhost:5001/posts?&page=${pageParam}&limit=6`,{ header:{ authorization, }, }, ); const { posts, isLast } = res.data; return { posts, nextPage: pageParam + 1, isLast }; }; function Posts() { const { ref, inView } = useInView(); const { data, s..