Notice
Recent Posts
Recent Comments
Link
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

Spring & Java

[1주차] [3일차] api 트러블 슈팅 및 나만의 퀴즈 만들고 해석하고 풀기 본문

HTML & 웹페이지

[1주차] [3일차] api 트러블 슈팅 및 나만의 퀴즈 만들고 해석하고 풀기

dev.hyuck 2025. 11. 26. 19:47

트러블 슈팅 

● 맛집 api 과제


맛집 api  프로젝트를 만드는 과정은 생각보다 난이도가 높지 않아 좋았습니다. 코드 흐름에 따른 이해도를 올리는데 꼭 필요한 과정 중 하나 였습니다. 프론트 관련 api를 따라 백엔드는 데이터 값을 받고 처리 해주면 된다는 사실을 매우 빠르게 습득하는 유익한 시간이였습니다. 하지만, 이정도의 기술 능력은 한계점이 있을수 있다는 생각을 했습니다. 프론트에서 보내는 정보를 어떻게 받아 처리하고 그 과정에서 에러가 발생 했다면 어떻게 디버깅 하여 응답 하는게 맞는지 강의 중 배우는게 없어 문제를 직면 한다면 해결하기 힘들어 보입니다. 기초적인 디버깅 하는 법을 알면 코드 만지는데 더 용이 할 것 같습니다.

 

🏁 챕터 1. HTML 기초 구조 (기초 10문항)

1️⃣ HTML이란 무엇의 약자인가? ★

- Hyper text Markup Languaged


2️⃣ HTML의 역할은 무엇인가? ★

- 웹페이지의 구조를 만드는 역할을 한다. 뼈대 구조 


3️⃣ <head> 태그 안에 주로 들어가는 정보 3가지를 말해보세요. ★ ★

- <title>, <meta>, <link>


4️⃣ <body> 태그는 어떤 역할을 하는가? ★

- 실제 화면에 표시 되는거 ( 글, 이미지, 버튼, 폼 등)


5️⃣ <h1> ~ <h6> 태그의 차이점은? ★

- 제목 크기를 조절하는 차이 1이 가장 크고 > 6이 가장 작음


6️⃣ <a> 태그의 href 속성은 무엇을 의미하나?  ★

-  다른 페이지나 사이트로 이동 할 수 있는 경로를 만드는것


7️⃣ <img> 태그에서 alt 속성은 왜 중요한가?  ★

-  이미지가 안뜰때 대체해서 보여주는 문구를 표시하기 위해 사용 됨


8️⃣ <ul>과 <ol>의 차이점을 설명하시오. ★

ui = 순서 없는 목록 , oi = 순서 있는 목록


9️⃣ <div>와 <span>의 차이점은 무엇인가? ★

div = 큰 상자 역할을 함. sapn = 작은 문장 안의 구간


🔟 백엔드 개발자 입장에서 <form> 태그가 중요한 이유는? ★ ★ ★ ★ ★ ★

- form은 데이터를 서버 측으로 넘겨주는 역할을 한다. 

( 로그인, 회원가입에서 입력한 데이터를 백엔드로 전송함 )

🧩 챕터 2. 브라우저와 서버의 관계 (논리 이해 10문항) 중요 표시 ★

11️⃣ 브라우저는 HTML 파일을 받으면 어떻게 처리하나요? ★ ★ ★ ★ ★ ★

- 이 문제는 중요한 문제라서 꼭 암기 하자. 알아야 할수 있다.

브라우저 > HTML을 읽음 > DOM 트리 구조로 바꿔서 화면을 그린다.


12️⃣ 서버가 HTML을 클라이언트에 전달할 때 사용하는 프로토콜은? ★ ★ ★

HTTP


13️⃣ HTTP란 무엇의 약자이며 어떤 역할을 하나요? ★ ★ ★

Haper text transfer protocol

- HTTP : 웹 문서를 주고 받는 방법 


14️⃣ 클라이언트(Client)와 서버(Server)의 차이를 간단히 설명하세요.★ ★ ★  

- 클라이언트 ( 고객 ) 요청 (Request) > 서버는 응답(Respones) 한다.


15️⃣ 백엔드가 없을 때 HTML 페이지는 데이터를 어떻게 처리하나요? ★ ★ ★

