3-1. 프론트엔드 구축하여 백엔드 서버와 연결하기의 일정은 언제인가요?

3-1. 프론트엔드 구축하여 백엔드 서버와 연결하기은(는) 2026-04-02부터 2026-04-02까지 진행됩니다.

3-1. 프론트엔드 구축하여 백엔드 서버와 연결하기

태그: 기타
시작일: 2026-04-02
종료일: 2026-04-02
수정일: 2026-04-01

https://www.youtube.com/watch?v=yhUbnp7jLek

1. 이건 꼭 알아야 한다[^1]

[? 질문] 이미 만든 백엔드 서버에, 가장 빠르고 간단한 방식으로 프론트엔드를 붙여서 요청/응답을 확인하려면 어떻게 해야 하는가[^1]
[= 답] VS Code에서 프론트엔드 폴더를 별도 창으로 열고, index.html 단일 파일(HTML + <script> 자바스크립트)로 fetch() POST 요청을 백엔드로 보내 JSON 응답을 콘솔에서 확인한다.[^2]

[? 질문] 프론트엔드 개발 환경 없이도(리액트 등 없이도) 브라우저에서 테스트 가능한 실행 방법은 무엇인가[^9]
[= 답] VS Code 확장 Live Server를 설치한 뒤 index.html을 Open with Live Server(또는 Go Live)로 띄워 브라우저에서 F12 콘솔을 열고 요청을 날려 확인한다.[^9]

[? 질문] fetch() 요청 코드를 빠르게 작성/검증하는 실전 흐름은 무엇인가[^3]
[= 답] (1) MDN/구글링으로 기본 형태를 확인하고 (2) 필요 기능(특정 URL로 POST, await, JSON 파싱, 에러 처리)을 조건으로 ChatGPT에 코드 생성을 요청해 초안을 얻고 (3) 구조/메서드/바디/응답 파싱을 직접 검증해 적용한다.[^3]

2. 큰 그림[^1]

이 콘텐츠는 이미 구축해 둔 백엔드 서버에 대해, 프론트엔드를 최소 구성으로 빠르게 만들어 HTTP 요청을 보내고 응답을 받는 연결 고리를 완성하는 과정을 실습으로 보여준다.[^1] VS Code를 프론트/백엔드 각각의 창으로 분리해 작업 동선을 단순화하고, index.html 하나만으로 fetch() 호출을 구현해 브라우저 콘솔에서 결과를 확인한다.[^2]

리액트 없이도 충분한 이유: 간단한 서비스(데모/프로토타입)에서는 프레임워크가 “쓸데없이 무겁다”고 보고, HTML 단일 파일로 구현하는 편이 빠르고 쉽다고 설명한다.[^2]
fetch POST + JSON 응답: 프론트에서 백엔드로 POST 요청을 보내고, 응답을 response.json()으로 파싱해 출력하는 흐름으로 연결을 확인한다.[^4]
Live Server로 즉시 실행: 별도 빌드 없이도 로컬에서 프론트를 띄우기 위해 VS Code Live Server 확장을 설치해 브라우저에서 바로 테스트한다.[^9]

3. 하나씩 살펴보기[^1]

3.1 백엔드는 이미 만들었고, 이제 프론트를 붙이는 단계[^1]

📸 0:00

영상 시작에서 화자는 “이제 백엔드를 구축한 상태”이며 속도가 빠르고 생각보다 어렵지 않다고 말한다.[^1] 이어서 다음 목표를 “프론트엔드를 구축해서 연결하는 과정”으로 명확히 전환한다.[^1]

또한 작업 편의성을 위해 VS Code 창을 하나 더 띄워 프론트엔드를 별도 창으로 열고, 두 창을 오가며 확인하는 방식이 좋다고 설명한다.[^1]

VS Code에서 File → New Window로 새 창을 연다.[^1]
새 창에서 Open Folder로 프론트엔드 폴더를 찾아 연다.[^1]
폴더를 열 때 “Trust(신뢰)” 설정을 해 프론트엔드 작업 화면을 띄운다.[^1]

이렇게 해서 백엔드(기존 창)와 프론트엔드(새 창)를 분리해, 요청/응답을 맞춰가며 작업할 준비를 갖춘다.[^1]

