본문 바로가기

Project Devlog/BillyZip13

Final Project - (13) 2020_0210 이번에는 매물의 상세 스크린에 대해서 만들어 주었다. bottom tab navigator의 첫번째 tab의 stack 중 detail screen에 대해서 만들어 주었다. - Home screen - More List screen - Detail screen - Review screen - Review posting screen 저번에 홈스크린을 만들어 줄 때 추천매물/종류별 매물의 카드와 More List에서 카드를 TouchableOpacity로 만들어주었고, onPress로 터치 시에 HouseDetail로 navigate되도록 만들어주었다고 했다. 그래서 카드를 터치할 경우 매물의 상세 스크린으로 이동된다. 이때 navigation의 navigate 메소드로 스크린을 이동시켜줄 때, 두번째 인자.. 2020. 2. 10.
Final Project - (12) 2020_0209 이번에는 빌리집의 메인 스크린인 Home 스크린을 만들어 주었다. Home 스크린은 bottom tab navigator 중 첫번째 tab인데 여기에 stack navigator로 다음과 같은 스크린을 쌓아주었다. - Home screen - More List screen - Detail screen - Review screen - Review posting screen 이 중에서 홈 스크린과 More list screen을 만들어 주었다. Home Screen 홈 스크린은 메인 문구, 추천 매물 카드 (4개), 매물 종류별 카드 (각 4개) 그리고 각 종류에 대한 모든 매물을 볼 수 있는 스크린으로 넘어가는 버튼으로 구성되어 있다. 우선 전체적으로 ScreenView를 적용하였고, Home screen.. 2020. 2. 9.
Final Project - (11) 2020_0208 이번에는 로그인 컴포넌트를 만들 차례이다. 그전에 저번에 회원가입 컴포넌트를 만들면서 2가지 이슈가 있었는데, 한가지는 axios이고 다른 건 keyboardavoidingview이다. axios에 관한 것은 조금 있다가 다시 설명할 예정이고 keyboardavoidingview에 대해서 설명하려고한다. 회원가입 컴포넌트에서도 그렇고 이번에 만들 로그인 컴포넌트도 마찬가지이지만 input 컴포넌트를 이용해서 무엇인가를 입력할 때 키보드 창이 올라오게 된다. input창이 키보드보다 위에 위치한 상태에서 input을 누르면 별 지장이 없다. 하지만 키보드 영역에 위치한 input의 경우에는 키보드에 가려져서 스크롤을 밑으로 내려줘야한다. 심지어 밑으로 내릴 스크롤이 없을 경우, 키보드에 완전히 가려져서 안.. 2020. 2. 8.
Final Project - (10) 2020_0207 회원가입 컴포넌트를 본격적으로 만들기 시작하였다. 로그인 화면에서 signup 버튼을 누를 경우, 모바일 인증 화면으로 넘어가게 되고 그 다음 모바일 인증이 완료되면 회원가입 화면으로 넘어오게 된다. 우선은 컴포넌트가 스크롤이 될 수 있어야할 것 같아서 React-native의 ScrollView를 적용하였다. 그리고 하위 컴포넌트들은 리액트 네이티브 컴포넌트 라이브러리인 React native elements 컴포넌트들을 많이 이용하였다. 회원가입 시 받을 정보는 이메일, 비밀번호, 핸드폰 번호, 이름, 성별, 생년월일, 정보제공 동의 여부이다. 1. 이메일, 비밀번호, 이름 이메일과 비밀번호, 이름은 유저가 직접 입력할 수 있도록 input component로 만들어주었다. React native e.. 2020. 2. 7.
Final Project - (9) 2020_0206 안좋은 소식이 있다. 팀에서 같이 프론트를 맡으신 분이 개인적인 사정으로 프로젝트를 못하게 되셨다ㅠㅠ 그래서 팀원분이 맡고 계셨던 로그인 스크린에 관련된 부분을 내가 가져와서 만들게 되었다. 우선 로그인 스크린의 경우 다른 스크린들과는 다르게 로그인 후에는 뒤로 가기 등을 통해 다시 로그인 페이지로 가지면 안되기 때문에 stack navigator가 아닌 switch navigator를 사용해 만들려고 한다. import { createSwitchNavigator, createAppContainer } from 'react-navigation'; 스위치 네비게이터의 경우 탭 네비게이터 처럼 화면 간 이동 시 스크린이 쌓이지 않기 때문에 로그인 후에는 이전에 만들어 두었던 tab nav 스크린으로 navi.. 2020. 2. 6.
Final Project - (8) 2020_0205 저번까지는 Bottom Tab Navigator을 활용해서 각 탭에 해당하는 스크린을 만들고 탭을 구성하여 기본 스크린 구조를 만들었다. 이번에는 탭 중에서 메인 스크린에 해당하는 탭을 만드려고 한다. 메인 스크린 탭에서 보여지는 스크린은 크게 두가지로 구성된다. 홈 스크린과 더보기 스크린이다. 메인스크린에서는 먼저 리뷰 레이팅 순으로 추천하는 매물 4개 정도를 보여주고, 각 매물 종류별로 4개정도 랜덤하게 보여줄 것이다. 그리고 각 매물에는 더보기 버튼이 있어 더보기를 누를 시에 해당하는 매물 전체를 보여줄 예정이다. 그래서 메인 스크린 탭에 해당하는 스크린 컴포넌트에 stack navigator를 만들어 위의 2개의 스크린을 쌓을려고 한다. 먼저 필요한 라이브러리를 받았다. npm install re.. 2020. 2. 5.

티스토리툴바