[리액트 회원인증 구현] 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-componentsstyled-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-extensionimmer를 사용해서 불변성도 관리해주려고한다.
그후에 리덕스 모듈을 만들거다.
하지만 리덕스를 사용하던중에 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 객체가 존재하는지 확인하면된다.
이렇게 리덕스툴킷을 사용해서 리덕스를 적용을해주었다.
다음화에는 회원가입과 로그인 구현을 해볼것이다.
