React-Native Setup

React-Native Setup

인스타그램 클론 코딩 (노마드 코더)

노마드 코더는 처음 리액트 앱을 만들 때 npx를 이용한다고 합니다.

npx create-react-app <제목>

그 이유는 npx를 통해 react app을 만들면 최신 버전으로 설치를 해주며 버전 관리가 쉽기 때문입니다.

폴더 구성은 다음과 같습니다.

항상 프로젝트를 시작하기에 앞서 디렉토리 구성부터 하고 가는 것이 편하다는 니콜라스입니다. 먼저 Componet와 Styles폴더를 src폴더 아래에 구성하는 것이 나중에 관리가 용이합니다.

yarn add appolo-boost react-router-dom react-apollo-hooks styled-components react-helmet

위 코드를 초기에 실행하여 설치해 줍니다. 앞으로 클론코딩을 하며 필요한 라이브러리를 미리 설치하는 과정입니다.

글로벌 스타일 설정하기

최근 가장 핫한 style sheet 구성법은 styled-components에서 createGlobalStyle로 글로벌 스타일시트를 만드는 것입니다. 이 방법은 스타일과 테마를 나누어 사용할 수 있으므로 예전에 색상을 utils 폴더 안에서 가져오는 방식보다는 훨씬 더 편리해진 듯 합니다.

이 떄 createGlobalStyle의 백틱 문자 안에 * { box-sizing:border-box; } 이 부분에서 컬러가 입혀지지 않는다면 VSCode의 확장 프로그램인 vscode-styled-components를 추가하시면 됩니다.

GlobalStyle.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

export default createGlobalStyle`
  ${reset};
  * {
    box-sizing:border-box;
  }
`;

원하는 색상과 스타일들을 미리 지정하여 만들어 놓으면 편리합니다.
Theme.js

const BOX_BORDER = "1px solid #e6e6e6";
const BORDER_RADIUS = "4px";

export default {
  bgColor: "#FAFAFA",
  blackColor: "#262626",
  darkGreyColor: "#999",
  lightGreyColor: "#c7c7c7",
  redColor: "#ED4956",
  blueColor: "#3897f0",
  darkBlueColor: "#003569",
  boxBorder: "1px solid #e6e6e6",
  borderRadius: "4px",
  whiteBox: `${BOX_BORDER};
             ${BORDER_RADIUS};
             background-color:white;
            `
};

다음은 App.js입니다.

import React from "react";
import { ThemeProvider } from "styled-components";
import GlobalStyles from "../Styles/GlobalStyles";
import Theme from "../Styles/Theme";

export default () => (
  <ThemeProvider theme={Theme}>
    <GlobalStyles />
  </ThemeProvider>
);

Instagram Clone Coding 처음 세팅부분과 함께 GlobalStyle과 Theme를 이용한 구성을 완료했습니다.