[인스타클론코딩] [FrontEnd].1

정리할 내용
Router
- 결과
배운 점

정리할 내용

프론트 엔드 프로젝트를 진행할 때 해야하는 메뉴얼을 차근차근 정리해보려고 합니다.

이번 포스팅에서는 라이브러리를 모두 설치한 프로젝트에서 해야할 내용인 GlobalCSS와 Theme를 정리해보려고 합니다. GlobalCSS는 모든 태그에 적용 되는 style을 작성하는 것이고, Theme은 프로젝트에 사용될 색상코드,스타일 과 같은 자주 사용되는 정보들을 저장해놓는 곳입니다.
　　

프로젝트 셋팅

npx로 create-react-app 프로젝트 생성
```
npx create-react-app prismagram-frontend
```
react 프로젝트 정리

아래와 같은 프로젝트 형태가 되도록 필요없는 파일을 삭제합니다.
git 연동하기

react프로젝트와 github연동은 보러가기

라이브러리 설치

sexy css : styled-components
styled-component꾸미기 : react-helmet
styled : styled-reset react-toastify
경로 지정 : react-router-dom
node서버? : apollo-boost react-apollo-hooks

back연결? : graphql

  npm add styled-components react-router-dom graphql react-apollo-hooks apollo-boost react-helmet
  npm add styled-reset react-toastify

GlobalStyles

styled-components에서 제공하는 모든 tag에 스타일을 적용할 수 있는 라이브러리인 createGlobalStyle을 이용합니다.

src/Styles/GlobalStyles.js

styled-reset 에 있는 reset을 사용합니다. 기존 styled-components 방식으로 작성합니다.

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

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

Theme.js

Theme.js에서는 자주 사용되는 색상이나 패턴을 저장할 것입니다. 그래서 단순히 작성하고 export default로 내보내주면 됩니다.

src/Styles/Theme.js

const BOX_BORDER = "border: 1px solid #e6e6e6;";
const BOX_RADIUS = "4px";

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

App.js

App.js에서는 위에서 작성한 GlobalStyles와 Theme를 불러서 사용하는 곳입니다. Theme은 ThemeProvider를 통해서 컴포넌트에게 전달됩니다. GlobalStyles는 import 후 tag형태로 작성해놓으면 적용됩니다. App.js는 함수형으로 제작하였습니다.

App.js

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

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

Router

프로젝트의 페이지 경로들을 결정해주는 Route를 작성할 수 있습니다. 간략하게 설명하자면 Router.js에서 Routes(Feed, Auth, Profile, EditProfile, Explorer)들 중에서 어디를 보여줄지 정해주는 것입니다. Routes들에는 보여져야할 페이지가 들어가는 것입니다. 그래서 아래와 같이 파일을 만들면 됩니다.
AppRouter가 경로를 결정해주는 파일이고, Routes에 있는 파일들이 실제 인스타그램에서 보여지는 페이지들입니다.
전체적인 흐름을 돕기위해 얘기하자면, 만들 프로젝트에 보여질 페이지들을 Routes로 정해놓고 Routes에는 많은 Components들이 보여지고 가려지는 것입니다.

각 Routes에는 확인을 위한 코드를 작성해보도록 하겠습니다.

  export default () => "EditProfile";

Router.js

Router.js를 만들 때 필요한 것은 아래와 같이 있습니다.

  import { HashRouter as Router, Route, Switch } from "react-router-dom";
  import React from "react";
  import Feed from "../Routes/Feed";
  import Auth from "../Routes/Auth";
  import PropType from "prop-types";

간단하게 흐름을 말씀드리자면,
Router를 만들고 Router의 Props에 따라 Router안에 어떤 Route를 넣는지 결정됩니다. Route는 path와 component를 정해줘서 경로를 바꿔주는 역할을 합니다. Route를 Router가 감싸고 Proptype을 지정해주고 export default 해주면 App.js에서 사용할 수 있습니다.

  import { HashRouter as Router, Route, Switch } from "react-router-dom";
  import React from "react";
  import Feed from "../Routes/Feed";
  import Auth from "../Routes/Auth";
  import PropType from "prop-types";
  const LogedInRouter = () => (
    <>
      <Route exact path="/" component={Feed} />
    </>
  );
  const LogedOutRouter = () => (
    <>
      <Route exact path="/" component={Auth} />
    </>
  );

  const AppRouter = ({ isLoggedIn }) => (
    <Router>
      <Switch>{isLoggedIn ? <LogedInRouter /> : <LogedOutRouter />}</Switch>
    </Router>
  );

  AppRouter.prototype = {
    isLoggedIn: PropType.bool.isRequired
  };

  export default AppRouter;

App.js

App.js에서는 기존 코드에서 AppRouter를 import 해서 사용하는 것밖에 추가되지 않습니다.

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

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

여기서 주의할 점은 <></>로 ThemeProvider안에를 감싸주는 것입니다.

결과

프로젝트 생성
라이브러리 설치 및 Git 연동
GlobalStyles & Theme 적용
Router로 경로 설정

위와 같은 작업을 통해서 프로젝트를 시작하기 전에 해야할 귀찮은 작업들을 마쳤습니다. 이런 작업이 손에 익는다면 금방금방 진행하여 프로젝트의 속도를 높힐 수 있을 것 같습니다.

배운 점

아래 사진처럼 js파일의 경우 파일이름으로 자동완성이 가능합니다.
react import 하기
<></>태그 이용하기