16. [토이프로젝트 따라하기] 블로그-1

Backend

create-react-app blog-backend
cd blog-backend
yarn add dotenv joi koa koa-bodyparser koa-router mongoose nodemon

소스파일은 이전글 참고

2019/07/14 - [WEB/REACT] - 14. Koa 프레임워크

---

---

Frontend

create-react-app blog-frontend
cd blog-frontend
yarn eject
yarn add babel-loader @babel/core @babel/preset-env webpack webpack-cli
yarn add node-sass sass-loader classnames
yarn add react-router-dom redux redux-actions react-redux redux-pender immutable
yarn add open-color include-media
yarn add codemirror marked prismjs 

src 폴더아래 아래적힌 폴더 생성

components : 리덕스 상태에 연결되지 않은 프리젠테이셔널 컴포넌트들이 들어 있다.

containers : 리덕스 상태와 연결된 컨테이너 컴포넌트들이 들어 있다.

lib : 백엔드 API 함수들과 코드 스플리팅할 떄 사용하는 asyncRoute 가 들어 있다.

pages : 라우터에서 사용할 각 페이지 컴포넌트들이 들어 있다.

style : 폰트 , 색상, 반응형 디자인 도구, 그림자 생성 함수 등 프로젝트에서 전역적으로 필요한 스타일 관련 코드들이 들어 있다.

 

---

불필요한 파일 제거 : App.css, App.js, App.test.js, index.css, logo.svg

---

babel 관련 힌트 : https://stackoverflow.com/questions/52106771/upgrading-to-babel-loader-8-from-7-what-do-i-need-to-change

Upgrading to Babel-loader 8 from 7? What do I need to change?

babel 관련 라이브러리 : https://github.com/babel/babel/tree/master/packages/

babel/babel

바벨 github : https://github.com/babel/babel-loader

babel/babel-loader

webpack 4.x | babel-loader 8.x | babel 7.x 기준설명)

 

바벨로더와 바벨 그리고 웹팩 기준이 위와같이 버전이 일치하여야 된다. x는 아무숫자 호환가능

webpack.config.js

수정전)

{
	test: /\.(js|mjs)$/,
	exclude: /@babel(?:\/|\\{1,2})runtime/,
	loader: require.resolve('babel-loader'),
	options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [
          [
            require.resolve('babel-preset-react-app/dependencies'),
            { helpers: true },
          ],
      ],
      cacheDirectory: true,
      cacheCompression: isEnvProduction,

      // If an error happens in a package, it's possible to be
      // because it was compiled. Thus, we don't want the browser
      // debugger to show the original code. Instead, the code
      // being evaluated would be much more helpful.
      sourceMaps: false,
    },
}

 

수정후)

presets 에 이미 적용했으므로 따로 package.json 에 추가하거나 따로 파일을 .babelrc 을 생성해서 추가안해도된다.

{
	test: /\.m?js$/,
	exclude: /(node_modules|bower_components)/,
	use: {
		loader: 'babel-loader',
		options: {
			presets: ['@babel/preset-env']
		}
	}
}

---

이제 sass-loader 경로패치를 위해 아래와같이 진행한다.

config/webpack.config.js

수정전)

{
	test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'sass-loader'
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,
},

수정후)

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }).concat({
      loader: require.resolve('sass-loader'),
      options: {
        includePaths: [paths.appSrc + '/styles'],
        sourceMap: isEnvProduction && shouldUseSourceMap
      }
    }),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,
},

---

dotenv : package.json의 script에서의 NODE_PATH를 안적고 .env 파일을 생성하여 NODE_PATH 하도록 만드는 라이브러리, config/env.js 파일에 설치와 동시에 적용됨

 

 

store/modules/

base : 로그인 상태, 삭제 및 로그인할 때 보이는 모달 상태를 다룸

editor : 마크다운 에디터 상태를 다룸

list : 포스트 목록 상태를 다룸

post : 당닐 포스트 상태를 다룸

 

sotre/configure.js : 스토어를 생성하는 함수인 configure를 구현

함수를 따로 만드는 이유는 스토어를 클라이언트에서 생성하지만, 추후 서버사이드 렌더링 할 떄 서버에서도 호출해야 하기 때문이다.

 

open-color : 적용할 색상을 쉽게 선택가능하게 하는 라이브러리

설정방법 : $oc-색상-밝기

ex) GRAY 7 -> $oc-gray-7

색상 팔레트는 https://yeun.github.io/open-color 참고

Open Color

include-media : 반응형 디자인을 쉽게 적용시켜주는 라이브러리

 

src/styles/lib/_mixins.scss : 그림자를 쉽게 설정할 수 있는 material-shadow 믹스인을 적용

src/styles/utils.scss : $breakpoints 는 반응형 디자인 화면클때, 중간, 모바일때에 따라 다른 스타일을 보여줌

 

src/components/list/listListWrapper : 페이지 내부의 컴포넌트들을 감싸준다.

src/components/list/Pagination : 다음,이전 페이지로 이동한다.

src/components/list/LpostList : 포스트 목록을 보여준다.

 

CodeMirror : 마크다운 에디터에 작성된 텍스트에 색상을 입혀주는 라이브러리

Marked : HTML 형태로 변환해주는거

Prismjs : 코드에 색상을 입혀주는 라이브러리