📑
브라우저와 서버
웹 페이지는 문서. 브라우저는 그 문서를 보기 위한 뷰어.
사용자가 브라우저로 서버에 요청을 보내고 응답을 브라우저로 받는다. HTTP/HTTPS를 통해 이루어짐.
• 구글 사이트에 접속한다는 것 == 어딘가에 있는 구글 사이트를 가지고 있는 컴퓨터에게 구글 홈페이지.html을 달라고 요청하는 것.
그리고 우리 컴퓨터의 웹 브라우저가 이 파일을 해석해서 예쁘게 보여준다. 이때 구글서버는 서버, 웹 브라우저가 클라이언트.
• 웹 브라우저의 역할: 인터넷에서 원하는 페이지를 찾아서 보여주고 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 도와주는 프로그램. HTML 파일을 우리가 보는 예쁜 화면으로 바꿔준다(Rendering, 렌더링).
• 정적 웹페이지: Static Web Page. 작성한 상태를 그대로 제공하는 웹 페이지. 모든 상황에서 동일한 내용을 전달. HTML.
• 동적 웹페이지: Dynamic Web Page. 요청에 따라 보여주는 모습이 달라지는 웹 페이지.
⇒ 요청을 받아서 적절한 응답을 만들어주는(=수정해주는) 주체가 필요. : Django
• 백엔드 개발
- 보이지 않는 서버 측의 작업 담당
- 데이터베이스와의 상호작용, 비즈니스 로직 처리, 보안, 사용자 인증 등을 처리
- 사용자 요청 데이터 처리, 그에 따른 결과 생성.
- 주로 서버 사이드 언어 및 프레임워크를 사용하여 개발되며 데이터베이스와의 통신을 담당.
- 안정성, 보안성, 성능을 유지하며 프로트엔드와의 원활한 데이터 교환을 지원하는 것이 주요 목표.
- 기술: 서버 사이드 언어(Python, Java, Node.js), 데이터베이스(MySQL, MongoDB), 백엔드 프레임워크(Django, Spring, Express.js)
• 프론트엔드 개발
- 디자이너가 만든 웹 페이지를 기반으로 더 동적이고 상호작용적인 웹 애플리케이션을 개발.
- 주로 자바스크립트 프레임워크나 라이브러리를 사용해 프론트엔드 기능을 개발하고, 데이터 처리와 상태 관리를 담당.
- 백엔드와의 통신을 위한 API 요청 및 응답 처리, 데이터의 가공 및 표시, 사용자 입력에 대한 반응 등을 담당.
- 주로 웹 애플리케이션의 비즈니스 로직과 상호작용적인 요소를 다루며, UI 컴포넌트의 상태 관리와 라우팅 등을 수행.
- 프론트엔드 개발자는 보다 복잡하고 동적인 웹 애플리케이션을 만들기 위해 퍼블리셔와 협업하며, 웹 애플리케이션의 전체적인 아키텍처와 성능을 고려함.
WEB
• WWW: World Wide Web (전 세계에 펼쳐져 있는 거미줄.)
전 세계가 인터넷으로 연결되어 있다. 90% 이상이 해저 광케이블로 이루어지고 있고 위성통신은 전 세계 트래픽의 1%에 불과.
• 웹/인터넷: 전세계의 컴퓨터가 서로 연결되어 있는 거대한 인프라를 이용하는 것을 의미.
인터넷 프로토콜
• HTTP / HTTPS
: 웹 상의 데이터, 요청을 주고받을 때 이용하는 프로토콜.
클라이언트가 서버에 요청을 보내면, 서버는 그 요청에 맞는 데이터를 클라이언트에 응답으로 보내주는 방식으로 작동.
- HTTP
: 암호화 과정이 없기 때문에 HTTPS보다 약간 더 빠를 수 있으나 보안이 취약.. 기본적으로 80번 포트 사용.
- HTTPS
: HTTP에 암호화 프로토콜(SSL 또는 TLS)을 결합한 것. 주고받는 데이터가 암호화되어 중간에 누군가가 데이터를 가로채더라도 내용을 읽을 수 없다. 기본적으로 443번 포트를 사용.
*SSL: Secure Sochets Layer
*TLS: Transport Layer Security
- SSL(Secure Sockets Layer) 및 TLS(Transport Layer Security)는 HTTP 프로토콜 위에서 동작.
- 데이터 전송 시 보안을 강화하고, 데이터 무결성과 서버 인증을 제공.
*데이터 무결성: 데이터가 전송되는 도중 변경되거나 손상되지 않았는지를 확인하는 기능을 제공. 이를 통해 클라이언트가 서버로부터 받은 데이터가 원본과 일치하는지 확인할 수 있다.
*서버 인증: 클라이언트와 서버 간의 연결을 암호화하기 전에, 서버가 신뢰할 수 있는 인증 기관(CA)에 의해 인증되었음을 보장. (실제로 신뢰할 수 있는 서버인지 확인하는 과정)
• 요청 메서드
- GET(데이터 요청): 서버로부터 데이터를 요청하는 메서드. 데이터 조회, 웹 페이지 로드.
- POST(데이터 전송): 서버에 데이터를 전송하는 메서드. 데이터 제출, 폼 전송.
- PUT(데이터 갱신): 서버의 리소스를 갱신하거나 새 리소스를 생성하는 메서드. 데이터 갱신, 리소스 생성.
- DELETE(데이터 삭제): 서버의 리소스를 삭제하는 메서드. 데이터 삭제.
*해당 용도로 쓰이지 않을 수도 있다.
• 상태 코드: 서버가 클라이언트의 요청을 처리한 결과를 나타내는 3자리 숫자 코드.
- 200(OK, 성공): 요청 성공.
- 404(Not Found, 페이지 없음): 리소스 없음. 요청한 리소스를 서버에서 찾을 수 없는 경우.
- 500(Internal Sercer Error, 서버 오류): 서버 오류. 서버에서 처리 중 오류가 발생했음을 나타냄.
* 400은 클라이언트 문제, 500은 서버 문제
도메인, IP주소
• DNS(Domain Name Server/System) : 도메인 이름을 IP주소로 변환하는 시스템. 사용자가 웹 브라우저에 도메인 이름을 입력하면 DNS서버는 해당 도메인 이름에 대응하는 IP주소를 찾아 반환하여 사용자는 기억하기 쉬운 도메인 이름을 사용해 웹 사이트에 접근할 수 있다.
• 도메인 이름 등록: 도메인 이름은 인터넷에서 고유한 주소를 제공하기 위해 필요. 도메인 이름 등록 기관을 통해 원하는 도메인 이름을 등록하고 관리 가능. 도메인 이름은 주기적으로 갱신해야 함.
• IP주소: 네트워크 상에서 장치를 식별하는 고유한 주소. 데이터 패킷이 올바른 목적지로 전달될 수 있도록 하는 역할. (모든 네트워크 장치는 고유한 IP 주소를 가짐.)
• IPv4: 32비트 주소체계를 사용. 약 43억 개의 고유한 주소를 제공할 수 있음. 4개의 10진수로 구분된 8비트 블록으로 표시.
ex) 192.168.0.1
• IPv6: 128비트 주소 체계를 사용해 훨씬 더 많은 주소를 제공. 주소는 8개의 128비트 블록으로 구성된 16진수로 표시.
ex) 2001:0db8:85a3:0000:0000:8a2e:0370:7334
URL 구성요소
• 프로토콜: URL의 시작 부분에 위치. 웹페이지와 서버 간의 통신 방식을 정의. 일반적으로 http 또는 https.
• 도메인: URL 중앙 부분에 위치. 웹 사이트의 고유한 주소를 나타냄. 도메인은 DNS를 통해 IP 주소로 변환된다.
• 경로(path): 도메인 뒤에 위치하며, 웹 사이트 내의 특정 리소스나 페이지를 식별 가능하고 서버 내에서 리소스의 위치를 지정. ex. /about , /products/items
• 쿼리 문자열(query): URL의 마지막 부분에 위치하고, 웹 페이지에 전달할 추가 정보를 포함하며 ?로 시작하며, 매개변수와 값을 &로 구분.
ex. ?search=keyword&sort=price
웹 페이지 구성 요소
• HTML: 뼈대. 웹 페이지의 내용과 구조를 정의.
- Tag: html 문서는 태그로 구성됨. 웹 페이지의 콘텐츠를 구조화하는 데 사용. <열기 태그></닫기 태그>
- 속성: HTML 태그는 추가적인 정보를 제공하기 위해 속성을 가진다.
<head>...</head> - 문서의 정보
<body>...</body> - 문서의 내용을 담고 있다.
• CSS: 웹 페이지의 스타일을 정의하는 언어. 페이지의 레이아웃, 색상, 폰트, 간격 등을 설정
- 인라인 스타일: html 요소 내에서 직접 스타일을 정의하는 방법. 잘 쓰지 않음.
<p style="color: blue;">파란색</p>
- 내부 스타일 시트: html 문서의 <head> 섹션 내에 <style> 태그를 이용해 정의된 스타일.
<style>
/* 주석 */
p {
color: blue;
}
</style>
- 외부 스타일 시트: 별도의 CSS 파일로 생성해서 링크로 연결시켜 주는 방법. link 태그로 연결.
<link rel="stylesheet" href="style.css">
• Javascript: 웹 페이지의 동적 동작을 제어하는 프로그래밍 언어. 페이지의 내용이나 구조를 동적으로 변경하거나 사용자와의 상호작용을 처리.
- 기본 문법: 변수 언어, 함수 정의, 조건문, 반복문 등
- 변수는 let, const를 이용해 선언.
- 함수는 function 키워드를 사용.
- <script> 태그를 사용해 JS코드를 html 문서에 포함시킨다. <script> 태그는 html 문서의 <head> 태그 내부나 <body> 태그 내부에 배치 가능.
- 외부 js 파일을 링크하는 것도 가능. script 태그로 연결.
렌더링 과정에서 위에서 쭉 내려오니까 body에서 컨텐츠가 다 올라온 다음에(우선 사용자가 볼 수 있게 하고) script 태그에서 시간이 걸리는 게 나아서 주로 body 닫기 태그 앞에다가 위치시킨다.
단, JavaScript가 HTML 요소를 조작하기 전에 로드될 때까지 기다려야 하기 때문에 페이지 초기화 시점에 문제가 발생할 소지가 있다.
브라우저 작동 원리
1. HTML, CSS, JavaScript 파일 파싱
: 브라우저가 웹 서버로부터 HTML, CSS, JavaScript 파일을 요청하고 응답받아 이를 파싱(해석)하는 단계.
• HTML 파싱
: HTML 파일을 받아들인 브라우저는 이를 파싱하여 DOM(Document Object Model) 트리를 구축함.
HTML 문서를 위에서 아래로 순차적으로 읽어 내려가며, HTML 태그들을 각각의 DOM 노드로 변환하고, 이 노드들이 부모-자식 관계를 통해 트리 구조로 연결됨.
*DOM 트리 - html 문서의 구조를 계층적으로 표현한 객체 모델. (각 html 요소가 하나의 객체.)
• CSS 파싱
: CSS 파일을 받아들인 브라우저는 이를 파싱하여 CSSOM(CSS Object Model) 트리를 구축함.
CSSOM 트리는 스타일 규칙들을 객체 모델로 변환한 것으로, 각 규칙이 적용될 html 요소와 연결됨. 이 과정에서 CSS 규칙의 상속과 우선순위 등이 계산됨.
• JavaScript 파싱
: JS 파일이 포함된 경우, 브라우저는 이를 해석하여 실행함. JS는 DOM이나 CSSOM 트리에 접근하여 동적으로 html 요소를 추가 또는 제거하거나 스타일을 변경함. JS는 비동기적으로 실행될 수 있으며, DOM이 완전히 로드된 후에 실행되기도 함.
2. DOM(Document Object Model) 트리 구축
HTML 문서가 파싱됨에 따라 브라우저는 DOM 트리를 구축함.
DOM 트리는 HTML 문서의 계층 구조를 반영하며, 각 HTML 요소는 노드로 표현되며, 브라우저와 JavaScript에서 문서의 구조와 콘텐츠를 조작하는 데 사용됨.
3. CSSOM(CSS Object Model) 트리 구축
브라우저는 CSS 파일을 파싱하여 CSSOM 트리를 생성함.
CSS 규칙들을 반영하며, DOM 트리의 각 요소에 어떤 스타일이 적용될지 결정함.
4. 렌더 트리(Render Tree) 생성
DOM 트리와 CSSOM 트리가 결합하여 렌더 트리(Render Tree)를 생성함.
렌더 트리는 실제로 화면에 그려질 요소들로 구성되며, DOM 요소 중에서 화면에 표시되지 않는 요소(예: display: none;)는 렌더 트리에 포함되지 않음.
각 렌더 트리 노드는 DOM 요소와 스타일 정보를 결합하여 렌더링을 위한 구체적인 레이아웃 정보를 가짐.
5. 레이아웃(Layout)
렌더 트리가 완성되면, 브라우저는 각 요소의 정확한 위치와 크기를 계산 이 과정은 레이아웃 단계 또는 "리플로우(Reflow)"라고도 함.
이 단계에서는 각 요소가 페이지 내에서 어디에 배치될지, 얼마나 큰지 결정됨.
6. 페인트(Painting)
레이아웃이 완료된 후, 브라우저가 각 렌더 트리 노드를 실제로 화면에 그리는 과정.
각 요소의 색상, 테두리, 그림자 등 스타일이 적용되어 화면에 그려짐.
7. 합성(Compositing)
페이지의 요소들이 각각 다른 레이어로 나뉘어 그려진 후, 브라우저는 이를 최종적으로 하나의 이미지로 합성하여 사용자에게 보여줌.
이 과정은 특히 복잡한 애니메이션이나 3D 변환 등이 사용될 때 중요.
(요소들이 개별 레이어로 분리되면 변경된 부분만 다시 그리므로, 성능이 향상됨!)
8. 페이지 렌더링
모든 과정이 끝난 후, 브라우저는 최종적인 웹 페이지를 사용자에게 화면에 보여줌.
사용자가 페이지와 상호작용하거나, JavaScript에 의해 콘텐츠가 변경되면, 브라우저는 이 과정을 반복하여 화면을 업데이트함.
Django APP
: 각각의 기능 단위 모듈. 하나의 프로젝트 내에 여러 개의 앱이 있을 수 있다.
하나의 앱만으로 개발하는 것도 가능하다(여러 개를 쓰던 하나를 쓰던 그건 선택의 문제).
하지만 유지보수 측면에서 여러 개의 앱으로 나눠 개발하는 것을 권장한다.
• App 생성하기
: python manage.py startapp 앱 이름 앱 이름은 복수형으로 짓는 것을 권장하고 있음.
• App 등록하기
: settings.py 파일의 INSTALLED_APPS 부분을 보면 프로젝트에 등록된 앱 목록이 보이는데 이곳에 생성한 앱을 등록한다. 마지막에 콤마를 붙여주면 다음에 앱을 추가할 때 편리함(Trailing commas).
ALGORITHM CODE KATA
Ⅰ. 알고리즘문제 (school.programmers.co.kr)
def solution(elements):
n = len(elements)
unique_sums = set() # 중복 허용X
for i in range(1, n + 1): # 길이가 i인 부분 수열
current_sum = 0
for j in range(n): # 부분 수열의 시작 인덱스
current_sum += elements[(j + i) % n]
unique_sums.add(current_sum)
return len(unique_sums)
'''
[7, 9, 1, 1, 4] => n = 5
i = 1, j = 0 -> elements[1] 9
i = 1, j = 1 -> elements[2] 7
i = 1, j = 2 -> elements[3] 1
i = 1, j = 3 -> elements[4] 1
i = 1, j = 4 -> elements[0] 4
unique_sums = [9, 9+7, 9+7+1, 9+7+1+1, 9+7+1+1+4]
...
i = 3, j = 0 -> elements[3] 1
i = 3, j = 1 -> elements[4] 4
i = 3, j = 2 -> elements[0] 7
i = 3, j = 3 -> elements[1] 9
i = 3, j = 4 -> elements[2] 1
unique_sums = [9, 9+7, 9+7+1, 9+7+1+1, 9+7+1+1+4, ... , 1, 1+4, 1+4+7, 1+4+7+9, 1+4+7+9+1]
'''