양들의 성

(내일배움캠프)260316 TIL

양들의 훈 — Mon, 16 Mar 2026 20:00:35 +0900

오늘은 Git 사용법에 대해서 공부 하였습니다.

먼저 Git 이란?

내가 만들거나 작성한 파일이나 코드들의 변경 사항을 저장하고 관리하는 도구로서, 여러 사람과 작업할 때 수정내역을 더 추적하기 쉽게하고 협업할 수 있게 해주는 것입니다. 버전 관리 시스템이라고도 부릅니다.

Git을 이용하여 폴더에 git init을 하여 초기화 해주면 폴더에 .git이라는 숨겨진 폴더가 생겨나는데 그 안에서 폴더에서 일어나는 모든 변화를 저장하고 기록을 해줍니다.

그리고 이 폴더에 있는 기록을 이용해서 내가 작업하던 내역을 확인하거나 협업 중에 변경된 내용등을 쉽게 찾아볼 수 있게 됩니다.

그럼 Github는 무엇인가?

그냥 git만 이용하면 팀원과의 협업을 할 수가 없는데, 위에서 말했듯이 .git 폴더에 기록을 하는 것이기 때문에 팀원가 .git 폴더를 계속해서 공유를 하며 변화가 있을때마다 팀원에게서 .git 폴더를 받으면 많이 불편할겁니다.

그래서 생긴게 Github로, 내가 만든 프로젝트를 Github에 올려 저장하여 어디에서든 다운로드, 코드 리뷰, 병합, 수정 등을 할 수 있게해주는 프로젝트 공유 사이트입니다.

깃허브에서는 시각적으로 보이게 해주는 기능들도 많아서 편의성이 많이 좋아지는것 같습니다.

이번에 Git 협업 과제로 나온 내용을 해결해보겠습니다.

1. 계획 잡기

우선 첫번째로 우리가 해야할 내용들을 진행과정을 볼 수 있도록 정리해보았습니다.

깃허브에 있는 프로젝트와 이슈 기능을 사용하였습니다.

팀원이 해야할 내용을 Issue를 생성하여서 Ready 파트에 넣었습니다. Ready는 리소스나 준비등이 완료된 Issue를 넣는 곳으로 간단한 자기소개 md 문서를 작성하여서 올리는 것은 Ready 파트라고 생각하여 넣었습니다.

그리고 브랜치 main 병합은 PullRequest를 통해서 팀원들에게 모두 리뷰를 받고 진행하기로 하였습니다.

그런데 feature 브랜치에 양성훈이라는 브랜치를 만들려고 하니 이런 에러가 발생했습니다.

git checkout -b feature/양성훈

19:48:22.842: [D:\_dev\spartaGit\sparta-infinity-git-cowork] git -c credential.helper= -c core.quotepath=false -c log.showSignature=false push --progress --porcelain origin refs/heads/feature/양성훈:refs/heads/feature/양성훈 --set-upstream
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
remote: fatal error in commit_refs        
error: failed to push some refs to 'https://github.com/tjdgns0618/sparta-infinity-git-cowork.git'
To https://github.com/tjdgns0618/sparta-infinity-git-cowork.git
!	refs/heads/feature/양성훈:refs/heads/feature/양성훈	[remote rejected] (failure)

이유를 알고보니 feature라는 브랜치를 먼저 만들고 해서 오류가 나는거였습니다.

브랜치를 지운다음 다시 하니 잘 작동하였습니다.

2. 자기소개 md 문서 작성 / PullRequest 작성

간단하게 양성훈.md를 만들어서 자기소개를 작성해주었습니다.

브랜치를 만들어서 체크아웃 하였습니다.

members 폴더를 만들어 그안에 양성훈.md 문서를 넣어주었습니다.

그러니 members 폴더가 untracked 상태로 있는것을 확인하고 members 폴더를 Stage에 넣었습니다.

git add members를 통해서 폴더를 Stage 상태로 변경하고 commit을 진행하였습니다.

이후 commit 제목을 간단히 적어주었습니다.

push를 통해서 새로 만든 브랜치와 커밋 내용을 깃허브에 적용해 주었습니다.

깃허브에 잘 올라간 모습

이제 PullRequest를 작성해보겠습니다.

내용은 위와 같이 작성하였습니다.

이후에는 main 브랜치와 병합만 하면 끝입니다!!!

(내일배움캠프)260312 TIL

