HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스
/
[팀7] 뿡치와 삼촌들 - Devnity
[팀7] 뿡치와 삼촌들 - Devnity
/
📘
프론트엔드 공간
/
🧑‍🎓
Today We Learned
/
현실적인 더미 데이터로 모킹 HTTP API 만드는 방법

현실적인 더미 데이터로 모킹 HTTP API 만드는 방법

생성일
Dec 13, 2021 07:59 PM
기록자
Jay Mincheol Cho
해결 여부
해결 여부
속성
카테고리
현실적인 데이터 만들기JS 더미데이터를 Response JSON 형태로 변경하기모킹 HTTP API 만들기

현실적인 데이터 만들기

fakerJS
예제코드
// eslint-disable-next-line import/no-extraneous-dependencies import * as faker from "faker/locale/ko"; const random = <Type>(array: Type[]): Type => { const randomIndex = Math.floor(Math.random() * array.length); return array[randomIndex]; }; const mbti = () => { return ( random(["E", "I"]) + random(["N", "S"]) + random(["F", "T"]) + random(["J", "P"]) ); }; interface User { userId: string; email: string; name: string; course: CourseKeyType; role: RoleKeyType; generation: number; createdAt: Date; updatedAt: Date; } interface Introduction { introductionId: string; profileImgUrl: string; mbti: MbtiKeyType; blogUrl: string; githubUrl: string; summary: string; latitude: string | number; longitude: string | number; createdAt: Date; updatedAt: Date; likeCount: number; isLike: boolean; commentCount: number; } export interface UserInfo { user: User; introduction: Introduction; } const randomUserInfo = (): UserInfo => ({ user: { userId: faker.datatype.uuid(), email: faker.internet.email(), name: faker.name.firstName(), course: random<CourseKeyType>(Object.keys(course) as CourseKeyType[]), generation: Math.floor(Math.random() * 100), role: random<RoleKeyType>(Object.keys(role) as RoleKeyType[]), createdAt: faker.datatype.datetime(), updatedAt: faker.datatype.datetime(), }, introduction: { introductionId: faker.datatype.uuid(), profileImgUrl: faker.image.imageUrl(), mbti: mbti() as MbtiKeyType, blogUrl: faker.internet.url(), githubUrl: faker.internet.url(), summary: faker.lorem.sentence(), latitude: faker.address.latitude(131.87222222, 124.19583333), longitude: faker.address.longitude(43.00972222, 33.11111111), createdAt: faker.datatype.datetime(), updatedAt: faker.datatype.datetime(), likeCount: faker.datatype.number({ min: 0, max: 128, }), isLike: faker.datatype.boolean(), commentCount: faker.datatype.number({ min: 0, max: 128, }), }, }); export default randomUserInfo;

JS 더미데이터를 Response JSON 형태로 변경하기

