Window에서 리액트와 Node.js서버 실행시키기

 

dev : 클라이언트 폴더에서 클라이언트 서버를 구동시키고 노드 서버폴더에서 EXPRESS 서버를 구동시키도록 설정했습니다.

 

따라서 우리는 Node.js서버와 리액트 클라이언트를 동시에 구동시킬 수 있습니다.

따라서  루트 폴더에서 yarn dev를 입력하시면 서버와 클라이언트가 동시에 실행됩니다.

저는 오류가 발생했는데요 그 이유는 모듈을 찾을 수 가없는데 그 이유는 윈도에서 사용자 이름을 한글로 설정했기 때문에 경로를 찾지 못합니다.

 

이제 사용자의 이름을 영어로 생성한 뒤 다시 열어서 yarn dev를 치면 다음과 같은 오류가 발생합니다.

그 이유는 -g옵션으로 install 한경우는 사용자를 기준으로 설치가 되기 때문에 사용자가 변경됐다면 다시 설치를 해주어야 합니다.

 

설치한 뒤 터미널 창에 yarn은 설치한 경로를 환경변수로 설정해줍니다.

 

 

bin폴더까지 적용해야 됩니다.

이제 yarn dev를 치면 

 

$ concurrently --kill-others-on-fail "yarn server" "yarn client"
'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

다음과 같은 에러를 만날 수 있는데요.

npm i concurrently express --save

명령어를 친다음  package.json 버전을 상위 버전으로 올린 다음 해결이 되었습니다.

 

 

리액트와 웹서버가 동시에 열린 것을 확인할 수 있습니다.

 

package.json 에서 명시를 해주어 yarn dev명령어로 클라이언트와 서버를 각 각 구동시킬 수 있도록  하였습니다.

 

이제 클라이언트에서 명시를 해놨던 고객 데이터를 서버로 옮깁니다.

app.get('/api/customers', (req,res) =>{
    res.send([
        {
        'id' : 1,
        'image' : 'https://placeimg.com/64/64/1',
        'name' :"홍길동",
        'birthday' : '951006',
        'gender' : '남자',
        'job' : '학생'
      
      },
      {
        'id' : 2,
        'image' : 'https://placeimg.com/64/64/2',
        'name' :"이순신",
        'birthday' : '942006',
        'gender' : '남자',
        'job' : '대장'
      
      },
      {
        'id' : 3,
        'image' : 'https://placeimg.com/64/64/3',
        'name' :"을지문덕",
        'birthday' : '913006',
        'gender' : '남자',
        'job' : '시민'
      
      }
      
      ])

 

express의 기본설정만으로도 자바스크립트의 배열 설정을 json으로 변환해서 보낼 수 있습니다.

이제 서버에서 /api/customers경로로 이동하면 우리가 명시했던 3명의 고객에 대한 데이터가 출력됩니다.

이제 클라이언트에서 REST API를 요청할 것입니다.

완전한 RESTFUL하지는 않습니다. 보통적으로 사용하는 REST API라고 이해해주시면 됩니다.

 

* JSONLint는 json데이터가 올바른 json형식인지 검사해주는 서비스입니다.

 

https://jsonlint.com/

The JSON Validator

클라이언트 package.json의 개발서버 proxy설정을 해줍니다.

 

고객 정보는 변경될 수 있는 정보이기 때문에 리액트에서는 state로 관리합니다.

기본적으로 props는 변경될 수 없는 정보를 명시할 때 이용될 수 있으며  

state는 컴포넌트 내에서 변경될 수 있는 변수를 처리하고자 할 때 사용합니다.

 

 

react의 생명주기를 가지고 있는데 componentDidMount는 모든 component가 mount가 됐을 때 실행되기 때문에 callbackFuntion을 처리하기 좋은 위치입니다.

 

 

테스트 목적으로 api의 정보를 입력한 뒤 클라이언트에서 요청할 수 있도록 합니다.

먼저 그러기 위해서 proxy설정을 해주어야 합니다.  client의 package.json파일에 

"proxy" : "http://localhost:5000/"

설정을 해주어 서버를 등록해줍니다.

app.get('/api/customers', (req,res) =>{
    res.send([
        {
        'id' : 1,
        'image' : 'https://placeimg.com/64/64/1',
        'name' :"홍길동",
        'birthday' : '951006',
        'gender' : '남자',
        'job' : '학생'
      
      },
      {
        'id' : 2,
        'image' : 'https://placeimg.com/64/64/2',
        'name' :"이순신",
        'birthday' : '942006',
        'gender' : '남자',
        'job' : '대장'
      
      },
      {
        'id' : 3,
        'image' : 'https://placeimg.com/64/64/3',
        'name' :"을지문덕",
        'birthday' : '913006',
        'gender' : '남자',
        'job' : '시민'
      
      }
      
      ]);


});

 

그 이후 리액트에서  데이터를 요청하도록 합니다.

state = {

  customers:""

}

componentDidMount() {

  this.callApi()
  .then(res => this.setState({customers : res}))
  .catch(err => console.log(err))
}

callApi = async () => {

  const response = await fetch('/api/customers');
  const body = await response.json();
  return body;
}

  render(){
    const {classes} = this.props;
      return (
        <Paper className={classes.root}>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
            <TableCell>번호</TableCell>
            <TableCell>이미지</TableCell>
            <TableCell>이름</TableCell>
            <TableCell>생년월일</TableCell>
            <TableCell>성별</TableCell>
            <TableCell>직업</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
          {this.state.customers ? this.state.customers.map(c => {
             return ( <Customer key = {c.id} id = {c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />);
             }) : "" }
            </TableBody>
          </Table>
        </Paper>

            );
          }
}

 

*git 최초 설정 vsc 

git config --global user.name "name"

git config --global user.email "e-mail"

 

웹서비스가 구동됐을 경우에는 this.state.customers의 값이 비어있기 때문에 map api에서 오류가 발생할 수 있습니다. 

따라서 조건문으로 변경하였습니다.