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..

📝 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 위 공식 문서를 참고해도 좋지만 간단한 명령어니 포스팅..