프론트엔드 및 백엔드

어휘

학습자가 URL의 숫자를 변경합니다

course 페이지가 /students/42/courses을 요청합니다. 방문자가 42을 43로 변경합니다. 화면에서 해당 링크를 숨겨도 요청은 방지되지 않습니다.
프론트엔드는 인터페이스를 표시합니다. 백엔드는 서버에서 실행되어 응답을 보내기 전에 요청을 처리합니다.

API는 소프트웨어间 통신 방식을 정의합니다. 계약서는 메소드, 경로, 입력, 허용된 호출자, 응답 필드 및 실패 동작을 명시합니다.
학생 전용 커스 목록의 경우, 서버는 호출자를 식별하고 권한을 확인해야 합니다. 브라우저에서 제공되는 숫자만으로는 신원 증명으로 볼 수 없습니다.

연습

브라우저가 학생 43 목록을 요청합니다. 호출자가 이 목록을 읽을 수 있음을 증명하는 것은 무엇입니까?

난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스

JSON은 객체, 배열, 문자열, 숫자, 부울 값 및 null을 표현할 수 있습니다. 웹 API에서 일반적으로 사용되지만 모든 응답이 이를 사용하는 것은 아닙니다.
성공적인 목록은 [{"course_id":7,"title":"Robotics"}]일 수 있습니다. 비허용된 빈 목록은 []일 수 있으며, 어느 결과도 브라우저로 하여금 코드를 실행하게 하지는 않습니다.

연습

[{"course_id":7,"title":"Robotics"}]가 나타내는 일반적인 데이터 형식은 무엇입니까?

난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스

브라우저 검증은 빠른 피드백을 제공하지만, 서버는 독립적으로 입력과 권한을 확인해야 합니다. 호출자는 폼을 사용하지 않고도 요청을 보낼 수 있습니다.
데이터베이스 비밀번호와 비공개 API 자격증명(Secret)은 서버에 보관하십시오. 사용자가 브라우저에 로그인 비밀번호를 입력할 수 있으므로, 안전하게 전송하고 다운로드 가능한 코드에 비공개 서비스 자격증명을 절대 내장하지 마십시오.

연습

앱에서 사용하는 사설 데이터베이스 비밀번호는 어디에 보관해야 합니까?

난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스

연습

폼이 입력 내용을 검증하더라도 서버는 독립적인 입력 검증이 필요합니다.

난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스

연습

브라우저 검증이 서버 확인을 대체할 수 없는 이유를 설명하십시오.

난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스

요청이 대기 중일 때는 로딩 상태를 표시하십시오. 성공 후에는 반환된 커스 목록이나 빈 목록 메시지를 표시하십시오.
요청 실패 시 유용한 상태 정보를 제공해야 합니다. 네트워크 오류를 “교과 과정 없음”으로 표시하지 마십시오. 서버가 빈 결과를 확인하지 않았기 때문입니다.

연습

각 결과를 정직한 표시와 매칭하십시오.

난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스

매치 하나를 선택한 후 목적지를 지정하세요. 매치를 두 개 선택하여 교체할 수 있습니다. Esc 키를 누르면 선택이 취소됩니다. 매치를 드래그하여 이동할 수도 있습니다.

Loading

No courses yet

Could not load courses

추적: 브라우저 요청 → 서버 입력 및 권한 검사 → 허용된 데이터 조회 → 응답 → 브라우저 표시. 필수 검사가 실패하면 조회를 중단하십시오.
로컬 피스처를 사용하여 허용된 호출자, 거절된 호출자, 빈 결과 및 요청 실패를 테스트하십시오. 다른 학생의 데이터를 노출하여 접근을 테스트하지 마십시오.

Key idea

브라우저는 사용자를 돕고, 서버는 규칙을 강제합니다. 신원, 권한, 유효한 입력, 성공적 조회는 독립적인 검사입니다.

연습

이 성공적인 허용된 조회를 순서대로 나열하십시오.

난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스