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 프로젝트 만들기 리액트 네이티브로 프로젝트 만드는 방법은 여러 가지가 있다. 공식 문서에서는 크게 두 가지를 소개하고 있다...

서버 주소를 노출시키지 않기 위해 .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 ..

Today, What I learned? 오늘은 axios를 다루다가 만난 에러에 대해서 써보려 한다. JSON-Server로 redux-thunk를 이용해서 데이터를 CRUD 하는 작업을 하고 있었다. 추가까지는 어찌어찌했는데 삭제를 누르는 순간.. 화려한 에러가 나를 반겼다. 에러와 원인 payload와 관련해서 생긴 오류인 듯 보였다. 작성했던 코드는 이랬다. 추가했듯이 payload로 id를 보내주면 될 줄 알았는데!!... 아니었던 것. 이후에 저 공간에 data라는 객체로 감싸서 payload를 넘겨보기도 했지만 결과는 똑같았다. Axios 공식 문서를 보면 HTTP 메서드에 따라서 들어가는 인자가 조금씩 다르다. 아래와 같이 post 메서드로 보낼 경우에는 두 번째 인자인 payload가 d..

Today, What I learned? 프로젝트에 쓸 수도 있는(?) UI 라이브러리를 한번 맛보기로 사용해 보았다. 이번에 처음 알게 되었는데 Material UI는 리액트 UI 라이브러리 중 가장 유명한 것이라고!... 오늘은 간략한 설치 방법과 활용에 대해서 조금 정리해 본다. Material UI Material UI는 구글의 Material Design을 바탕으로 만들어진 리액트 라이브러리이다. 부트스트랩처럼 깔끔하고 정돈된 UI를 쉽게 사용할 수 있다. 공식 문서와 추가적인 정보는 아래 사이트에서 확인할 수 있다. https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customiza..