2021.09.16 React 프론트엔드 프로젝트 세팅

2021.09.16 React 프론트엔드 프로젝트 세팅_정리노트

 

오예 80번째 포스팅이다~!~! 올해 안에 열시미 해서 100개를 목표로.... 방학이 끝나고 1주 2포스팅은 못하겠다만은, 그래도 꾸준히 해봅시다..!가즈아

 

이제 드디어 리다기에서 마지막 프론트엔드 프로젝트 부분에 들어감!

 

어우어우 세팅하면서 그동안 배웠던 흐름부터 정리해주시는군 암요.. 따라갑죠 홀홀 뺘샤해보자...!!!

 

 

 

프로젝트 경로는 blog 폴더 안에 blog-backend ( node.js 로 구현해놓음 책따라 한거라서 따로 포스팅은 안할 것임. )

blog-frontend 디렉토리를 만들어서 백엔드와 프론트엔드를 분리했고, 요포스팅에서는 blog-frontend 디렉토리에서 전부 이뤄질것 ㅇㅇ

 

$ yarn create react-app blog-frontend

 

짜아 프로젝트 생성해줬으면 

가장 먼저 주요컴포넌트를 만들어서 라우터 세팅부터 해놓으면 편하다! 설치하고 연결해주게씀.

$ yarn add react-router-dom

 

• LoginPage.js - 로그인
• RegisterPage.js - 회원가입
• WritePage.js - 글쓰기
• PostPage.js - 포스트 읽기
• PostListPage.js - 포스트 목록 

 

주요 컴포넌트는 5개!

 

src/pages 이렇게 디렉토리를 만들어서 컴포넌트 5개를 만들어주었다.

 

 

src/pages/LoginPage.js (새로 생성)

 

src/pages/PostListPage.js (새로 생성)

 

 

src/pages/PostPage.js (새로 생성)

 

 

src/pages/RegisterPage.js (새로 생성)

src/pages/WritePage.js (새로 생성)

 

기능도 안넣을거니까 고냥 이렇게 이름만 적어서 5개 다 만들어주고 ,

 

라우터 설정 ㄲ!

 

src/index.js

 

이렇게 index.js 에 BrowserRouter 컴포넌트로 App 을 감싸주면 새로고침 없이 주소를 변경할 수 있게 해주자.

 

 

src/App.js

 

import './App.css';
import { Route } from 'react-router-dom';
import PostListPage from './pages/PostListPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import WritePage from './pages/WritePage';
import PostPage from './pages/PostPage';

function App() {
  return (
    <>
      {/* 배열에 넣어줌으로써 여러 개의 경로를 쉽게 설정. 리액트 v5 이후부터 이렇게 2번쓰지 않고 배열에 담기 가능 */}
      {/* @:username 방식은 http://localhost:3000/@korin 과 같이 username 을 파라미터로 읽을 수 있음.  */}
      <Route component={PostListPage} path={['/@:username', '/']} exact />
      <Route component={LoginPage} path="/login" />
      <Route component={RegisterPage} path="/register" />
      <Route component={WritePage} path="/write" />
      <Route component={PostPage} path="/@:username/:postId" />
    </>
  );
}

export default App;

 

그리고 나서 App.js 에서  Route 컴포넌트를 활용해서 경로에 따른 컴포넌트가 뜨도록 잘 연결시켜주기.

 

여기서 PostListPage 는 2가지의 경로로 가도록 라우트를 설정했는데, 두개를 적어줄 필요 없이 리액트 v5 이후 부터 배열에 담으면 복수의 경로를 설정해줄 수 있다.

 

@username 은 username 을 파라미터로 읽을 수 있게 해둔 것인데, 

 

미디움이나 브런치에서도 계정명을 이렇게 주소 경로에다가 @ 을 붙여서 넣는 방식을 사용한대! 이거랑 동일하게 사용할 예정!

 

yarn start

 

이제 가동해서 

 

http://localhost:3000/

http://localhost:3000/@tester

-- 포스트 리스트 글씨 화면에 출력

http://localhost:3000/register

-- 회원가입 글씨 화면에 출력

http://localhost:3000/login

-- 로그인 글씨 화면에 출력

http://localhost:3000/wirte

-- 글쓰기 글씨 화면에 출력

http://localhost:3000/@tester/1234

-- 포스트 읽기 글씨 화면에 출력

 

 

 

그 다음에는 스타일링에 대한 세팅을 해줄텐데, 스타일 컴포넌트를 설치해서 스타일링 할 것이므로 설치 ㄲ!

 

$ yarn add styled-components

 

 

그리고 나서 나중에 색상을 사용할 때 쉽게 뽑아서 쓸 수 있도록 색상 팔레트파일을 만들거고, 

https://gist.github.com/velopert/fda9083ddedcbbef30bb40362f9d01c4

palette.js

 

벨로퍼트님이 미리 만들어놓은 파일을 복사해서 써도 되고, 이 소스들은 또 어디서왔냐 함은

 

https://yeun.github.io/open-color/

Open Color

 

요 소스들을 활용할 것이다. 얘를 라이브러리를 설치해서 사용할수도 있지만, 이를 파일로 따로 추출해서 만들면 모든 색상을 불러오지 않고 내가 원하는 색상만 불러와서 사용할 수 있고, 자동 import 가 좀 더 제대로 작동하기 때문에 편함! 라이브러리를 설치하면 자동으로 색상들이 import 되지는 않는다고 하는군여

 

src/lib/palette.js (새로생성)

 

나는 보라색을 좋아해서 violet 도 적어서 가져옴 ㅎㅅㅎ 

 

 

 

 

이제 이 색상을 이용해서 button 컴포넌트 스타일링 해봅자~~~~

 

components/common/Button.js ( 새로 생성 )

