프론트엔드의 개요

프론트엔드란?

 웹사이트나 웹 애플리케이션에서 사용자가 보고 상호작용하는 부분을 말합니다. 예를 들어, 웹사이트의 레이아웃, 폰트, 색상, 버튼, 메뉴 등이 프론트엔드에 해당합니다. 프론트엔드 개발자는 이러한 요소들을 구현하고, 사용자에게 친숙하고 편리한 화면을 제공합니다. 

 

프론트엔드 vs 백엔드

프론트엔드는 사용자가 보고 상호작용하는 부분을 말하며, HTML, CSS, 자바스크립트 등의 언어를 사용합니다.

백엔드는 사용자가 보지 못하는 부분으로, 서버와 데이터베이스를 관리하며, 사용자의 요청을 처리합니다. 백엔드에서는 Ruby, Java, Python 등의 언어를 사용합니다. 

 

웹&앱의 동작 방식

 

•  웹의 동작 방식
    - 사용자 컴퓨터(브라우저)에서 주소창에 페이지 주소를 입력하면, 브라우저는 DNS 서버에게 해당 주소의 IP 주소를 요청합니다. IP 주소는 인터넷 상의 컴퓨터의 고유한 식별자입니다¹
    - DNS 서버는 주소와 IP 주소의 매핑 정보를 가지고 있으므로, 브라우저에게 IP 주소를 알려줍니다
    - 브라우저는 IP 주소를 가진 웹 서버에게 HTTP 요청 메시지를 보냅니다. HTTP 요청 메시지는 브라우저가 어떤 페이지나 자원을 원하는지, 어떤 브라우저를 사용하는지, 어떤 언어를 선호하는지 등의 정보를 담고 있습니다
    - 웹 서버는 HTTP 요청 메시지를 받아서 처리하고, HTTP 응답 메시지를 보냅니다. HTTP 응답 메시지는 요청이 성공했는지 실패했는지, 어떤 페이지나 자원을 보내주는지, 어떤 형식인지 등의 정보를 담고 있습니다
    - HTTP 응답 메시지에는 HTML, CSS, JavaScript 등의 코드 파일과 이미지, 음악, 비디오 등의 자원 파일이 포함되거나 참조될 수 있습니다
    - 브라우저는 HTTP 응답 메시지를 받아서 해석하고, 필요한 파일들을 추가로 요청하거나 다운로드합니다
    - 브라우저는 받은 파일들을 기반으로 웹 페이지나 웹 애플리케이션의 내용과 디자인을 구성하고, 사용자에게 보여줍니다
    - 사용자는 웹 페이지나 웹 애플리케이션에서 텍스트, 이미지, 비디오, 링크 등을 볼 수 있으며, 스크롤, 확대/축소, 클릭, 드래그 등의 동작을 할 수 있습니다

 

• 앱의 동작 방식
    - 사용자 컴퓨터(운영체제)에서 앱 아이콘을 클릭하면, 운영체제는 앱을 실행합니다. 앱은 운영체제가 제공하는 API(Application Programming Interface)를 통해 다른 서버나 기기와 통신하거나 기능을 수행할 수 있습니다
    - 앱은 인터넷 연결이 필요한 경우에만 서버와 통신합니다. 서버와 통신할 때에도 HTTP 프로토콜 외에도 다른 프로토콜을 사용할 수 있습니다
    - 앱은 서버로부터 데이터나 자원을 받아서 저장하거나 처리합니다. 앱은 자체적으로 UI(User Interface)와 UX(User Experience)를 구현하고, 사용자에게 보여줍니다
    - 사용자는 앱에서 다양한 기능과 서비스를 이용할 수 있으며, 터치, 스와이프, 흔들기 등의 동작을 할 수 있습니다
  
  

웹표준

 

웹표준이란 웹에서 사용되는 기술이나 규칙을 표준화한 것을 말합니다. 

웹표준을 따르면 웹사이트나 웹 애플리케이션을 다양한 브라우저나 기기에서 동일하게 보여주고, 접근성과 호환성을 높일 수 있습니다.

 웹표준은 W3C라는 표준화 단체가 권고한 표준안에 따라 HTML, CSS, JavaScript 등의 언어를 사용하여 웹사이트를 작성하는 방법을 정의하고 있습니다.

• 크로스 브라우징 

: 조금은 다르게 구동되는 여러 브라우저에서(크롬, 사파리, 파이어폭스, 엣지등...) 동일한 사용자 경험(같은화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 방법

 

• 브라우저의 인터페이스

- 창(window): 브라우저가 실행되는 화면을 말합니다. 하나의 브라우저에서 여러 개의 창을 열 수 있습니다.
- 탭(tab): 하나의 창에서 여러 개의 웹 페이지를 동시에 열 수 있도록 해주는 요소입니다. 탭 표시줄에서 탭을 추가, 삭제, 이동, 전환할 수 있습니다.
- 주소(address): 웹 페이지의 위치를 나타내는 문자열입니다. 주소 표시줄에서 주소를 입력하거나 수정할 수 있습니다. 주소 표시줄은 검색창으로도 사용할 수 있습니다.
- 뷰(view): 웹 페이지의 내용을 보여주는 영역입니다. 뷰에서는 웹 페이지의 텍스트, 이미지, 비디오, 링크 등을 볼 수 있습니다. 뷰에서는 스크롤, 확대/축소, 드래그 앤 드롭 등의 동작을 할 수 있습니다.