[인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션

[인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션

 

이번 포스팅은 코드 스플리팅과 이모션에 대해 포스팅하겠다.

 

기존 코드에서 한가지를 더 설정해야 하는데,

SPA에서 하나의 자바스크립트 파일로 내보내게되면 그 모든 자바스크립트 파일을 첫 페이지에 한 번에 로딩하기 때문에 사용자 경험(UX)이 좋지 않다.

이럴 떄 코드 스플리팅을 통해 보이는 페이지는 먼저 불러오게 되고, 보이지 않는 컴포넌트들은 불러오지 않도록 설정할 수 있다.

 

 

 

코드 스플리팅 설정하기

1. 코드 스플리팅을 위한 패키지들을 설치한다.

 

Loadable Component 를 설치해준다.

npm install @loadable/component

npm install --save-dev @types/loadable__component

React 자체적으로 제공하는 React.lazy , React.suspense도 존재하지만 사용방법이 거의 동일하고 페이스북에서 추천하는 Loadable Component를 설치한다.

 

 

2. App.tsx의 코드를 다음과 같이 변경한다.

import React from 'react';

//loadable 설정
import loadable from '@loadable/component';
import { Switch, Route, Redirect } from 'react-router-dom';

//loadable 설정
const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));


const App = () => {
    return (
        <Switch>   
            <Redirect exact path="/" to="/login" />
            <Route path="/login" component={LogIn} />
            <Route path="/signup" component={SignUp} />
        </Switch>
    );
}

이렇게 변경해주면 알아서 보여줄 페이지의 코드 스플리팅을 적용이 된다.

 

 

이모션(emotion) 사용

 

이모션

React에는 컴포넌트 스타일을 작성할 때 Styled Components와 이모션(Emotion)을 사용해서 React 컴포넌트를 스타일링하는 것이 대부분이다. 사용방법은 거의 동일하다.

 

 

1. 이모션을 설치해준다.

 

다음의 명령어로 이모션의 패키지를 설치한다.

 

npm i @emotion/react @emotion/styled

 

 

2. SignUp/index.tsx를 다음과 같이 변경해준다.

SignUp/index.tsx

import React from "react";
//이모션에서 사용하는 스타일 import
import { Header, Form, Label, Input, Button, LinkContainer } from './styles';
import { Link } from 'react-router-dom';
const signUp = () => {
  return (
    <div id="container">
      <Header>Sleact</Header>
      <Form onSubmit={onSubmit}>
        <Label id="email-label">
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
          </div>
        </Label>
        <Label id="nickname-label">
          <span>닉네임</span>
          <div>
            <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname} />
          </div>
        </Label>
        <Label id="password-label">
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
        </Label>
        <Label id="password-check-label">
          <span>비밀번호 확인</span>
          <div>
            <Input
              type="password"
              id="password-check"
              name="password-check"
              value={passwordCheck}
              onChange={onChangePasswordCheck}
            />
          </div>
          {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
          {!nickname && <Error>닉네임을 입력해주세요.</Error>}
          {signUpError && <Error>{signUpError}</Error>}
          {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>}
        </Label>
        <Button type="submit">회원가입</Button>
      </Form>
      <LinkContainer>
        이미 회원이신가요?&nbsp;
        <Link to="/login">로그인 하러가기</Link>
      </LinkContainer>
    </div>
  );
}

export default signUp;

 

SignUp/styles.tsx

 

import styled from '@emotion/styled';

export const Header = styled.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;
`;

...../

설명해보면 헤더에 대한 스타일을 정의해서 위의 회원가입 페이지에서 정의한 스타일을 넣어서 사용할 수 있다.

하지만 스티일을 너무 많이 만드는 것은 지양한다.

이모션에서 정의한 스타일을 넣어주는 방식은 styled.component와 비슷하다.

 

 

3. SignUp/index.tsx의 작성되지 않아서 오류가 나는 코드들을 처리해준다.

 

SignUp/index.tsx

 

import React, {useCallback, useState} from "react";
import { Header, Form, Label, Input, Button, LinkContainer } from './styles';
import { Link } from 'react-router-dom';
const SignUp = () => {
  const [email] = useState('');
  const [nickname] = useState('');
  const [password] = useState('');
  const [passwordCheck] = useState('');
  const onChangeEmail = useCallback(() => {},[]);
  const onChangeNickname = useCallback(() => {},[]);
  const onChangePassword = useCallback(() => {},[]);
  const onChangePasswordCheck = useCallback(() => {},[]);
  const onSubmit = useCallback(() => {},[]);


  return (
    <div id="container">
      <Header>Sleact</Header>
      <Form onSubmit={onSubmit}>
        <Label id="email-label">
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
          </div>
        </Label>
        <Label id="nickname-label">
          <span>닉네임</span>
          <div>
            <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname} />
          </div>
        </Label>
        <Label id="password-label">
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
        </Label>
        <Label id="password-check-label">
          <span>비밀번호 확인</span>
          <div>
            <Input
              type="password"
              id="password-check"
              name="password-check"
              value={passwordCheck}
              onChange={onChangePasswordCheck}
            />
          </div>
          {/* {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
          {!nickname && <Error>닉네임을 입력해주세요.</Error>}
          {signUpError && <Error>{signUpError}</Error>}
          {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} */}
        </Label>
        <Button type="submit">회원가입</Button>
      </Form>
      <LinkContainer>
        이미 회원이신가요?&nbsp;
        <Link to="/login">로그인 하러가기</Link>
      </LinkContainer>
    </div>
  );
}

export default SignUp;

선언되지 않은 함수나 변수들을 선언해주고, 에러가 나는 코드들을 주석으로 처리하였다.

 

 

4. 실행을 한다.

"npm run dev" 명령어로 실행 해준 뒤 http://localhost:3090/signup 경로로 접속해주면, 다음과 같은 화면이 보일 것이다.

 

 

출처 : 슬랙 클론 코딩 zerocho
https://www.inflearn.com/course/클론코딩-실시간채팅