React ARC + Redux SSR + Ant Design + Less

기존에 Arc를 썼지만, 다양한 컴포넌트를 StyledComponents로 전환하는데 시간이 걸렸다.

대안으로 Class Rendering을 지향하는 Ant Design을 쓰기로 결정했다.

하지만, 랜더링 순서에 대한 부분이 문제가 발생했고 순차 랜더링을 할 수 있도록 아래와 같이 설정하였다.

+ 추후 styled-component theme 파일을 통해서 antd-default-vars.less 를 생성하여 styled-component의 지정값에 종속 될 수 있도록

설정하는 부분만 고려한다면 antd가 styled-component화 되기전까지 사용하는 임시방편으로 활용 가능 할 것으로 보임.

=> 아무래도 styled-theme는 antd로 2차적 랜더를 하기 때문에 보조적 역할로 확장하는 스타일로만 써야 할 것 같다.

피차 atom components에 antd의 button이나 작은 atom형 컨테이너를 가져다 쓸 것 이기 때문이다.

2편에서는 이 방식으로 생각하고 처리한다고 마음먹고 구성해봐야겠다. 추후 only styled-components가 될 수 있는 프레임윅이 나오기 전까지는 이와 같은 방식을 차용할 것으로 생각하고. 또 ie10까지 저변있게 지원해주는 ant의 기능적 매력을 버릴 수가 없기 때문이다.

+ 기존에 Arc 의 diegohaz 의 styled-theme의 경우, 실제값을 찍어야 한다. 무슨말이냐면 less의 @blue와 같은 치환된 변수값이 아니라, Real Value를 써야하는 일렬의 과정을 통해서 Client에서 처리하는 과정으로 테마를 결정하게 만들어 뒀다. 안에 들어있는 styled-theme/Utils들은 브라우저에서 파싱되는 과정과 서버사이드에서 파싱되는 과정을 거친다. ssr이기 때문에 html component에 assets 라는 값을 처리하는 과정이 있는점을 꼭 참고해서 아래를 봐야한다.

환경

git clone -b redux-ssr https://github.com/diegohaz/arc.git

example 환경을 src로 바꾸어서 옮겨준다.

필요

antd, less, less-loader, less-vars-to-js

1. server.js

global.assets.css.push('/ui.css')

const renderApp = ({

store, context, location, sheet,

위와 같이 한줄 추가

2. client.js 파일과 같은 위치에 and-default-vars.less 파일 생성

@font-family-no-number : "맑은 고딕", -apple-system, BlinkMacSystemFont, "Segoe UI";

@font-family : "맑은 고딕", "Monospaced Number", @font-family-no-number;

3. webpackconfig 파일에 less파일을 불러오고, less-vars-to-js를 통해서 키값 변화 처리

const fs = require('fs')

const less = require('less')

const lessVarsToJs = require('less-vars-to-js')

const themeVariables = lessVarsToJs(fs.readFileSync(path.join(sourcePath, 'ant-default-vars.less'), 'utf8'))

const entryFile = path.join(process.cwd(), 'node_modules', 'antd', 'dist', 'antd.less')

const entryCss = path.join(outputPath, 'ui.css')

less.render(fs.readFileSync(entryFile, 'utf8'), {

filename: entryFile,

modifyVars: themeVariables,

}, (e, output = {}) => {

const { css } = output

fs.writeFileSync(entryCss, css, { encoding: 'utf8' })

})

4. npm run dev 로 테스트 해보면

bundle entry파일과 함께 css 파일을 먼저 받는다.

이후 react hydrate 처리가 되어서 화면을 보여주게 된다.

빠르게 랜더링 되어 페이지를 접속하자마자 보여주는 역할을 함으로서, 어플리케이션화된 화면을 표현해줄 수 있는 서비스를 구축 가능하다.