프로 리액트를 처음부터 읽는데...
리액트 커뮤니티에서는 웹팩이라는 도구를 선호한다고 설명합니다.
부록 A에 웹팩이라는 도구의 사용법부터 안내합니다 (상세해서 좋네요)
그중에 바벨이라는 로더? 설치부터 장문의 명령을 사용합니다 ㅋㅋ
npm install --save-dev
babel-core
babel-loader
babel-preset-es2015
babel-preset-react
--save-dev는 해당 프로젝트 내에서 사용할것이니 node_module에 설치됩니다.
부록A 웹팩을 따라가던중
ERROR in ./~/css-loader!./app/main.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/sharpscar/workspace/react/pro/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:237:31)
at LazyResult.then (/home/sharpscar/workspace/react/pro/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:141:21)
at processCss (/home/sharpscar/workspace/react/pro/node_modules/css-loader/lib/processCss.js:198:5)
at Object.module.exports (/home/sharpscar/workspace/react/pro/node_modules/css-loader/lib/loader.js:24:2)
@ ./app/main.css 4:14-75
이라는 에러를 맞닥드린다.
https://github.com/webpack/css-loader/issues/144
비슷한 증상이다.
https://github.com/stefanpenner/es6-promise
HMR
웹팩과 바벨은 서로 다른 별개의 도구이다.
HMR은 컴포넌트의 코드를 수정할때 브라우저에서 실시간으로 컴포넌트를 업데이트 할 수 있는 웹팩 플러그인이며, 제대로 작동하려면 모듈에 특수한 코드를 추가해야 한다.
1장 시작하기를 따라하는데
ERROR in ./source/App.js
Module build failed: SyntaxError: Unexpected token (7:6)
5 | render(){
6 | return (
> 7 | <h1>Hello World!</h1>
| ^
8 | );
9 | }
10 | }
@ multi main
webpack: bundle is now VALID.
계속 이런 에러가 나온다. jsx 는 자바스크립트 내부에 xml , html 문법을 사용할수 있는데
설정에 문제가 있는것일까?
기존 소스의 package.json 파일을 복사하여
프로젝트폴더에서 npm install로 새로 설치하여 시작함
----------------------------------------------------
bundle.js:21492 Uncaught TypeError: Cannot read property 'filter' of undefined
해당 부분을 살펴보면
기존의 KanbanBoard.js의 render() 부분에서 뭔가 오타를 적은게 아닐까 의심된다.
해결)
app.js의 마지막줄에
render(<KanbanBoard cards={cardsList} />, document.getElementById('root')); 에서
render(<KanbanBoard />, document.getElementById('root'));
부분 누락
역시 코드를 배끼는것도 차분한 성격이 유리하다. 덤벙대는 성격은 전혀 도움이 안됨.
bundle.js:1322 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `List`. See https://fb.me/react-warning-keys for more information.
리액트 매뉴얼에서 해당내용을 해석하고 문제점을 찾아보려 했지만 무슨내용인지 이해가 잘 안된다.
// WRONG!
var ListItemWrapper = React.createClass({
render: function() {
return <li key={this.props.data.id}>{this.props.data.text}</li>;
}
});
var MyComponent = React.createClass({
render: function() {
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapper data={result}/>;
})}
</ul>
);
}
});
// Correct :)
var ListItemWrapper = React.createClass({
render: function() {
return <li>{this.props.data.text}</li>;
}
});
var MyComponent = React.createClass({
render: function() {
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapper key={result.id} data={result}/>;
})}
</ul>
);
}
});key:
When React reconciles the keyed children, it will ensure that any child with
key will be reordered (instead of clobbered) or destroyed (instead of reused).
The
key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array:자식 컴포넌트가 섞일수 있는데 key를 사용하는 방법에 대해 말하는듯하다
컴포넌트에 직접적으로 제공되어야지 html자식요소의 배열에 넣으면 안된다는것같은데
추후 또 같은 에러가 발생하면 다시 찾아봐야할것같다. 칸반보드에 시간을 너무 빼앗기는듯하다.
