프론트엔드의 시작

사용자가 링크를 타고 들어와서 첫눈에 보이는 화면에 담긴 것을 프론트엔드 개발의 영역입니다.

데이터보호등 보안상 복잡한 것들, 사용자가 눈으로 확인 안 되는 것이 흔히 백엔드 개발 영역입니다.

둘 다 같이 작업할 수 있으신 분은 풀스택 개발자라고 불리죠.

 

프론트엔드에서 사용한 3가지 큰 줄기부터 소개합니다.

 

1. HTML(Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

 

Hyper Text는 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미합니다.

 

2. CSS(Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

 

3. JS(JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

 

즉,

HTML은 웹페이지에서 나타나고자한 정보를 나열해주고,

CSS는 예쁘게 꾸며주는 역할을 맡고,

JS를 통해 버튼등 작동을 시켜줍니다.

 

 

웹앱의 작동원리

사용자가 브라우저(Chrome, Firefox, Edge...)에서 링크 주소를 통해 웹페이지를 열립니다.

흔히 본 링크 앞에 http:// 가 붙어 있죠. 사이트들이 통신 규약을 준수하기 때문입니다.

 

작동원리

1. 사이트 주소를 입력하고 해당 사이트의 서버로 최초 요청(Request)이 들어갑니다.

2. 이때, 서버가 HTML파일로 최초 응답(Response)을 줍니다. HTML를 통해 화면의 기본적인 구조도를 볼 수 있습니다.

3. 구조도에 맞게 추가적으로 작성된 기타 파일을 서버에게 추가 요청합니다.

4. 서버가 CSS, JS, JPG등 파일을 다시 응답합니다.

 

통신 프로토콜(Communication Protocal, 통신 규약)은 컴퓨터나 원거리 통신 장비 사이에서

메시지를 주고 받는 양식 및 규칙의 체계를 의미합니다.

대표적으로 HTTP, HTTPS, FTP, SSL등이 있습니다.

 

웹 사이트를 개발할 우리의 컴퓨터 환경을 로컬(Local) 개발 환경이라고 부르죠.

프로젝트가 사용자들이 접속할 수 있는 서버에 업로드해야 사용자들이 볼 수 있는 겁니다.

 

 

웹 표준과 브라우저

웹 표준(Web Standard)이란 웹에서 사용되는 표준 기술이나 규칙을 의미,

W3C의 표준화 제정 단계의 권고안(REC)에 해당하는 기술입니다.

 

W3C의 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가집니다.

1. 초안(Working Draft, WD)

2. 후보권고안(Candidate Recommendation, CR)

3. 제안권고안(Proposed Recommendation, PR)

4. 권고안(W3C Recommendation, REC)

 

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서,

동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법입니다.

 

사용자가 브라우저를 통해 화면을 접속합니다.

브라우저 제공사가 각기 다름으로,

개발자가 같은 화면을 개발하더라도,

브라우저마다 다르게 나타날 수 있습니다.

이게 크로스 브라우징 이슈(Issues)라고 불립니다.

 

요즘에는 브라우저에서도 많이 통일되서 이런 이슈들 많이 사라졌다고 합니다.

 

 

뷰포트(Viewport)

하나의 웹페이지가 출력된 전체의 영역입니다.

즉, 렌더링된 영역입니다. >> 개발자가 개발해야할 영역입니다.

 

렌더링(Rendering)이란 브라우저의 뷰포트에 웹사이트를 출력하는(그림 그려내는) 행위를 말합니다.