import React from 'react';
// styled-component import
import styled from 'styled-components';
// palette import
import palette from '../../lib/styles/palette';

// button styling
const StyledButton = styled.button`
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.25rem 1rem;
  color: white;
  outline: none;
  cursor: pointer;
  
  background: ${palette.violet[8]};
  &:hover {
    background: ${palette.violet[6]};
  }
`;
// Button 에 받아오는 props 를 모두 styledButton 에 전달한다는 의미
const Button = (props) => {
  return <StyledButton {...props} />;
};

export default Button;

 

굳이 스타일 컴포넌트로 만든 StyledButton 을 바로 안내보내고 Button 컴포넌트 안에서 StyledButton 을 렌더링 해 준 이유로는 자동 import 때문! 바로 스타일 컴포넌트로 만든 컴포넌트를 내보내게 되면, 자동 import 가 제대로 작동하지 않는다. 

 

또, { ...props } 는 Button 에서 받아오는 props 를 모두 styledButton 에도 전달한다는 의미!

 

 

src/pages/PostListPage.js

 

자 이제 Button 컴포넌트를 렌더링 해보면,

 

 

 

잘 뜨는군요 홀홀 이제는 index.css 를 꾸며보러 가보실까

 

src/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;
    /* font를 부드럽게 전환. 어두운 배경에서는 더 밝게 보이는 옵션 */
  -webkit-font-smoothing: antialiased;
  /* firefox 에서의 안티엘리어싱 */
  -moz-osx-font-smoothing: grayscale;
  /* 엘리먼트의 box-sizing 값을 border-box로 설정 >> border 의 px 로 인해 해당 크기가 밀려나지 않음 */
  box-sizing: border-box; 
  min-height: 100%;
}

#root {
  min-height: 100%;
}

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

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

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

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

 

 

오오 여기서도 새로운 css 속성을 하나 배웠음. 

 

font-smooth이라는 속성으로, 

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

font-smooth - CSS: Cascading Style Sheets | MDN

 

이 속성인데, 글꼴의 테두리를 부드럽게 하고, 어두운 배경에서 텍스트를 더욱 밝게 보이게 한다네 홀홀 css 도 보다보면 넘무 신기한게 많다.

 

 

이제는....리덕스 설정...으로 가보자...흑흑 어려울거 같아서 겁부터나~~~ 하지만 해보자.. 세팅 단계라서 아직 redux-saga 까지 안쓰고 당장은 스토어를 생성해서 Provider 로 적용까지 세팅 ㄲ!

 

// redux 관련 라이브러리 한꺼번에 설치
$ yarn add redux react-redux redux-actions immer redux-devtools-extension

 

 

그리고 여기서도 역시 액션 타입, 액션 생성함수, 리듀서가 하나의 파일에 다 정리되어 있는 Ducks 패턴을 사용.

 

src/modules/auth.js ( 새로 생성 )

import {createAction , handleActions} from 'redux-actions';

// sample 액션 타입 정의
// module/ACTION_TYPE. 액션 타입은 대문자로, 앞에 모듈을 붙여주어야 액션 이름 중첩을 방지할 수 있음.
const SAMPLE_ACTION = 'auth/SAMPLE_ACTION';



// 액션 생성자. createAction 함수는 매번 객체를 직접 만들어 줄 필요 없이 더욱 간단하게 액션 생성 함수를 선언할 수 있음. 사용으로 액션 추가 데이터는 payload 사용. 
// 액션 생성자는 export
export const sampleAction = createAction(SAMPLE_ACTION);


// 초기 상태 정의
const initialState = {};

// 리듀서 함수
// 리듀서 함수도 더 간단하고 가독성 높게 사용하기 위해 handleActions 함수 사용
// 리듀서 함수는 export default 로 
const auth = handleActions(
    {
        [SAMPLE_ACTION] :  (state,action) => state,
    },
    initialState,
);


export default auth;

 

대충 틀만 만들어 주었는데도 역시 익숙치 않다보니 다시 리덕스 관련 개념 훑으면서 정리. 으으.. 얼른 익숙해지고 싶따

 

 

 

또한 스토어는 한 프로젝트당 하나를 원칙으로 하기 때문에 우리가 추후에 만들어줄 리듀서까지 생각해서 작성해쥼.

 

 

src/modules/index.js ( 새로 생성 )

import { combineReducers } from "redux";
import auth from "./auth";



const rootReducer = combineReducers({
    auth,
});


export default rootReducer;

 

그리고 이제 스토어를 만들어서 리액트 프로젝트에 리덕스를 적용해야겠쥬.

 

 

src/index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
// import
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './modules/index';

const store = createStore(rootReducer, composeWithDevTools());
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root'),
);

 

createStore 로 스토어를 생성해주고, composeWithDevTools 를 통해서 개발자 도구의 리덕스 탭을 이용하게 한다.

 

또 Provider 컴포넌트를 통해서 리액트에 리덕스를 적용시킴!

 

 

자아 이제 확인해볼까!!!!! 

 

실행 화면

휴유....... 된다된다 auth 객체가 잘 존재하는군.....!

 

 

 

---

아이고... 프로젝트 세팅부터 리덕스 턱턱... 후 이렇게 한꺼번에 정리하다보니 역시 아직이라는 생각이 많이 드는군.. 다음장은 회원가입, 로그인 구현인데 과여어어언 ..! 저번에 막혔던 곳인 만큼 촘촘하게 정리해봐야지...!!! 오늘 포스팅은 갠적으로 내가 혼자서 치면서 흐름 정리를 한 느낌이라 그래도 적어도 나한테는 도움이 많이 되는 포스팅 ㅎㅅㅎ 앞으로도 자주 봐야징~~~~ 그럼 빠잉