양털의 개발 블로그52 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. Final Project - (5) 2020_0202 오늘은 typescript 셋팅까지 된 프로젝트에 eslint + prettier + dotenv 설정을 추가하려고 한다. 처음에 프로젝트 기획할 때 eslint rule은 airbnb style을 따라가기로 하였기 때문에 eslint를 airbnb로 적용할 생각이다. Prettier 우선은 Prettier 설정을 먼저 했다. 나는 vscode에 Prettier extension을 사용하고 있기 때문에 별도로 prettier를 install 안하려고 했는데 나중에 eslintrc 설정에서 자꾸 prettier 가 디펜던시에 없다고 뜨는 에러메시지가 마음에 안들어서... 설치를 하였다. setting.json에 formatIOnSave를 true로 하여 사용하고 있다. npm install --save-d.. 2020. 2. 2. Final Project - (4) 2020_0201 제목에 날짜를 고치다가 보니까 어느새 2020년 1월이 가고 2월이 되었다. 프로젝트 하다가 보면 시간이 어떻게 가는지 모르겠다. 오늘은 어제 react native expo 설정에 이어서 typescript를 설정하려고 한다. expo cli로 expo init을 통해 타입스크립트 기본 설정이 되어있는 프로젝트를 만들수 있다. 하지만 그건 정말 기본적인 셋팅만 되어 있는 것이고 실제 프로젝트에서 사용할 수 있도록 추가적인 설정이 필요하다고 생각했다. 사실 타입스크립트에 대한 지식이 전무해서 어떻게 하면 리액트 네이티브 프로젝트에 타입스크립트를 적용할 수 있는지 구글링을 통해서 많이 알아보았다. 먼저 expo init에서 blank(typescript) 옵션을 통하여 타입스크립트 기본 설정이 되어있는 테.. 2020. 2. 1. 이전 1 2 3 4 5 6 7 ··· 9 다음
