[혼공얄코] Chapter 02-5 웹이 보이는 곳과 보이지 않는 곳

사용자의 컴퓨터에서 작동하는 부분 프론트엔드

- 브라우저, 즉 클라이언트 컴퓨터에서 동작하는 부분

- HTML, CSS 로 이뤄지는 디자인 요소부터 이미지 슬라이드나 팝업, 스크롤 등 자바스크립트로 프로그래밍하는 부분을 전담

- 웹사이트에 필요한 데이터를 서버에 요청하고 반환된 정보를 활용해서 화면을 구성하고 사용자에게 보여주는 과정에 프론트엔드 개발자가 참여하는 것

 

서버에서 동작하는 부분 백엔드

- 백엔드 개발자 = 서버 개발자

- 브라우저가 요청하는 부분, 서버에서 작동하는 부분

- 브라우저가 수행하는 프론트엔드 부분을 제외한 웹사이트의 모든 기능은 바로 서버 단계인 백엔드에서 이뤄진다.

- 데이터 처리와 같은 눈에 직접 보이지 않는 웹사이트의 요소들을 수행

 

 

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

- 수월하게 개발할 수 있도록 도와주는 프로그램 제작키트

- 마트에서 구매할 수 있는 식재료 "라이브러리", 필요한 것만 담아 놓은 밀키트는 "프레임워크"

- 라이브러리 ('가져다 쓰는'): 특정 기능을 수행하는 소프트웨어 조각, 여러 프로그램에 들어갈 수 있는 부품

- 프레임워크 ('만들면'): 라이브러리와 자체 코드를 엮어 필요한 소스 코드를 추가하는 것만으로 원하는 프로그램을 개발할 수 있도록 만들어진 키트

 

소프트웨어끼리 소통하는 법 API (Application Programming Interface)

- 프론트엔드 개발자와 백엔드 개발자 사이에 마늗ㄹ어 합의된 API목록에 따라 프론트엔드 개발자는 요청을 보내고 응답으로 반환된 결과를 화면에 반영하는 기능을 다룸

- 백엔드 개발자는 요청된 작업을 수행하는 기능

 

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

- XML : HTML 처럼 마크업 언어, 가독성이 떨어지고 컴퓨터가 읽고 쓰는 속도가 느리다.

- JSON : XML 보다 구문이 간단하고 높은 가독성을 가지고 있다. 대괄호[]로 둘러싸인 배열과 중괄호 {}로 둘러싸인 또 다른 객체가 오는 식으로 정보가 작성됨

- YAML : 주로 프로그램 설정 파일과 같이 개발자가 편리하게 읽고 작성하기 위한 용도로 사용된다. 마크업 언어가 아님

- AJAX(Asynchronous Javascript And Xml) : 자바스크립트를 이용해 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능을 합니다. 

 

- DOM : HTML  문서가 실체화된 API, 나무 형태이기에 "톰 트리"라고 불림

 

 

 

확인문제

1. 다음 중 문장에 들어갈 알맞은 단어를 보기에서 찾아 써 보세요.

- 프론트엔드 개발자는 다른 말로 (프론트엔드) 개발자, 백엔드 개발자는 (서버) 개발자라고도 합니다.

- 웹사이트 화면에 애니메이션처럼 작동하는 작업은 (클라이언트)에서, 로그인한 사용자를 위해 세션을 설정하는 작업은 (백엔드)에서 진행합니다.

 

2. 다음 주 틀린 것을 고르세요

1 프레임워크에는 라이브러리가 포함될 수 없습니다.

 

3. 다음 중 나머지 넷과 성격이 다른 하나를 고르세요 3

 1. 스프링 2. 라라벨 3. REST API 4. 닷넷 5. 장고

 

4. 다음 문장 중 괄호 안에 알맞은 내용을 써 보세요.

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

 

5. 다음 중 틀린 것을 고르세요 3

1. 돔은 API 입니다.

2. 프레임워크는 프론트엔드와 백엔드 모두에서 사용될 수 있습니다.

3. YAML은 네트워크상의 주체 간 정보 전달을 목적으로 사용됩니다.  

4. AJAX의 등장은 프론트엔드와 백엔드의 분리에 기여했습니다.

5. 프론트엔드와 백엔드의 개념은 모바일에서도 적용될 수 있습니다.