프론트엔드와 백엔드

얻어갈 것

• 프론트엔드, 백엔드, 데이터베이스, 클라우드의 역할을 구분합니다.
• 사용자의 행동이 화면에서 서버와 저장소까지 어떻게 이어지는지 감을 잡습니다.

큰 그림

앞 레슨에서 웹은 브라우저가 서버를 찾고, 요청을 보내고, 응답을 받아 화면을 만드는 흐름이라고 봤습니다. 이번에는 그 흐름을 역할로 나눠봅니다.

• 프론트엔드: 브라우저 영역, 즉 사용자가 접하게 되는 쪽
• 백엔드: 요청을 받고, 검증하고, 저장소와 연결되는 쪽

확대

프론트엔드

• 브라우저에서 사용자가 보는 화면, 버튼, 입력창, 클릭 반응을 맡습니다.
• 백엔드에 요청을 보내고, 받은 결과를 다시 화면에 표시합니다.
• 테트리스 예시에서는 게임 화면, 키보드 입력, 점수 표시가 프론트엔드 쪽입니다.

백엔드

• 사용자가 직접 보지 못하는 계산, 검증, 권한 확인을 맡습니다.
• 데이터베이스나 파일 스토리지에서 필요한 것을 꺼내고 다시 저장합니다.
• 테트리스에 공동 랭킹, 로그인, 저장 기능이 붙으면 백엔드 역할이 커집니다.

데이터베이스와 파일 스토리지

• 데이터베이스는 회원, 게시글, 점수처럼 검색하고 수정해야 하는 정보를 맡습니다.
• 파일 스토리지는 이미지, 영상, 첨부파일처럼 덩치 큰 파일을 맡습니다.
• 뒤의 데이터베이스 레슨에서 이 둘의 차이를 더 자세히 봅니다.

클라우드

• 내 노트북을 끄면 앱도 멈추기 때문에, 실제 서비스는 항상 켜진 컴퓨터에 올려야 합니다.
• 클라우드는 기본적으로 컴퓨팅 리소스를 제공하고, 데이터베이스 같은 여러 서비스도 쉽게 가져다 쓸 수 있게 해줍니다.
• Vercel은 프론트엔드 서비스를 빠르게 배포해 보기 좋은 클라우드 서비스입니다.
• AWS, Google Cloud, Azure 같은 큰 클라우드는 더 많은 서비스를 제공하며, 실제로 많은 기업이 쓰고 있습니다.

AI에게 시켜볼 일

• 아래 P1 프롬프트로 내 아이디어를 프론트엔드, 백엔드, 데이터베이스, 클라우드로 나눠 보게 합니다.

내가 만들려는 건 "OOO 같은 서비스"야.
이걸 프론트엔드 / 백엔드 / 데이터베이스 / 클라우드로 나눠서,
각 부분이 무슨 일을 하는지 비개발자도 알아듣게 설명해줘.
그리고 처음 만들 때 어떤 도구로 시작하면 좋을지도 한 줄씩 추천해줘.

마무리

• 프론트엔드는 브라우저에서 사용자가 만지는 쪽, 백엔드는 요청을 받아 보이지 않는 일을 처리하는 쪽입니다.
• 데이터베이스와 파일 스토리지는 백엔드가 데이터를 맡길 곳이고, 클라우드는 전체 시스템이 돌아가는 장소입니다.
• 다음 레슨에서는 프론트엔드와 백엔드가 데이터를 주고받는 통로인 API를 봅니다.