Today, What I learned? 프로젝트 중!.. api에서 가져오는 xml 데이터를 JSON 데이터로 변환하기 위해 라이브러리를 사용하는 과정을 정리해 본다. 먼저 사용한 라이브러리는 이것이다. https://github.com/connected-io/react-native-xml2js GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter. XML to JavaScript object converter. Contribute to connected-io/react-native-xml2js development by creating an account on GitHub. github.com 변환하기 const p..

Today, What I learned? 리액트 네이티브에서 중첩 라우터로 Stack을 만들어두고, 내비게이션을 지정했을 때 아래와 같은 에러를 만났다. 중첩 라우터에서는 네비게이션을 어떤 식으로 지정해주어야 하는지 정리해보려고 한다. 내비게이션 구조 우선 네비게이션 구조는 Root라는 스택에서 스택과 탭을 하나로 묶어주고 있는, 중첩된 구조다. 중첩된 네비게이션 위 에러 메시지에도 있는 navigation 관련 링크로 이동해서 보면 일반적인 내비게이션 지정은 아래와 같이 할 수 있다. navigation.navigate('페이지 컴포넌트명'); 중첩된 내비게이션에서는 먼저 상위 내비게이션을 지정해 주고 screen이라는 속성으로 페이지명을 지정한다. navigation.navigate('Root', {..

Today, What I learned? 리액트 쿼리를 이용해서 무한스크롤을 적용해 보았다. 무한스크롤로 데이터를 받아오는 것은 아직까지 시도해보지 못했던 기능이었는데 useInfiniteQuery 훅을 사용해서 생각보다 쉽게 적용할 수 있었다..! FlatList 먼저 FlatList에서 무한스크롤을 위해 필요한 두 가지 속성을 추가해야 한다. onEndReached 끝점에 도달했을 때 실행시킬 함수가 들어가는 속성 onEndReachedThreshold 스크린 높이에 도달하기 전에 얼마큼 먼저 fetch 함수를 빠르게 실행시킬 것인지에 대한 속성. 숫자로 들어간다. 1일 경우엔 끝에 도달했을 경우 실행된다. 로직의 구성 무한 스크롤이 어떤 방식으로 이루어지는지를 간략하게 정리하면 이렇다. 기존 배열 ..

Today, What I Learned? 리액트 네이티브 공식문서의 ScrollView를 보다가 와의 비교하는 부분이 있어 정리해 보고, 현재 만들고 있는 영화 앱의 ScrollView 부분을 FlatList로 바꿔보는 작업을 기록해두려 한다. vs 위 캡처는 리액트 네이티브 공식 문서에서 발췌해온 부분이다. 살펴보면 대략 이런 내용이다. ScrollView는 렌더 시에 모든 자식 컴포넌트들을 한 번에 가져와서 성능이 저하된다. FlatList는 렌더 시에 보이는 것들만 lazily하게 가져오고, 스크롤을 내려야 볼 수 있는 아이템들은 지워버리기 때문에 메모리와 처리 시간을 절약할 수 있다. FlatList는 여러 기능을 내장하고 있다. 헤더 / 푸터 지원 horizontal mode 지원 내려 당겼을 ..

Today, What I learned? 커스텀 훅에 익숙해져 보기 위해 투두리스트를 리팩터링 해보기로 했다. 기존의 코드 중에서 투두리스트를 추가하는 부분을 커스텀훅으로 만들어 보았다. state와 dispatch, submitHandler 까지 모두 가져왔다. useInput import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { nanoid } from '@reduxjs/toolkit'; import { __addTodos } from '../redux/modules/todoSlice'; const useInput = () => { const [title, setTitle] = useState('');..

Today, What I learned? 웹이나 앱이나 어떤 정보들을 로컬 데이터베이스에 저장해야 하는 경우가 있다. 투두리스트를 왕창 만들고 있으니 이걸 예시로 들자면, 새로고침하거나 종료 후 다시 실행했을 때 전에 작성했던 리스트가 남아있는 것이 필수! 브라우저에 로컬 스토리지가 있다면, React Native에서는 AsyncStorage를 이용해서 저장해볼 수 있다. Async Storage 공식 문서에 들어가 보면 아래와 같은 내용이 있다. Data storage system for React Native. 리액트 네이티브를 위한 데이터 스토리지! 저장하거나 불러오는 방식이 Local Storage를 사용하는 방식과 거의 흡사하다. https://react-native-async-storage.g..

React Native 리액트 네이티브는 리액트로 모바일 앱을 만들 수 있는 프레임워크다. 모바일 앱을 만들 수 있는 다양한 언어와 프레임워크들이 있지만, 리액트 네이티브를 사용하는 이유는 크게 두 가지다. 비용 절약 리액트 네이티브는 안드로이드, iOS 네이티브 앱을 One Source, 즉 하나의 코드로 동시에 만들 수 있기 때문에 여러 비용, 시간 측면에서 크게 절약된다. 낮은 러닝커브 네이티브 역시 리액트를 기반으로 하기 때문에 기존에 리액트를 사용할 줄 아는 사람이라면 빠르게 배울 수 있다. 리액트 네이티브의 최근 아키텍처는 아래와 같이 변경되었다. React Native 프로젝트 만들기 리액트 네이티브로 프로젝트 만드는 방법은 여러 가지가 있다. 공식 문서에서는 크게 두 가지를 소개하고 있다...

프로젝트를 마치며 주말을 낀 크리스마스를 포함한 딱 7일!.. 정확히는 6일간의 프로젝트가 끝이 났다. 무사히 배포까지 마쳤다는 점에서 아주 다행스럽게 생각하고 우리 팀원들 모두 고생했다. 이번 프로젝트도 역시 개인적인 회고를 해보려 한다! 우리의 프로젝트는 아래 링크에서 확인해볼 수 있다. https://soolung-project.vercel.app/ 술렁술렁 soolung-project.vercel.app 개인적으로 아쉬웠던 점 이번에도 개인적으로 아쉬웠던 점을 튜터님의 피드백을 바탕으로 정리해 본다. 게시글 작성 후 갱신 담당파트는 아니었지만 함께 로직이 짜이는 것을 지켜보고 참여했던 입장으로서.. 작성된 후 글이 바로 1페이지에 뜨지 않고 마지막 페이지로 들어간다는 것을 알게 되었다. 확인해보니..

서버 주소를 노출시키지 않기 위해 .env 파일을 이용해서 환경변수를 적용해보기로!.. 자주 쓰는 경로나 값이 있다면 환경변수를 이용해서 편하게 가져다 쓸 수 있다. 먼저 .env 파일을 만들어서 변수를 만들어준다. 변수 선언 리액트에서 사용해주려면 앞에 REACT_APP 키워드를 꼭 붙여주어야 한다. url 주소를 넣는다면 굳이 따옴표로 감싸주지 않아도 된다! 변수 사용 아래와 같이 process.env.[변수이름]으로 사용하면 된다. await axios.patch(`${process.env.REACT_APP_API_URL}/articleComment/${id}`,{...comment,}); 처음에는 아래처럼 사용했었는데 계속 404 오류가 떴다.. 😇 선언한 변수명 그대로 넣어줘야 하는듯! awai..

페이지네이션? 무한 스크롤? 프로젝트를 진행하며 게시글 콘텐츠 수가 너무 많아질 경우를 대비해서 페이지네이션이나 무한스크롤을 적용해보기로 했다. 게시글 특성상, 하단에 글쓰기 버튼이 항상 있어야 하기 때문에 무한스크롤보다는 페이지네이션이 더 적합하겠다는 생각으로!.. 페이지네이션을 구현해보기로 했다. MUI의 Pagination 컴포넌트 MUI에서 페이지네이션 컴포넌트를 검색하면 다양한 스타일의 페이지네이션 컴포넌트를 확인할 수 있다. https://mui.com/material-ui/react-pagination/#main-content React Pagination component - Material UI The Pagination component enables the user to select ..