양들의 훈 — Thu, 12 Mar 2026 20:24:49 +0900

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

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

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를 깔끔하게 정돈하였습니다.

이와 같이 깔끔하게 웹 페이지가 만들어졌습니다.

이제 필수 구현 기능인 맛집 전체 조회, 맛집 등록, 맛집 삭제, 맛집 수정 기능이 잘 구현되어 있는지 확인해 보겠습니다.

우선 맛집 전체 조회는 화면에서 보이듯 MockAPI 서버에서 잘 불러와진 것이 보입니다.

제가 추가로 추가 요구사항으로 넣었던 맛집 등록폼입니다. 모달을 이용하여서 화면에 깔끔하게 띄워주었네요.

실제로 추가를 해보았습니다.

실제로 서버로 POST 요청이 갔고 화면에도 추가된 카드가 잘 그려졌습니다.

다음은 수정입니다.

수정폼의 형태를 구분하기 위해서 요청했던 사항도 잘 적용되어 있었습니다. 그리고 실제로 서버로 PUT 요청을 보내서 정보 수정도 잘 이루어졌습니다.

다음은 삭제입니다.

삭제 버튼을 누르면 이와 같이 확인창이 나오게 되고 삭제하기를 누르면

위와 같이 서버로 DELETE 요청이 잘 가고 삭제가 된 후 화면도 다시 잘 그려주는 것을 확인했습니다.

v0에서 만든 페이지는 실제로 배포도 해볼 수 있게 되어있어서 해보았습니다.

https://v0-restaurant-management-app-self.vercel.app/index.html

맛집 관리

v0-restaurant-management-app-self.vercel.app

(내일배움캠프)260311 TIL

양들의 훈 — Wed, 11 Mar 2026 16:00:15 +0900

어제 하던 과제를 이어서 진행하였습니다.

단계 1-4. API 명세서 만들어보기

이번 단계의 목적

연동한 API를 문서로 정리하며 API 명세서가 왜 필요한지 직접 느껴보기

맛집 목록 전체 조회 API 명세서

domain: places

url: dd6e73e4-a664-4b36-99ca-a6e84eb72f58.mock.pstmn.io/places

method: GET

API 설명

데이터베이스에 저장된 모든 맛집 목록을 조회하는 API 입니다.

요청(Request)

a. Parameter & Querystring

none

이름	데이터타입	설명
none	none	none

b. request headers

'Content-Type': 'application/json'

이름	데이터타입	설명
Content-Type	String	서버에게 요청하고 싶은 데이터의 형식을 적어주세요.
application/json	String	json 형식의 데이터를 요청하기 위한 형식입니다.

c. request body

none

이름	데이터타입	설명
none	none	none

응답(respons)

a. response header

'Content-Type': 'application/json'

이름	데이터타입	설명
Content-Type	String	request headers에서 요청한 데이터의 형식으로 반환합니다.
application/json	String	request headers에서 요청한 json 형식의 데이터를 반환하는 형식입니다.

b. response body

성공응답: 200 OK

[
  {
    "id": 1,
    "name": "명동교자 본점",
    "address": "서울 중구 명동10길 29",
    "call": "02-776-5348",
    "category": "한식",
    "rating": 5
  },{
    "id": 3,
    "name": "광주 오리탕",
    "address": "광주광역시 북구 동문로 123",
    "call": "062-123-4567",
    "category": "한식",
    "rating": 10
  }
]

이름	데이터타입	설명
id	Integer	요청 받는 아이템의 고유 ID입니다.
name	String	요청 받은 아이템의 이름입니다.
address	String	요청 받은 아이템의 주소입니다.
call	String	요청 받은 아이템의 전화번호입니다.
category	String	요청 받은 아이템의 카테고리입니다.
rating	Integer	요청 받은 아이템의 평점입니다.

API 명세서가 왜 필요한가?

프론트엔드와 백엔드 간의 개발에 있어서 충돌이 안생기게 하고 동시에 개발을 진행할 수 있도록 하고,
너무 많은 API들이 생기면 관리가 어려워질 수 있으니 설명서를 적어두는 것이다.
많은 프론트개발자들에게 API 사용(서버 소통 방법)에 대한 설명을 하기 위해서 필요하다.

단계 2-1. CRUD 를 직접 구현해보기

이번 단계의 목적

