inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

json-server & axios : CRUD 구현

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

550

이투리

작성한 질문수 3

0


{
      "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

0

엽엽

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

0

짐코딩

안녕하세요 :)

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

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

0

이투리

 

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

image

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

화면에 나옵니다.

 

 

 

 

0

짐코딩

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

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

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

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

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

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

 

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

 

0

이투리

답변 감사합니다.

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

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

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

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

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

0

짐코딩

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

0

이투리

네 해결되었습니다.

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

감사합니다.

composable: alert 창이 안떠요

0

725

2

Nuxtjs3 강의 계획은 없으신가요?

0

539

1

axios 컴포저블 함수 구현 2에서

0

475

1

composable과 pinia store - 둘 중 하나를 선택하는 기준

1

1606

1

코드 수정 문의

0

444

1

강의교안 수정 요청드립니다.

0

598

1

Pinia 사용 시 composition api

0

1400

1

createPost()의 async, awiat

0

534

1

slot 사용 관련 문의

1

418

1

Filter 구현하기에서 input v-model 질문 있습니다.

0

563

2

라우터 해시 모드 추가 질문

0

556

1

네비게이션 가드 및 플러그인 관련 질문입니다.

0

378

1

트랜지션(transition) 관련 질문드립니다.

0

553

1

json-server에 대해 궁금한게 있습니다~

0

386

1

Vue3 에서 router-link 에 이벤트 추가 방법

0

1203

1

기본편에도 crud 하는게 있을까요?

0

407

1

jsconfig.js 에러

0

392

1

headers 값을 못찾아요~

0

382

1

vite vue3에서 ie safari babel

0

780

1

composables 전역등록

0

301

1

stores 다른 파일에서 state 가져오기

0

444

1

computed에서 인자 전달방법

0

576

1

components.d.ts 자동작성 안됨

0

719

1

cors 에러

0

575

1