* 이 포스트는 학습 과정에서 그 내용을 기록한 글이기에 부정확한 정보가 포함될 수 있습니다.
따라서 해당 글은 참고용으로만 봐주시고 틀린 부분이 있다면 알려주시면 감사하겠습니다.
혼자 프로젝트때문에 이거저거 해보다가 문득 '내 블로그를 보는 분들은 입문자와 채용 면접관 두 부류이려나?'라는 생각이 들었습니다. 그러고나서 곰곰이 생각해보니 채용 면접관이 볼 때 내 프로젝트가 다른 데서 복붙한건지 아닌지 알 방법이 없지않나란 생각으로 이어졌습니다. 그래서 앞으로 공부하다가 막히는 부분이 생기면 제 경험을 좀 자세히 기록해두려 합니다.
막 리액트와 스프링 부트간 통신을 마친 상태에서 이제 리액트에서 form으로 내용을 작성한 데이터를 스프링부트에 보내주는 코드를 작성하기 위해 테스트를 하려 했으나 시작하자마자
...?
서버에서 데이터가 안오네요? 그래서 콘솔을 보니
... 하,,,
프록시 에러가 났습니다. 분명 서버도 같이 킨 것 같은데... 또 내가 코드 잘못 건드렸나하고 살펴봤는데 그것도 아니더라구요. 그래서 몇 분 동안 왜 이러는지 아래와 같이 살펴봤습니다.
1 클라이언트와 서버 재부팅 2 IDE 재부팅 3 package.json 내용 확인 4 빌드 하고 나서 서버 부팅 5 api요청 url 위치 확인
사실 이 5개를 반복했는데 결론은 그냥 클라이언트에서 DOM 다시 그려주면 해결됩니다... 사실 더 웃긴건 이걸 서버를 먼저 켜봤더니 문제가 해결되서 이거저거 더 해보다 발견했다는 겁니다. 이거 안되시는 분은 그냥 App.js 한 번 저장하셔서 렌더링 다시하시면 해결되실겁니다.
# 뻘짓 발견
* js 잘 아시는 분이 이 항목 보시는 경우 입에 아무것도 없을 때 보시길 추천합니다(웃김 주의)
이게 참 해결하고 보니 어제의 제가 많이 한심하고 웃긴데... 저 같은 사람 있을까봐 기록해둡니다. 이제 폼에 데이터를 담아서 서버로 보내는 코드를 짜야하는데 문제가 중간에 생깁니다.
// 주의 : 알더라도 미리 이 코드보고 웃지 않기
axios.post('/request', {title: "${title}", content : "${content}"})
.then(function (response) {
console.log(response);})
.catch(function (error) {
console.log(error);})
서버로 작성한 데이터를 보내려면 post로 데이터를 보내야하니 axios.post를 써야하는건 당연할겁니다. axios.post의 인자로는 {url, params, (header)}가 있기에 url은 /request로 params는 보낼 데이터를 json으로 작성하고 헤더는 생략해서 코드를 작성했습니다. 그런데 이렇게 보내면 다음처럼 표시됩니다.
ㅎㅎ
당연히 문제가 있는걸 바로 알 수 있죠. 변수가 렌더링되지 않고 텍스트 그 자체로 나왔잖아요? 기존에 템플릿들을 쓰신 분이라면 템플릿 리터럴을 아실겁니다. javascript는 es6 문법을 따라 작성할 수 있는데 이거 너무 기초적인거라 모르시면 refer 참고해주시길 바랍니다. 하여튼 es6는 리터럴 사용할 때 ""같은 텍스트 안에 변수를 넣으려면 ${변수}로 넣습니다. 기존에 자바 쓰셨던 분이라면 %d 이거 아실텐데 그거랑 똑같습니다.
하여튼 위 같이 출력되면 분명히 변수가 렌더링 안되는거니까 뭘 내가 잘못 썼나하고 몇 십분 동안 es6 문법을 다시 뒤적거렸습니다만 결국 뭐가 문제인지를 몰랐습니다. 그래서 다음으로 저는 이런 뻘짓거리들을 합니다.
1. 데이터가 전송되는 과정마다 전부 로그 출력 코드 작성 2. 변수명이나 state가 잘못되었을까봐 변수도 하나씩 전부 바꿔보고 중간에 버퍼하는 변수도 생성 3. 문자열 문법을 계속 수정 4 IDE랑 서버 무한 재부팅
1번으로 어디서 문제가 발생했는지 로그를 출력해보기로 했습니다. 그래서 처음 데이터를 보내는 과정인 App.js에 로그를 찍고(중간에 stitle이니 qtitle이니 하는건 바로 다음에 설명)
1번
2,3,4번
요청을 받는 서버쪽인 컨트롤러에도 로그를 찍어줍니다.
AxiosController
이렇게 찍은 다음에 api 보내고 브라우저 콘솔을 보니
어... 음...
이걸로 안되니 서버 스택트레이스를 봤습니다.
...?
제가 내린 1번의 결론은 그냥 변수 렌더링 자체가 안된다는 것이었습니다. 그래서 2번 과정은 진행합니다. 2번은 제가 리액트를 그렇게 잘 하지 않기때문에 혹시 'state는 리터럴로 처리가 안되나?'나 '변수명이 서로 충돌하는건가?'라는 생각에 이르게 됩니다. 그래서 state인 title을 담는 임시 변수들을 생성합니다. 위에 stitle이니 qtitle이 다 그런 변수들입니다. 또 param인 title은 _title로 바꿔봅니다.
그래도 안되길래 axios.post의 인자 중 json부분을 직접 입력이 아닌 js의 object로도 바꿔보고
axiosController가 잘못 받을 수도 있으려나해서 TestDto부터 받는 형식을 title: 에서 qtitle:로 전부 바꿔보기도 했습니다.
응 그래도 당연히 안돼
하지만 이것도 실패. 그래서 3번으로 넘어갑니다. 일단 로그부터 json까지 전부 es5 형식으로 바꿔 봅니다.
당연히 이것도 실패. 그래서 문법을 잘못 알고 있나해서 리터럴 문법을 보고 json을 수정해봤는데
결과는
응 안 돼
확인해보니 컨트롤러에도 null로 도착하더군요. 결국 새벽이 늦은 시간에 코딩하던 저는 마지막으로 체크리스틀 4번인 IDE랑 서버를 몇 번이나 껐다 켜봤는데 이 역시 당연히 될리가 없죠. 결국 너무 졸려서 잠시 멍때렸더니 그대로 잠이 듭니다.
그리고 다음날에도 이게 꿈에 어른거려서 얼마 못 자고 일어났습니다. 일어나서 또 앞의 과정을 끄적거리다 문법을 다시 훑어보고를 반복합니다...가 매우 당황합니다.
!? '나는 지금껏 백틱이 그냥 작은 따옴표인줄 알았는데?'
구글링하던 중 본 이 문장에 설렘반 좌절반 바로 코드 다시 수정해서 서버 켜봤습니다.
수정한 코드
근데 안되는데?
그래서 다시 코드를 수정해서 서버를 켜봅니다.
그랬더니 짜잔!
쪽팔린건 풀 화면으로 보여드립니다.
제가 진짜 XX 멍청이인걸 알게 됐네요! 저는 지금까지 따옴표인 quote와 backtick이 지금까지 같은거라고 생각했었네요 ㅎㅎ.... 저는 여지껏 백틱이 따옴표인 줄 알고 '${변수}'나 "${변수}"가 큰 차이 없을거라고 생각했는데 알고보니 `${변수}`였습니다. 육안으로도 조금 차이가 나는데 왜 지금껏 몰랐을까요...
'코딩 초보는 이런 실수도 합니다.'의 교보재로 보고 웃으며 넘어가주시길 바랍니다.,,
그리고 스프링 쓰다가 리액트 쓰면 개발자 도구에 대해 그리 잘 알지 못하기 때문에 저 같은 경우 다음과 같은 두 가지 고민이 중간에 있었습니다. 1 자꾸 개발자 도구가 리액트 어쩌고 저쩌고 뭘 깔라고 하는 경우 2 콘솔 로그를 봐야하는데 콘솔에 로그가 잠깐 스쳤다가 지나가는 경우
1번은 구글 확장프로그램 중에 React developer Tools란 게 있습니다. refer에 관련 내용 있습니다. 2번은 개발자 도구에서 아래와 같은 항목을 켜주시면 됩니다.
혼자 독학하다보면 진짜 별의 별 뻘짓을 다하기에 사실 이번 포스트보다 더한 짓도 많이했습니다만 다들 처음엔 이렇지 않을까요?
