Walmart Electrode #09 Generate Docs

문서 생성

문서는 component.md와 메타문서인 component.json 으로 이루어져 있다. Electrode-Docgen 을 이용하면, 자동화가 가능하다.

이 문서화 명령은 아래 gulpfile.js 안에 정의되어 있다.

1. 위치 : <your-awesome-component>/gulpfile.js

Walmart Electrode #08 Build and Demo

Demo the Component & Build

아래와 같이 디렉토리 이동 후 실행을 해 보자.

Walmart Electrode #07 Add Examples

예제를 추가 해보기.

1. 위치 : <your-awesome-component>/demo/examples/render-friend.example

해당 디렉토리에 render-friend.example 파일을 신규로 생성하고 아래 코드를 추가한다.

[binrang@binrang examples]$ pwd /home/binrang/br-electrode-component/br-elec-component/demo/examples [binrang@binrang examples]$ vi render-friend.example <RenderFriend     friend={       {name: "John", img: "//goo.gl/dL5MXT"}     } />

Walmart Electrode #06 Test Components

Components에 대한 개발 테스트

WalmartLabs 에서는 대용량, 고성능 코드를 구현하는데 있어 중요한 포인트로 테스트를 강조하고 있다.

이 테스트 방법은 Component와 Application 레벨에서 단위별 테스트를 포함하고 있다.

그리고 구현한 Component들을 위해, Mocha 를 사용하고, 자바스크립트 테스트 프레임워크 는 비동기 테스트에 대하여 완벽하게 수행한다. Enzyme을 같이 사용하고,airbnb 의 React를 위한 테스트 유틸리티이다.

Walmart Electrode #05 Develop Main Component

상위 레벨의 메인 Component 개발

1. 위치 : <your-awesome-component>/src/components/your-awesome-component.jsx
해당 파일을 열어 아래 코드를 재정의 한다.

현재 코드

Walmart Electrode #04 Develop Styles

CSS 모듈을 사용하여 스타일 개발

이번에는 동적 응용 프로그램을 만드는 CSS 모듈을 이용하여 일부 스타일을 추가 해본다.

1. 위치 : <your-awesome-component>/src/styles/your-awesome-component.css

해당 CSS 파일을 열어 아래 부분에 CSS 코드를 추가한다.

Walmart Electrode #03 Component Helpers

Components 에 대한 helpers 개발

1. 위치 : <your-awesome-component>/src/helpers/graph-styles.js

src 디렉토리 밑에 helpers 디렉토리를 신규 생성하고 graph-styles.js 파일을 생성 후 아래 내용을 코딩한다.