[리액트 회원인증 구현] 1. 작업 환경 준비하기

1.  새로운 프로젝트를 생성한다

yarn create react-app board-frontend

 

2. 라우터적용

yarn add react-router-dom

 

3.  컴포넌트생성 ( 로그인, 회원가입, 글쓰기, 포스트읽기, 포스트목록)

(src / pages / 안에 넣어준다.)

 

1. LoginPage 컴포넌트

export default function LoginPage() {
  return <div>로그인</div>;
}

2. PostListPage 컴포넌트

export default function PostListPage() {
  return <div>포스트 리스트</div>;
}

3. PostPage 컴포넌트

export default function PostPage() {
  return <div>포스트 읽기</div>;
}

4. ResgisterPage 컴포넌트

export default function RegisterPage() {
  return <div>회원가입</div>;
}

5. WritePage 컴포넌트

export default function WritePage() {
  return <div>글쓰기</div>;
}

다섯개의 컴포넌트를 생성후 

 

 

App  컴포넌트에서 Route컴포넌트를 사용하여 각 라우트의 경로를 지정한다.

 

import { Routes, Route } from "../node_modules/react-router/index";
import PostListPage from "./pages/PostListPage";
import PostPage from "./pages/PostPage";
import LoginPage from "./pages/LoginPage";
import RegisterPage from "./pages/RegisterPage";
import WritePage from "./pages/WritePage";

export default function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<PostListPage></PostListPage>}></Route>
        <Route path="/login" element={<LoginPage></LoginPage>}></Route>
        <Route path="/register" element={<RegisterPage></RegisterPage>}></Route>
        <Route path="/write" element={<WritePage></WritePage>}></Route>
        <Route path="/@:usename">
          <Route index element={<PostListPage></PostListPage>}></Route>
          <Route path=":postId" element={<PostPage></PostPage>}></Route>
        </Route>
      </Routes>
    </>
  );
}

 

 

여기서 /@:username 이 생소할수있는데 

이것은 계정명을 주소 경로안에 넣을때 이렇게사용한다

 

예를들면 http://localhost:3000/yunrap95 이런 방식이다.

그렇다면 화면이 잘뜨는지 확인해본다.

 

4. 스타일 설정

 

yarn add styled-components

styled-components로 npm 설치를 해준다.

 

const palette = {
  gray: [
    "#f8f9fa",
    "#f1f3f5",
    "#e9ecef",
    "#dee2e6",
    "#ced4da",
    "#adb5bd",
    "#868e96",
    "#495057",
    "#343a40",
    "#212529",
  ],
  cyan: [
    "#e3fafc",
    "#c5f6fa",
    "#99e9f2",
    "#66d9e8",
    "#3bc9db",
    "#22b8cf",
    "#15aabf",
    "#1098ad",
    "#0c8599",
    "#0b7285",
  ],
};

export default palette;

 

 

5. Button 컴포넌트 만들기

 

공통으로 사용되는 버튼을 만드려고한다.

src / components/ common 에 디렉터리를 생성하고 그안에 컴포넌트를 만들어준다.

 

 

import styled from "styled-components";
import palette from "../../lib/styles/palette";
const StyledButton = styled.button`
  border: none;
  boder-radis: 4px;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.25rem 1rem;
  color: white;
  outline: none;
  cursor: pointer;

  background: ${palette.gray[8]};
  &:hover {
    background: ${palette.gray[6]};
  }
`;

export default function Button(props) {
  return (
    <div>
      <StyledButton {...props}></StyledButton>
    </div>
  );
}

여기서 Button 컴포넌트에 {...props}를 설정해주었는데 이는 Button이 받아오는 props를 모두 StyledButton 에 전달한다는 의미이다.

아직 잘이해가안가지만 우선 진행하자

 

 

그후 리스트 페이지 PostListPage.js 파일에 해당 컴포넌트를 랜더링해준다.

import Button from "../components/common/Button";

export default function PostListPage() {
  return (
    <div>
      <Button>버튼</Button>
    </div>
  );
}

 

 

6. 글로벌 스타일 수정

index.css를 열어서 다음과같이 수정했다.

 

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  min-height: 100%;
}

#root {
  min-height: 100%;
}

/* 추후 회원 인증 페이지에서
배경화면을 페이지의 전체 영역에 채우기 위한 용도 */
html {
  height: 100%;
}

/* 링크의 색상 및 밑줄 없애기 */
a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: inherit; /*모든 엘리먼트의 box-sizing 값을 border-box로 설정*/
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

 

7. 리덕스 적용

리덕스 스토어를 생성하고 Provider 컴포넌트를 통해 리덕스를 적용하려고한다.

 

yarn add redux react-redux redux-actions immer redux-devtools-extension

immer를 사용해서 불변성도 관리해주려고한다.

 

그후에 리덕스 모듈을 만들거다.

 

하지만 리덕스를 사용하던중에 createStore기능이 deprecated 된것을 발견해서

redux toolkit으로 변경해 사용해보려고한다.

 

 

 

 

1. auth.js 모듈생성

 

src/modules 디렉터리만들고 그안에 auth.js라는 모듈을 생성한다. 

redux toolkit에 있는 counterSlice api를 사용했다.

 

참고한문서이다.

https://redux-toolkit.js.org/tutorials/quick-start

/*
 * <pre>
 * @title auth.js
 * @desc auth 모듈생성 (redux toolkit적용 ), counterSlice api사용
 * </pre>
 *
 * @author yunrap
 * @since 2022.07.17 17:27:11
 * @version 0.1.0
 * @see =================== 변경 내역 ==================
 *   날짜       변경자     내용
 *  2022.07.17.  yunrap  최초생성
 */

import { createSlice } from "@reduxjs/toolkit";

const initialState = {};

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    sample_action: (state) => {
      state.action = "auth/SAMPLE_ACTION";
    },
  },
});

export const { sample_action } = authSlice.actions;

export default authSlice.reducer;

 

2. Store생성

리듀서에 반환된  state를 store로 관리하는곳이다

 

 

/*
 * <pre>
 * @title store.js
 * @desc 리듀서에 반환된 state를 store로 관리하는곳
 * </pre>
 *
 * @author yunrap
 * @since 2022.07.17 18:15:29
 * @version 0.1.0
 * @see =================== 변경 내역 ==================
 *   날짜       변경자     내용
 *  2022.07.17.  yunrap  최초작성
 */

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./auth";

export const store = configureStore({
  reducer: {
    auth: authReducer,
  },
});

 

 

3. index.js 파일적용

 

 그후 Provider를 통해 리액트 프로젝트에 리덕스를 적용한다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "../src/modules/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

 

 

 

리덕스 적용후

크롬 개발자도구의 Redux 탭을열어서 (없다면 아래링크참조)

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related

 

auth 객체가 존재하는지 확인하면된다.

 

이렇게 리덕스툴킷을 사용해서 리덕스를 적용을해주었다.

 

다음화에는 회원가입과 로그인 구현을 해볼것이다.