MoonCommit DevLog

오늘 TIL에서는 Git 기초 강의를 들으며 버전 관리 시스템에 대해 처음 배워봤다. 처음 접하는 개념이라 아직은 익숙하지 않고 어렵게 느껴졌다. 하지만 내일 있을 팀 프로젝트에서 Git을 활용하게 될 예정이기 때문에, 오늘 배운 Git의 기본 개념과 명령어들을 중요한 것 위주로 정리해보려고 한다.Git이란?Git은 파일과 코드의 변경 기록을 저장하고 관리하는 버전 관리 시스템(Version Control System)이다.프로젝트를 진행하면서 파일을 수정하게 되면, Git은 언제 어떤 부분이 변경되었는지 기록해 준다.이를 통해 이전 버전으로 되돌리거나 변경 내역을 쉽게 확인할 수 있다. 또한 Git은 분산형 버전 관리 시스템으로, 여러 사람이 함께 작업할 때 수정 내역을 추적하고 협업할 수 있도록 도와..

오늘은 VO라는 AI를 활용해 맛집 관리 웹앱을 만들어 달라고 요청해봤다.https://v0-restaurant-management-app-peach.vercel.app/index.html결과는 정말 놀라웠다.⎝⍥⎠내가 직접 만들었던 맛집 관리 웹앱 "오늘 뭐 먹지?"와 비교했을 때완성도나 구조 면에서 퀄리티 차이가 꽤 크게 느껴졌다.그래서 이번 글에서는 VO가 어떻게 이런 결과물을 만들어냈는지, 그리고 VO에게 어떤 입력을 했는지를 하나씩 살펴보려고 한다.아래는 내가 VO에게 입력한 프롬프트 내용이다.처음에는 VO에게 어떤 방식으로 프롬프트를 작성해야 할지 몰라 정리가 완벽하진 않았지만, 그래도 맛집 관리 웹앱을 만들기 위해 필요한 정보들은 최대한 첨부했다. 그 결과로 생성된 웹앱은 글 맨 위에 첨부한..

프로젝트 소개과제를 통해 맛집을 기록하고 관리할 수 있는 웹앱을 만들었다.mockapi.io를 활용해 가상 서버를 구축하고, CRUD 기능을 구현했다.1. 사용기술기술용도HTML페이지 구조CSS크림, 무신사 스타일 디자인JavaScriptAPI호출, DOM조작mockapi.io가상 REST API 서버 DOM이라는 단어를 이해하고 넘어가면 좋을 것 같다.DOM이란 (Document Object Model)웹 페이지를 javascrip가 이해할 수 있는 객체 트리 구조로 바꾼 것이다.예시 내일배움캠프 맛집 실습html이 이렇게 되어있으면 document └─ ul#place-list ├─ li → "내일배움캠프" └─ li → "맛집 실습"javascript는 이렇게 이해한다.이 트..

https://mockapi.io/projects mockAPI mockapi.iomockAPI를 이용하면 별도의 서버 없이도 REST API를 쉽게 만들 수 있다."오늘 뭐 먹지?" 프로젝트를 위한 맛집 리스트 API를 mockAPI로 구현해 보았다.Create 버튼 눌러주면이제 여기 들어가면 화면이 밑에 처럼 나온다.여기서 New resource 클릭!다음 화면이 나오는데 처음에는 복잡해 보여서 당황했지만 알고보면 정말 간단했다.여기까지만 내 프로젝트에 맞게 수정하고 create버튼을 클릭했다. 이러면 완성 ὃὃmockapi.io를 사용하니 정말 간단하고 손쉽게 API를 만들 수 있어서 좋았다.이제 이 서버를 JavaScript와 연결해서 실제로 데이터를 가져와 보는 것도 해볼 예정이다!

CRUD 개념 정리CRUD란?C → Create : 데이터 생성R → Read : 데이터 조회U → Update : 데이터 수정D → Delete : 데이터 삭제웹/REST API 기준동작HTTP 메서드설명예시 (맛집 웹)CreatePOST새로운 데이터 추가새 맛집 등록 (POST /restaurants)ReadGET데이터 조회맛집 목록 불러오기 (GET /restaurants)UpdatePUT / PATCH기존 데이터 수정맛집 정보 수정 (PUT /restaurants/1)DeleteDELETE데이터 삭제특정 맛집 삭제 (DELETE /restaurants/1)자 여기까지 CRUD 개념에 대해서 알아보았고이제 어제 만든 "오늘 뭐 먹지?" 실습 과제에 적용할 수 있도록 구성해 보았다.postman으로 ..

맛집 리스트" 오늘 뭐 먹지? " index.html 오늘 뭐 먹지? 나의 소중한 맛집 기록장 맛집 추가하기 추가 맛집 리스트 © 2026 오늘 뭐 먹지? HTML 구조와 역할더보기header : 페이지 제목과 설명main : [맛집 추가 폼 add-place] - 사용자가 가게 이름, 종류, 이미지를 입력[맛집 리스트 place-list] - javascript가 API 데이터를 받아 카드 형태로 화면에 표시footer : 나만의 저작권 정보 표시스크립트 연결 app.js : 페이지가 열리면 js가 실행되어 동적으로 데이터 추가/렌더링css는 AI를 적극 활용하여 생성(생략) app.jsdocu..

HTML, CSS, JavaScript의 역할 HTML(Hypertext Markup Language) 웹 페이지의 구조를 만드는 언어내일배움캠프 1일차HTML, CSS, JavaScript의 역할 제목문단이미지버튼링크 ✔ 웹 페이지의 뼈대 역할 CSS (Cascading Style Sheets)웹 페이지의 디자인과 스타일을 담당하는 언어h1 { color: red; font-size: 30px; }색상레이아웃폰트간격 ✔ 웹 페이지의 디자인 역할 JavaScript웹 페이지에 동적인 기능을 추가하는 언어alert(“Hello World”);버튼 클릭 이벤트데이터 처리서버 API 요청화면 동적 변경 ✔ 웹 페이지의 동작 역할API, HTTP, REST API 개념 정리API(Ap..