저급언어
- 기계 중심의 언어
- 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어 라고 한다
- 숫자로만 된 문장과 1:1로 대응하는 기호를 만들고 프로그래밍 하는데 이 때 사용하는 도구를 컴파일러라고 하며, 이러한 기호로 작성된 언어를 어셈블리어라고 말한다
고급언어
- 사람 중심의 언어
- 소스코드를 번역하는 과정은 컴파일
웹 프로그래밍 언어
웹 관련 인기 언어
- Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발한다. 데이터 과학, 웹사이트 개발에 많이 사용
- PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말한다.
- JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있다. 프론트 개발자라면 반드시 알아야 할 언어입니다.
- JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용. JAVA언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있다.
- Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나.
물리적인 하나의 컴퓨터에는 여러개의 서버 동작
서버는 port로 구분되어 동작
인터넷: 네트워크 들의 네트워크
TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크들의 네트워크
HTTP : 웹 브라우저와 웹 서버간 통신하기 위한 규약
- 서버와 클라이언트가 인터넷 상에서 데이터를 주고 받기 위한 프로토콜이다
- HTTP/2 버전까지
- 어떤 종류의 데이터든 전송할 수 있음
HTTP 작동방식
- 서버/클라이언트 모델을 따름 (클라이언트가 요청 - 서버가 응답)
- 무상태 프로토콜 Stateless
- 장점: 불특정 다수를 대상으로 하는 서비스에 적합 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다
- 단점: 연결을 끊어버리기 때문에 클라이언트의 이전 상황을 알 수 없다. 이러한 특징을 무상태 Stateless라고 말한다. 이러한 특징 때문에 정보를 유지하기 위해서 Cookie가 등장
URL
- 인터넷 상의 자원의 위치
- 특정 웹 서버 특정파일에 접근하기 위한 경로 혹은 주소
- 프로토콜의 종류 :// IP주소, 도메인 이름 / (자원의 위치) 문서 경로/ 문서 이름
http://www.sunny.co.kr/docs/index.html
+) IP는 집주소 (하나만 존재) , port는 각각의 방들 (여러 개)
하나의 방에 여러 개 서버가 존재할 수 X
하나의 물리적 컴퓨터에는 여러 개의 서버 존재 가능
이 서버는 포트값이 다르게 동작해야 함
포트값은 0보다 큰 값
http는 기본이 80번
1) 클라이언트가 원하는 서버에 접속
2) 원하는 정보 요청
- 첫번째 줄의 요청 메서드는 서버에게 요청의 종류를 알려주기 위해 사용
- 요청 데이터 format
- 요청할 때는 HTTP 요청 메시지를 따라야함
- 요청 헤더/바디로 나뉨
- 첫번째 줄에는 필수 등장 요소
- GET : 요청 메서드/ 자원의 경로/ http 버전
- 요청 메서드는 다양하게 존재
- GET은 요청 바디가 존재하지 X
- GET : 정보를 요청하기 위해서 사용한다. (SELECT)
- POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
- PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
- DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
- HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
- OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
- TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.
3) 응답
- 응답 데이터 format 또한 헤더/바디 부분으로 나뉨
- 첫줄에는 반드시 응답 HTTP의 버전, 프로토콜, 메시지
4) 끝나고 나면 서버와 클라이언트의 연결 끝남
웹 프론트엔드
- 사용자에게 웹을 통해 다양한 콘텐츠( 문서, 동영상, 사진 등)을 제공
- 사용자의 요청에 반응해 동작
- 웹 자체가 문서
웹 프론트엔드의 역할
- 웹 콘텐츠를 잘 보여주기 위해 구조를 만들어야 함
- 적절한 배치와 일관된 디자인 제공해야함
- 사용자 요청을 잘 반영해야 함
- HTML, CSS, JavaScript
- html은 구조를 계층적으로 표현
백엔드
- 정보를 처리하고 저장
- Server Side라고 말함
- 요청에 따라 정보를 내려주는 역할
백엔드 개발자가 알아야 할 것들
- 프로그래밍 언어 (JAVA, Python, PHP, Javascript)
- 웹의 동작 원리
- 알고리즘, 자료구조 등 프로그래밍 기반 지식
- 운영체제, 네트워크 등에 대한 이해
- 프레임 워크에 대한 이해
- DBMS 에 대한 이해와 사용 방법( MySQL, Oracle)
브라우저의 동작
- 웹을 통해 데이터, 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳은 브라우저
- 브라우저에는 데이터를 해석해주는 파서(Parser) 와 데이터를 화면에 표현해주는 렌더링 엔진이 포함되어 있음
- 렌더링 엔진 - 색칠해주는
- 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어
- 브라우저는 http로 서버와 네트워킹
- 파싱은 문자 단위로 하나하나 분석해서 데이터 객체로 구조화
- html은 구조화된 정보 -- tree 형태로 가짐
HTML을 해석해 DOM Tree를 만들고
CSS를 해석해 CSS Tree를 만든다
이 과정에서 Parsing이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스 코드의 컴파일 과정이다
DOM Tree와 CSS Tree는 연관되어 있으므로 Render Tree로 다시 조합된다
이렇게 조합된 결과는 화면에 어떻게 배치될지 크기와 위치 정보를 담고 있다
이후 이렇게 구성된 Render Tree 정보를 통해 화면에 어떤 부분에 어떻게 색칠할지 Painting 과정을 거친다
Markup Language
- 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종
- 데이터를 기술한 언어
Parsing (해석)
브라우저가 트리 구조를 만들어 데이터를 해석 -> DOM tree
CSS
- key와 value 구조
인터넷에서 특정 벙보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고받을 수 있는 네트워크 모듈도 포함하고 있다
서버에서 받은 문서를 해석하고 실행하여 화면에 표현하기 위한 해석기 (Parser)들을 가지고 있다
브라우저마다 서로 다른 엔진을 포함한다
브라우저가 동작하는 방식
https://d2.naver.com/helloworld/59361
https://web.dev/howbrowserswork/
How browsers work
web.dev
특징
-HTML문서는 html이라는 태그로 시작해서 html 태그로 끝난다
- HTML은 계층적이며 tag를 사용해 표현한다
- JavaScript와 CSS는 html 안에 여기저기 존재
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
color:blue;
}
</style>
<script>
console.log("javascript codes..");
</script>
</head>
<body>
<div>웹 프론트엔드</div>
</body>
</html>
브라우저는 한 줄씩 코드 해석
렌더링은 화면을 보여주는 것
자바 스크립트가 렌더링을 방해 <- 자바 스크립트를 아래 위치 시킴 , body 태그 닫히기 직전 위치
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>저를소개해요</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/start.js"></script>
</head>
<body>
<h1>안녕하세요</h1>
<div>코드스쿼드 크롱이라고 합니다</div>
<script src="js/library.js"></script>
<script src="js/main.js"></script>
</body>
</html>javascript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋고
CSS 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋음
웹서버
- 소프트웨어를 보통 말하지만 , 웹 서버 소프트웨어가 동작하는 컴퓨터
- 웹 서버의 가장 중요한 기능은 클라이언트가 요청한 HTML 문서나 각종 리소스를 전달하는 것
- 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적인 데이터이거나 동적인 결과가 될 수 있다
- 동적인 결과 <- 프로그램을 통해 만들어진 것
- 웹 크롤러 <- 네이버나 구글 이나 검색 사이트에서 다른 웹사이트를 읽어갈 때 사용하는 소프트웨어
웹 브라우저와 웹 서버는 http를 통해 통신
url 주소가 http로 시작한다는 것은 http를 사용한다는 의미
hyper text transfer protocol
프로토콜은 규약!
렌더링
- 하나로 합쳐서 보여주는 작업
웹 서버 소프트웨어의 종류
- 가장 많이 사용하는 웹 서버는 Apache(점유율 가장 높음), Nginx (성장중), Microsoft IIS
- Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있습니다.
- Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 -- - - Apache웹 서버와 마찬가지로 오픈소스 소프트웨어입니다.
WAS (Web Application Server)
클라이언트/서버 구조
- 클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답 받은 결과를 사용한다
DBMS (database management System)
- 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어
- 보안이 취약하며 매번 접속해야 해서 클라이언트의 로직이 많아
미들웨어(MiddleWare)
- 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리 (배포 등) 로 인해 비용이 많이 발생하는 문제가 발생
- 비즈니스 로직을 클라이언트와 DBMS 사이의 미들웨어 클라이언트는 입력과 출력만 담당하도록 함
- 미들웨어는 데이터 조작할이 생기면 DBMS에게 부탁, 결과를 클라이언트에게 전송
- 클라이언트는 복잡한 로직이 줄어듬
- 프로그램 로직이 변경된다 하더라도 클라이언트 배포를 전부 변경할 필요 없이 미들웨어 로직만 변경하면 된다
WAS(Web Application Server)
- WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다
- 처음에는 정적인 데이터만 가능했음
- 프로그램 실행 환경과 데이터 베이스 접속 기능을 제공
- 여러 개의 트랜잭션(논리적인 작업 단위) 관리
- 업무를 처리하는 비즈니스 로직을 처리
- 웹 서버의 기능도 기본적으로 제공
- tomcat이 포함
웹서버 vs WAS
- WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다
- 현재는 WAS가 가지고 있는 웹 서버도 정적인 컨텐츠를 처리하는 데 있어 성능상 큰 차이 없다
- 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복 기능 (failover)인 경우가 많다
- 웹 서버는 보통 정적인 컨텐츠, WAS는 주로 동적인 결과를 웹 브라우저에게 전달
- 웹 서버가 WAS 앞단에 있으면 웹 서버는 상대적으 WAS보다 더 간단한 구조
- 대용량 어플리케이션, 여러 개의 서버 인 경우 -> WAS 자체 문제의 발생하면 재시작 해야함 -> 이때 웹 서버에서 먼저 WAS 문제 만나지 않도록 하게
- 무중단 서비스를 제공하기 위해 보통 WEB 서버는 WAS 앞단에 배
'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글
| 1-6 Summary (0) | 2023.02.21 |
|---|---|
| 1-5 Servlet -BE (0) | 2023.02.21 |
| 1-4 개발환경 설정 - BE (0) | 2023.02.21 |
| 1-3 CSS - FE (0) | 2023.02.21 |
| 1-2 HTML - FE (0) | 2023.02.20 |