json-server 라이브러리와 fetchAPI를 함께 사용해서 구현했습니다.
DOMContentLoaded 이벤트를 사용해 HTML 문서를 모두 불러왔을 때, fetchAPI를 사용해 GET요청으로 받아온 데이터를 JSON으로 변환해서 가져오는 것으로 구현
![](https://private-user-images.githubusercontent.com/58039782/302325993-2f827822-a7b8-42e9-8fc5-2f4bb9d9a501.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDIzMjU5OTMtMmY4Mjc4MjItYTdiOC00MmU5LThmYzUtMmY0YmI5ZDlhNTAxLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY4ZjNkNmRlN2UzMDdjZTUzNWY2OTc5NWZhZTYzMjdmN2YxYTFhYmIwNjlmNmU3Y2M4ZTNhZTU4NWU0MDZiNzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.vsH7uITtMnicimy8bHbhQ2EHwUDvK8DKk5l10wgraSE)
fetchAPI를 사용해 POST 요청으로 json 파일에 데이터 추가 구현
![](https://private-user-images.githubusercontent.com/58039782/302646316-f61d4c91-f9c0-4769-a0c6-b154b494b5cf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDI2NDYzMTYtZjYxZDRjOTEtZjljMC00NzY5LWEwYzYtYjE1NGI0OTRiNWNmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIxZTY2YWNkMjIwZWFmYjE2NzVkNGM4MTAzMzcxN2ViNTk5Yjk0MDNkMzM3NGE0M2I5YTYwOWNhZDQzMjI3OWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5O6slWiyeznaZQa8EipNs6Ed1mBYIplG5EzM5Aq6M-U)
fetchAPI를 사용해 PATCH 요청으로 json 파일의 데이터 변경 구현
![](https://private-user-images.githubusercontent.com/58039782/302656511-e0e192a4-cea2-4593-a4c1-2e670a0f287f.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDI2NTY1MTEtZTBlMTkyYTQtY2VhMi00NTkzLWE0YzEtMmU2NzBhMGYyODdmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZhZDYwNTMzMzlkYTlkY2MzMjFiYzIxZWFkZDRlOGY2ODliOTJiMjhkYWI5NmFkYWM3MjlhNGIwYmM0NzExM2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.j4kzW4RIoz_xcaLkwUgEsMnpgU4cD6-kmgVfKyugin8)
fetchAPI를 사용해 PATCH 요청으로 json 파일의 데이터 변경 구현
![](https://private-user-images.githubusercontent.com/58039782/302668087-10c36465-3c3b-48ba-8daf-58f407ee368a.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDI2NjgwODctMTBjMzY0NjUtM2MzYi00OGJhLThkYWYtNThmNDA3ZWUzNjhhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYyNjQ2NzIxYjEwNGRhYzIzNGZlY2YzNDYwZTZlMjg0MDk5M2ZmY2I0Mjc2NWY2M2JjYWEzMzgzYTNiMWUxNmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.iLa9VYVU6864UjNvzpRMFEEUne98RSqNpX7OHO9isZo)
fetchAPI를 사용해 DELETE 요청으로 json 파일의 데이터 삭제 구현
![](https://private-user-images.githubusercontent.com/58039782/302671589-7cb95eeb-8e62-4366-88a8-da6176075eb4.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDI2NzE1ODktN2NiOTVlZWItOGU2Mi00MzY2LTg4YTgtZGE2MTc2MDc1ZWI0LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE3MzM3NWYxZjlkZThlNjcxN2U1NjJhZDRlNzc4ZmJjODJjNzQ4NWM5YWM2NGUyZDJkYjJiNjU4YmZjMjBkZGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-3k731xcHFxL4ARSKOpGWYfxENN79zAtBvvQ0-960lY)
![](https://private-user-images.githubusercontent.com/58039782/303347615-ee0b342a-7d5f-487d-9c38-ca72ddf5e682.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDMzNDc2MTUtZWUwYjM0MmEtN2Q1Zi00ODdkLTljMzgtY2E3MmRkZjVlNjgyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ2NTJmMjNkM2VlMGMzNDkxMDJhZTRmNmE2NjExMjQ4NDU0Y2Y0N2U0Mjk2ODc1N2RjYjYxMDY2Y2M1ZmRhYzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4Nh0ar-8baaFmq7jb7yyiM1u3mwj55ofxH88MoLmV6I)
![](https://private-user-images.githubusercontent.com/58039782/303840642-7e4f48fd-4671-4e18-a073-a6dccfe00e50.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5MTE2MzIsIm5iZiI6MTcyMzkxMTMzMiwicGF0aCI6Ii81ODAzOTc4Mi8zMDM4NDA2NDItN2U0ZjQ4ZmQtNDY3MS00ZTE4LWEwNzMtYTZkY2NmZTAwZTUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDE2MTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVhMzgzMTI5NTY4NGU3MzhiYTk0YjhkMjg3NzU1MDI5M2E4YTNiOGQyNjkxM2I1NGYwNjhhZTYyYTBkYWNmYWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.h9QeuHq4ptmfgpEEFWbNBHFMmBhaxBUOzT4UnbnnBNM)