본문 바로가기
SO Bucket 프로젝트 안녕하세요. 코드스테이츠에서 약 2주동안 진행하였던 SO Bucket 프로젝트에 대해서 블로깅을 해보려합니다. 프로젝트 소스코드는 아래의 Github repository에서 참고하실 수 있습니다. Client : https://github.com/hsl0505/SOBucket_client.git Server : https://github.com/hsl0505/SOBucket_server.git 기획의도 및 프로젝트 소개 SO Bucket은 자신의 버킷리스트를 관리하고 다른 사람과 공유할 수 있도록 해주는 웹 프로젝트 입니다. Spread Out Bucket의 약자를 따서 SO Bucket으로 프로젝트 이름을 정하였습니다. 프로젝트 개요 프로젝트 기간 : 2020.01.13 ~ 2020.01.23 (약 2.. 2020. 3. 12.
React - HOC 이 글은 VELOPERT님의 https://velopert.com/3537을 보고 공부하면서 작성한 블로그입니다. Higher-Order Component (HOC) HOC는 React 공식문서에 따르면 다음과 같이 나와있다. 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트는 그 자체로는 React API의 일부분이 아닙니다. 고차 컴포넌트는 React의 컴포넌트적 성격에서 나타나는 패턴입니다. 구체적으로 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 코드를 작성하다 보면, 반복해서 사용되는 코드나 자주 사용하는 코드를 함수화(모듈화)해서 사용할 때가 있다. 리액트에서도 컴포넌트를.. 2020. 3. 10.
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.

티스토리툴바