- 임시 서버에 응답을 하고 새로고침을 하면 모든 값이 초기화 처리 합니다.

결과 : 데이터 값을 저장 하거나 불러오지 못한다.


16️⃣ 정적 페이지(Static Page)와 동적 페이지(Dynamic Page)의 차이는? ★ ★ ★ ★

정적 페이지 : 항상 같은 내용을 표출

동적 페이지 : 백엔드에서 매번 새로운 페이지 만들어준다.


17️⃣ 서버에서 HTML을 직접 렌더링하는 방식을 무엇이라고 하나요? (힌트: SSR) ★ ★

server - side - rendering : 서버가 HTML을 만들어서 브라우저로 보내는 방식


18️⃣ 백엔드 서버가 HTML 대신 JSON을 보내는 이유는? ★ ★ ★

-  프론트가 더 자유롭게 데이터 가공이 가능하기 때문 


19️⃣ 브라우저 개발자 도구의 "Network 탭"은 어떤 용도로 쓰이나요? ★ ★ ★ ★ ★

-  눈으로 확인하는 도구

> 백엔드가 데이터를 제대로 보냈나? 확인 하는 도구


20️⃣ 브라우저가 HTML 외에 CSS, JS도 요청하는 과정을 뭐라고 부르나요? ★ ★

- FETCHING 

>  HTML을 받으면 브라우저는 CSS, JS 등 다른 파일들도 요청(fetching) 한다.

🌐 챕터 3. HTTP 요청과 응답 (백엔드 핵심 10문항)

21️⃣ HTTP 요청(Request)의 구성 요소 3가지를 말해보세요. ★ ★ ★ ★ ★

- 요청 (1) 요청 라인 (Method, URL) (2) 헤더 (3) 바디


22️⃣ HTTP 응답(Response)의 구성 요소 3가지를 말해보세요. ★ ★ ★ ★ ★

- 응답 (1) 상태라인 (Status) (2) 헤더 (3) 바디


23️⃣ GET과 POST 메서드의 가장 큰 차이는? ★ ★ ★ ★ ★ ★

- GET은 데이터 가져오기  POST는 새 데이터 보내기


24️⃣ PUT과 PATCH의 차이를 설명해보세요. ★ ★ ★ ★ ★ ★

- PUT: 유저 전체 정보를 바꿈  PATCH : 전화번호만 바꾸는 방식


25️⃣ DELETE 요청은 언제 사용하나요? ★ ★ ★

- 서버에 저장된 데이터를 지울 때


26️⃣ 200 OK는 어떤 상황에서 나오는 응답인가요? ★ ★ ★ ★

- 요청이 잘 됐다는 응답


27️⃣ 404 Not Found는 어떤 오류를 의미하나요? ★ ★ ★ ★ ★

- 서버가 요청한 리소스를 못 찾을때


28️⃣ 500 Internal Server Error는 주로 어디에서 발생하나요? ★ ★ ★ ★ ★

- 서버 코드에 버그가 있을 때


29️⃣ 백엔드에서 Content-Type 헤더는 왜 중요한가요? ★ ★ ★ ★ ★

Content-Type은 서버가 보내는 데이터의 형식 (JSON, HTML 등) 알려주는 헤더 

> 데이터가 무슨 형식으로 되어 있는지 알아 볼수 있어야 된다.


30️⃣ JSON 형식의 Content-Type은 무엇인가요? ★ ★ ★ ★ ★

JSON Content- Type : application/json 형식으로 전달 된다.

⚙️ 챕터 4. API 개념과 REST 구조 (중급 논리 10문항)

31️⃣ API는 무엇의 약자이며 어떤 역할을 하나요? ★ ★ ★

- AppProgramingIterface 

- 두 프로그램이 서로 대화하는 규칙 


32️⃣ REST API의 “REST”는 무엇을 의미하나요? ★ ★ ★

- REST = Representational State Transfer

- HTTP를 이용해 자원을 표현하고 조작하는 방식 

 

33️⃣ RESTful API의 가장 큰 특징은 무엇인가요? ★ ★ ★ ★

RESTful API는 규칙을 잘 지킨 API라고 보면 된다.


34️⃣ “리소스(Resource)”란 무엇인가요? ★ ★ ★ ★

