HTML - FrontEnd

프론트 엔드

사용자 입장에서 불편함이 없도록 눈에 보이는 화면을 설계하고 백엔드에서 받아온 데이터를

어떻게 화면에 표출할지 고민하는 과정

​

백 엔드

회원정보, 상품정보와 같은 데이터들을 어떻게 저장하고 관리할지와 어떤 로직을 구성해야

사용자들에게 보다 빠른 속도로 데이터 전달이 가능할지 표현하는 과정

​

UI(User Interface)

사용자 레이아웃(화면)

사용자가 제품을 사용할 때 마주하게 되는 면( 폰트, 컬러, 레이아웃)

​

UX(User Experience)

사용자 경험(행위)

사용자가 제품을 직간접적으로 사용하면서 얻는 만족감

​

ex) 검색창 입력, 버튼은 UI, 검색 버튼을 누르는 행위 UX 라고 할 수 있음

즉, UI/UX를 고려하여 웹 사이트를 만든다는 것은 웹 화면 보고 사용자가 이용했을 때

불편함이나 제약사항이 없는지 고려하여 만든다는 것

​

프론트엔드 구성

1) 웹 기획자 : 스토리보드라고 하는 문서 자료로 화면을 구성하고 작성하는 사람

ex) 배너의 위치, 로그인 화면 위치, 페이지 구성 및 흐름도

​

2) 웹 디자이너 : 완성된 스토리 보드를 기반으로 명확하게 로고, 이미지, 색상, 컨셉 등 디자인을

구성하는 사람

​

3) 웹 퍼블리셔 : 완성된 스토리보드와 디자인을 가지고 직점 html, css를 이용하여 웹 사이트를 구현

간단한 js를 통한 이벤트도 구현

​

4) 프론트 엔드 개발자

js를 통한 비동기 통신 구현

js 심화 과정을 통한 자바스크립트의 실행 과정 및 순서를 파악하여 능숙하게 다룰 수 있어야함

다양한 라이브러리(도구)를 활용하여 적재 적소에 이벤트를 구현

백엔드 서버와 통신하여 얻은 데이터를 어떻게 보여줄 것인가 고민

​

HTML(Hyper Text Markup Language)

Hyper Text : 웹 페이지에서 다른 페이지로 이동하거나 페이지 내 다른 데이터에 접근할 수 있도록 하는 것

Markup Language : 웹 페이지 내 컨텐츠를 어떻게 표현해야 하는지 명령하는 언어

​

>> 웹 페이지를 이동할 수 있게 해주고 웹 페이지 내 컨텐츠를 제작하기 위해 사용하는 언어

= 웹 페이지 제작할 때 쓰이는 언어

​

* 태그 형태를 띄고 있다는 특징

ex) 옷 살 때 tag > 해당 상품이 어떤 상품인지 설명하는

>> HTML에선 해당 코드가 어떠한 정보를 담고 있는지 알려주기 위한 것이며 형태는

<명령어> //시작

...

</명령어> //끝일 때 앞 슬래쉬( / )가 있다.

​

Request 와 Response

URL 제공(요청) >> 이에 맞는 화면과 데이터 전달(응답)

​

HTTP(HyperText Transfer Protocol)

인터넷에서 데이터 주고받을 때 사용하는 규약( 규칙, 약속)

따라서 주소에 http, https가 붙으면 해당 규약을 사용해서 데이터 주고 받겠다는 뜻

s의 유무 http에 보안적인 요소가 추가된 것을 https라고 한다.

​

​

*google.com이나 naver.com 등 주소창에 입력했을 때 벌어지는 일

​

1. naver.com 입력

2. 브라우저가 도메인(naver.com)을 통해 대응하는 주소 확인

3. HTTP를 이용하여 도메인 서버(주소록 : 도메인 모아둔 곳)에 맞는 도메인을 찾아내 페이지 요청

4. 브라우저가 해당 서버의 HTML을 요청

5. WAS (서버 도우미) DB를 통해서 백데이터 데이터를 가지고 옴

6. 작업 처리 결과를 서버에 전송하고 서버는 HTML 문서를 브라우저에게 응답

7. 브라우저는 웹 페이지 내용물을 파싱 후 출력

----------------------------------------

 

HTML 파싱

1. 브라우저가 전달된 HTML 분석(브라우저로더)

2. HTML(돔트리 생성), CSS ( CSSOM)(CSS모아둔 곳)

3. 돔트리에서 JS 적용

4. CSSOM과 돔트리가 합쳐져 랜더링 트리

5. HTML에 CSS결정 후 레이아웃 과정( 크기, 위치 계산)

6. 페인트( 화면에 그리는 작업 )

​