본문 바로가기

Project Devlog17

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.
Final Project - (7) 2020_0204 오늘은 메인 스크린을 만들기 전에 앱의 전체적인 스크린의 뼈대가 되는 Bottom Tab Navigation을 만들어보려고 한다. 리액트에서는 react-router-dom을 이용하여 SPA의 형태로 화면을 관리해서 라우터 별로 화면이 다르게 렌더링되게 했다면 리액트 네이티브에서는 스크린 단위로 구성되고 움직이게 된다. 이때 필요한 것이 바로 react-navigation이다. https://reactnavigation.org/docs/en/4.x/getting-started.html React Navigation · Routing and navigation for your React Native apps Routing and navigation for your React Native apps react.. 2020. 2. 5.
Final Project - (6) 2020_0203 이제까지 프로젝트 셋팅을 나름 했고 팀원들과 논의 끝에 지금까지 셋팅한 것으로 프로젝트를 시작하기로 하였다. 진~짜로 본격적인 프로젝트 시작이다. 팀원 중에 프론트 부분을 맡은 사람이 나와 한분이 더 있어서 그 분과 일을 분담하였다. 팀원들과 다 같이 기획한 프로젝트의 아키텍쳐 문서를 가지고 일을 나눴는데 먼저 나는 프로젝트의 메인 스크린의 뼈대를 잡기로 하였고, 다른 분은 로그인과 회원가입 스크린의 뼈대를 잡기로 하였다. 우선 코드를 치기 전에 프로젝트의 폴더 디렉토리 구조를 만들어 보려고 하였다. 실제 현업 프로젝트에서 어떤 식으로 디렉토리를 구조화해서 파일을 관리하는지는 잘 모르겠지만, 나름 그래도 여기저기서 보고 최대한 컴포넌트를 잘 관리해보려고 한다. 리엑트의 경우에는 first project를.. 2020. 2. 3.

티스토리툴바