3.2 프론트엔드는 “index.html 하나”로 끝낸다: 리액트가 필요 없는 상황 정의[^2]

📸 1:24

화자는 프론트엔드를 구축할 때 “인덱스 HTML 가장 기본적인 걸로” 진행하겠다고 하며, 이 정도의 간단한 서비스 구현에는 리액트 같은 것이 “쓰잘데기 없다”, “쓸데없이 무거운 것 같다”는 판단을 제시한다.[^2]

다만 “복잡한 걸 만들려면 당연히 필요”하다고 전제하면서도, 본 실습 목표(간단한 서비스/연결 확인)에서는 HTML 파일 단 하나면 충분하다고 결론 내린다.[^2]

구체적으로는 다음 흐름으로 진행한다.[^2]

프론트엔드 파일은 index.html 하나만 만든다.[^2]
VS Code에서 ! + Tab(또는 Emmet)을 이용해 기본 HTML 템플릿을 자동완성한다.[^2]
페이지가 한국어 기반이므로 lang="ko"로 바꾸고[^2], 문서 제목(title)도 “운세 보는 책도지”로 수정한다.[^2]

[!IMPORTANT] 단일 HTML 접근의 전제
화자는 “간단한 서비스”를 만드는 상황에서는 프레임워크 도입이 오히려 느리고 무겁다고 보고, 연결 확인/데모 목적이면 index.html 단일 파일이 최적이라고 주장한다.[^2]

3.3 프론트에서 백엔드로 요청을 보내기: `<script>`와 `fetch()`를 사용한다[^2]

📸 1:24

기본 HTML을 만든 다음, “요청해서 응답을 받아오는 코드를 프론트엔드에 만들면” 된다고 말하며 네트워크 연결 로직 구현으로 넘어간다.[^2]

먼저 화면에 H1 태그를 하나 넣고(페이지에 제목/표시 요소), 자바스크립트를 작성하기 위해 <script> 태그 안에 코드를 넣을 수 있음을 상기시킨다.[^2]

그 다음, 프론트엔드에서 할 일은 다음이라고 정의한다.[^3]

fetch()로 백엔드에 요청을 날린다.[^3]
응답을 받아서 프론트엔드에 “뿌려주는” 흐름을 만든다.[^3]
이전 강의를 들은 사람에게는 익숙할 수 있으니, 다시 한 번 빠르게 보여주겠다고 한다.[^3]

3.4 fetch 코드는 어디서 가져오나: MDN/구글링 → 그리고 ChatGPT 활용 비교[^3]

📸 3:11

화자는 fetch 요청 문법은 ChatGPT에게 물어봐도 되고 구글링을 해도 된다고 말하며, 일단은 “이전처럼 구글링을 먼저” 빠르게 해본다.[^3]

“자바스크립트 fetch”를 검색하고 MDN 사이트 내용을 참고/복사하는 흐름을 보여준다.[^3]
그러면서 “이제는 이런 게 필요 없어질 수도 있을 것 같다”고 말해, 문서 검색 대신 AI가 대체할 가능성을 언급한다.[^3]
예전 강의 때는 이런 식(MDN 참고)으로 했는데, 이번에는 “ChatGPT를 둘 다 해보겠다”는 식으로 비교/병행한다.[^3]

이 과정에서 fetch 사용 예시 중 하나를 가져와 요청 형태를 구성한다.[^4] 그리고 이번에는 단순 GET보다 POST로 하겠다고 말한다.[^4]

[? 왜 POST로 하는가][^4]
[= 바디 값을 넘겨주는 것도 해야 하기 때문이다][^4]

또한 요청을 보낼 대상 URL을 “아까 로컬호스트” 주소로 잡고, 그 주소로 요청을 하겠다고 한다.[^4] (영상 맥락상 백엔드 서버가 로컬에서 돌고 있고, 그 엔드포인트로 프론트가 호출하는 구조다.)[^4]

그리고 프론트에서 POST로 보내려면 “뒤에 백엔드도 바꿔주긴 해야” 한다고 말해, 프론트의 메서드 변경에 맞춰 백엔드 라우트/메서드도 일치시켜야 함을 짚는다.[^4] 이때 데이터 포맷은 JSON으로 하고 바디 값을 넘기는 구조를 만든다.[^4]

