웹 프론트엔드란?

웹 프론트엔드를 위한 3가지 언어

• HTML : 웹페이지의 내용 및 구조
• CSS : 웹페이지의 스타일
• JavaScript : 웹페이지의 로직

#위 세 언어는 모든 웹브라우저에서 거의 유사하게 동작함.

 

 

CSS / JS 파일을 별도 파일로 분리하는 이유

1. HTML 응답 body 크기를 줄일 수 있다.
2. 여러번 새로고침하더라도, 브라우저 캐싱기능을 통해 같은 파일을 서버로부터 다시 읽어들이지 않는다
3. 웹페이지의 응답성을 높여줄 수 있다.

 

CSS 소스코드

• 처음에는 직접 CSS 날코딩을 하는게 좋음
• 추후에는 성향에 따라 Sass, Less 사용을 검토해봄 #sass, lass 문법으로 작성된 코드를 빌드하여, css 파일을 만들어냄

 

JavaScript

• 처음에는 직접 JavaScript 날코딩을 하는게 좋음
• 추후에는 성향에 따라 TypeScript 사용을 검토해봄 # TypeScript 문법으로 작성되는 코드를 빌드하여, javascript 파일을 만들어냄

 

웹 프론트엔드와 백엔드

• 웹 개발은 크게 프론트와 백엔드로 나누어진다. 그 중 장고는 백엔드에 초점이 맞춰진 웹 프레임워크이다.
• 장고를 공부할 때는 백엔드에 포커스를 맞춰서 공부하고, 프론트엔드는 최소화하자.
• 2가지를 모두 한번에 잘할수는 없다. 우선순위를 백엔드에 먼저 두고, 앱도 일단 미뤄두자
• 한번에 완벽한 웹서비스를 만들 수는 없다. 점진적으로 개선해 나가자.

 

웹 요청 및 응답

• 웹은 HTTP(S) 프로토콜로 동작합니다.
• 하나의 요청은 클라이언트가 웹서버로 요청하며, 웹서버는 요청에 맞게 응답을 해야합니다.
• - 응답은 HTML 코드 문자열, CSS 코드 문자열, JS 코드 문자열, Zip, MP4 등 어떠한 포맷이라도 가능
• 웹서버에서 응답을 만들 때, 요청의 종료를 구분하는 기준
• - URL(일반적), 요청헤더, 세션, 쿠키 등
• 웹서버의 구성에 따라
• - /static/flower.jpg : JPG 파일 내용을 응답으로 내어주도록 설정했습니다.
• - /blog/images/flower.jpg : 장고 View를 통해, JPG 파일 내용을 응답으로 내어주도록 설정했습니다.
• - /blog/images/flower/ : 장고 View를 통해, JPG 파일 내용을 응답으로 내어주도록 설정했습니다.
• 웹서버 구성에 따라, 특정 요청에 대한 응답을 Apache / Ngnix 웹서버에서도 할 수도 있고 뷰에서 응답을 할 수도있습니다

 

단지 하나의 HTTP 요청에 대해, 하나의 응답을 받습니다.

1. 브라우저에서 서버로 HTTP 요청
2. 서버에서는 해당 HTTP 요청에 대한 처리 : 장고에서는 관련 뷰 함수가 호출
3. 뷰 함수에서 리턴해야만 비로소 HTTP 응답이 시작되며, 그 HTTP 응답을 받기 전까지는 하얀 화면만 보여집니다. 따라 뷰 처리시간이 길어질수록 빈 화면이 보여지는 시간이 길어집니다.
4. 브라우저는 서버로부터 HTTP 문자열 응답을 1줄씩 해석하여, 그래픽적으로 표현합니다.

 

 

HTML 문자열은 1줄씩 처리되며, 외부 리소스는 해당 리소스가 로딩완료 / 실행될 때까지 대기함.

 

 

HTML UI 응답성이 낮아지는 경우

• 과도한 JS 로딩 및 계산
• 과도한 CSS 레이아웃 로딩 및 계산
• 잦은 시각적 개체 업데이트

 

HTML UI 응답성을 높이기 위해

• 실서비스시에 CSS / JS 파일은 Minify 시켜서 다운로드 용량을 줄임
• 대게 CSS를 HTML 컨텐츠보다 앞에 위치시키고, JS를 HTML 컨텐츠보다 뒤에 위치시킴
• CSS가 컨텐츠보다 뒤에 위치한다면, 유저에게는 스타일이 적용되지 않은 HTML 컨텐츠가 먼저 노출될 수 있다.
• JS는 스타일에 직접적인 영향을 끼치지 않기 때문에, HTML 컨텐츠보다 나중에 로딩되어도 대개 괜찮음. 꼭 필요한 몇몇 JS는 HTML 컨텐츠보다 앞에 위치시키기도 함