velopert / learning-react Goto Github PK

292페이지에
let object 2 ={
...
}

이부분에
...object
...object.d
...object.d.f
이부분
object 가아니라 object1 인것 같습니다

추가로 닫힌 이슈 중에서 #4 다시 확인해주세요. 맞다고는 하신것같은데 github 샘플 코드랑 비교해봐도 아닌것 같네요

41p의 VS Code 확장 프로그램 중 5. react-beautify가 위의 그림과 같이 게시가 취소된 것 같습니다.

https://marketplace.visualstudio.com/items?itemName=taichi.react-beautify

193 페이지에서 config/webpack.congif.dev.js - sass-loader 설정 코드에
2번째 줄에 test: /.scss$/,

이부분 scss가 아니라 css가 맞는 것같아요

안녕하세요!

1. 548쪽에 handleChangeMarkdown을 호출하는 부분이 없는데 어디서 호출하는것이고

변수로 받아오는 doc은 어디서받아오는건가요 ?

2. 위지윅에디터를 써보려고하는데
   이미지와 텍스트 내용이 있는데

이미지 와 텍스트 따로 업로드 하려는데 방법이 생각이 안나는데 어떻게 같이 수행하나요 ?

이미지업로드 multer쓸때 폼데이터를 써야되는데 위지익에디터에서는 어떻게해야되는지 잘모르겠습니다!

감사합니다..

새 포스트라는 버튼을 생성하기 전인데, 그림 자체에는 새 포스트가 있네요, "오른쪽"으로 보여지는게 맞을듯 싶습니다.

P.433, 434
그림 18-14 -> 18-15으로 이어지는 내용에 한글로 입력 했는데 영어로 출력되는 오타가 있네요.
중쇄때 수정 하실정도의 오탈자 인지는 모르겠으나 도움 되었으면 하는 바램에 남겨 봅니다.
좋은 책 만들어 주셔서 감사합니다 :)

그림 18-14

{
"title": "테스팅",
"body": "테스팅"
}

그림 18-15(오타수정전)

{
"id": 2,
"title": "test",
"body": "test"
}

그림 18-15(오타수정후)

{
"id": 2,
"title": "테스팅",
"body": "테스팅"
}

411페이지에 eslintrc.js 를 수정한뒤에 계속 진행하려니

계속
Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
라는 eslint쪽에서 문제가 있다고 하길래

eslintrc.js를

module.exports = {
  extends: 'airbnb-base',
  rules: {
    'no-unused-vars': 1,
    'comma-dangle': 0,
    'eol-last': 0,
    'no-console': 0,
    'linebreak-style': ['error', 'windows']
  }
};

이렇게 수정해주었습니다. 아무래도 윈도우즈 계열에서만 뜨는 문제같습니다.

91페이지
4.1 리액트의 이벤트 시스템 에서
3.4.4절에서 작성한 버튼 코드 -> 3.3.4 가 맞는거 같습니다.

페이지 하단에

blog-backend/ssr/render.js
-> blog-backend/src/ssr/render.js

로 src폴더가 빠진 것 같습니다.

이렇게 코드를 작성하면 그림 21-10와 같이 모달이 보일 것입니다.

[문제점] :
해당 디렉토리에서 "yarn eject" 명령어 실행 후 ,
서버 구동을 위해 "yarn start" 입력 시 "00 모듈이 없다는" "계속된" 오류 발생

[질문]
yarn eject 하지 않고도, webpack.config.dev.js 변경이 어려운지요,
yarn eject하면 다시 서버 구동(yarn start)이 되지 않습니다.

[내용]
webpack.config.dev.js를 수정하기 위해서
교재처럼 "yarn eject"을 실행 후 config 파일, css파일, app파일을 변경했습니다.
그 이후 변경사항을 확인하려 해당 만든 디렉토리에서
yarn start 명령어"를 입력 시, 에러가 나와서 서버 구동이 안됩니다.

서버가 구동이 안되, P164 그림 9-2를 볼 수 가 없습니다.
교재에서 특별히 특이사항으로 정리된 부분이 없어 질문 남깁니다.

에러 내용처럼 'babel-loader' npm 설치해봤는데,
그 이후로 줄줄이 cannot found module ~~~라고 나옵니다.

yarn eject 후 yarn start 할 경우 발생하는 에러코드 입니다.
babel-loader를 설치하면 그 이후로 계속 무슨무슨 모듈이 없다고 나옵니다.

무슨무슨 : babel-loader-> chalk -> whatwg-fetch

