본문 바로가기
반응형

전체 글67

⑧ 웹앱에서 JSON은 어떻게 사용될까? API 데이터를 이해하는 가장 쉬운 방법 API 다음에 JSON을 이해해야 하는 이유앞선 글에서 API를 설명하면서 웹앱이 외부 서버와 요청(Request)​과 응답(Response)​을 주고받는 과정을 살펴봤습니다.그렇다면 한 가지 질문이 남습니다.API가 데이터를 주고받는다면, 그 데이터는 어떤 형태로 전달될까요?웹 개발을 처음 접하면 이 부분에서 JSON이라는 용어를 만나게 됩니다. API 문서를 확인하거나 AI에게 코드를 만들어 달라고 요청했을 때도 JSON이라는 표현이 반복해서 등장합니다.JSON은 JavaScript Object Notation의 약자로, 구조화된 데이터를 표현하기 위한 텍스트 기반의 데이터 교환 형식입니다. 국제 인터넷 표준인 IETF의 RFC 8259에서는 JSON을 가볍고 텍스트 기반이며 특정 프로그래밍 언어에 .. 2026. 8. 13.
AI 웹앱 제작기 ⑦API란 무엇일까? 웹앱은 데이터를 어떻게 주고받을까? 웹앱을 만들다 보면 반드시 만나게 되는 단어, API웹앱을 만들기 시작하면 생각보다 자주 보게 되는 단어가 있습니다. 바로 API(Application Programming Interface)입니다.회원가입 기능을 만들 때도 API가 필요하고, 날씨 정보를 가져올 때도 API가 필요합니다. AI와 대화하는 기능을 넣으려 해도 API를 사용해야 합니다.처음에는 API가 마치 개발자만 사용하는 어려운 기술처럼 느껴질 수 있습니다. 하지만 실제로는 우리가 매일 사용하는 서비스 대부분이 API를 통해 연결되어 있습니다.예를 들어 카카오 로그인, 구글 지도, 결제 시스템, 날씨 앱, ChatGPT까지 모두 API를 기반으로 동작합니다.이번 글에서는 API가 정확히 무엇인지, 웹앱은 어떤 방식으로 데이터를 주고받는.. 2026. 8. 11.
AI 웹앱 제작기 ⑥Vercel은 무엇일까? 웹앱은 완성해도 다른 사람은 볼 수 없다AI를 활용해 웹앱을 만들기 시작하면 가장 먼저 localhost에서 실행하게 됩니다. 개발 과정에서는 충분하지만, 이 상태의 웹앱은 개발자의 컴퓨터에서만 실행되는 로컬(Local) 환경이기 때문에 다른 사람은 접속할 수 없습니다.실제 서비스로 활용하려면 누구나 인터넷을 통해 접속할 수 있어야 합니다. 이러한 과정을 배포(Deployment)라고 하며, 개발한 프로그램을 인터넷에서 실행 가능한 상태로 공개하는 작업을 의미합니다.최근 AI를 활용한 웹 개발에서는 이 배포 과정을 매우 간단하게 만들어 주는 서비스가 널리 사용되고 있습니다. 그중 가장 대표적인 서비스가 Vercel입니다.이번 글에서는 Vercel이 무엇인지, 왜 많은 AI 개발 도구가 Vercel을 추천.. 2026. 8. 6.
AI 웹앱 제작기 ⑤Git과 GitHub는 무엇이 다를까? Git과 GitHub를 같은 것으로 알고 있다면AI를 이용해 웹앱을 만들기 시작하면 Git과 GitHub라는 용어를 매우 자주 만나게 됩니다.Node.js를 설치하고 VS Code에서 프로젝트를 만들었다면, 다음 단계에서는 대부분 GitHub 저장소를 생성하거나 Git으로 프로젝트를 관리하라는 안내를 받게 됩니다.ChatGPT나 Claude에게 프로젝트를 생성해 달라고 요청해도 GitHub를 기준으로 설명하는 경우가 많으며, Vercel과 같은 배포 서비스 역시 GitHub 연동을 기본 방식으로 제공합니다.하지만 개발을 처음 접하는 사람에게는 Git과 GitHub의 차이를 이해하기 쉽지 않습니다.이름도 비슷하고 항상 함께 등장하기 때문에 같은 프로그램으로 오해하는 경우가 많습니다. 실제로는 Git은 버전.. 2026. 8. 5.
AI 웹앱 제작기 ④ localhost와 Vercel의 차이, 웹앱은 어디에서 실행될까? 웹앱은 어디에서 실행될까? localhost를 먼저 이해해야 하는 이유웹사이트를 이용하는 것과 웹앱을 개발하는 것은 실행 방식부터 다릅니다. 일반적인 웹사이트는 인터넷 주소(URL)를 입력하면 바로 접속할 수 있지만, 개발 중인 웹앱은 처음부터 인터넷에 공개되지 않습니다. 먼저 개발자의 컴퓨터에서 실행하고 테스트한 뒤, 정상적으로 동작하는 것을 확인한 후 인터넷에 배포하는 과정을 거칩니다.이러한 개발 과정에서 가장 먼저 등장하는 용어가 localhost입니다.웹 개발을 처음 접한 사람이라면 http://localhost:3000이라는 주소를 보고 인터넷 사이트라고 생각하기 쉽습니다. 하지만 localhost는 인터넷 주소가 아니라 자신의 컴퓨터 안에서 실행 중인 웹앱을 확인하기 위한 개발용 주소입니다.반.. 2026. 7. 27.
AI 웹앱 제작기 ③ 개발 환경부터 만들기, 왜 Node.js와 VS Code가 필요할까? AI 웹앱을 만들기 전에 개발 환경부터 준비해야 하는 이유AI의 도움을 받아 웹앱을 만든다고 해서 바로 화면을 만들거나 기능을 추가할 수 있는 것은 아닙니다. 먼저 웹앱을 실행할 수 있는 환경을 준비해야 합니다.처음 개발을 접하는 사람이라면 "왜 프로그램을 여러 개 설치해야 하지?"라는 의문이 생길 수 있습니다. 실제로 저 역시 AI에게 웹앱 제작을 요청하기 전까지는 Node.js와 VS Code가 어떤 역할을 하는지 정확히 알지 못했습니다.이번 글에서는 AI 웹앱을 만들기 위해 가장 먼저 준비했던 개발 환경과 Node.js, VS Code가 왜 필요한지 쉽게 설명하겠습니다. 이 내용을 이해하면 이후 프로젝트 생성, localhost 실행, 첫 화면 만들기까지 자연스럽게 이어갈 수 있습니다.개발 환경이란.. 2026. 7. 25.
README.md는 왜 항상 있을까? Markdown(.md)이란 무엇이며 AI가 기본으로 사용하는 이유 GitHub에서 오픈소스 프로젝트를 살펴보거나 AI를 이용해 새로운 프로젝트를 생성해 본 경험이 있다면 거의 항상 README.md 파일을 볼 수 있습니다. ChatGPT, Claude, Gemini, GitHub Copilot과 같은 AI 코드 생성 도구 역시 프로젝트를 만들 때 README.md를 함께 생성하는 경우가 많습니다.실행되는 프로그램도 아닌 단순한 문서 파일이 프로젝트에서 가장 먼저 만들어지는 이유는 무엇일까요?그 이유를 이해하려면 먼저 Markdown(.md)이 무엇인지 알아야 합니다.Markdown은 단순히 메모를 작성하는 파일 형식이 아니라, 개발 문서를 작성하는 사실상의 표준이며 AI 시대에는 사람과 AI가 함께 이해하는 공통 문서 형식으로 자리 잡았습니다.이번 글에서는 Markdo.. 2026. 7. 24.
Supabase란? AI와 함께 웹앱을 만들면서 가장 먼저 선택한 데이터베이스 웹앱을 만들다 보면 결국 데이터를 저장해야 하는 순간이 찾아옵니다.회원가입 정보를 저장해야 하고, 작업 내역도 기록해야 하며, 사용자가 입력한 내용도 안전하게 보관해야 합니다.저도 AI와 함께 웹앱을 만들기 시작했을 때 가장 고민했던 부분이 바로 데이터베이스였습니다.MySQL, PostgreSQL, Firebase처럼 다양한 선택지가 있었지만, 처음 개발하는 입장에서는 무엇을 선택해야 할지 막막했습니다.여러 자료를 찾아보고 직접 사용해 본 끝에 선택한 것이 Supabase였습니다.이번 글에서는 제가 왜 Supabase를 선택했는지, 실제 사용하면서 느낀 장점과 아쉬운 점을 정리해 보겠습니다. SUPABASE 바로가기Supabase는 무엇일까?Supabase는 데이터를 저장하고 관리할 수 있도록 도와주.. 2026. 7. 22.
웹앱은 어떻게 동작할까? 프론트엔드와 백엔드를 이해하면 개발이 쉬워진다 웹앱을 처음 만들기 시작하면 가장 많이 듣는 단어가 있습니다. 바로 프론트엔드, 백엔드, 그리고 API입니다.저도 처음 AI와 함께 웹앱을 만들기 시작했을 때는 이 단어들이 어렵게 느껴졌습니다. ChatGPT나 Claude가 코드를 만들어 주는데도, 막상 오류가 발생하면 어디를 수정해야 하는지 알 수 없었습니다.며칠 동안 직접 만들고 수정하는 과정을 반복하면서 한 가지를 깨달았습니다.웹앱은 하나의 프로그램이 아니라 여러 역할이 동시에 움직이는 구조라는 점입니다.오늘은 실제 웹앱을 만들면서 가장 먼저 이해해야 하는 '큰 그림'을 이야기해 보려고 합니다. 웹앱은 화면 하나로 만들어지지 않는다쇼핑몰에서 상품을 주문한다고 생각해 보겠습니다.상품을 장바구니에 담고 결제를 완료하면 주문 내역이 저장됩니다.몇 시간 .. 2026. 7. 21.
반응형

티스토리툴바