[코드 스테이츠] 53일차, express.json() 인데 왜 POST할 때마다 SyntaxError: Unexpected token

아오 진짜!!!

 

  오늘 이 오류 하나 해결하기 위해 2시간 30분을 썼다. 페어 프로그래밍 과제 중에 발견한 문제인데, 이것만 없었어도 이렇게까지 힘들진 않았을 것 같다. 오죽했으면 구글링을 너무 해서 페어분과 내가 찾은 사이트보다 찾지 않은 사이트를 찾는 게 더 빠를 정도였다고까지 얘기를 했다. 이거 해결했을 때 소름이 확 끼쳤다. 오늘은 이거 하나 오류 해결한 게 가장 큰 수확이었던 것 같다. 

 

  스터디 그룹으로 프로그래머스 문제를 계속 풀고 있다. 문제를 풀때마다 나는 항상 level 3 에서 막히는 것을 느낀다. 아무래도 자료 구조에 대한 응용력이 없다 보니 그런 것 같다. 지금 실력 상으로는 level 2까지는 효율성은 좋지 못하더라도 어떻게든 풀 수 있게 됐는데 level 3에는 보이지 않는 벽에 막힌 것 같은 느낌이 든다. 일단, 코드를 최대한 깔끔하게 작성하는 것과 자료 구조를 활용하는 방법, 특히 DFS, 재귀를 활용하는 방법을 좀 더 익혀야 할 필요성을 느낀다.

---

[ 오늘의 TODO ]

1. 코드 스테이츠) Pair-Programming (~내일)
   // Node Mini Server Express로 리팩토링 (여기서 오류가..)
   // statesairline-server
     // Bare
     // ADVANCED
2. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
3. 스터디 그룹) 정기 모임 
4. 생활) 물 1L 이상 마시기
5. 개선) 페어 프로그래밍할 때도 혼자 있을 때처럼 침착하게 오류 대처하기
   // 오늘 오류는 페어분과 나의 합작이었다. 

---

[ 오늘의 해결 ]

1. expression.json( ) 의 속성 

  우리를 2시간 30분 동안 늪에 빠지게 했던 이 오류는 굉장히 나를 화나게 했다. 일단 코드를 우회해서 보이도록 하겠다.

 

const express = require('express')
const cors = require('cors')
const PORT = 5000
const app = express()

app.use(cors())
app.use(express.json())



app.post('/foo', (req, res) => {
  console.log(req.body)
  res.json(req.body)
})



app.listen(PORT, () => {
  console.log('Right Use')
})

 

  이건 node 환경에서 express 로 작성한 5000번 포트 서버의 내용이다. 클라이언트로부터 /foo path로 POST 요청이 들어오면 우리는 그것을 json으로 풀어줘서 보내줘야 한다. 그런데 여기서 계속  

 

 

  이 오류가 났다. 이 오류가 나는 이유는 JSON에 Unexpected token 이 들어간다는 것이었다. 아니, express.json( ) 이면 알아서 JSON 파일로 바꿔준다며? 거기서부터 모험이 시작되었다. 처음에는 body-parser 로 다시 써봤다가, 공식 문서 0부터 100까지 다시 정독을 하고, 뭐 별의별 짓을 다해봤다. 심지어 구글링을 했는데도 다들 "이렇게만 하면 됩니다" 하며 자연스럽게 쓰고 있을 뿐, 우리와 같은 오류가 난 글들을 발견하지 못했다. 

 

  그렇게 페어분이랑 거의 소통 없이 서로 구글링, 수정하면서 2시간 정도 지났을 때 분위기도 쳐지니, 내 화면을 공유하면서 지금까지 내가 거쳐온 일들을 모두 설명하면서 얘기를 해봤다. 그런데 참 신기한게 설명하면서 하다 보니 오류의 문제점들을 해결할 수 있었다. 총 3개 정도의 문제 해결 방안을 찾아냈다. 

 

  문제의 원인은 body의 내용이 json 파일로 바뀌는데 이게 괄호가 감싸주지 않았기 때문이었다. 우리가 POST 하는 내용은 전부 일반적인 문자열이었고 이게 괄호로 감싸여 있지 않으니 에러가 나는 것이었다. 이렇게 괄호가 감싸였는지, 안 감싸여 있는지를 판독하는 게 express의 strict 이라는 속성이었다. 일단 이 문제를 해결하는데 결정적인 역할을 해준 두 개의 방법을 소개하겠다

 

 node-moduels 안에 있는 패키지 파일에 직접 들어가서 고치기

  이게 내가 처음으로 푼 방식이었다. syntax error 가 나는 부분을 추적하기 위해 node-moduels 안에 있는 패키지 파일인 body-parser로 들어갔다. 거기에서 json.js 파일을 찾았는데 거기에 밑의 내용이 에러를 내는 원인이었다.

 

  나는 이 부분을 아예 주석 처리를 했고 오류를 해결할 수 있었다. 

 

이때, 환호성을 한 번 질렀지만 찝찝함이 남았다.

 

 

  express.json({strict : false})

  하지만 이건 어떻게 보면 정말 무식하게 돌진한 방법이다. 그래서 뭔가 좀더 좋은 방법이 없을까 하다가, 생각해보니 strict 가 구글링 하면서 어디서 많이 본 것 같은 느낌이 들었다. 그래서 구글링 했던 곳들 다시 찾아보니 strict 는 express.json() 의 한 속성이었다. 

 

http://expressjs.com/en/api.html#express.json

Express 4.x - API Reference

 

  strict 라는 속성이 있었고, 그것의 기본값은 true 였다. 위의 소제목처럼 false 값을 주니 문제를 잘 해결할 수 있었다.

 

app.use(express.json({strict: false}))

app.post('/foo', (req, res) => {
  console.log(req.body)
  res.json(req.body)
})

 

  내가 생각하기에 이게 가장 정석적인 방법인 것 같다

---

[ 오늘의 교훈 ]

1. 설명하듯이 공부하면 확실히 효과가 있는 것 같다

  페어분에게 설명하면서 오류를 해석하고 찾아내려고 하다 보니 결국에는 찾아냈다. 이게 참 신기했다. 조용히 그냥 볼 때는 몰랐는데 직접 말을 하면서 설명을 하다 보니까 결국에는 그 오류의 원인을 찾아낼 수 있었다. 이게 설명의 힘인가 보다.

 

  앞으로 뭔가 막히면 혼자서 조용히 있기보다는 다른 사람과 계속 소통을 하면서 해결하려는 노력을 길러야 할 것 같다.