3.5 “실전 꿀팁”: ChatGPT에 영어로 요청해 코드 생성 받기[^5]

📸 5:03

화자는 “ChatGPT가 얼마나 더 유용한가”를 보여주겠다며, 필요한 코드를 직접 생성해 보겠다고 한다.[^5] 그리고 프롬프트를 영어로 요청하면 더 잘 나온다며 이를 “실전 꿀팁”으로 공유한다.[^5]

요청 내용의 핵심은 다음과 같다.[^5]

자바스크립트 fetch를 이용한다.[^5]
특정 API 주소로 POST 요청을 날린다.[^5]
응답을 함수에서 await로 받아오고 싶다.[^5]

이후 ChatGPT가 제시한 코드 초안을 확인하며 “함수 이름까지 정해졌다”는 반응을 보이고, 이대로 하면 된다고 말한다.[^6]

또한 이 강의 자체가 “ChatGPT API를 활용한 강의”이므로, 구글링도 좋지만 여기서는 ChatGPT를 적극 활용하면 검색 없이 답을 빨리 찾을 수 있다고 강조한다.[^6]

[!TIP] 코드 생성 프롬프트 전략(화자의 방식)

요구사항(POST, 특정 URL, async/await, JSON 처리)을 문장으로 명확히 적는다.[^5]

가능하면 영어로 쓴다(더 잘 나온다는 경험칙 공유).[^5]

결과를 그대로 쓰지 말고, 맞는지 검증한다.[^7]

3.6 생성된 fetch 코드 붙여넣기 + “검증은 필요” + 구조 해설[^7]

📸 7:01

화자는 생성된 코드를 복사해 프론트엔드 index.html의 스크립트 영역에 붙여넣는다.[^7] 코드가 “굉장히 잘 짜졌다”며, try/catch로 에러까지 잡는 형태가 포함되어 있다는 점을 긍정적으로 본다.[^7]

하지만 동시에 다음을 명시한다.[^7]

[h 신뢰성은 다시 한번 봐야 한다]
[h 코드가 맞는지 확인/검증이 필요하다]

붙여넣은 코드의 구조가 “아까랑 똑같다”고 하며, 기본적으로는 POST로 보내고 응답을 처리하는 전형적인 흐름임을 설명한다.[^7] 또한 예시 코드에서 요청 바디에 어떤 값(예: name 등)을 담아 보내는 부분이 있는데, 여기서는 그 값을 다른 것으로 바꿔 보내면 된다는 식으로 “바디 값을 바꿔 끼우면 된다”고 말한다.[^7]

그리고 응답을 json()으로 받아와 출력(콘솔 출력)하는 지점까지 구현했다고 정리한다.[^7]

3.7 버튼으로 호출 트리거 만들기: “요청하기” 클릭 → 콘솔 확인[^8]

📸 7:45

이제 실제로 요청이 날아가도록, “버튼을 이용해서 요청하기”를 만들고 버튼의 onclick으로 함수(예: getFortune)를 실행하게 하겠다고 한다.[^8]

이렇게 하면 버튼 클릭 시 요청이 발생하고, 응답이 콘솔에 찍히는 것을 확인할 수 있다는 계획을 제시한다.[^8]

화자는 “코드가 간단할수록 문제가 없다”고 말하며, 지금처럼 단순한 형태로 연결 테스트를 진행하는 것이 안정적이라는 태도를 보인다.[^8]

또한 여기서 요청 메서드를 POST로 확정/정리하고, 응답을 JSON으로 받는 흐름에 맞게 코드를 조정한다.[^8] “응답을 JSON으로 받으니까 응답을 JSON으로 바꿔주겠다”는 말로, 백엔드의 응답 포맷과 프론트 파싱(response.json())이 맞아야 함을 맞춘다.[^8]

3.8 JSON 응답 파싱/출력 맞추기: `assistant` 필드로 포춘 내용 출력[^8]

📸 7:45

