package.json 작성
서버와 클라이언트를 구동하기 위한 스크립트를 작성해야한다.
경로 문제
yarn dev를 했을 때 경로에 한글이 있으면 yarn을 찾지 못해서 문제가 발생할 수 있다.
그러면 새 계정을 영어로 파주는데, 우리가 이전에 global하게 설치한 모듈들은 사용자에게 종속적이어서 새로 만든 계정이 사용할 모듈은 다시 설치해야한다.
body-parser 부재
body-parser가 없다고 하는 오류가 발생할 수 있다.
그러면 아래의 명령어로 모듈을 추가한다.
npm install --save body-parser--save 옵션은 package.json 파일에 의존성을 추가한다는 옵션인데 이제는 사용하지 않아도 자동으로 된다고 한다.
JSON 유효성 검사
여기에서 JSON 데이터의 유효성을 검사할 수 있습니다.
Client에서 Server의 데이터 받아오기
client의 package.json에 서버의 경로를 프록시로 설정해줘야한다.
state: 변경 가능
props: 변경 불가
componentDidMount(): 컴포넌트를 모두 마운트된 후의 동작
아래 코드는 서버로부터 데이터를 가져오는 코드다.
동작에 대한 이해가 필요하다.
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;
}아래는 받아온 state로 그리는 코드인데, this가 어떻게 동작하는지 모르겠다.
js 내부는 모두 this에 들어가는건가? 보면 같은 함수 내에서 선언한 state를 this로 불러온다.. 이게 말이되나?
<TableBody>
{
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>비동기 동작으로 인한 문제
this.state가 없다는 오류가 발생한다.
처음 React 컴포넌트가 구성되면 state인 customers는 비어있는 상태다.
따라서, map 함수를 불러올 수 없다.
하지만, 약간의 시간이 흐르고 api에서 데이터를 받아와서 state 값을 갱신해준다.
다음의 코드로 수정하여 3항 연산자로 데이터의 존재 여부에 따른 동작을 구분한다.
<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>함수형 컴포넌트 구조에 클래스 기반 기능을 사용하고 있었음
함수형 컴포넌트에서는 useState, useEffect로 상태 관리와 생명주기 메소드를 구현한다.
따라서, 다음과 같이 코드를 수정해야한다.
const [customers, setCustomers] = useState("");
useEffect(() => {
const callApi = async () => {
const response = await fetch('/api/customers');
const body = await response.json();
return body;
};
callApi()
.then(res => setCustomers(res))
.catch(err => console.log(err));
}, []);여기서 setCustomers는 상태를 업데이트하는 함수다.
customers ? customers.map(c => {위 코드는 this.state.customers로 부르던 것에서 this.state를 뺀 것이다.
(이제 state로 부르지 않는것?)
아직 데이터가 클라이언트로 안들어옴
개발자 도구에서 오류를 봐야하지만 워닝이면 그냥 넘어가도 된다.
그래도 안되면 네트워크 창을 보자.
여기서는 api/customers에 접근한 내역을 살펴보자
서버는 5001번 포트로 설정했는데 3000번으로 접속하고 있는 것을 알 수 있다.
그래서 정상적으로 데이터를 얻어오지 못하는 것이다.
client의 package.json에 proxy 설정을 잘 해줬는데 왜그럴까?
재시작을 안해서..?
흠..
재시작을 안해주긴 했지만 자동으로 수정사항을 갱신한다하지 않았나?
아니면 proxy 설정은 자동 갱신되는 것이 아니라 수정 후 재시작을 해줘야하나?
아무튼 재시작 하니 데이터 잘 받아오는 것을 알 수 있다.
(3000번으로 접근한다고 나오지만 proxy 설정에 의해 5001번으로 접근해서 데이터를 가져온다.)
