landvibe / book-react Goto Github PK

위 소스코드에는 CleanWebpackPlugin()이 없지만, 책에는 있습니다.

안녕하세요, 실전 리액트 프로그래밍 개정판 (리액트 훅부터 Next.js까지) 페이지 388 쪽의 오류에 대해 제보드리려고 합니다. new CleanWebpackPlugin() 이 클라이언트 쪽에서 실행되는 플러그인인데 미리 번들된 서버 빌드가 사라지는 버그가 있습니다.

그래서,

      ? [new CleanWebpackPlugin()] // 클린 위치를 옮김 (서버 빌드가 자꾸 후처리되는 클라 빌드처리때문에 삭제됨)
      : [new HtmlWebpackPlugin({ template: "./template/index.html" })],

등으로 소스코드를 바꾸면 좋을 것 같습니다.

관련 PR을 올렸습니다.

#28

291p 코드 6-58 에서 getAgeLimit 과 getShowLimit 에 export 가 빠진 것 같습니다. ㅜ

안녕하세요. 좋은 책 써 주셔서 감사합니다. 많은 도움이 되고 있습니다.
공부를 하다가 작동이 잘 안되는 부분이 있어서 글 올립니다.
먼저 424p의 [코드 8-29]의 production 환경에서의 prerenderCache를 생성하는 부분에서,

if (!dev) {
  for (const info of prerenderList) {
    const { name, path } = info;
    const html = fs.readFileSync(`./out/${name}.html`, "utf8");
    prerenderCache[path] = html;
  }
}

라고 작성되어 있는데요.
브라우저에서 책에서와 같이 localhost:3000/page2-hello 또는 localhost:3000/page2-world로 요청하면 페이지를 찾을 수 없게 됩니다.
renderAndCache함수에서 cacheKey 변수에는 /page2-hello 또는 /page2-world가 담기게 되고, prerenderCache객체의 key에는 각 페이지에 대한 주소와 쿼리가 담겨 있어 정상적으로 작동하지 않습니다.
그래서 위의 코드를 아래와 같이 수정하였더니 정상적으로 작동되었습니다.

if (!dev) {
  for (const info of prerenderList) {
    const { name } = info;
    const html = fs.readFileSync(`./out/${name}.html`, "utf8");
    prerenderCache[`/${name}`] = html; // path를 `/${name}`으로 변경
  }
}

제가 아직 책을 100% 이해하지 못해 이것이 필자께서 의도하신 결과인지는 잘 모르겠습니다.
혹시 제가 잘못 이해한 것이 있다면 지적해주시면 좋겠습니다!

그리고 424p의

브라우저에서 http://localhost:3000/page2-hello로 접속해 보면 ... 해결할 수 있다.

단락의 url에 html 확장자가 빠진 듯 하고,
425p의 [8.4.6 styled-components 사용하기] 직전의 단락과 내용이 중복되어 편집에 오류가 있는 것 같아 보입니다.

확인하시고 정정해주시면 감사하겠습니다!

const element = <a href="http://google.com">click here</a>;
elements.type ='b'; // 에러발생

두번째 문장인 elements.type 에서 오타인거 같습니다. 아마 element로 바꿔야 하지 않을까 싶습니다.

<button style={{ backgroundColor: this.color }} .... >
  좋아요
</button>

라고 책에 적혀져 있는데 backgroundColor에서 state에 있는 color 값에 접근하는 로직이라

this.color 를 this.state.color로 해야 색상이 바뀌네요.

안녕하세요. 이재승님
책을 읽던 중에 내용상 안 맞는 것 같아서 제보 드립니다.

p 143 내용중 일부

AS IS

단지, componentDidUpdate 메서드가 첫 렌더링 후에 호출되지 않는다는 이후로 코드가 복잡해진다.

TO BE

단지, componentDidMount 메서드가 첫 렌더링 후에 호출되지 않는다는 이후로 코드가 복잡해진다.

내용상 componentDidUpdate 보다는 componentDidMount 맞을 것 같습니다.

챕터 1 6-css-test 에서

app.js 에서 box4-1.js 로 바꾸고 실행 시키면

TypeError: BoxCommon.extend is not a function 가 납니다 !

Mac 환경인 제 PC 만 이상인지 모르겠네요

노드는 10점대를 사용중입니다.

function getDefaultAge() {
      console.log('Hello');
      return 0;
}

const obj = { age:21, grade: 'A' };
const  {age = getDefaultAge(), grade } = obj;
console.log(age); // 0

요렇게 코드가 나와있는데,
age의 속성값이 undefined가 있으므로, 기본값이 사용되지 않았으므로
hello도 호출되지 않았기에 값도 0이 아닌 21이 되어야할 것 같습니다.

p. 111의 코드 3-7에서 클래스형 컴포넌트 부분에서
{props.title} 을 {this.props.title}로 변경해야 할 것 같습니다.

const obj = {};
const arr = [];

({ foo: obj.prop, bar: arr[0] }) = {foo:123, bar:true};
console.log(obj); // {prop:123}
console.log(arr); // [true]