const currentUser = randomUserInfo(); console.log({ currentUser });
브라우저에서 해당 코드 복사 후
예시
[{"user":{"userId":"538796b1-9377-443c-9632-15e165ae245d","email":".@gmail.com","name":"세강","course":"AI","generation":18,"role":"MANAGER","createdAt":"2075-02-26T05:37:03.431Z","updatedAt":"2028-06-13T16:29:22.231Z"},"introduction":{"introductionId":"8ff4b2f9-47c7-402d-b4c3-b42a3217b321","profileImgUrl":"http://placeimg.com/640/480","mbti":"ENTP","blogUrl":"http://현학.com","githubUrl":"https://규현.co.kr","summary":"범하고 해당하는 모든 확정될 아니한다..","latitude":"128.5640","longitude":"37.0496","createdAt":"2044-01-07T13:54:25.621Z","updatedAt":"2069-07-16T07:48:39.817Z","likeCount":93,"isLike":false,"commentCount":61}},{"user":{"userId":"0d1b71c1-e2b5-4c45-bbbc-ca7ef8a9d0d0","email":"78@gmail.com","name":"제용","course":"BE","generation":1,"role":"STUDENT","createdAt":"2081-01-01T03:38:42.085Z","updatedAt":"1991-02-25T23:00:34.714Z"},"introduction":{"introductionId":"7eb7030e-5c48-464a-8b54-57f080498378","profileImgUrl":"http://placeimg.com/640/480","mbti":"INTP","blogUrl":"http://희준.net","githubUrl":"http://민현.co.kr","summary":"때에는 유죄의 국가는 예술가의 필요한 권리는.","latitude":"130.5203","longitude":"39.2344","createdAt":"2032-09-05T20:33:36.316Z","updatedAt":"2020-05-13T01:37:17.394Z","likeCount":83,"isLike":true,"commentCount":3}},{"user":{"userId":"fc0f8444-da80-46cf-91b4-46db535f2abf","email":"_@hanmail.net","name":"기빈","course":"BE","generation":17,"role":"MENTOR","createdAt":"2012-12-11T22:16:34.346Z","updatedAt":"2008-05-21T23:23:28.911Z"},"introduction":{"introductionId":"843a565c-a615-4db6-a944-2857b7ec27de","profileImgUrl":"http://placeimg.com/640/480","mbti":"INFJ","blogUrl":"https://홍윤.co.kr","githubUrl":"https://지헌.biz","summary":"정하는 법률에 자유를.","latitude":"124.2217","longitude":"37.1395","createdAt":"2066-08-29T14:39:09.102Z","updatedAt":"2084-11-18T18:42:52.274Z","likeCount":109,"isLike":true,"commentCount":77}},{"user":{"userId":"7355d690-f97c-4d87-aa1c-b60f8728f964","email":"81@yahoo.co.kr","name":"세형","course":"FE","generation":35,"role":"MANAGER","createdAt":"2036-05-30T08:51:27.344Z","updatedAt":"2044-05-23T15:56:34.718Z"},"introduction":{"introductionId":"824c6b21-1106-4066-86ce-8b1a4d238f1e","profileImgUrl":"http://placeimg.com/640/480","mbti":"ISTP","blogUrl":"http://기수.com","githubUrl":"https://예담.or.kr","summary":"행위로 유죄의 법률로써 판결이.","latitude":"124.9904","longitude":"37.5774","createdAt":"1995-01-04T13:51:10.460Z","updatedAt":"1992-05-31T18:59:51.143Z","likeCount":18,"isLike":false,"commentCount":6}},{"user":{"userId":"a2ec3f1d-97be-48f7-941c-95740a0fae38","email":"_@yahoo.co.kr","name":"시영","course":"AI","generation":36,"role":"MANAGER","createdAt":"2022-07-10T00:39:10.615Z","updatedAt":"2092-11-12T17:28:56.474Z"},"introduction":{"introductionId":"246062bd-1986-49ae-98ec-3ba9e06863fa","profileImgUrl":"http://placeimg.com/640/480","mbti":"ENFP","blogUrl":"http://원겸.info","githubUrl":"https://로윤.or.kr","summary":"또는 의하여 국가는 국제법규는 해당하는.","latitude":"124.3085","longitude":"37.7674","createdAt":"2009-11-07T00:26:10.108Z","updatedAt":"1998-04-09T11:43:20.019Z","likeCount":100,"isLike":true,"commentCount":100}},{"user":{"userId":"9fcf3c36-260f-4c9c-a3be-7a13698d6370","email":".@naver.com","name":"지한","course":"AI","generation":8,"role":"MENTOR","createdAt":"2064-08-28T19:56:47.715Z","updatedAt":"2011-05-15T06:36:36.057Z"},"introduction":{"introductionId":"e1b3be34-de6e-4cff-b6d4-7ef5a8ba35d2","profileImgUrl":"http://placeimg.com/640/480","mbti":"INTP","blogUrl":"http://선엽.info","githubUrl":"https://해서.com","summary":"노력하여야 이상의 의무를 국가는 위하여 신문의 형사피고인은 권리는.","latitude":"129.2330","longitude":"34.6813","createdAt":"2017-10-03T07:51:04.806Z","updatedAt":"2096-11-04T12:48:28.097Z","likeCount":62,"isLike":false,"commentCount":60}},{"user":{"userId":"5673e2de-27b7-424a-bf56-3ca47a1392e4","email":"_37@naver.com","name":"홍윤","course":"BE","generation":73,"role":"MANAGER","createdAt":"2074-09-07T19:06:28.692Z","updatedAt":"2005-05-27T11:17:36.076Z"},"introduction":{"introductionId":"d5cb32a2-d5eb-4ec5-8a3f-33c2f72577a7","profileImgUrl":"http://placeimg.com/640/480","mbti":"ISTP","blogUrl":"http://홍규.biz","githubUrl":"https://승룡.biz","summary":"형사피고인은 권리는 신문의 승인된 모든 범하고.","latitude":"127.6177","longitude":"33.9490","createdAt":"2016-11-18T19:51:58.658Z","updatedAt":"1996-06-02T07:36:21.978Z","likeCount":98,"isLike":true,"commentCount":71}},{"user":{"userId":"0523e3d1-ef9f-439a-870e-010cebf8eb7b","email":"96@yahoo.co.kr","name":"주열","course":"AI","generation":83,"role":"MANAGER","createdAt":"2043-04-19T17:39:23.834Z","updatedAt":"2018-01-20T07:46:43.923Z"},"introduction":{"introductionId":"df913deb-4b8f-4243-92f7-78805e44229d","profileImgUrl":"http://placeimg.com/640/480","mbti":"ENTJ","blogUrl":"http://은유.co.kr","githubUrl":"http://한유.com","summary":"처벌받지 헌법에 보호한다. 바에 자유를 노력하여야 의하여 모성의 자유를.","latitude":"130.5515","longitude":"35.0987","createdAt":"2071-07-04T02:51:17.487Z","updatedAt":"2083-04-09T11:54:34.466Z","likeCount":0,"isLike":true,"commentCount":90}},{"user":{"userId":"6c087984-6160-4647-8eef-d880b1182af6","email":"82@naver.com","name":"회윤","course":"FE","generation":65,"role":"MANAGER","createdAt":"2034-02-25T05:17:02.440Z","updatedAt":"2012-05-21T08:16:33.173Z"},"introduction":{"introductionId":"4e783765-c5db-4714-aab0-c710a369881d","profileImgUrl":"http://placeimg.com/640/480","mbti":"INFP","blogUrl":"https://한길.org","githubUrl":"http://보담.info","summary":"보호를 일반적으로 범하고 죄를 보호한다..","latitude":"125.7081","longitude":"36.3086","createdAt":"2033-01-11T18:35:01.095Z","updatedAt":"2023-12-29T21:49:23.837Z","likeCount":96,"isLike":true,"commentCount":106}},{"user":{"userId":"c43cba84-0ce7-4907-80e3-11131c37a366","email":"51@yahoo.co.kr","name":"종훈","course":"BE","generation":43,"role":"MANAGER","createdAt":"1992-09-15T07:08:40.594Z","updatedAt":"2096-04-15T03:32:16.075Z"},"introduction":{"introductionId":"0dc39e30-201d-4e81-8a55-44f3ff6f61bd","profileImgUrl":"http://placeimg.com/640/480","mbti":"INFP","blogUrl":"http://호담.biz","githubUrl":"https://수민.co.kr","summary":"추정된다. 현행범인인 체결·공포된.","latitude":"129.3948","longitude":"35.9265","createdAt":"2066-11-27T17:26:43.377Z","updatedAt":"2043-02-14T19:30:18.966Z","likeCount":80,"isLike":false,"commentCount":62}}]
[온라인 JSON 포매터 사이트]에서 포맷팅한다
예시 API 문서에 따른 실제 형태는 { "cards": ... }가 있으므로 추가한다
{ "cards":[ { "user":{ "userId":"538796b1-9377-443c-9632-15e165ae245d", "email":".@gmail.com", "name":"세강", "course":"AI", "generation":18, "role":"MANAGER", "createdAt":"2075-02-26T05:37:03.431Z", "updatedAt":"2028-06-13T16:29:22.231Z" }, "introduction":{ "introductionId":"8ff4b2f9-47c7-402d-b4c3-b42a3217b321", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"ENTP", "blogUrl":"http://현학.com", "githubUrl":"https://규현.co.kr", "summary":"범하고 해당하는 모든 확정될 아니한다..", "latitude":"128.5640", "longitude":"37.0496", "createdAt":"2044-01-07T13:54:25.621Z", "updatedAt":"2069-07-16T07:48:39.817Z", "likeCount":93, "isLike":false, "commentCount":61 } }, { "user":{ "userId":"0d1b71c1-e2b5-4c45-bbbc-ca7ef8a9d0d0", "email":"78@gmail.com", "name":"제용", "course":"BE", "generation":1, "role":"STUDENT", "createdAt":"2081-01-01T03:38:42.085Z", "updatedAt":"1991-02-25T23:00:34.714Z" }, "introduction":{ "introductionId":"7eb7030e-5c48-464a-8b54-57f080498378", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"INTP", "blogUrl":"http://희준.net", "githubUrl":"http://민현.co.kr", "summary":"때에는 유죄의 국가는 예술가의 필요한 권리는.", "latitude":"130.5203", "longitude":"39.2344", "createdAt":"2032-09-05T20:33:36.316Z", "updatedAt":"2020-05-13T01:37:17.394Z", "likeCount":83, "isLike":true, "commentCount":3 } }, { "user":{ "userId":"fc0f8444-da80-46cf-91b4-46db535f2abf", "email":"_@hanmail.net", "name":"기빈", "course":"BE", "generation":17, "role":"MENTOR", "createdAt":"2012-12-11T22:16:34.346Z", "updatedAt":"2008-05-21T23:23:28.911Z" }, "introduction":{ "introductionId":"843a565c-a615-4db6-a944-2857b7ec27de", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"INFJ", "blogUrl":"https://홍윤.co.kr", "githubUrl":"https://지헌.biz", "summary":"정하는 법률에 자유를.", "latitude":"124.2217", "longitude":"37.1395", "createdAt":"2066-08-29T14:39:09.102Z", "updatedAt":"2084-11-18T18:42:52.274Z", "likeCount":109, "isLike":true, "commentCount":77 } }, { "user":{ "userId":"7355d690-f97c-4d87-aa1c-b60f8728f964", "email":"81@yahoo.co.kr", "name":"세형", "course":"FE", "generation":35, "role":"MANAGER", "createdAt":"2036-05-30T08:51:27.344Z", "updatedAt":"2044-05-23T15:56:34.718Z" }, "introduction":{ "introductionId":"824c6b21-1106-4066-86ce-8b1a4d238f1e", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"ISTP", "blogUrl":"http://기수.com", "githubUrl":"https://예담.or.kr", "summary":"행위로 유죄의 법률로써 판결이.", "latitude":"124.9904", "longitude":"37.5774", "createdAt":"1995-01-04T13:51:10.460Z", "updatedAt":"1992-05-31T18:59:51.143Z", "likeCount":18, "isLike":false, "commentCount":6 } }, { "user":{ "userId":"a2ec3f1d-97be-48f7-941c-95740a0fae38", "email":"_@yahoo.co.kr", "name":"시영", "course":"AI", "generation":36, "role":"MANAGER", "createdAt":"2022-07-10T00:39:10.615Z", "updatedAt":"2092-11-12T17:28:56.474Z" }, "introduction":{ "introductionId":"246062bd-1986-49ae-98ec-3ba9e06863fa", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"ENFP", "blogUrl":"http://원겸.info", "githubUrl":"https://로윤.or.kr", "summary":"또는 의하여 국가는 국제법규는 해당하는.", "latitude":"124.3085", "longitude":"37.7674", "createdAt":"2009-11-07T00:26:10.108Z", "updatedAt":"1998-04-09T11:43:20.019Z", "likeCount":100, "isLike":true, "commentCount":100 } }, { "user":{ "userId":"9fcf3c36-260f-4c9c-a3be-7a13698d6370", "email":".@naver.com", "name":"지한", "course":"AI", "generation":8, "role":"MENTOR", "createdAt":"2064-08-28T19:56:47.715Z", "updatedAt":"2011-05-15T06:36:36.057Z" }, "introduction":{ "introductionId":"e1b3be34-de6e-4cff-b6d4-7ef5a8ba35d2", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"INTP", "blogUrl":"http://선엽.info", "githubUrl":"https://해서.com", "summary":"노력하여야 이상의 의무를 국가는 위하여 신문의 형사피고인은 권리는.", "latitude":"129.2330", "longitude":"34.6813", "createdAt":"2017-10-03T07:51:04.806Z", "updatedAt":"2096-11-04T12:48:28.097Z", "likeCount":62, "isLike":false, "commentCount":60 } }, { "user":{ "userId":"5673e2de-27b7-424a-bf56-3ca47a1392e4", "email":"_37@naver.com", "name":"홍윤", "course":"BE", "generation":73, "role":"MANAGER", "createdAt":"2074-09-07T19:06:28.692Z", "updatedAt":"2005-05-27T11:17:36.076Z" }, "introduction":{ "introductionId":"d5cb32a2-d5eb-4ec5-8a3f-33c2f72577a7", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"ISTP", "blogUrl":"http://홍규.biz", "githubUrl":"https://승룡.biz", "summary":"형사피고인은 권리는 신문의 승인된 모든 범하고.", "latitude":"127.6177", "longitude":"33.9490", "createdAt":"2016-11-18T19:51:58.658Z", "updatedAt":"1996-06-02T07:36:21.978Z", "likeCount":98, "isLike":true, "commentCount":71 } }, { "user":{ "userId":"0523e3d1-ef9f-439a-870e-010cebf8eb7b", "email":"96@yahoo.co.kr", "name":"주열", "course":"AI", "generation":83, "role":"MANAGER", "createdAt":"2043-04-19T17:39:23.834Z", "updatedAt":"2018-01-20T07:46:43.923Z" }, "introduction":{ "introductionId":"df913deb-4b8f-4243-92f7-78805e44229d", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"ENTJ", "blogUrl":"http://은유.co.kr", "githubUrl":"http://한유.com", "summary":"처벌받지 헌법에 보호한다. 바에 자유를 노력하여야 의하여 모성의 자유를.", "latitude":"130.5515", "longitude":"35.0987", "createdAt":"2071-07-04T02:51:17.487Z", "updatedAt":"2083-04-09T11:54:34.466Z", "likeCount":0, "isLike":true, "commentCount":90 } }, { "user":{ "userId":"6c087984-6160-4647-8eef-d880b1182af6", "email":"82@naver.com", "name":"회윤", "course":"FE", "generation":65, "role":"MANAGER", "createdAt":"2034-02-25T05:17:02.440Z", "updatedAt":"2012-05-21T08:16:33.173Z" }, "introduction":{ "introductionId":"4e783765-c5db-4714-aab0-c710a369881d", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"INFP", "blogUrl":"https://한길.org", "githubUrl":"http://보담.info", "summary":"보호를 일반적으로 범하고 죄를 보호한다..", "latitude":"125.7081", "longitude":"36.3086", "createdAt":"2033-01-11T18:35:01.095Z", "updatedAt":"2023-12-29T21:49:23.837Z", "likeCount":96, "isLike":true, "commentCount":106 } }, { "user":{ "userId":"c43cba84-0ce7-4907-80e3-11131c37a366", "email":"51@yahoo.co.kr", "name":"종훈", "course":"BE", "generation":43, "role":"MANAGER", "createdAt":"1992-09-15T07:08:40.594Z", "updatedAt":"2096-04-15T03:32:16.075Z" }, "introduction":{ "introductionId":"0dc39e30-201d-4e81-8a55-44f3ff6f61bd", "profileImgUrl":"http://placeimg.com/640/480", "mbti":"INFP", "blogUrl":"http://호담.biz", "githubUrl":"https://수민.co.kr", "summary":"추정된다. 현행범인인 체결·공포된.", "latitude":"129.3948", "longitude":"35.9265", "createdAt":"2066-11-27T17:26:43.377Z", "updatedAt":"2043-02-14T19:30:18.966Z", "likeCount":80, "isLike":false, "commentCount":62 } } ] }

모킹 HTTP API 만들기

[designer.mocky.io]에 들어가서 Response JSON을 붙여 넣고 API를 생성한다
사진
notion image
notion image
 
Limitation을 보면, 생성 후 1년에 한 번만 요청해도 자동 삭제되지 않는다고 한다.