Frontend 개발자 - hyo.loui

🎯목적 : 마이페이지에 구현한 로직과 authentication API 복습, 🤢 오류 해결 : 로그아웃 후 마이페이지, 게시글쓰기 component 이동 시 에러 (useEffect 와 useFocusEffect 에서 발생한 에러 해결) 1. 닉네임 수정 UI 부분에서 삼항연산자로 수정 버튼이 onPress되어 onPressUpdate()함수가 실행이 되면 setState가 되어 onEdit이라는 state는 불리언타입이며 토글(true or false)이 된다! 이후 onEdit의 상태에 따라서 false가 된다면 기존에 있는 닉네임을 감싼 태그가 TextInput으로 바뀌게 되고 수정버튼도 완료버튼으로 바뀌게 된다! 완료버튼이 가진 함수는 onSubmitEdit()으로 updateProfile AP..

🎯목적 : Firebase - Authentication : 로그인 / 로그아웃 기능 학습 및 적용 >> Firebase : FireStore 연결 🤢 오류 발견 (미해결 로그아웃 후 currentUser가 null이 되어 마이페이지 tabs 클릭시 에러가 출력 1. UI Layout 만들기 회원가입 UI와 마찬가지로 라는 라이브러리를 사용했다.. 라이브러리로 가져온 태그로 상위를 감싸주었고, ID(아이디), Password(비밀번호), Login(로그인), Register(회원가입) 부분으로 나누었다 스타일은 Emotion을 사용했다 회원가입기능, 로그인 실행 함수에서 유효성 검사가 진행되는데 해당 부분의 로직이 전체적으로 코드가 길고 가독성이 떨어져 유효성검사를 하는 부분을 따로 나누어 리펙토링 해 ..

🎯목적 : Firebase - Authentication : 회원가입 기능 학습 및 적용 >> Firebase : FireStore 연결 🤢 오류 해결 : 스크롤 문제 라이브러리 태그로 해결 휴먼에러.. 1. UI Layout 만들기 UI를 만들면서 키보드 활성 시에 높이가 고정되어있는 이슈로 스크롤이 되지않아 라는 라이브러리를 사용했다.. 이 문제로 퍼블리셔로 재직하던 직장에서 골머리를 썩은 적이 있는데 팀원중 한분이 라이브러리를 추천 해주셔서 아주 간단하게 해결되었다.. (에러 해결 참고) 그렇게 라이브러리로 가져온 태그로 상위를 감싸주었고, 크게 닉네임, 이메일, 비밀번호, 비밀번호 2차 확인 부분으로 나누었다 하지만 프로젝트 기능사항으로 입력값에 대한 유효성 검사를 통해 메세지를 입력해주는 Tex..

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