리소스(Resource) 는 서버가 다루는 데이터 덩어리 ( 예: 사용자, 게시글 )

 

35️⃣ REST API 설계 시 URL은 어떤 규칙으로 작성해야 할까요?

REST URL 규칙 -> 명사형, 복수형, 소문자


36️⃣ /users/1 이라는 엔드포인트는 어떤 의미일까요? ★ ★ ★ ★

> /users/1 user의 사용자 데이터 id 1번을 조회 한다.

> 1번 사용자 리소스를 의미함


37️⃣ HTTP 메서드 GET, POST, PUT, DELETE를 각각 언제 쓰나요? ★ ★ ★ ★

POST : 생성

GET : 조회

PUT : 수정

DELETE : 삭제 


38️⃣ 백엔드가 GET /users 요청을 받았을 때 보통 어떤 데이터를 반환하나요? ★ ★ ★ ★ ★

user안에 있는 데이터를 JSON 형식으로 반환 한다.


39️⃣ API에서 “상태 코드(Status Code)”는 왜 중요할까요?

개발자끼리 알아 듣는 약속이 필요 합니다. 

 

40️⃣ REST API의 응답 형식으로 주로 사용되는 데이터 포맷은?

대부분 REST API 응답 형식은 JSON으로 사용 한다

🧠 챕터 5. 프론트와 백의 연결 (실전 응용 10문항)

41️⃣ HTML에서 <form>을 이용해 서버에 데이터를 보낼 때 어떤 방식(method)이 쓰이나요? ★ ★ ★ ★ ★

POST


42️⃣ 자바스크립트의 fetch() 함수는 어떤 역할을 하나요? ★ ★ ★ ★ ★

fetch() 는 JS로 HTTP 요청을 보내는 함수


43️⃣ fetch('/api/users')가 백엔드로 보내는 기본 HTTP 메서드는 무엇인가요? ★ ★ ★ ★ ★

- GET


44️⃣ API 응답을 자바스크립트로 받기 위해 어떤 메서드를 사용하나요? (response.???()) ★ ★ ★ ★ ★

- 응답을 JSON으로 바꿀 때는 response.json()을 사용한다.


45️⃣ 브라우저가 CORS 에러를 출력할 때, 어떤 문제를 의미하나요? ★ ★ ★ ★ ★ ★ ★

CORS 에러는 다른 도메인 간 요청이 차단 됐을때 발생 하는데 이럴 경우 백엔드에서 허용 설정을 해줘야 된다. 


46️⃣ API 응답이 JSON 형식일 때 브라우저가 이해할 수 있는 이유는? ★ ★ ★ ★ ★

JSON은 문자열이지만 JS 객체로 바꿀 수 있어서 브라우저가 쉽게 다룰수 있음


47️⃣ 백엔드에서 JSON을 반환할 때 가장 중요한 헤더는 무엇인가요? ★ ★ ★ ★ ★

- application.json

 

48️⃣ async/await를 사용하는 이유는? ★ ★ ★ ★ ★ ★

async/await는 비동기 코드를 순서대로 처리하기 위해 쓴다.
> " 데이터가 올 때 까지 기다렸다 실행해줘 " 라는 뜻이다.


49️⃣ API 호출 후 성공/실패 여부를 판단하는 가장 기본적인 방법은? ★ ★ ★ ★ ★

상태 코드를 확인 하는것.


50️⃣ 프론트엔드에서 API를 잘못 호출했을 때, 백엔드 로그에서는 어떤 정보로 원인을 추적할 수 있나요?

요청 주소,  메서드, 상태 코드, 예외 메세지로 문제 원인을 추적 한다.

 