[에러코드]
Error: Cannot find module 'babel-loader'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.resolve (internal/modules/cjs/helpers.js:30:19)
at Object. (/Users/rohkorea_mac/styling-react/config/webpack.config.dev.js:145:29)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/rohkorea_mac/styling-react/scripts/start.js:31:16)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

155p 위에서 9번째 줄

/* 또는 이런 식으로 { }를 생략할 수도 있습니다.

부분이

/*또는 이런 식으로 return()를 생략할 수도 있습니다.

로 바뀌어야하는 것 같네요^^;

44p에서 '빌드한다는 것이 뭔가요?'의 하단에

$ cd hello-react
$ npm start // 이 부분이 yarn start가 되어야 문맥상 자연스러운 것 같습니다.

javascript <myComponent onClick={dosumething}/>

그냥 이름이 onClick인 props를 전달을 받는게 맞는건가요? ? ?
부모(app.js) 컴포넌트에서 자식컴포넌트(myComponent)로 props를 전달 하는게 아닌가요??

초심자도 이해할수 있게 책 구성이 너무 좋은거같습니다! 감사합니다 👍

github 샘플에 올라온 코드는 각 component 별로 알맞게 디렉토리 내에 생성되어 있는 반면에 10.2.2 텍스트를 따라가다 보면 이런 식으로 파일을 생성하게 됩니다.

199 페이지에 PageTemplate.js 경로를 src/components/PagetTemplate/PageTemplate.js로 수정해야 하지 않을까 싶습니다. 확인 부탁드립니다.

73페이지 코드에 props로들어가건 react인데 3-8에 출력결과는 React로 나와있네요

459p의 하단 코드 타이틀에서 오타가 있는 것 같습니다.

src/api/posts/posts.js - read
-> src/api/posts/posts.ctrl.js - read

149p의 하단에서 3번째 줄에

버튼을 렌더링하고, 누를때마다 handleRandomizeColor 메서드가 호출...

-> 본 예제에서 handleRandomizeColor 메서드가 존재하지 않는 것 같습니다.

199페이지

src/component 디렉터리에 PageTemplate 디렉터리를 만들고 내부에 PageTemplate.js 파일을 생성하라고 되어있는데

바로 밑에 경로는 src/components/PageTemplate.js 라고 되어있네요

149p 밑에서 3번째 줄
...누를 때마다 handleRandomizeColor 메서드가...
부분이
...누를 때마다 handleRandomColor 메서드가...
로 변경되어야 합니다.

p.154 4번째 줄

class Hello extends React.Component {
...

Line 1: 'Component' is defined but never used no-unused-vars
이렇게 나옵니다.

책에서 딱 한번 React.Component라고 나오는것을 보니 오타인것 같습니다.
수고하세요!

코드 문제는 아닙니다만, 출판사에서 맞춤법을 제대로 짚고 넘어가지 못한 것 같아 제보 드립니다.

32페이지 3번째 줄
요소 개수가 몇 백 개, 몇 천 개 단위로 많다면

몇 백 개 -> 몇백 개
몇 천 개 -> 몇천 개

'몇'이 수를 나타내는 말 앞에 올 때는 뒷말과 붙어 하나의 관형사가 된 것으로 보고 붙여 씁니다.

34페이지 2번째 줄
다시 한 번 강조하면 리액트는 프레임워크가 아니라 라이브러리입니다.

다시 한 번 -> 다시한번

국립국어원 2015년 표준정보보완심의회에서 '다시 한번'은 상황에 따라 띄어쓰기에 혼선이 있어, 의미 구별 없이 무조건 붙여 쓰는 것으로 통일하였다고 합니다. 이를 따라 '다시 한번'의 '한번'은 붙여 씁니다.

341p src/app.js에서

import * as postActions from './modules/post'; //이 곳 postActions에서 p는 소문자

345, 346p src/app.js에서

//345p
const { PostActions, number } = this.props; // 이곳에서 부터 PostActions의 P가 대문자로 쓰였습니다.
PostActions.getPost(number).then(
...

//356p
const { PostActions, number } = this.props;
try {
  const response = await PostActions.getPost(number);
...

책 예제 그대로 했을 때, 에러가 발생해서
345, 345p의 PostActions -> postActions 341p의 정의로 통일했더니
에러가 해결되었습니다.

이 내용이 정확한 해결이 아닐 수도 있어, 확인해보시면 좋을 것 같습니다.
감사합니다.

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.color !== prevState.color){
      return {color:nextProps.color};
    }
    return null;
 }

위의 메서드에서 LiftCycle 메서드명을 출력하는 부분이 누락되었습니다.

static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps');
    if(nextProps.color !== prevState.color){
      return {color:nextProps.color};
    }
    return null;
}

pg.73 : 코드를 소문자 "react"로 바꾸는 것보다, 스크린샷을 대문자 "React"로 변경하는것이 좋지 않을까요?, 뒤의 예제에서도 계속 대문자 "React"로 작성하고 출력하기 때문입니다.
pg.81 => pg.91 인 것 같습니다.

책 잘 보고있습니다, 좋은 책 써주셔서 감사합니다. :D

339 페이지

src/post.js ->src/modules/post.js

340 페이지에

src/index.js ->src/modules/index.js

이렇게 바껴야 맞는 것 같습니다

27P의 JSON객체 부분에서

{
  "title": "Hello",
  "contents": "Hello World",
  "author": "velopert" // 이 부분에 ,가 빠진 것 같습니다.
  "likes": 1
}

575페이지 하단 부

parseInt(lastPage, 10); -> parseInt(lastPage, 10))

로 정정되어야 하는 것 같습니다!

지금 17장 코드스플리팅 부분에서 eject 해서 webpack.config.dev.js 파일을 책에 있는대로 수정 했는데 렌더링이 안되고 아래 같은 오류가 뜨는데 어떤 문제가 있고 해결 방법은 없을까요?

./src/index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/lnl2048/react-book/velopert/react-router-tutorial/node_modules/babel-preset-react-app/index.js
    at Array.map (<anonymous>)
    at Generator.next (<anonymous>)

안녕하세요. 리액트를 다루는 기술 책을 구입하여 현재 todo-list 만드는 부분을 공부하고 있습니다.

그런데 create-react-app todo-list를 하고 기본 webpack설정을 하려고 하는데

프로젝트를 만들자마자 본 webpack.config.dev.js파일의 코드와 책의 코드가 다르고

파일명 역시 registerServiceWorker.js 파일이 아닌 serviceWorker.js파일이 생깁니다.

아직 모르는 게 많아 기본 설정부분에서 조금 다른 부분이 생기니 대처를 제대로 못하는 거 같은데

이 부분은 어떻게 해야 할까요..

아! 제가 코드를 잘못 본 건 아닌가 해서 벨로퍼트님이 올려주신 예시 코드 중에서 config 폴더 안의 파일들을 그대로 가져와 사용해봐도 에러가 발생합니다ㅜ

$ yarn eject
후에
$ yarn start
를 입력 하면, Cannot find module 'babel-loader' 라는 오류가 발생합니다.
찾아보니 해당 링크(https://github.com/facebook/create-react-app/issues/4433)에서 해결책을 찾을 수 있었어요.
$ yarn start
전에
$ yarn add babel-loader
를 입력하면 오류가 없이 리액트 앱을 실행할 수 있더라고요.
처음 배우는 입장에서 해답을 쉽게 찾을 수 없을지도 모르겠다는 생각에 올려봅니다.

268p 해당 화면 버튼 클릭시 아래와 같은 로그가 나오는데 어떤 이슈에서 발생하는지,
정확한 사유를 모르겠습니다.

Error: Actions must be plain objects. Use custom middleware for async actions.

const mapDispatchToProps = (dispatch) => ({

24 | onIncrement: () => dispatch(actions.increment()),
25 | onDecrement: () => dispatch(actions.decrement()),
26 | onSetColor: () =>{
27 | const color = getRandomColor();

항상 올려주신 내용(사이트)나 교재 감사히 보고있습니다 감사합니다 :)

$ yarn global add eslint 실행시 아래 에러 발생

error [email protected]: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".

아래는 저의 node, npm, yarn 버전 정보입니다.

node -v
v8.9.4

npm -v
5.8.0

yarn -v
1.9.4

위의 yarn에러를 해결하지 못해서 아래와 같이 npm으로 진행한 상황입니다.
(npm으로 패키지 설치시 에러가 발생하지 않았습니다.)
$ npm install -g eslint
$ npm add eslint
$ eslint --init

시간이 되신다면, 이 부분 확인해주시면 감사하겠습니다.

624p 상단 코드박스의 제목에서 오탈자가 있는 것 같습니다.

src/components/common/Footer.js
-> src/components/common/Footer/Footer.js

위와 같이 common이후 Footer 폴더가 빠진 것 같습니다.

현재 mongoose 5.2.9 이고요

473페이지에서 posts.ctrl.js -list 테스트 해보는데
DeprecationWarning: collection.count is deprecated, and will be removed in a future version. Use collection.countDocuments or collection.estimatedDocumentCount instead

라는 문구가 뜨네요
당장 중요한건 아니지만 그래도 혹시 모르니 이슈로 남겨요

17장 진행중에 yarn eject 후 진행할려고 하면 babel/core 및 웹팩 오류가 나서 더 이상 진행을 하지 못합니다.

제가 직적만든 프로젝트에서는
React & Plugin/Preset files are not allowed to export objects, only functions. 오류로 인해 예제 테스트가 되지 않아 저자님 소스를 가져다 테스트를 해 본 결과 오류없이 잘 만들어집니다.

제 프로젝트에서는 안된 이유가 무엇인지 알려주시기 바랍니다.

todos의 immutable-list 인 state 에
insert action을 발생시키면 id가 1씩 증가되어 저장되지만

이것이 실제 state의 list index와 일치하기 않기 때문에
remove에 논리적 오류가 있는것 같습니다.

안녕하세요 velopert님!

해당 페이지 작업 후
[뒤로가기], [작성하기] 버튼을 클릭하면 페이지가 전환이 되지 않아서 보니

Expected onClick listener to be a function, instead got a value of object type.

위와 같은 에러가 발생되고 있습니다.

작업한 코드를 비교해봐도 다른점이 없는 것 같은데
이런 경우에는 어떻게 해결할 수 있을까요?

좋은 책 만들어주셔서 감사합니다 :)

src\containers\editor\EditorHeaderContainer.js

import React, { Component } from 'react';
import EditorHeader from 'components/editor/EditorHeader';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';

import * as editorActions from 'store/modules/editor';

class EditorHeaderContainer extends Component {

    componentDidMount() {
        const { EditorActions } = this.props;
        EditorActions.initialize(); // 에디터를 초기화합니다.
    }

    handleGoBack = () => {        
        const { history } = this.props;
        history.goBack();
    }

    handleSubmit = async () => {        
        const { title, markdown, tags, EditorActions, history } = this.props;
        const post = {
            title,
            body: markdown,
            // 태그 텍스트를 ,로 분리시키고 앞뒤 공백을 지운 후 중복되는 값을 제거
            tags: tags === "" ? [] : [...new Set(tags.split(',').map(tag => tag.trim()))]
        };
        try {            
            await EditorActions.writePost(post);
            // 페이지를 이동시킵니다. 주의: postId는 위쪽에서 레퍼런스를 만들지 않고
            // 이 자리에서 this.props.postId를 조회해야 합니다(현재 값을 불러오기 위함)
            history.push(`/post/${this.props.postId}`);
        } catch(e) {            
            console.log(e);
        }
    }

    render() {
        const { handleGoBack, handleSubmit } = this;

        return(
            <EditorHeader
                onGoBack={handleGoBack}
                onSubmit={handleSubmit}
            />
        );
    }
}

export default connect(
    (state) => ({
        title: state.editor.get('title'),
        markdown: state.editor.get('markdown'),
        tags: state.editor.get('tags'),
        postId: state.editor.get('postId')
    }),
    (dispatch) => ({
        EditorActions: bindActionCreators(editorActions, dispatch)
    })
)(withRouter(EditorHeaderContainer));

src\components\editor\EditorHeader\EditorHeader.js

import React from 'react';
import styles from './EditorHeader.scss';
import classNames from 'classnames/bind';
import Button from 'components/common/Button';

const cx = classNames.bind(styles);

const EditorHeader = (onGoBack,onSubmit) => {
  return (
    <div className={cx('editor-header')}>
      <div className={cx('back')}>
        <Button onClick={onGoBack} theme="outline">뒤로가기</Button>        
      </div>
      <div className={cx('submit')}>
        <Button onClick={onSubmit} theme="outline">작성하기</Button>
      </div>
    </div>
  );
};

export default EditorHeader;

컴포넌트 스타일링 챕터 진행중 sass-loader 설정에서 막혔습니다

@import를 이용해서 더 쉽게 scss 파일을 불러오게 하는건데, config/webpack.config.dev.js에 scss-loader 부분이 없네요

그리고 176p의 마지막 예제에 경로가 config.paths.js로 되어있습니다 config/paths.js가 맞을것 같아요

CRA v2로 eject하신 분들이 계시다면..!

이제는 기본적으로 CSS Module을 지원하네요.

따라서 컴포넌트 스타일링 시에 CSS module을 사용하기 위해 webpack.config.dev.js 옵션을 바꿀 필요가 없어졌고, 기본에 App.css대신 App.module.css로 확장자만 변경한 후

import React, { Component } from 'react';
import styles from './App.module.css';

console.log(styles);

class App extends Component {
  render() {
    return (
      <div className={styles.box}>
      asd
      </div>
    );
  }
}

export default App; 

위와 같이 사용하면 되네요! 혹시 막히신 분들은 이거 보고 실습해보시길..^^;;

책 보면서도 너무 유익해서 계속 개선해서 더 좋은 책이 될 수 있었으면 하는 마음에 이슈 올립니다~! 벨로퍼트님 항상 감사드립니돠!

195p 10.1.2.5 메인스타일 설정 에서
src/styles/main.css 라고 적혀있는데 main.scss 가 오타난 것 같습니다.

yarn eject시

d:\reactPractice\styling-react-test2>npm start

[email protected] start d:\reactPractice\styling-react-test2
node scripts/start.js

module.js:549
throw err;
^

Error: Cannot find module 'babel-loader'
at Function.Module._resolveFilename (module.js:547:15)
at Function.resolve (internal/module.js:18:19)
at Object. (d:\reactPractice\styling-react-test2\config\webpack.config.dev.js:145:29)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (d:\reactPractice\styling-react-test2\scripts\start.js:31:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node scripts/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

이렇게 babel_loader를 불러오지 못하는 문제가 있어서
yarn add babel-loader 로 따로 바벨 로더를 추가해줬습니다

블로그 프로젝트 에서 에러가...

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Route.

3 | import Root from './Root';
4 | import registerServiceWorker from './registerServiceWorker';
5 |

6 | ReactDOM.render(, document.getElementById('root'));
7 | registerServiceWorker();

p.856 를 끝내고 브라우저 확인에서 저런 에러가 발생 합니다.
도와 주세요.

import React from 'react';
import styles from './Button.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

const Button = ({children, ...rest}) => {

return (
<div className={cx('button')} {...rest}>
{children}

);
};

에서 children과 rest에 어떠한 값이 들어가서 저러한 결과가 나오는지 궁금합니다. 이해가 잘 안돼서
자세히 알고 싶어요.

17장 코드 스플리팅 부분에서 프로덕션 빌드를 할 때 생긴 문제 때문에 남깁니다.
윈도우즈를 사용하는지라
16장 364페이지에서
package.json 설정을
"build" : "cross-env NODE_PATH=src react-scripts build",
이렇게 해준뒤에 계속 책을 보다가
이 설정 그대로 빌드를 해보니

yarn run v1.9.4
$ cross-env NODE_PATH=src react-scripts build
'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
events.js:183
throw er; // Unhandled 'error' event
^

Error: spawn react-scripts ENOENT
at notFoundError (C:\Users\seunghyunOh\Desktop\React\react-router-tutorial\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\seunghyunOh\Desktop\React\react-router-tutorial\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\seunghyunOh\Desktop\React\react-router-tutorial\node_modules\cross-env\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

이런 오류가 생겼습니다.
그래서 402 페이지에 빌드 과정을 보니
$ NODE_PATH=src node scripts/build.js 라고 되어있어

제 package.json도
"build" : "cross-env NODE_PATH=src react-scripts build",
에서

"build": "cross-env NODE_PATH=src node scripts/build.js",

이렇게 수정한 뒤에 빌드를 했더니 되네요

348 페이지
post.js 에서

import { handleActions, createAction } from 'redux-action';

에서 createActions은 불필요하니 없에는 게 맞는 것 같습니다. 괜히 혼란스러울 것 같습니다

PageTemplate 파일들 다 만들고 실행해보면

./src/components/PageTemplate/PageTemplate.scss
Module build failed: TypeError: hash.digest(...).substr is not a function
at String.replace ()
at Array.map ()
at Array.map ()
at Array.map ()

이런 오류가 뜨는데 어디가 잘못된걸까요 webpack 세팅 쪽에서 잘못된건가요

파일 오류를 찾다가 기존의 파일들을 하나씩 다 github파일로 바꿔보기도 했는데 똑같은 오류가 떠요

post.js 코드 내용에 오탈자가 있네요.

console.log('Post', match);
-> console.log('Post:', match);

밑에 그림-17과 틀린 부분이 있어서 제보드립니다

책에 나온대로 NODE_PATH를 설정했는데
import { Home, About } from 'pages' ; 에서
pages로 경로를 잡으면 에러가 발생하고, ./pages로 해야 에러가 발생하지 않습니다.
제가 놓친 부분이 있는건지, 변경사항이 있는 건지 모르겠어서 이슈에 남깁니다.