Postman Mock 서버와 달리 실제로 데이터가 존재하는 서버를 경험해보기
CRUD 가 무엇인지 학습하기
등록, 조회, 수정, 삭제 (CRUD) 4가지 기능이 각각 어떤 HTML Method와 대응되는지 직접 구현하며 체득하기
API 호출 코드를 손으로 작성하면서 프론트엔드가 서버와 어떻게 통신하는지 흐름을 이해합니다.

a. mockapi.io 세팅

mockapi.io에서 프로젝트를 생성하여 URL을 발급 받았습니다.

다음에는 resource를 추가하여 맛집 등록에 사용할 데이터들의 형식을 정하였습니다.

이후 places의 저장된 데이터 개수가 표시되었습니다.

b. 등록 (CREATE)

입력 폼에서 값을 받아 POST 요청을 보내는 JS를 작성합니다.

async function addRestaurant() {
    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;

    let placeData = {
        name,
        category,
        address,
        call,
        rating: Number(rating)
    };

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

    try {
        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(placeData)
        });
    } catch (error) {
        console.error('데이터 등록 중 오류 발생:', error);
    }

    // 직접 등록은 맨 위에 보이도록 prepend 사용
    renderCard(name, address, call, category, rating);

    // 입력창 초기화
    document.getElementById('resName').value = '';
    document.getElementById('resCategory').value = '';
    document.getElementById('resAddress').value = '';
    document.getElementById('resCall').value = '';
    document.getElementById('resRating').value = '';
}

fetch 함수와 async/await의 사용하여 비동기 방식으로 구현을 하였습니다.

비동기 방식이란 요청을 받은 뒤 먼저 작업이 끝난 순으로 실행되는 방식이라고 합니다.

나중에 여러가지 요청이 생기게 된다면 한번에 요청을 보내고 먼저 작업이 끝나는 것이 먼저 화면에 표시되거나 하는 방식으로 쓰일 것같습니다.

등록 성공 후 목록이 자동으로 갱신되는지 확인합니다.

내용을 입력한 후 등록하기 버튼을 눌러서 POST 요청을 보냈습니다.

성공적으로 201 Created 상태 코드를 받았습니다.

확인 포인트: mockapi.io 대시보드에 데이터가 실제로 쌓이는지 눈으로 확인합니다.

mockapi.io에서 places를 확인해본 결과 제대로 데이터가 저장된 것을 볼 수 있었습니다.

c. 조회(READ)

GET 요청으로 전체 목록을 불러와 화면에 렌더링합니다.