< 반복 연습 > 

 

 

  • HTML은 웹의 __________를 정의하는 언어이다.
  • 웹페이지의 제목을 설정하는 태그는 __________이다. <h>
  • HTML 문서의 시작 부분에는 반드시 ____head, body______ 선언이 들어간다. 
  • 웹페이지의 문자 인코딩을 설정하는 태그는 __________이다.
  • 브라우저 화면에 실제로 표시되는 부분은 __________ 태그 안에 있다.
  • <a> 태그는 __________를 연결할 때 사용된다.
  • <img> 태그에서 이미지를 불러오지 못할 때 대신 표시되는 속성은 __________이다.
  • <ul>과 <ol>은 모두 __________을 만들 때 사용된다.
  • <div> 태그는 __________ 단위의 영역을 만든다.
  • <span> 태그는 __________ 단위의 영역을 만든다.
  • 웹 브라우저가 서버에 요청을 보낼 때 사용하는 규약은 __________이다.
  • 클라이언트는 서버에 요청을 보내고, 서버는 __________를 반환한다.
  • 웹에서 서버의 주소를 나타내는 형식은 __________이다.
  • 정적 페이지는 항상  동일한 내용을 보여준다.
  • 동적 페이지는 서버가 요청마다 요청한 결과를 만들어낸다.
  • 클라이언트와 서버는 요청(Request)과 __________로 통신한다.
  • HTML, CSS, JS 파일을 내려주는 서버를 __________ 서버라고 한다.
  • 데이터를 주고받는 API 서버는 __________ 서버라고 한다.
  • 웹 브라우저의 개발자 도구(Network 탭)는 __________을 확인할 때 사용된다.
  • 서버에서 HTML 대신 JSON을 보내는 이유는 __________ 때문이다.
  • HTTP 요청의 기본 구성 요소는 요청라인, __________, 바디이다.
  • HTTP 응답의 기본 구성 요소는 상태라인, __________, 바디이다.
  • GET 요청은 데이터를 __________할 때 사용된다.
  • POST 요청은 데이터를 __________할 때 사용된다.
  • PUT 요청은 기존 데이터를 __________할 때 사용된다.
  • DELETE 요청은 데이터를 __________할 때 사용된다.
  • 200 OK는 요청이 __________ 처리되었다는 의미이다.
  • 404 Not Found는 요청한 자원이 __________다는 뜻이다.
  • 500 Internal Server Error는 __________ 내부에서 발생한 오류이다.
  • JSON 형식의 데이터를 전송할 때 Content-Type은 __________이다.
  • API는 __________의 약자이다.
  • API는 프로그램과 프로그램이 __________하도록 도와주는 인터페이스이다.
  • REST는 __________의 약자이다.
  • RESTful API의 핵심은 자원을 __________으로 구분하는 것이다.
  • REST API의 주소는 일반적으로 __________형 명사를 사용한다.
  • /users/3 이라는 주소는 __________을 의미한다.
  • GET /users 요청은 사용자 목록을 __________한다.
  • POST /users 요청은 새로운 사용자를 __________한다.
  • DELETE /users/1 요청은 id가 1인 사용자를 __________한다.
  • API에서 상태 코드는 요청 결과의 __________을 알려준다.
  • HTML의 <form> 태그는 서버에 데이터를 __________할 때 사용된다.
  • 자바스크립트에서 API를 호출할 때 사용하는 기본 함수는 __________이다.
  • fetch()의 기본 HTTP 메서드는 __________이다.
  • API 응답을 JSON 객체로 변환할 때 사용하는 함수는 __________이다.
  • CORS 에러는 __________ 도메인 간 요청이 허용되지 않을 때 발생한다.
  • 브라우저가 JSON 데이터를 읽을 수 있는 이유는 JSON이 __________로 구성되어 있기 때문이다.
  • 백엔드가 JSON 데이터를 반환할 때 꼭 포함해야 하는 헤더는 __________이다.
  • 비동기 코드를 순서대로 실행하기 위해 JS에서 사용하는 키워드는 __________이다.
  • API 요청의 성공 여부를 확인할 때 사용하는 속성은 __________ 또는 status 코드이다.
  • 프론트엔드 요청이 실패했을 때 백엔드 로그에서는 __________, 메서드, 상태 코드로 문제를 추적할 수 있다.

 

'HTML & 웹페이지' 카테고리의 다른 글

[1주차] [4일차] 나만의 퀴즈 만들고 해석하고 풀기  (0) 2025.11.27
[1주차] [2일차] 나만의 스토리 설계 웹 페이지 설계 (3)  (0) 2025.11.25
[1주차] [1일차] 나만의 스토리 설계 웹 페이지 설계 (2)  (0) 2025.11.24
[1주차] [1일차] 나만의 스토리 설계 웹 페이지 설계 (1)  (0) 2025.11.24
'HTML & 웹페이지' Related Articles more