[sleact] 1. 초반 세팅 작업

❗ [Slack 클론 코딩] 을 보며 빠루게 정리 중...
사전에 제로초님께 허락 받고 포스팅함.

1. Babel, Webpack 설정

설정 관련은 나중에 정리

2. React router & 폴더 구조

1) 폴더 구조?

pages
    └ Login
        └ index.tsx
        └ style.tsx   
    └ SignUp
        └ ...
components
layouts
hooks
utils

• pages - 페이지의 진입점
  • 내부에서 페이지 별 폴더 구분, index와 style 파일을 구분하자
• components - 페이지 내에서 자잘자잘하게 사용하는 컴포넌트 혹은 공통되는 컴포넌트
• layouts - 공통 레이아웃
• hooks - hook 모음
• utils - 유틸 함수 모음

2) alias 설정

• 파일 import 시 절대 경로를 사용하기 위해 미리 alias 설정 하기

• import * from './layouts/App' 이걸 '@layouts/App' 이렇게 사용하도록 만들어줌

• 보통 '@' 나 '~' 을 붙임

webpack.config.ts :

alias: {
  '@hooks': path.resolve(__dirname, 'hooks'),
  '@components': path.resolve(__dirname, 'components'),
  '@layouts': path.resolve(__dirname, 'layouts'),
  '@pages': path.resolve(__dirname, 'pages'),
  '@utils': path.resolve(__dirname, 'utils'),
  '@typings': path.resolve(__dirname, 'typings'),
},

tsconfig.json :

"baseUrl": ".", 
"paths": {
  "@hooks/*": ["hooks/*"],
  "@components/*": ["components/*"],
  "@layouts/*": ["layouts/*"],
  "@pages/*": ["pages/*"],
  "@utils/*": ["utils/*"],
  "@typings/*": ["typings/*"]
}

3) 라우터 설정

설치

npm i react-router react-router-dom
npm i -D @types/react-router @types/react-router-dom // typescript 용

import

import { Switch, Route, Redirect} from 'react-router-dom';

Router

clients.tsx :

import React from 'react';
import {render} from 'react-dom';

import App from './layouts/App';
import { BrowserRouter } from "react-router-dom";

render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#app'));

• BrowserRouter : history api 를 이용해서 ui 업데이트, HashRouter도 있는데 이건 '#' 를 통해 정적 페이지에 주로 이용함 (새로고침 ok)

App.tsx :

import React from 'react';
import { Switch, Route, Redirect} from 'react-router-dom';
import Login from '@pages/Login';
import SignUp from '@pages/SignUp';

const App: FC = () => { // FC -> Functional Component
  return (
    <Switch>
      <Redirect exact path="/" to="/login"/>
      <Route path="/login" component={Login} />
      <Route path="/signup" component={SignUp} />
    </Switch>
  );
};

export default App;

• Switch - 컴포넌트를 현재 uri 에 따라 번갈아서 하나만 보여주게함
• Redirect - 다른 페이지로 redirect 기능 , "/"로 접속하면 "/login" 으로 이동

historyApiFallback

SPA 에서 사용하는 uri는 history API 를 통해 가짜 주소처럼 등록해서 사용함. 새로고침 하면 server에서 읽어들인 주소로 이동시키는데 서버는 base 주소인 "/" 밖에 없는 것! 그래서 가짜 주소 사용할 수 있게 historyApiFallback 속성을 이용한다.

webpack.config.ts :

devServer: {
  historyApiFallback: true, // react router
},

3. Code Spliting & Emotion

1) Code Spliting

SPA 의 특성 상, 코드 전체를 불러들이면 lazy-load 가 일어남. 불필요한 리소스 방지를 위해 코드를 잘게 분할하여 현재 필요로 하는 것만 불러들인다.

분리 기준?

• 페이지 별
• 서버 사이드가 필요하지 않은 컴포넌트 (ex. 텍스트 에디터)

설치

npm i @loadable/component
npm i --save-dev @types/loadable__component

• loadable 이 제일 자주 쓰이는 라이브러리,
• React 최신 버전에서도 Suspense라는 것을 이용해 스플리팅 하는 데 용이하게 처리 (실험 단계이나 사용 잘하는 지는 의문...)

사용

• import 할 때 loadable() 로 감싸서 적용

// App.tsx

const Login = loadable(()=> import('@pages/Login'));
const SignUp = loadable(()=> import('@pages/SignUp'));

2) Emotion

• CSS-in-JS 라이브러리.
• style를 module화 하여 import 하는 방식으로 사용
• styled-component와 쌍벽...(?)을 이루는데 emotion이 조금 더 설정하기 간편함. 특히나 SSR에서 더 해
• Sass와 최신 CSS 문법을 같이 사용할 수 있는 장점
• 대부분은 미리 style을 정의해두고 css는 나중에 분리하는 편

설치

npm i @emotion/react @emotion/styled

사용

• styled. 뒤에 특정 태그 이름을 붙이면 컴포넌트 불러올 때 해당 태그로 인식하여 스타일을 입힐 수 있음.

• 페이지 컴포넌트와 동일한 이름으로 export 시키면 미리 style이 선언된 상태로 출력

style.tsx :

import styled from '@emotion/styled';

export const Header = styled.header` // header태그로 인식
  text-align: center;
  font-family: Slack-Larsseit, Helvetica Neue, Helvetica, Segoe UI, Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 46px;
  letter-spacing: -0.75px;
  margin-top: 50px;
  margin-bottom: 50px;
`;

export const Form = styled.form`
  margin: 0 auto;
  width: 400px;
  max-width: 400px;
`;

export const Label = styled.label`
  margin-bottom: 16px;
  & > span {
    display: block;
    text-align: left;
    padding-bottom: 8px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1.46666667;
    font-weight: 700;
  }
`;

// 이런식으로 불러와서 사용 ...

index.tsx :

import {Form, Label, Input, Button, LinkContainer} from "./styles";