728x90
반응형

어플만들기 3

리액트 네이티브 #5_ 인스타그램(Instagram) UI 무작정 따라하기 (2)

지난글리액트 네이티브 #4_ 인스타그램(Instagram) UI 무작정 따라하기 (1) Githubhttps://github.com/doorBW/INSTA-by-react-native 안녕하세요. 문범우입니다.지난 포스팅에서는 인스타그램을 만들기 위해 기본적인 네비게이션 구성을 하고 각 화면으로 넘어가는 단계까지 진행하였습니다. 이번 포스팅에서는 메인화면에 피드를 추가해보는 과정을 진행해보도록 하겠습니다.이번 포스팅을 통한 결과물은 다음과 같습니다. 1. CardComponent 추가하기. 먼저 각 피드가 될, 새로운 js 파일을 만듭니다.저는 Components 폴더 내부에 CardComponent.js 라는 이름으로 파일을 만들었습니다. 그리고 CardComponent.js 의 내용으로는 기본 틀만 ..

React_native 2018.05.22

리액트 네이티브 #3_ 프로젝트 시작하기 & FlexBox

안녕하세요. 문범우입니다.우리가 지금까지 두 차례의 포스팅에 거쳐서, 리액트 네이티브 개발 환경을 구성하는 방법과 리액트 네이티브에서의 아주 기본적인 내용에 대해서 알아보았습니다.이번 포스팅부터는 실제로 프로젝트를 시작하여 코드를 작성해도록 하겠습니다.1. 프로젝트 시작하기 먼저 우리는 첫번째 포스팅에서 Expo 를 설치하였습니다.설치한 Expo를 실행합니다. 위와 같은 기본 화면에서 Create new project를 누릅니다. 위와 같이 둘 중 하나를 고르는 화면과 함께 프로젝트 이름 및 경로를 설정할 수 있는 창이 나옵니다.일단 우리는 Blank를 선택하여 진행합니다.Tab Navigation은 추후에 다뤄보도록 하겠습니다.그리고 적절한 프로젝트 이름과 경로를 설정하여 Create를 누릅니다. 그럼..

React_native 2018.04.20

리액트 네이티브 #2_ Component & Style

안녕하세요. 문범우입니다.지난 포스팅에서 리액트 네이티브를 사용하기위해 기본적인 개발환경 구성을 진행하였습니다.이번 포스팅에서는, 바로 개발을 진행하기전에 리액트 네이티브에 관한 기본적인 이론들을 간단히 살펴보도록 하겠습니다.1. Component 위 코드는, 우리가 나중에 실제로 개발을 시작했을 때 처음에 세팅되는 코드입니다. 위의 코드를 통해 알 수 있는 점은 화면을 보여주는데 있어서 react나 기타 웹에서와 같이 div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트가 존재하는 것입니다. 다시말해, 우리는 react native에서 사용할 수 있는 컴포넌트들이 한정되어 있습니다.컴포넌트들에 대해 더 자세한 내용은 아래의 react native 공식 홈페이지에서 확..

React_native 2018.04.19
728x90
반응형