(내일배움캠프)260312 TIL

(내일배움캠프)260312 TIL

2026. 3. 12. 20:24ㆍ스파르타코딩클럽 Spring4기 내일배움캠프

어제 진행했던 과제에서 문제를 하나 발견했습니다.

분명 이름과 카테고리를 입력하지 않으면 등록 함수를 실행하지 않도록 하였는데 그냥 등록이 되어버렸습니다.

function getDatas(){
    const name = document.getElementById('resName').value;
    const category = document.getElementById('resCategory').value;
    const address = document.getElementById('resAddress').value;
    const call = document.getElementById('resCall').value;
    const rating = document.getElementById('resRating').value;
// --------------------이 부분----------------------
    if (!name || !category) {
        return alert("식당 이름과 카테고리를 입력해주세요!");
    }		
// --------------------이 부분----------------------
    return {
        name,
        category,
        address,
        call,
        rating: Number(rating)
    };
}

문제가 되는 곳은 어제 폼에 입력된 값들을 저장하여 json객체로 만드는 과정 중에 이름과 카테고리를 검사하는 부분이 함수로 같이 빠져버려서였습니다.

따로 만든 함수에서 저렇게 return alert을 하면 getDatas 함수에 대해서만 return alert을 한 것이기 때문에 그다음으로 진행되는 등록 함수 내용은 그대로 진행이 되는 것이었습니다.

그리고 구조를 보면 이름과 카테고리가 빠져있으면 밑에 내용 또한 진행하지 않기 때문에 address, call, rating에 대한 값을 입력하고 등록을 하여도 전부 사라지는 것을 알 수 있었습니다.

그래서 해결 방안으로 저 부분을 등록, 수정 함수 부분으로 돌려놓기로 하였습니다.

async function addRestaurant() {
    if(editId) return updateRestaurant();

    const placeData = getDatas();

    if (!placeData.name || !placeData.category) {
        return alert("식당 이름과 카테고리를 입력해주세요!");
    }
	......
}
async function updateRestaurant(){
    const placeData = getDatas();

    if (!placeData.name || !placeData.category) {
        return alert("식당 이름과 카테고리를 입력해주세요!");
    }
    ......
}

받아온 데이터에 name과 category를 검사해야 하기 때문에 placeData.name, placeData.category를 이용하였습니다.

문제가 해결되었습니다.

완전 바이브 코딩으로 프론트엔드 끝내보기

v0라는 ai를 이용해서 맛집 관리 프로젝트 프론트엔드 구현해 보았습니다.

v0는 프론트엔드 개발을 해주는 ai 인 것 같습니다.

먼저 지금까지의 내용을 바탕으로 생각나는 대로 프롬프트를 작성해 보았습니다.

다음 조건으로 맛집 관리 웹 앱을 만들어줘

내 Mock 서버 URL
https://---.mockapi.io/places

데이터 구조 예시
{  "id": 1,  "name": "명동교자 본점",  "address": "서울 중구 명동10길 29",  "call": "02-776-5348",  "category": "한식",  "rating": 5  }

필수 기능 예시
- 맛집 전체 조회 (GET /places)
- 맛집 등록 (POST /places)
- 맛집 삭제 (DELETE /places/:id)
- 맛집 수정 (PUT /places/:id)

기술 스택 예시
html로만 이루어지게 만드는데 css, js 기능도 구현해야해

요구사항 예시
- 최신 유행 트렌드에 맞춘 목록 UI
- 카테고리 별로 필터링하는 기능 구현
- 등록 폼은 모달 또는 별도 영역으로 구성
- 이름 검색 기능 구현
- 평점 순서, 등록 순서, 가나다 순서 등으로 정렬하는 기능 구현
- 수정 폼 또한 동일하나 UI 색깔이나 형태는 다르게 하기

-> 정렬 선택 창이 카테고리 바로 위 검색 밑으로 옮겨

-> 받은 데이터에서 평점이 5점을 넘어가면 5점으로 변경해

밑의 추가 구현 사항을 넣어서 UI를 깔끔하게 정돈하였습니다.