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

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

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

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

🎯목적 : CRUD : Create API 추가, Firebase : FireStore 연결 1. Layout 만들기 위와 같은 레이아웃을 만들어 보겠다! 사실 '투두리스트'를 많이 만들어서 캠프 커리큘럼, 학습의 다양성에 의문점이 있었지만, 프론트엔드 개발자의 기본 자질인 CRUD의 기본기를 가장 핵심적으로 다루는 학습이라고 생각한다. 다시한번 복습하자면, ios에서 카메라 영역으로 인해 layout이 가려지는 문제로 태그를 사용해준다! 안드로이드에서는 문제가 없지만 첫 작업은 보통 ios로 작업을 해야 2중 작업이 줄어든다 그래서 '노치 제거' 라는 주석으로 태그 사용의 이유를 주석으로 설명했다. 크게 두 섹션으로 나눌 수 있는데 위 사진에서 알수 있듯, 고정 영역(Fiexd Part) & 스크롤 영..