Project Devlog/BillyZip13 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. Final Project - (3) 2020_0131 저번에 프로젝트의 방향에 대해서 어느정도 구체화가 되어서 본격적으로 프로젝트를 시작..! 하고 싶었지만 프로젝트 초기 셋팅 등이 필요하기도 하고 각자 좀 더 새로운 기술 스택에 대한 공부 (typescript, react-native, typeORM 등등)가 필요할 것 같아서 이번 주는 각자 좀 더 공부하기로 정하였다. 그래서 나는 우선 프론트엔드이고 프론트엔드 개발 환경을 구축과 우리가 정한 기술 스택을 사용하기 위한 초기 세팅이 필요하다고 생각되어서 우선 React native EXPO부터 알아 보았다. https://velog.io/@max9106/React-Native-리액트-네이티브react-native-두-가지-방법-c4k0gxe0tc [React Native] 리액트 네이티브(react na.. 2020. 1. 31. Final Project - (2) 2020_0130 오늘 엔지니어님과 킥오프 미팅을 통해 팀원들과 그동안 논의했던 프로젝트의 전반적인 기획에 대해서 체크를 받았다. 특히 팀원들과 논의가 많았던 기술 스택과 기타 DB 스키마나 궁금했던 사항들을 많이 체크를 받았다. 킥오프 미팅에서 기술 스택에 대해서 많은 질문을 하고 엔지니어님이 말해주신 것과 팀원과의 회의를 토대로 프론트엔드 쪽 기술 스택을 다음과 같이 하기로 하였다. 1. React native 일단 우리가 만드려는 프로젝트가 앱이고 네이티브 언어 (swift, object-c, java)로 직접 만들면 좋겠지만, 프로젝트 기간도 기간이고 아무래도 러닝커브가 높기 때문에 리액트 네이티브를 사용해야 할 것 같다. 여기서 또 이슈가 있는데 리액트 네이티브에서 expo cli를 사용할 것이냐 아니면 reac.. 2020. 1. 30. 이전 1 2 3 다음
