[정리] Front_end & Back_end & Client_side & Server_side

웹 브라우저(Web browser)

: HTML문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용프로그램의 총칭. 

웹 브라우저가 하는 일 (0.1초동안)

월드 와이드 웹(World Wide Web, WWW)

: 인터넷에 연결된 컴퓨터를 이용해 사람들과 정보를 공유할 수 있는 거미줄처럼 얼기설기 엮인 공간을 의미하는 용어. 

: HTTP 프로토콜을기반으로  HTML로 작성된 하이퍼텍스트 페이지를 "웹 브라우저"라는 특정한 프로그램으로 읽을 수 있게 구성되어 있음. 

: "WWW", "W3" 또는 "웹(Web)"이라고 함.

: "인터넷"의 동의어로 오해받지만, "인터넷"은 TCP/IP 프로토콜로 구현된 통신망이고, "월드 와이드 웹"은 이 인터넷을 기반으로 대량의 이미지와 문서를 전송하는 프로토콜임.

 

HTML

: 웹 사이트(Website)의 모습을 기술하기 위한 마크업 언어.

 

웹 사이트(Website) 

: HTTP프로토콜을 써서 어떤 URL에서 받아오는 HTML로 쓰인 문서.

 

URL(Uniform Resource Locator)

: web address 

: 네트워크 상에 자원이 어디 있는지를 알려주기 위한 규약.

: 웹 페이지를 찾기 위한 주소.

: 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크 상의 자원을 모두 나타낼 수 있음.

: 지정한 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜로 접속해야 함.  

 

---

 

서버(Server)

: "인터넷"에 있는 컴퓨터.

: "인터넷"은 "수많은 서버의 모음".

 

클라이언트(Client)

: 서버와 통신할 수 있는 사용자 컴퓨터(노트북, 스마트폰, 태블릿 등)에서 실행되는 소프트웨어.

: 서버가 보내는 정보(HTML 및 CSS, 이미지, 동영상)를 해석하여 사용자가 이해할 수 있는 형식으로 표시 또는 입력(텍스트, 이미지, 동영상 등)을 조작 및 저장을 위해 서버로 보낼 수 있음.

 

Server_side VS Client_side

: 특정 작업이 발생하는 위치가 어디인지에 따라서 결정됨.

 

코딩 애플 (Next.jd 0강) 요즘 프론트엔드만으로 먹고살기 힘든 이유.

예시) 인스타그램의 이미지 필터 적용.

- 촬영한 이미지를 업로드하기전에 필터를 적용할 수 있음.

- 해당 기능은 애플리케이션 자체 내에서 수행됨.

- 즉, "Instagram 모바일 애플리케이션 개발자가 스마트폰에서 바로 이미지를 조작하는 코드를 작성했음"을 의미하고

- 이를 "Client_side"작업이라고 함. 

- 필터링을 위해 이미지를 서버에 전송하는 것은 "사용자가 애플리케션이 이미지를 서버에 업로드하는 시간을 기다려야함"을 의미하고 이는 필터의 기능을 사용하기 위해 보다 많은 시간을 사용해야 됨.

- 스마트 폰과 태블릿 및 노트북의 기능이 향상됨에 따라 Client_side 작업의 선호도가 높아짐.

 

그렇다면, Server_side 작업은 어떤 것이 있나?

대표적으로 "데이터 저장 및 검색과 관련된 작업"이 있음.

 

렌더링(Rendering)

: 사용자가 요청하는 관련 데이터를 가져와 브라우저가 표시 목적으로 이해하는 HTML 및 CSS와 결합하는 프로세스.

 

Server_side Rendering (서버 사이드 렌더링)

: 서버측 렌더링에서 데이터(텍스트, 이미지) 및 표시 규칙의 조합은 전적으로 서버측에서 수행됨.

: 개발자는 서버가 데이터베이스에서 데이터를 가져와 해당 데이터를 표시 규칙(HTML 및 CSS)와 병합하고 브라우저로 보내도록 지시하는 코드를 작성함.

 

