post 시 id가 6자리문자열로 들어옵니다

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

json-server & axios : CRUD 구현

작성

475


{
      "title": "자! 새로운 글입니다!",
      "content": "희망찬 vue3!",
      "createAt": 1664546739213,
      "id": "SJ5GpEi"
    }

16:15

id 가 6으로 되지 않고 7자리 문자열로 들어오는 이유를 모르겠습니다.

createPost.vue에서

마지막 id를 추가로 따로 받아서 +1을 하고 그값을 form값에 포함시켜 post하는 방법도 있겠지만,

왜 선생님은 id가 저절로 +1되고, 저는 따로 설정해야 하는 이유를 모르겠습니다.

참고) 제 버전

"dependencies": {
    "axios": "^0.27.2",
    
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    ,
    "json-server": "^0.17.0",
    "prettier": "^2.7.1",
    "vite": "^3.0.9"
  }

vuejs

답변 2

엽엽

이제 제일 최신버전인 json-server 알파에서는 자동으로 문자열로 바꿔준다고 합니다 , 그게 싫으시면 그냥 구버전 쓰면 해결되네요

짐코딩

지식공유자

안녕하세요 :)

id를 따로 설정하지 않으면 json-server에서 자동으로 1씩 증가가 될 것 같은데요.

혹시 id 값을 넣지 않으면 에러가 발생할까요?

이투리

질문자

밑 이미지는 방금 글쓰기 3개를 포함한 PostList 화면입니다.

postList에선 글들이 나오지만, 방금 글쓴것들은 클릭하면 안노옵니다.

GET http://127.0.0.1:5000/posts/NaN 404 (Not Found)

postDetail에선

defineProps({
id: [Number, String],

설정해서 string 추가하면

GET http://127.0.0.1:3000/posts/SYrY2Bi

화면에 나옵니다.

짐코딩

지식공유자

연휴에 일정이 있어서 답변이 늦었네요 ㅜ

현재 id 값이 string 이기 때문에 id: [Number, String] 으로 설정시 잘 나오는건 맞아요.

하지만 글쓰기에서 form 데이터로 id 값을 넣지 않으면 자동으로 1씩 증가가 되야 하는데요.

자동으로 7자리 String Key 값으로 들어간다는 말씀이시죠?

해당 id 값은 Vue3와는 관련이 없어서 학습하는데는 큰 무리가 없을 것 같아요~!!

https://github.com/typicode/json-server 해당 라이브러리는 테스트 목적으로 사용하는거라
(실무에서 String(uuid)으로도 자주 사용합니다.)

Q) 혹시 form 데이터 저장시 id를 직접 설정 하셨을까요?

이투리

질문자

답변 감사합니다.

form post시 id를 따로 설정하지 않았습니다.

왜 다른가 개인적으로 추측해보자면

처음에 조금 다르게 한다고 제멋대로 id 명을 다른 이름으로 바꾸고 진행하다가

이 CRUD파트에서 다른 이름으로 사용하던 이름을 id로 바꾸었던 게 영향이 간거 같습니다.

물론 다른 이름을 id로 다 바꾸고 나서 npm build 재명령을 통해 dist도 기존 다른 이름의 흔적을 지웠습니다.

짐코딩

지식공유자

json-server를 제거 하고 다시 설치해보시겠어요?

이투리

질문자

네 해결되었습니다.

json-server 를 uninstall 후 다시 i 하니까 이제는 제대로 id가 auto가 되었습니다.

감사합니다.

인프런 커뮤니티 질문&답변

post 시 id가 6자리문자열로 들어옵니다