Just Do IT!

프로젝트 배포하기 지난 번 react 프로젝트할 때 배포에 끝내 실패했던 게 자꾸 생각나서 다경님과 어제 배포에 도전했고 성공했다! 도움을 주신 정익님...압도적 감사....진짜 많이 배웠습니다...ㅎㅎ 덕분에 왜 배포에 실패했었는지도 알게 되고, 어떤 식으로 배포해야 했는지 깨달았다. 성공적으로 배포하고 글도 잘 써지는 것까지 확인하고 리드미에도 업데이트했다. 이제서야 프로젝트가 끝인 기분...!! Glitch 에서 json-server 배포하기 1. json-server repository 생성 https://github.com/jesperorb/json-server-heroku#deploy-to-glitch GitHub - jesperorb/json-server-heroku: Deploy json-..

ScrollView와 FlatList의 차이 ScrollView 모든 리스트들을 한번에 렌더링해야 하기 때문에 리스트가 많을수록 성능이 저하된다 출력해야 하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트 FlatList 화면에 보이지 않는 리스트들은 메모리에서 제거하고 화면에 보이는 부분들만 렌더링 리스트가 많이 있어도 성능 저하를 최소화 무한스크롤 적용에 적합하다 JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서 많이 쓰이는 컴포넌트 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우 (API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용하기 적절 FlatList로 리팩토링하기 top rated mo..

영화 정보 API 사용하기 심화 주차 강의가 영화 리뷰 앱 만들기인데, API 사용하는 방법이 나중에도 필요할 것 같아서 정리한다. 이번에 필요한 API가 영화 정보였지 다음에는 다른 API가 필요할 수 도 있으니까...! 영화 정보 API 사이트 들어가기 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 이 사이트에 들어가 회원가입을 하고 로그인을 해야 한다. 프로필 > 설정 > API를 클릭하면 앱 설정을 우선 해야 하는데, 대충 작성해도 곧바로 API Key가 생성된다. 여기서 생성되는 ..

react-navigation란? Routing and navigation for Expo and React Native apps. (출처: 공식문서) react에서 router를 써서 다른 페이지로 이동했던 것처럼, 앱 내에서 다른 페이지로 넘어가게 만든다. 설치 방법 $ npm install @react-navigation/native $ npx expo install react-native-screens react-native-safe-area-context 터미널에 두 명령어를 입력해서 설치해야 한다. NavigationContainer 앱 상태를 관리하고 최상위 내비게이터를 앱 환경에 연결하는 역할 가장 최상위에서 모두 감싸서 이용한다. (import 해야 사용할 수 있음) 공식문서 https:..

firebase 연동하기 지난주에는 asyncstorage를 이용했었다면, 이번에는 firebase를 연동해서 투두리스트를 만드는 강의를 들었다. 처음에는 뭔가 오류가 계속 났는데 공식 문서도 보고 오타도(ㅎ) 고쳐보니 잘 연동되고 신기한 경험이었다. 나중에 프로젝트 때도 유용할 것 같아서 블로그에도 미리 남겨둔다. firebase 설치하기 npm instsall firebase --save 터미널에 위 명령어 입력해서 react native 프로젝트에 firebase 패키지를 설치한다. firebase.js 파일 만들기 (firebase 연동) 미리 firebase에서 프로젝트를 생성하고 프로젝트를 생성함에 따라 나오는 SDK 설정을 연동해야 한다. // firebase.js import { initi..

AsyncStorage란? 암호화되지 않은 비동기적인 데이터를 관리하는 Key-Value 시스템 앱 전역에서 사용 가능하며 LocalStorage 대신에 사용해야 한다 앱이 다운되더라도 기존 저장된 변수 및 세팅 사항들이 보존된다 키-값 형태로 보관됨에 있어 저장되는 값은 무조건 문자열로 취급되어야한다 저장할때 JSON.stringfy() 사용 가져올때 JSON.parse() 사용 비동기 처리를 위하여 async/await과 에러 핸들링을 위해 try-catch 문을 써준다. key 값이 공백 또는 null 일 때에는 error를 throw 해주고, value 가 존재하지 않는다면 null을 반환하도록 한다. Install npm install @react-native-async-storage/async..

폰으로 QR코드 인식 할 때 로딩이 좀 길어진다 싶더나 저런 에러가 나왔다. Network response timed out. 로딩이 길어진다 싶더니 저 에러가 나온게 세번이라서 바로 구글에 검색해봐서 지금은 오류를 해결했다. 그런데 혹시 까먹을 수도 있으니 에러 해결을 위해 시도했던 방법들을 정리해보기로 했다. 동일한 네트워크를 사용하고 있는지 확인 처음에는 내 노트북과 핸드폰의 wifi가 다른지 확인해봤다. 그랬더니 똑같은데...? 다른 wifi를 사용한다면 이런 오류가 발생한다고 해서 둘 다 들어가봤는데 동일했다. 그래도 혹시 모르니 핸드폰의 wifi를 껐다가 다시 실행시켜봐도 똑같은 오류 발생. +) 혹시라도 같은 오류가 생겼을 때 제일 먼저 확인해야 할건 맞는 것 같다. 방화벽 설정 확인하기 설..

Expo란? 리엑트 네이티브로 하는 개발을 쉽게 할 수 있게 해준다. 리엑트 네이티브를 위한 set-up이 미리 구성되어있다. native 파일들을 사용자에게서 숨겨놓고, 알아서 관리해주는 툴 Expo의 장점 Expo는 개발 시작하기가 간편하다. 리액트 네이티브를 위한 set up이 미리 구성되어있기 때문이다. Expo는 배포하기가 매우 편하다. 처음 배포 후, 업데이트 버전은, Expo에 publish만 해주면, Expo가 알아서 업데이트 해준다. Expo의 단점 Native 코드 수정은 불가능 Expo에서 제공하는 API만 사용가능하다. 필요한 기능이 없을 경우, 모듈을 만들어 사용할 수 없다. Expo로 React-Native 프로젝트 생성하기 계정 생성하기 (https://expo.dev/sign..

Redux-Toolkit Redux Toolkit 리덕스의 단점 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다 리덕스 툴킷 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것 리덕스의 구조와 패러다임이 모두 똑같다 컴포넌트에서 useSelector를 통해서 사용하는 것은 동일 바뀐 부분 ⇒ 모듈 파일 리덕스 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit Slice API createSlice 라는 API를 통해 만들 수 있다 필수로 name, initialState, reducers 를 작성해야 한다. //createSlice API 뼈대 const counterSlice = createSlice({ name: '', // 이 모..

react-toastify란? react 프로젝트에서 알람을 만들 수 있도록 해주는 Node.js 패키지 https://github.com/fkhadra/react-toastify GitHub - fkhadra/react-toastify: React notification made easy 🚀 ! React notification made easy 🚀 ! Contribute to fkhadra/react-toastify development by creating an account on GitHub. github.com ↑ 위의 깃허브 리드미를 통해 설치 방법을 알 수 있다. 설치하기 npm i react-toastify 사용 방법 깃허브 리드미에 나와있는 예시 import React from 'reac..