완성된 과제자료
-
식당을 등록하는 HTML
-
1.등록 JS CODE
요약하자면 form의 대한 정보들을 newPlace라는 객체로 묶어서 JSON타입으로 내 MOCK서버에 보낸다 목서버에서 POST 메소드를 받고 객체에맞는 value값들을 넣어서 등록시켜준다
서버랑 작업하는 fetch(API_URL)는 항상 Promise를 반환한다 그래서 내 목서버에 데이터를 요청을 할시 서버응답시간이 있기때문에 async function과 await를 동반한다
예전에 javascript할때는 then을 많이썼던거같은데 코드가 길어지는과정을 줄이면서 발전하는거 보면 또 새로운거같다
- 2.조회 JS CODE
mock서버로 받은 place객체의 데이터를 places라는 변수에받고 객체의 갯수만큼 반복문을 이용해 배열시켜 카드로 만든다 그 카드안에는 수정,삭제버튼이 들어가있다
- 3.수정
카드에 있는 버튼클릭스 모달창으로 기존 상점의 정보들을 가져와 나열시킨다
수정된 객체들을 updatePlace라는 변수로 묶고 서버로 REQUEST 요청을 보내 PUT 메소드로 수정시킨다
- 4.삭제
삭제버튼 클릭시 확인메세지후 승인을 받았을때 선택된 id를 통해 요청을보내 DELETE 시킨다
CSS 부분 AI와 바이브코딩했던 질문 (결과물 최상단)
너는 오래 실무를 해온 프론트엔드 개발자야.
나는 개발을 막 시작한 예비 개발자고, mock 서버를 이용해서 CRUD를 연습하고 있어.
API_URL은 https://69afd195c63dd197feba469c.mockapi.io/places 이야.
현재 app.js는 수정하지 않고 유지한 상태에서,
index.html과 style.css만 개선해서 화면을 더 고급스럽게 만들고 싶어.
참고 스타일은 일반적인 카드형 레이아웃이야.
index.html 코드와 style.css 코드를 각각 따로 나눠서 보여주고,
초보자도 이해할 수 있게 너무 어렵지 않게 설명해줘.
AI와 바이브코딩을할때 항상 목발질문을 피하고 아래 6가지를 포함시켜 질문하는 습관으로 의존하는 개발자가 아닌 성장하는 개발자가 될수있도록한다
1.명령 2.맥락 3.페르소나 4.예시 5.포맷 6.어조