해당 코드를 실행시켜보면 에러가 납니다.
(Uncaught SyntaxError: Invalid destructuring assignment target)
아래처럼 코드를 수정하여 에러를 대응하면 콘솔로그의 기대값이 올바르게 출력됩니다.
괄호의 수정이 필요할 것 같습니다..!!:)
정말 많이 배우고 있습니다..!
감사합니다!!:)

const obj = {};
const arr = [];

({ foo: obj.prop, bar: arr[0] } = {foo:123, bar:true});
console.log(obj);
console.log(arr);

이 챕터들의 코드는 아직 올라오지 않은건가요?
아니면 참조할 수 있는 다른곳이 있는건지요!
책의 모든 코드가 다 있다고 했는데 찾을 수가 없어서 여쭤봅니다!
오탈자 제보하는곳에 올려 죄송합니다;

해당 지문에서 filter를 사용하면 의도한 대로 되지 않는다고 해서, filter가 안 되면 splice도 안 돼야 하는 게 맞지 않냐는 생각에 실제 테스트를 해봤습니다.

// const index = state[name].findIndex(item => item.id === action.item.id);
// state[name].splice(index, 1);
state[name] = state[name].filter(item => item.id !== action.item.id);

위와 같이 코드 6-34에서 원래 REMOVE 부분에 있던 소스를 주석 처리하고, filter로 바꿨는데 잘 작동합니다.

확인 부탁드립니다.

1. 코드 1-44의 onChangPage 함수명이 문맥상 onChangePage 인것 같습니다.
2. 코드 1-47의 Link 컴포넌트 중 파란 방의 to 속성값이 /bludRoom이 아닌 /blueRoom 인것 같습니다.

8-chpater/3-test-ssr-image-module에 해당하는 code인데 server에 해당하는 output을 webpack이 출력하지 못하네요. 예제와 차이를 보이는 부분은 설치된 패키지 버전정오표에 작성해주신 clean-webpack-plugin 사용법에 따른 코드 변경점 밖에 없는데 이럴때는 어떻게 해결하나요?

webpack.config.js

// ...

// before
// const CleanWebpackPlugin = require('clean-webpack-plugin');
// after
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// ...

package.json

{
  "name": "test-ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "node dist/server.bundle.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-modules-commonjs": "^7.5.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "express": "^4.17.1",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "styled-components": "^4.3.2",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7",
    "webpack-node-externals": "^1.7.2"
  }
}

안녕하세요, 212p 코드 4-55 메모이제이션 사용 예제에서 output1, output2, output3을 얻기위해 호출되는 함수가 sort가 아닌 sort2가 되어야 하는게 아닌지 궁금합니다 🤔

별개로 책의 내용이 풍성해서 감사합니다! 😄

" _ _ tset _ _ " 폴더 밑에 있는 모든 자바스크립트 파일이라고 되어있는데
" _ _ tests _ _ " 로 정정되어야 할 것 같습니다.

책 너무 내용좋습니다.. 진짜 너무 공부가 잘되는거같아요! 감사합니다!!:)
붙이면 볼드처리되어 일부러 언더스코어는 띄었습니다.

475페이지에서 arr2의 타입은 (Korean, Japanese)[]가 된다고 나와있던데,

(Korean | Japanese)[]가 아닐까요?

안녕하세요! 오자를 발견한 것 같아 문의 드립니다.
[코드 5-7 클래스형 컴포넌트에서 API 호출하기] 에서, 아래 코드처럼 [1]이 두 번 들어가 있습니다.

class Profile extends React.Component {
  state = {
    user: null
  };

  componentDidMount() { // [1]
    const { userId } = this.props;
    getUserApi(userId).then(data => this.setState({ user: data }));
  }
  componentDidUpdate(prevProps) { // [1] 
    const { userId } = this.props;
    if (userId !== prevProps.userId) { // [2]
      getUserApi(userId).then(data => this.setState({ user: data }));
    }
  }
  render() {
    const { user } = this.state;
    return // ...
  }
}

안녕하세요.
좋은 책 써주셔서 덕분에 잘 읽고 있습니다.
책 예제에서 오탈자를 발견한 것 같아 제보드립니다.

'3장 중요하지만 헷갈리는 리액트 개념 이해하기'에서
'3.3 생명 주기 메서드' 부분의 '코드 3-38 key 속성값을 이용한 코드'의
(1) 번
return <PriceInput key={product.id} value={product.price} />;
->
return <PriceInput key={product.id} price={product.price} />;
로 수정되어야 하는거 같은데 확인 부탁드립니다.

또한, '코드 3-39 상탯값을 부모 컴포넌트에서 관리하는 코드'의
13번째 줄
return <PriceInput onChange={this.onChangePrice} value={product.price} />;
->
return <PriceInput onChange={this.onChangePrice} price={product.price} />;
도 확인 부탁드립니다.

감사합니다.

5p. 코드 1-1 simple1.html 5번째 줄

const CleanWebpackPlugin = require('clean-webpack-plugin')

모듈을 위와 같이 불러온 다음 웹팩을 실행시키면,
CleanWebpackPlugin is not a constructor 이란 메세지가 뜨면서 실행이 되지 않습니다.

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
이와 같이 불러와서 해결하였습니다.

Reference : https://github.com/johnagan/clean-webpack-plugin