Frontend 개발자 - hyo.loui

🎯목적 : - expo project 초기 셋업 리뷰 - 브랜치 history 리뷰 - eas update: 배포 과정 - pull request와 컨벤션을 제대로 활용한 협업 경험 🤢 오류 해결 : 좋아요 부분 UI가 다크모드 미적용으로 디버깅 - hotfix branch 활용 1. 프로젝트 초기셋업 프로젝트 시작 전 초기셋업을 내가 진행하게 되어 npx create-expo-app RN-turkey-project 명령어로 Expo 프로젝트를 셋업하여 깃허브 repository에 push 하였다 여기서 혼자 하는 프로젝트라면 eas update를 하여 깃허브와 expo 프로젝트를 연동시킨 후 작업을 하도록 하였겠지만 eas update를 미리 한다면 app.json 파일에 고유 id 가 작성되어 exp..

🎯목적 : React-Query (useQuery) 리펙토링 과정 - 서버 스테이트 관리 🤢 오류 해결 : 1. 리액트 쿼리 (React Query) 란? Server State, 비동기 데이터를 관리하기 위한 라이브러리 이며, userQuery hook 안에서 API 요청을 담당하고, API 요청 결과 및 다양한 상태들을 바로 사용할 수 있다 (redux thunk 사용 필요 X) 한번 API 요청 시 queryKey 가 API 요청결과를 cache 에 저장하고, caching된 API 요청은 다시 서버에 하지 않고 cache memory에서 더 빠르게 불러 온다. 그래서 불필요한 서버 요청을 알아서 막아주게 된다! 2-1. 프로젝트 세팅 우선 명령어로 install을 진행합니다. npm i react..

🎯목적 : 1. Open API 받아오기 연습 2. DB 활용하기 연습 3. 번역본 적용 - 새로운 시도 4. 오류해결 적용 한 결과 화면 🤢 오류 해결 : 번역본 적용시 빈 텍스트 1. Open 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를 활용한 데이터로 movies 앱에 데이터를 가져왔다 1. 데이터를 넣어 줄 'nowPlayings' 라는 빈 배열의 스테이트를 만들어주고, 2. 함수를 만들어 fetch 함수를 비동..

🎯목적 : 1. React-navigation 적용 UI 만들기 Native-Stack Bottom-tabs 2. StyleSheet.absoluteFill 3. Swiper 적용 🤢 오류 해결 : UI 부분이라 오류가 딱히 없었다고 한다.. 1. User Interface 만들기 / horizontal : 사이드(가로) 스크롤 우선 UI는 빠르게 작업을 해 두고, 리팩토링을 하고 나서 스타일을 적용하겠다! Emotion – @emotion/native Emotion – @emotion/native Style and render React Native components using emotion This package also depends on react, react-native and prop-typ..

🎯목적 : expo 프로젝트 생성 시 빠른 세팅(expo dashboard 이용하지 않고 터미널 이용 가능) 🤢 오류 해결 : eas update:configure Error: package.json is outside of the current git repository 1. 공식 홈페이지 참고하여 RN 프로젝트 생성 https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev 위 공식 문서를 참고해도 좋지만 간단한 명령어니 포스팅..

🎯목적 : CRUD : Delete API 생성, Firebase : firestore data 삭제하기, CRUD 최종 완성 1. 삭제 아이콘에 함수 추가 태그에 onPress 속성으로 setDelete()함수를 추가하고 파라미터로 todo의 id를 넘겨줬다 2. create Delete API 아주 심플하다 지금까지 했던 과정을 생각해보자, 서버 통신이 이루어지기 때문에, 비동기 처리를 하고 "todos"라는 폴더에 존재하는 todo.id(파라미터로 받아온 것)를 deleteDoc 을 사용해서 삭제하면 된다! 3. 결과 화면 이로써, CRUD 모두 너무나도 잘 구현이 되었다! 하지만 UX를 고려했을 때 실수로 삭제버튼이 눌려진다면 내 소중한 todo가 순식간에 날아가버린다ㅜㅜ 그래서 다시한번 컨펌을 ..

🎯목적 : CRUD : Update API 생성 , Firebase : FireStore data 업데이트 🤢 오류 해결 : WARN Possible Unhandled Promise Rejection : TypeError: _n7.indexOf is not a function. 1. setDone (체크아이콘) 체크 아이콘을 누르면 함수가 실행되어 해당하는 todo의 isDone 속성을 토글로 변경하고, isDone이 true 라면 완료했다는 효과(text-decoration: line-through)를 주자 아이콘 클릭 시 실행되는 함수이고, 서버통신을 하는 부분이니 비동기 처리를 해줬다. 또 현재 가지고 있는 todos의 isDone을 토글해야 했기 때문에 find 라는 변수로 지금 가진 isDone..

❤️‍🔥TIL : Today I Learned 🎯목적 : CRUD : Read API 추가, onSnapshot API 활용하기 1. Firestore 의 DB 가져오기 저번 포스팅에서 Creat API를 만들어 Firestore에 "todos" 라는 db를 넣을 수 있었다 이번에는 가져와서 보여줘야한다! firebase API 활용하자! 선택지는 2가지다 getDocs API onSnapshot API getDocs로도 가져올 수 있겠지만 우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로 state 처럼 사용해야 한다. 그래서 onSnapshot API 를 활용했다! import { onSnapshot } 으로 api를 가져온다 useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read..