async function fetchRestaurants() {
    try {
        const response = await fetch(API_URL, {
            method : 'GET',
            headers : {
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();

        data.forEach(item => {
            renderCard(item.name, item.address, item.call, item.category, item.rating);
        });
    } catch (error) {
        console.error('데이터 렌더링 중 오류 발생:', error);
    }
}

GET 요청을 보내서 서버에 존재하는 모든 데이터를 받아와서 renderCard함수의 매개변수로 넣어 주었습니다.

function renderCard(name, address, call, category, rating) {
    const list = document.getElementById('restaurantList');

    // 새로운 카드 엘리먼트 생성
    const card = document.createElement('div');
    card.className = 'restaurant-card';

    // HTML 구조 삽입 (index.html의 기존 양식 활용)
    card.innerHTML = `
        <span class="category">${category}</span>
        <h3>${name}</h3>
        <p> ${address || '주소가 없습니다.'}</p>
        <p> ${call || '번호가 없습니다.'}</p>
        <p> ${rating || '점수가 없습니다.'}</p>
    `;

    // 목록의 맨 뒤에 추가 (서버 데이터 순서대로)
    list.appendChild(card);
}

서버에서 받아온 데이터를 넣어 HTML에 새로운 구조를 삽입하였습니다.

받아온 데이터가 제대로 나오는지는 밑에 확인 포인트에서 확인해보았습니다.

확인 포인트: 1단계에서 등록한 데이터가 목록에 나오는지 확인합니다.

위와 같이 CREATE에서 만들었던 데이터가 잘 불러와졌습니다.

d. 삭제(DELETE)

각 카드에 삭제 버튼을 추가합니다.

    card.innerHTML = `
        <div class="card-buttons">
            <button class="delete-btn" onclick="deleteRestaurants()">삭제️</button>
        </div>
        <span class="category">${category}</span>
        <h3>${name}</h3>
        <p> ${address || '주소가 없습니다.'}</p>
        <p> ${call || '번호가 없습니다.'}</p>
        <p> ${rating || '점수가 없습니다.'}</p>
    `;

각 카드에 삭제 버튼을 추가하기 위해서 renderCard 함수 구현에서 버튼을 새로 추가하였습니다.

버튼 태그 안에 있는 onclick="deleteRestaurants()"는 삭제 버튼을 눌렀을때 DELETE 요청을 보내는 함수를 실행한다는 뜻입니다.

.restaurant-card{				// 원래 있던 코드에서 부분 추가
    position: relative;
    padding-top: 30px;
    ...
}

.delete-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.delete-btn:hover{
    background-color: #ff1a1a;
}

CSS를 통해서 삭제 버튼의 위치를 카드의 오른쪽 위로 바꾸어 주었습니다.

DELETE /places/:id 요청을 보냅니다

async function deleteRestaurant(id){
    if(!confirm("정말 삭제하시겠습니까?")) return;
    try{
        const response = await fetch(`${API_URL}/${id}`, {
            method : 'DELETE'
        });

        if (response.ok){
            alert("삭제되었습니다.");
            fetchRestaurants(); // 목록 새로고침
        }
    } catch(error){
        console.error('데이터 삭제 중 오류 발생:', error);
    }
}

confirm을 이용하여 확인 메시지를 띄워 확인을 받았을 경우에만 실행됩니다.

DELETE는 삭제할 아이템의 ID가 필요하여 URL과 같이 적어 주었습니다.

headers와 body는 필요없으니 없습니다.

이후 삭제가 완료되었으면 전체 조회 GET을 이용하여서 삭제된 데이터를 제외한 카드들을 다시 표시해주었습니다.

확인 포인트: 삭제 후 목록을 다시 불러왔을 때 해당 항목이 사라졌는지 확인합니다.

먼저 mockapi.io에서 더미 데이터를 25개 만들어주었습니다.

name 2 가게 카드를 삭제 해보겠습니다.

name 2 가게가 정상적으로 삭제 되었고, 200 OK 상태 코드도 받았습니다.

mockapi.io 에서도 places에 저장된 데이터가 하나 줄어든걸 확인하였습니다.

교자 맛집 다음으로 name 3의 정보가 오는 것을 볼 수 있었습니다.

e. 수정 (UPDATE)

수정 버튼 클릭 시 기존 데이터를 폼에 불러옵니다.

        <div class="card-buttons">
            <button class="update-btn" onclick="prepareEdit(
                '${item.id}', '${item.name}', '${item.category}',
                 '${item.address}', '${item.call}', ${item.rating})">수정</button>
            <button class="delete-btn" onclick="deleteRestaurant(${item.id})">삭제️</button>
        </div>

수정 버튼을 클릭하면 onclick="prepareEdit" 함수에 클릭한 카드에 있는 맛집 정보들을 전달 하도록 하였습니다.

        .update-btn{
            position: absolute;
            top: 10px;
            right: 55px;
            background-color: #83f19b;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 12px;
            transition: background 0.2s;
        }

        .update-btn:hover{
            background-color: #0dd43a;
        }

삭제 버튼과 동일하게 수정 버튼을 만들어주었습니다.

아래는 수정 버튼을 누르면 실행되는 prepareEdit 함수 부분입니다.

let editId = null;	 // 수정 모드 여부를 판단하는 변수
.....
function prepareEdit(id, name, category, address, call, rating){
    resetForm();

    // 입력창에 기존 값 채우기
    document.getElementById('resName').value = name;
    document.getElementById('resCategory').value = category;
    document.getElementById('resAddress').value = address;
    document.getElementById('resCall').value = call;
    document.getElementById('resRating').value = rating;

    editId = id;

    const submitBtn = document.querySelector('.form-section button');
    submitBtn.innerText = '수정 완료';
    submitBtn.style.backgroundColor = "#ff9800";

    // 화면 상단 폼으로 스크롤 이동
    window.scrollTo({ top: 0, behavior: 'smooth'});
}

수정 버튼 클릭으로 받은 정보들을 HTML내의 ID를 가져와 해당하는 입력 구간에 넣어 주었습니다.

교자 맛집의 수정버튼을 클릭하였을때 이런식으로 맛집 등록 버튼이 수정 완료 버튼으로 바뀌며 내용이 폼으로 불러와집니다.

변경한 내용을 PUT /places/:id 로 전송합니다.

async function addRestaurant() {
    if(editId) return updateRestaurant();
    ....
}
.....
async function updateRestaurant(){
    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("식당 이름과 카테고리를 입력해주세요!");
    }

    const placeData = {
        name,
        category,
        address,
        call,
        rating: Number(rating)
    };

    try{
        let response;
        response = await fetch(`${API_URL}/${editId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(placeData)
        });

        if (response.ok) {
            alert("수정되었습니다.");
            resetForm();
            fetchRestaurants();
        }
    }catch(error) {
        console.error('데이터 수정 중 오류 발생:', error);
        alert('수정에 실패했습니다.');
    }
}

editId 는 null로 초기화하여 만들어두었고 수정 버튼을 눌렀을때 해당 아이템의 id를 받아서 변경됩니다.

editId가 null이 아니라면 addRestaurant 함수가 아닌 updateRestaurant를 실행하게 하였습니다. 이렇게 한 이유는 html에서 버튼에 onclick="addRestaurant"를 넣어 놓아서 하였습니다. 따로 버튼의 속성을 건드리는 방법도 생각해보았지만 일단 이런 식으로 하였습니다.

name, category, address, call, rating의 데이터들을 서버에 JSON.stringfy를 이용하여 json 형식으로 변경하여 수정 요청을 하였습니다.

이 과정이 addRestaurant 함수에서도 동일하게 존재하는데 따로 함수를 구현하여 깔끔하게 처리하는 것도 좋겠다고 생각하여서 함수로 객체를 반환하게 하였습니다.

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)
    };
}
....
async function addRestaurant() {
    if(editId) return updateRestaurant();

    const placeData = getDatas();
    ...
}
....
async function updateRestaurant() {
	const placeData = getDatas();
    ...
}

이후 수정 완료를 눌렀다면 resetForm 함수를 실행하여 폼에 채웠던 수정 내용을 지우고 fetchRestaurants 함수로 변경된 내용을 웹사이트에 있는 카드에 적용되도록 하였습니다.

function resetForm() {
    document.getElementById('resName').value = '';
    document.getElementById('resCategory').value = '';
    document.getElementById('resAddress').value = '';
    document.getElementById('resCall').value = '';
    document.getElementById('resRating').value = '';

    editId = null;

    const submitBtn = document.querySelector('.form-section button');
    submitBtn.innerText = "등록하기";
    submitBtn.style.backgroundColor = ""; // 원래 색상으로
}

editId를 null로 초기화 해주었습니다.

입력 폼을 빈칸으로 초기화 해주고 버튼을 다시 등록하기 버튼으로 변경해주는 코드입니다.

확인 포인트: 수정된 내용이 목록에 즉시 반영되는지 확인합니다.

이와 같이 수정을 하여 완료 해보도록 하겠습니다.

수정완료 알림이 나왔습니다.

카드에 변경한 내용이 잘 적용되었으며, 200 OK 상태 코드도 받았습니다.

백엔드 서버가 왜 필요한가?

 클라이언트에게 들어온 요청에 대한 응답을 반환하기 위해서 필요하다.

(내일배움캠프)260310 TIL

양들의 훈 — Tue, 10 Mar 2026 20:59:32 +0900

오늘은 과제를 푸는 시간을 가졌습니다.

단계 1-1. 카카오맵에서 요청 사항 분석하기

이번 단계의 목적

HTTP / API 개념 복습
브로우저 개발자 도구(F12)를 사용하여 실제 현업에서 사용하는 API 요청 / 응답 구조를 이해하고 식별해 보기

실습용으로 고른 카카오맵 가게

Fetch 부분에서 Headers에 있는 내용을 분석해 보았습니다.

항목	내용
URL	https://place-api.map.kakao.com/places/panel3/10332413
Method	GET
Status Code	200 OK
Content-Type	application/json

이 API는 어떤 요청을 받아 어떤 응답을 주는가?

-> 클라이언트가 panel3에 있는 10332413번의 json 데이터 조회 요청을 보내면
   , 서버는 200 OK와 함께 json 타입의 응답을 반환한다.

단계 1-2. 프론트 구현해 보기

이번 단계의 목적

HTML / CSS 각각의 역할을 이해해 보기
AI 활용방법 익히기

// HTML 의 역할이 무엇일까요?
-> 웹 페이지의 구조(뼈대)를 만들어주는 역할

// CSS 의 역할이 무엇일까요?
-> HTML로 구현된 구조(뼈대)에 디자인과 배치를 해주는 역할

1. HTML로 화면 구조 잡기

AI에게 아래 프롬프트로 요청해 보세요.

맛집 목록을 보여주는 HTML 페이지를 만들어줘.
맛집 카드 목록 영역과 맛집을 등록하는 입력 폼이 있어야 해.
외부 라이브러리 없이 순수 HTML 사용해줘.

실행하면 나오는 모습

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 맛집 지도</title>
</head>
<body>

<div class="container">
    <header>
        <h1> 나만의 맛집 리스트</h1>
        <p>기억하고 싶은 맛집을 기록해보세요!</p>
    </header>

    <section class="form-section">
        <h3>새로운 맛집 등록</h3>
        <div class="form-group">
            <input type="text" id="resName" placeholder="식당 이름 (예: 중앙 식당)">
            <input type="text" id="resCategory" placeholder="카테고리 (예: 한식, 일식)">
            <textarea id="resReview" rows="3" placeholder="한 줄 평이나 추천 메뉴를 적어주세요."></textarea>
            <button onclick="addRestaurant()">등록하기</button>
        </div>
    </section>

    <section class="list-section" id="restaurantList">
        <div class="restaurant-card">
            <span class="category">한식</span>
            <h3>맛있는 김치찜</h3>
            <p> 서울특별시 어딘가</p>
            <p> 묵은지가 정말 제대로예요. 밥 두 공기 순삭!</p>
        </div>
    </section>
</div>
</body>
</html>
// *Gemini Pro를 이용하여 구현하였습니다.*

2. CSS로 꾸미기

AI에게 아래 프롬프트로 요청해 보세요.

위 HTML에 CSS를 추가해줘.
맛집 목록은 카드 형태로 보이고, 전체적으로 깔끔한 스타일이면 좋겠어.

HTML에 CSS를 적용하여 실행하면 나오는 모습

:root {
  --primary-color: #ff6b6b;
  --bg-color: #f8f9fa;
  --card-bg: #ffffff;
}

body{
    font-family: 'Pretendard', sans-serif;
    background: var(--bg-color);
    margin: 0;
    padding: 20px;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

header {
    text-align: center;
    margin-bottom: 30px;
}

.form-section{
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.form-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input, textarea{
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

button{
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

button:hover{
    background-color: #fa5252;
}

.list-section{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.restaurant-card{
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-left: 5px solid var(--primary-color);
}

.restaurant-card h3{
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

.restaurant-card p{
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.category{
    display: inline-block;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 10px;
}
// *Gemini Pro를 이용해서 구현하였습니다.*

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 맛집 지도</title>
    <link rel="stylesheet" href="style.css"> // 외부의 CSS 연결 부분
</head>
<body>

HTML에서 외부의 CSS 연결을 하여 사용하였습니다.

단계 1-3. API 호출해보기

이번 단계의 목적

내가 만든 화면에서 실제로 서버에 요청을 보내고 응답을 받아보는 경험 해보기
프론트를 구성하는 JS의 역할 이해하기

// JS의 역할이 무엇일까요?
-> 사용자의 상호작용을 감지하여 함수를 실행하고, 그 결과로 화면(DOM Control)을 바꾸거나 서버와
   통신하게 해주는 역할
   (HTML의 구조를 동적으로 변경하는 역할)

// API 란 무엇일까요?
-> 프로그램이 다른 프로그램의 기능/데이터를 이용하기 위해 제공되는 인터페이스이자
   , 요청/응답 규약(규칙)이다.

3-1. Postman Mock 서버 만들기

1. Postman에서 새 Collection을 생성하기

먼저 Postman을 사용하기 위해서 Mock 서버를 먼저 만들어서 URL을 복사하였습니다.

맛집 목록용 Mock Server 생성

이후 생성한 콜렉션에 baseURL이라는 변수를 만들어 Mock Server 주소를 넣어줬습니다.

2. 맛집 [전체 조회] API를 아래와 같이 추가하기

항목	내용
Method	GET
URL	/places

위에서 만든 콜렉션에 Request를 새로 만들어서 GET Method를 baseURL(MockServerURL)/places에게 요청할 준비를 하였습니다.

3. Example 응답 작성

받은 Request를

미리 받은 Example용 json을 넣어서 Status Code에 200 OK를 넣어줍니다.

이후 Requset에서 Send를 클릭해 주면 아래와 같이 나온다.

id와 함께 데이터들을 모두 가져오는 것을 볼 수 있다.

이것으로 Postman에서 직접 요청을 보내 Example대로 응답을 받았습니다.

3-2. 구현한 프론트와 연동하기

1. index.html 에 JavaScript를 추가합니다.

<body>
<div class="container">
...
</div>
	<script src="app.js"></script>	// 외부의 JS 연결 부분
</body>
</html>

같은 폴더 내에 app.js 파일을 만들고 외부에서 연결하는 방식으로 하였습니다.

2. AI에게 아래 프롬프트로 요청해보세요.

아래 Mock 서버 URL로 GET 요청을 보내서
응답받은 맛집 목록을 HTML 카드로 화면에 렌더링하는 JS 코드를 짜줘.

Mock 서버 URL: [복사한 URL 붙여넣기]

// 1. 서버 URL (엔드포인트가 있다면 뒤에 추가하세요)
const API_URL = '목 서버 주소/places';

// 페이지가 로드되면 데이터를 가져옵니다.
document.addEventListener('DOMContentLoaded', () => {
    fetchRestaurants();
});

// 2. 서버에서 데이터 가져오기
async function fetchRestaurants() {
    try {
        const response = await fetch(API_URL, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        const data = await response.json();

        // 만약 데이터가 객체 안에 감싸져 있다면 (예: data.stores) 구조에 맞춰 수정하세요.
        // 여기서는 data 자체가 배열인 경우를 가정합니다.
        data.forEach(item => {
            renderCard(item.name, item.address, item.call, item.category, item.rating);
        });
    } catch (error) {
        console.error('데이터 렌더링 중 오류 발생:', error);
    }
}

// 3. 데이터를 받아 카드를 생성하고 화면에 붙이는 함수
function renderCard(name, address, call, category, rating) {
    const list = document.getElementById('restaurantList');

    // 새로운 카드 엘리먼트 생성
    const card = document.createElement('div');
    card.className = 'restaurant-card';

    // HTML 구조 삽입 (index.html의 기존 양식 활용)
    card.innerHTML = `
        <span class="category">${category}</span>
        <h3>${name}</h3>
        <p> ${address || '주소가 없습니다.'}</p>
        <p> ${call || '번호가 없습니다.'}</p>
        <p> ${rating || '점수가 없습니다.'}</p>
    `;

    // 목록의 맨 뒤에 추가 (서버 데이터 순서대로)
    list.appendChild(card);
}

// 4. (기존 유지) 직접 등록 기능
function addRestaurant() {
    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) {
        alert("식당 이름과 카테고리를 입력해주세요!");
        return;
    }

    // 직접 등록은 맨 위에 보이도록 prepend 사용
    renderCard(name, address, call, category, rating);

    // 입력창 초기화
    document.getElementById('resName').value = '';
    document.getElementById('resCategory').value = '';
    document.getElementById('resAddress').value = '';
    document.getElementById('resCall').value = '';
    document.getElementById('resRating').value = '';
}
// *Gemini Pro를 이용해서 구현하였습니다.*

서버 URL 작성해줘야 하는데 이때 엔드포인트를 까먹지 않고 작성해야합니다. 저 같은 경우에는 places로 해주었기때문에 places를 붙여주었습니다.
서버에서 데이터를 조회하는 GET을 이용할 것입니다. 원래 코드에서 GET이 안보여서 AI에게 물어본 결과 밑의 두 코드는 같은것으로 fetch를 사용할때 아무 매개변수를 적지않으면 기본적으로 GET 메서드를 사용하도록 설계되어 있다고 합니다.

const response = await fetch(API_URL, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        });

const response = await fetch(API_URL);	// 위 코드와 같다.

이제 브라우저에서 Mock Server에 있는 예제를 잘 가져오는지 보겠습니다.

위에 Postman에서 Example의 Body에 넣어놓은 데이터가 잘 불러와지는 것을 볼 수 있었습니다.

상태 코드 200 OK를 받는 것도 확인했습니다.

오늘의 TIL은 이상이며 내일은 API 명세서 만들기와 CRUD 직접 구현해 보기를 통해서 가상의 백엔드 서버와 연결까지 해보는 걸 해보겠습니다.