Frontend 개발자 - hyo.loui

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : MZL (MZ-Languagae)= 프로젝트 시작( S.A >> 기획 >> 디자인 >> UI완성 ) React Native 심화 강의 및 실습 = Movie app (React-Query) Project Start 'helprogrammers' 라는 Redux / RTK / thunk 활용한 프로젝트를 성공적으로 마치고 새로운 팀이 배정되었다 이번 프로젝트 첫 회의에 나온 공통적 의견으로 '기본에 충실하자' 라는 의견이 다수이기에 특별한 기능에 촛점을 맞추기 보다는, 이해도 높은 작업에 기반한 프로젝트를 진행하기로 결정되..

🎯목적 : 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 : 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..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 위 영상처럼 수정 버튼을 클릭하고 수정을 한 후, 다른 투두에서도 이전에 수정했던 내용이 고스란히 남아있는 문제였다 🎈 문제 해결 과정 : 우선 코드부터 보자 수정 버튼을 클릭했을 때, 나타나는 태그이다 저 값에서 value가 editText 라는 state를 가지고 있었다.. onSubmitEditing 속성의 updateTodo라는 함수안에서 editText를 다시 setState로 바뀐 값으로 넘겨줄 수 있었다, 하지만, 더 간단하게 defaultValue 라는 것을 통해 처음 보여줄 값만 정해줬다. 수정하는 역할의 특성상 보여질 텍스트는 1회성이기 때문이다 input 태그에 기본값으로 가지고있는 속성으로 붙여줬고, editText를 ..