Web HA 리뷰를 하면서 다시 알게된 내용들

같이 과제를 해 본 적이 없는 동기분으로부터 연락을 받았다.

Web HA 리뷰 중 잘 되지 않는 부분이 있다고 하셨다.

도움을 드리려고 다시 보다가 나도 이 부분을 놓쳤다는 것을 알게 되었다.

(같이 공부하는 사람이 있다는 게 이렇게 중요하다!!!!!!!)

 

내가 체크해 본 문제점을 이랬다.

처음 client가 렌더될 때 mockMovie가 초기 상태로 저장되어 있다가

mount가 될 때 server/data.json 파일에 있는 movies의 내용이 fetch가 되어야하는데 안 되고 있었다.

 

한참을 생각해도 안 되어서 질문을 남겼다.

server와 client가 같은 포트를 쓰고 있어서 생긴 문제이니 server가 켜진 것을 확인하고 client를 다른 포트로 열라고 했다.

 

너무. 간.단.해.서.

"아!!" 하다가 "하..." 했다가 "ㅉㅉ" 하게 되었다.

이제서야 내가 이 문제를 인지했다는 게.. 누가 안 물어봤으면 넘어갈 뻔 했다는 게.. 아찔했다.

복습의 중요성을 다시 느꼈다.

지금까지 TIL 중 오늘처럼 깊이 깊~~~이 반성하고 쓴 적이 없던 것 같다. 

 

어쨋든 답변 내용대로 해 보니 아주 잘 작동했다.

그 동기분께도 연락해서 알려드렸더니 놀라셨다. (그쵸? 저도 놀랐습니다 후)

 

 

---

그런데 궁금했다. 

나는 왜 포트 번호가 같다는 걸 몰랐을까? 그게 어디 적혀 있었을까?

server의 경우 금방 찾았는데 client는 찾을 수가 없었다.

혹시... react 를 실행할 때 기본적으로 쓰는 포트가 아닐까 해서 찾아보니 예상이 맞았다.

react-create-app을 했을 때 기본적으로 port 3000을 쓰게 되는데 바꿀 수도 있었다.

 

나도 한 번 적용해 보았다.

client/package.json 파일의 scripts의 start에서

'react-scripts start' 라고 적혀 있던 것을

'PORT=3001 react-scripts start' 라고 변경해주었다.

 

이후 첫 번째 터미널에서 server를 실행시키고 두 번째 터미널에서 client를 열어 바로 npm start를 하니

문제 없이 3001번 포트에서 화면을 렌더링했다!!

 

하. 진작 알았어야 했지만 지금이라도 알게 되어 뿌듯한 하루다.