0. 부스트코스 시작 전
부스트코스는 직업에 필요한 역량을 향상시킬수 있는 온라인 교육 프로그램이다.
무료 강좌기도 하고, 더 많이 배워보고 싶어서 그 중 '웹프로그래밍(풀스택)' 이라는 강좌를 들어보려고 한다.
링크 : [boostcourse] 웹 프로그래밍(풀스택)
1. browser의 동작
브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어이다.
인터넷에서 특정 정보로 이동할 수 있는 주소 입력창이 있고, 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있다.
그리고 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있다.
아래 그림이 대표적인 내용이다.
HTML을 해석하여 DOM Tree(Document Object Model)를, CSS를 해석하여 CSS Tree(CSS Object Model)가 만들어진다. 이 과정에서 Parsing(해석 -> 객체로 구조화) 과정이 필요하며, 두 Tree는 Render Tree로 다시 조합된다.
이렇게 조합된 결과는 Layout이라는 크기, 위치 등의 정보를 담고, 어떻게 보여줄 지 Painting 과정을 거치게 된다.
2. browser에서의 웹 개발
이전에 공부했던 내용과 비슷해서 링크로 대체
1. HTML 기본 틀 작성
1. HTML 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것
takethat.tistory.com
2. HTML와 CSS 기초
1. HTML 기본 틀 이전 게시물(1. HTML 기본 틀 작성)에서 HTML 문서 기본 틀에 대해서 이야기 했었다. 이번에는 필수적으로 작성해야하는 기본 틀이 아니라 실제로 사용하기 위해 작성하는 HTML의 기본
takethat.tistory.com
HTML은 계층적이며, tag를 사용해서 표현한다.
HTML 문서 안 HTML 태그 뿐만 아니라 JavaScript와 CSS가 존재한다고 생각하면 된다.
JavaScript 코드는 body 태그 닫히기 전에 위치하는 것(혹은 태그 이후)이 렌더링을 방해하지 않아 좋고,
css 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>boostcourse</title>
</head>
<body>
<div>웹 프론트엔드</div>
</body>
<!-- <script>alert(1)</script> -->
<!-- 자바스크립트가 렌더링을 방해하여 1이 나오기 전 '웹 프론트엔드'를 출력하지 않음. -->
<!-- 가급적 자바스크립트 파일을 바디 태그 닫히기 전, 혹은 그 뒤에 하단에 위치 시키는 것이 일반적이다. -->
<script src="./main.js"></script>
</html>
3. 웹서버
웹 서버는 소프트웨어(Software)를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다.
웹 서버의 가장 중요한 기능은 클라이언트(Client)가 요청하는 HTML 문서나 각종 리소스(Resource)를 전달하는 것
웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장된 정적(static)인 데이터이거나 동적인 결과가 될 수 있다.
+ Nginx 웹서버는 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며, 오픈소스 소프트웨어이다.
4. WAS
클라이언트/서버 구조
클라이언트(Client)는 서비스(Service)를 제공하는 서버(Server)에게 정보를 요청하여 응답 받은 결과를 사용한다.
DBMS (DataBase Management System)
다수의 사용자가 데이터베이스 내의 데이터에 접근할 수 있도록 해주는 소프트웨어
미들웨어 (MiddleWare)
클라이언트에 비즈니스 로직이 많을 경우, 클라이언트 관리(배포 등)로 인해 비용이 많이 발생하는 문제가 있다.
비즈니스 로직을 클라이언트와 DBMS사이의 미들웨어 서버에서 동작하도록 함으로써 클라이언트는 입력과 출력만 담당하도록 한다.
WAS (Web Application Server)
WAS는 일종의 미들웨어로 웹 클라이언트의 요청 중 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다.
- 프로그램 실행 환경과 데이터베이스 접속 기능 제공
- 여러개의 트랜잭션 관리
- 업무를 처리하는 비즈니스 로직을 수행
WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다.
현재는 WAS가 가지고 있는 웹 서버도 정적인 콘텐츠를 처리하는 데 있어서 성능상 큰 차이가 없다.
규모가 커질수록 웹 서버와 WAS를 분리한다.
자원 이용의 효율성 및 장애 극복, 배포 및 유지보수의 편의성을 위해 웹서버와 WAS를 대체로 분리한다.