화자는 프론트에서 응답을 JSON으로 받는 흐름을 정리하면서, 응답 객체에서 “포춘의 내용”에 해당하는 값을 출력하도록 키를 조정한다.[^8] 영상 내에서는 예시로 JSON 내 assistant 같은 필드에서 값을 꺼내 출력하는 형태를 언급한다.[^8]

즉, 전체 구조는 다음처럼 맞춘다.[^8]

프론트: POST로 요청 전송
백엔드: JSON 형태로 응답 반환
프론트: response.json()으로 파싱 후, JSON 내부의 특정 키(예: assistant)를 콘솔에 출력

그리고 “요청을 POST로 이 주소로 받아서, JSON 응답으로 돌려주면 그걸 출력하는 코드”를 만들었다고 정리한다.[^8]

3.9 실행 환경 구성: 백엔드 실행 + 프론트는 Live Server로 띄우기[^9]

📸 9:24

이제 실제 실행 단계로 들어가 “백엔드를 다시 실행”하고 “프론트엔드도 실행”한다고 말한다.[^9]

프론트 실행을 쉽게 하려면 VS Code 확장에서 Live Server를 설치하면 좋다고 추천한다.[^9] Live Server를 설치하면 프론트엔드를 “내 컴퓨터에서 편하게” 띄울 수 있다고 설명한다.[^9]

설치 후 사용 방법은 두 가지를 제시한다.[^9]

index.html에서 우클릭 → Open with Live Server[^9]
또는 VS Code 아래쪽의 Go Live 버튼 클릭[^9]

이후 Open with Live Server로 프론트 서버를 띄우면 브라우저가 열리고 프론트 페이지가 동작한다.[^9] 화면에는 프론트 서버와, 별도로 실행 중인 백엔드 서버가 각각 존재하는 상태가 된다.[^9]

3.10 브라우저 개발자도구(F12)로 요청/응답 확인: “정상적으로 잘 왔다”[^10]

📸 10:23

화자는 브라우저에서 F12를 눌러 크롬 개발자 도구(콘솔)를 열고, 프론트엔드에서 백엔드로 요청을 날린 뒤 응답을 받아보겠다고 한다.[^10]

프론트엔드 페이지를 새로고침한다.[^10]
버튼을 눌러 요청을 날린다.[^10]
콘솔에서 응답이 찍히는지 확인한다.[^10]

결과적으로 “정상적으로 잘 왔다”, “어시스턴트로 답변이 왔다”고 말하며 프론트 → 백엔드 API 호출이 성공했음을 확인한다.[^10] 또한 “API 키는 계속 바꿔줄 건데”라는 언급으로, 키는 노출/테스트 과정에서 교체하며 운용할 것임을 덧붙인다.[^10]

응답 예시로는 “저는 사람들의 탄생과 별자리의 … 예측할 수 있습니다” 같은 문장이 출력되는데, 이는 “이게 업선(옵션?) 대답을 ChatGPT가 준 것”이라고 말하며, 모델이 생성한 응답이 그대로 반환된 형태임을 시사한다.[^10]

마지막으로 “프론트엔드도 기본 코드를 완성했고, 백엔드랑 연결까지 끝냈다”고 정리한다.[^10] 그리고 이제 남은 일은 “어떤 데이터를 보낼 건지”, “서버에서 어떻게 받아서 요청을 줄 건지”를 제대로 진행하면 된다고 다음 단계 과제를 제시하며 마무리한다.[^10]

4. 핵심 통찰[^1]