JavaScript(자바스크립트)

: HTML과 CSS외에도 브라우저가 이해할 수 있는 또 다른 언어.

: HTML및 CSS를 조작하는데 사용됨.

: JS는 서버에서 새로운 HTML 및 CSS를 요청할 필요 없이 데이터를 숨기고 표시하는 역할을 함.

: Data Only는 data + html + css보다 가볍기 때문에 반응속도가 높음.

 

 

Client_side Rendering(클라이언트 사이드 렌더링)

: 렌더링(데이터를 HTML 및 CSS와 결합)이 JavaScript를 사용하여 브라우저(클라이언트 사이드)에서 수행됨.

 

---

Front_end VS Back_end

 

Front_end(프론트 엔드)

: 사용자 인터페이스 및 경험과 관련된 모든 것.

: 클라이언트 측에서 발생하는 모든 것을 프런트 엔드라고 칭함.

: 프론트 엔드 개발자는 사용자 인터페이스를 구축하기 위해 코드를 작성하는 개발자를 의미함.

 

프레임 워크(FrameWork)

: 소프트웨어 개발에서 프레임워크(또는 라이브러리)는 같은 종류의 것을 계속해서 쉽게 빌드할 수 있도록 미리 작성된 코드임.

 

프론트 엔드 프레임 워크(Front_end FrameWork)- React, Vue, Angular

: 서버 사이드 렌더링에 프론트엔드 코드 작성이 있음에도 불구하고 대다수의 사람들은 "프론트 엔드 프레임워크"를 "클라이언트 사이드 렌더링 프레임워크"로만 국한해서 생각함.

: 따라서 일반적으로 프론트 엔드 프레임워크는 클라이언트 사이드 렌더링(JS 사용)을 쉽고 빠르며 성능이 좋게 만드는 라이브러리를 의미함. 

 

Back_end(백 엔드)

: 사용자 인터페이스와 관련이 없는 서버 사이드에서 발생하는 모든 것.

: 데이터 저장, 검색 및 조작은 클라이언트 사이드에서도 발생할 수 있으나 이를 백엔드 작업이라고 칭하지 않음.

 

백 엔드 프레임 워크(Back_end FraemWork)- Rails, Django, Laravel, Express.js

: 일반적으로 백엔드 프레임 워크라고 칭하는 대부분의 프레임워크는 "범용 웹 프레임워크"임.

: HTML 및 CSS의 서버 사이드 렌더링을 수행하는데 사용할 수 있기 때문임.

---

 

Node.js : Server의 JavaScript  

: JS가 대중화되고 더 많은 개발자가 언어를 배우면서 JS가 브라우저가 아닌 다른 곳에서도 실행되도록 하기 위해 개발됨.

: 확장성 있는 네트워크 애플리케이션(특히 서버 사이드)개발에 사용되는 소프트웨어 플랫폼.

: Google의 V8 JS엔진을 기반으로 하는 서버 측 스크립팅 언어.

: 확장성이 뛰어난 단일 스레드 시스템.

    - 별도의 프로세스와 스레드 대신 비동기식 이벤트 기반 I/O작업을 사용함.

    - 따라서 단일 스레드 이벤트 루프와 논-블로킹 I/O를 통해 높은 출력을 얻을 수 있음.

        - 논-블로킹(non-blocking) 작업 : I/O(입출력) 작업이 완료될 때까지 기다리지 않음.

 

논-블로킹 I/O와 비동기 I/O의 차이

: 논-블로킹 I/O는 처리가 완료되지 않으면 에러를 회신하고, 블록 상태로 만들지 않음.

: 비동기 I/O는 처리를 바로할 수 없을 때, 처리가 완료되는 시점까지 백그라운드에서 대기하고 종료한 타이밍을 회신함.

 

 

Front-end vs Back-end vs Client-side vs Server-side

 

논-블로킹(non-blocking) I/O, 비동기(Asynchronous) I/O 차이 이해하기 - GRIP.News