미션!
클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 주기!
스터디 시간에 정답 코드를 봤기 때문에 자신 있게 도전했지만 풀리지 않았다..
정말 코드에는 문제가 없었다. 그래서 여기저기 코드를 다시 보고, 끝내는 깃 클론을 다시 해와서 새로운 파일에서 코드를 작성했는데도 실행이 안됐다.
10시가 넘어서 같이 풀었던 페어에게 연락이 왔다. 그때까지만 해도 스터디에서 정답인 코드를 봤기 때문에 금방 해결할 수 있을 것 같다고 했는데 안됐다. 두시간이 넘도록 들여다봤는데도 도저히 해결책을 못찾겠어서 너무 답답했지만, 이대로 잘 수는 없었다!!!
그래서 정말 지푸라기라도 붙잡는 심정으로 디스코드에 파란불이 켜져 있는 스터디 조원에게 연락해서 코드 리뷰가 가능한지 여쭤보았다. (이때는 새벽 한시...!@ 다시 생각해도 정말 감사하다...🥲)
다행히도 정말 흔쾌하게 해주시겠다고 해서 함께 코드를 보았다. 30분이 넘도록... 결국에는 서버에 연결조차 되지 않아서 생긴 문제였다.
문제 해결 방법
1. 내가 작성한 코드가 맞는지 확인 => 대략 맞다고 판단함
2. 내가 작성한 코드를 모두 주석처리 한 뒤, 콘솔 로그를 찍어서 서버에 연결이 잘 되었는지 확인 => 어라?? 콘솔이 안찍히네?? 포트 연결이 안되는구나!!
이렇게 문제를 찾았고, 결국 사용하던 포트 번호가 아닌 새로운 포트 번호를 설정해서 문제를 해결했다.
내가 생각하는 문제의 원인
포트 번호가 사용중이라고 나와서 터미널에서 lsof -i :포트번호로 포트번호를 kill 했다.
그런데 이게 다가 아니다...
⭐️⭐️⭐️⭐️sudo로 지워야한다는 사실......!!!!!!!!!⭐️⭐️⭐️⭐️⭐️
결국 스터디 조원님의 적극적인 도움으로 문제 해결을 할 수 있었다.
늦은 밤에 30분이나 나에게 할애해주신 조원님께 정말 감사하다.🥲
나를 이렇게나 도와주시는 분이 옆에 있는데 힘이 펄펄 난다..!!
더 열심히 해야겠다.
🍅추가🍅
오류 원인 중에 추가된 사실은 요청하는 서버와 응답하는 서버를 같은 포트로 설정하면 안된다는 것!
예를 들어, 클라이언트를 3000 포트로 열고, 서버를 4999 포트로 열었다면,
localhost:3000에서 페이지를 볼 수 있다.
의미: 4999에 있는 데이터를 3000으로 받아오겠다.
그래서 요청 허용해달라고 CORS 쓰는거다.
이전에 포스팅했던 "사용중인 포트 찾아서 Kil" 을 업데이트했다.
참고👇
2022.06.14 - [오류를 해결하자!] - [next.js]port 3000 is already in use, 사용중인 포트 찾아서 Kill 하기!
[next.js]port 3000 is already in use, 사용중인 포트 찾아서 Kill 하기!
next.js라는 서버사이드 렌더링 프레인 워크로 만들어진 파일을 Create React App를 사용했을때와 같이 'npm start' 명령어로 브라우저를 여는데 위 화면과 같은 오류를 만났습니다. Port 3000 is alreay in use..
shinystarforever.tistory.com