[c 가장 빠른 프론트-백 연결 검증은 ‘HTML 1장 + fetch + 콘솔 확인’로 가능하다] 백엔드가 준비되어 있으면, 프론트는 프레임워크 없이도 index.html 단일 파일로 요청/응답을 즉시 확인할 수 있다는 메시지다.[^2]
- 실행 행동: index.html에 버튼 + fetch() POST + response.json() + console.log()부터 만든다.[^8]
[h 프론트의 메서드/포맷 변경은 백엔드와 “반드시” 짝을 맞춰야 한다] POST로 바꾸면 백엔드도 POST로 받도록 맞춰야 하고, JSON으로 응답하면 프론트도 response.json()으로 파싱해야 한다는 식의 “계약(Contract)” 관점이 반복된다.[^4]
- 실행 행동: 엔드포인트 URL, HTTP 메서드, 요청 바디(JSON), 응답(JSON)의 키 이름까지 함께 정의한다.[^8]
[h ChatGPT는 코드 초안을 빠르게 만들지만, 검증은 개발자가 해야 한다] try/catch까지 포함된 코드가 잘 나와도 “맞는지 확인이 필요”하다고 분명히 선을 긋는다.[^7]
- 실행 행동: 생성 코드 적용 후 (1) 콘솔 에러 확인 (2) 네트워크 탭 확인 (3) 응답 JSON 구조 확인을 루틴으로 둔다.[^10]
[m 개발 환경 단순화가 속도를 만든다] VS Code 창을 프론트/백으로 분리하고 Live Server로 프론트를 띄우는 세팅은, 작은 실습에서 “왔다갔다”하며 빠르게 확인하기 위한 워크플로우다.[^1]
- 실행 행동: VS Code New Window로 프론트 폴더를 분리하고, Live Server 설치 후 Go Live로 즉시 테스트한다.[^9]

5. 헷갈리는 용어 정리 (해당 시에만)[^2]

프론트엔드(Frontend): 사용자가 보는 화면(웹 페이지)과 그 안에서 동작하는 자바스크립트 코드. 이 영상에서는 index.html 하나로 구성한다.[^2]
백엔드(Backend): 프론트에서 요청을 보내면 응답을 주는 서버. 로컬호스트 주소로 실행 중인 서버를 전제로 한다.[^4]
fetch: 브라우저 자바스크립트에서 HTTP 요청을 보내는 API. POST 요청/JSON 파싱에 사용한다.[^3]
POST: HTTP 메서드 중 하나. 요청 본문(body)에 데이터를 담아 서버로 보내기 위해 선택했다고 설명한다.[^4]
JSON: 데이터 교환 형식. 프론트는 response.json()으로 파싱하고, 백엔드는 JSON으로 응답하도록 맞춘다.[^8]
Live Server: VS Code 확장. 정적 HTML을 로컬에서 쉽게 띄워 테스트할 수 있게 해준다.[^9]
크롬 개발자도구(F12): 브라우저 콘솔/네트워크 등을 확인하는 도구. 요청/응답 결과 확인에 사용한다.[^10]

참고(콘텐츠 정보)[^1]

제목: 3-1. 프론트엔드 구축하여 백엔드 서버와 연결하기[^1]
채널: 조코딩 JoCoding[^1]
길이: 11분 32초[^1]
링크: https://www.youtube.com/watch?v=yhUbnp7jLek[^1]

[^1]: @[00:00] "이제 백엔드를 구축을 한 겁니다" ~ @[00:11] "프론트엔드를 이제 구축해서 연결하는 과정을 거쳐 보도록 하겠습니다" 및 영상 메타(제목/채널/길이/링크)
[^2]: @[01:24] "인덱스 점 html..." ~ @[02:28] "한국어 페이지... 랭귀지 ko... 타이틀도..."
[^3]: @[03:11] "패치라는 요청..." ~ @[03:59] "이제는 이런게 필요 없어질 수도..."
[^4]: @[04:20] "패치 요청을 포스트..." ~ @[04:53] "메소드는 포스트니까 뒤에 백엔드도 바꿔주긴 해야겠죠"
[^5]: @[05:03] "채취 pt가..." ~ @[05:17] "실전 꿀팁..." ~ @[05:58] "응답을 좀 어웨이스로 받아오고 싶어요"
[^6]: @[06:09] "이렇게 하면 된다고 합니다" ~ @[06:35] "그냥 채찍 PT api를 쓰시면 됩니다"
[^7]: @[07:01] "굉장히 잘 짜졌죠" ~ @[07:36] "오케이 당연히 검증은 필요합니다"
[^8]: @[07:45] "버튼을 이용해서 요청하기..." ~ @[09:16] "요청을 포스트로... 제이슨 응답으로 돌려주면..."
[^9]: @[09:24] "익스텐션에서 라이브 서버" ~ @[10:10] "오픈 위드 라이브 서버로..."
[^10]: @[10:23] "F12를 누르면..." ~ @[11:21] "나머지 어떤 데이터를 보낼 건지..."