[혼공단9기] 프론트엔드와 백엔드, 프레임워크 등 [chapter 03 기본 미션]

---

- 프론트엔드와 백엔드, 프레임워크 등 [chapter 03 기본 미션]

프론트엔드와 백엔드 구조 / 출처 : 혼공얄코

---

1. 프론트엔드 : 사용자의 컴퓨터에서 작동하는 영역

웹사이트 중 눈에 보이는 브라우저와 밀접한 부분을 개발
→ HTML과 CSS로 이뤄지는 디자인 요소부터 이미지 슬라이드나 팝업, 스크롤 등 이벤트 영역까지!

* 프론트엔드는 자바스크립트가 필수이며, 타입스크립트도 많이 사용한다.

프론트엔드는 브라우저, 즉 클라이언트 컴퓨터에서 작동하는 부분을 개발하기에 '클라이언트 개발자'라고도 불린다.

---

2. 백엔드 : 서버에서 작동하는 영역

브라우저에서 온 요청을 처리하는 서버에서의 로직을 개발
→ 데이터 통신, DB 반영 등 프론트엔드 부분을 제외한 웹사이트의 모든 기능은 서버 단계에서 처리된다.

* 백엔드는 서버에서 돌아가는 프로그램을 만드는 것이기에 자바, 파이썬, C#, 루비 등 다양한 언어를 사용할 수 있다.

백엔드는 프론트엔드를 제외한 서버 단계에서의 로직을 개발하기에 '서버 개발자'라고도 불린다.

---

3. 프레임워크 : 편리한 개발을 위한 프로그램 제작 키트

개발자들이 보다 수월하게 개발할 수 있도록 도와주는 프로그램 제작 키트

- 라이브러리 vs 프레임워크

- 라이브러리 : 특정 기능을 수행하는 소프트웨어의 조각이자 부품
- 프레임워크 : 라이브러리와 자체 코드를 엮어 원하는 프로그램을 개발할 수 있도록 만들어진 키트
→ 프로그램을 만들기 위해 '가져다 쓰면' 라이브러리, 무언가를 기반으로 그 위에서 '만들면' 프레임워크

대표적으로 '전자정부 프레임워크'은 한국에서 개발하기 편하도록 Spring, MyBatis, Log4j 등을 묶어놓았다.

---

4. API : 소프트웨어끼리 소통하는 법

API(Application Programming Interface) : 브라우저가 보낸 요청을 서버가 알아채기 위한 약속된 신호
→ 일반적으로 외부에서 만들어진 개발 코드들을 말한다. ex) 결제 API, 지도 API, 간편로그인 API 등

우리가 자주 사용하는 네이버지도, 카카오맵 또한 각 회사가 오픈소스로 공개한 오픈소스 API이다.

---

5. XML, JSON, YAML, AJAX : 컴퓨터에 정보를 전달하는 방법

1) XML

태그를 활용하여 복합적인 정보를 컴퓨터에 정확하게 전달 가능
→ 반복되는 텍스트가 많아 전체 길이가 길어진다는 단점이 있음

<?xml version="1.0" encoding="UTF-8"?>
<shop>
    <name>얄코치킨</name>
    <location>한빛시 얄코구 혼공로 열공길</location>
    <owner>
    	<name>김얄코</name>
        <phone>010-1234-1234</phone>
    </owner>
</shop>

---

2) JSON

XML보다 구문이 간단하고 높은 가독성을 가지고 있음
→ 문법 오류에 취약하며, XML과 다르게 주석을 달 수 없다는 단점을 갖고 있음

{
    "name": "얄코치킨",
    "location": "한빛시 얄코구 혼공로 열공길",
    "owner": {
    	"name": "김얄코",
        "phone": "010-1234-1234"
    }
}

// 이렇게도 표현이 가능하다.
{"name":"얄코치킨","location":"한빛시 얄코구 혼공로 열공길","owner":{"name": "김얄코","phone":"010-1234-1234"}}

---

3) YAML

YAML : YAML Ain't Markup Language
→ 프로그램 간 정보 전달 보다는 주로 프로그램 설정 파일을 작성하기 위한 용도로 사용

name: 얄코치킨
location: 한빛시 얄코구 혼공로 열공길
owner:
    name: 김얄코
    phone: 010-1234-1234

---

4)  AJAX

AJAX : Asynchoronous Javascript And Xml
→ 자바스크립트를 이용해 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능 (비동기 통신)

facebook의 '좋아요 기능'은 비동기 통신의 대표적인 예 중 하나이다.

---

6. 확인 문제 풀기

- 1번 문제

프론트엔드 개발자는 다른 말로 클라이언트 개발자, 백엔드 개발자는 서버 개발자라고도 합니다.
웹사이트 화면에 애니메이션처럼 작동하는 작업은 프론트엔드에서, 로그인한 사용자를 위해 세션을 설정하는 작업은 백엔드에서 진행합니다.

- 2번 문제

정답 : ①
프레임워크는 라이브러리와 자체 코드를 엮어 원하는 프로그램을 개발할 수 있도록 만들어진 키트이다.

- 3번 문제

정답 : ③
REST API는 API, 스프링, 라라벨, 닷넷, 장고는 모두 프레임워크이다.

- 4번 문제

JSON은 XML과 비교할 때 간결하고 가독성이 좋은 대신 주석을 달 수 없다는 단점이 있습니다.

- 5번 문제

정답 : ③
YAML은 주로 프로그램 설정 파일을 작성하기 위한 용도로 사용됩니다.

---