웹해킹 0주차

 

프록시

• 프록시는 클라이언트와 서버 사이에서 중계 역할을 하는 서버
• 클라이언트의 요청을 대신 전달하고, 서버의 응답을 받아 클라이언트로 전송하는 중계 서버. IP 숨김, 캐싱, 요청 필터링 등의 기능을 수행.
• 클라이언트와 서버 간에는 직접적으로 통신하는 것이 아닌 중계 역할을 하는 ‘프록시 서버’를 거쳐서 서로간의 요청-응답을 수행합니다.
• 프록시의 용도:

  포워드 프록시 기능	설명
  IP 주소 숨기기	클라이언트의 IP 주소를 숨겨 익명성을 제공
  캐싱	자주 요청되는 데이터를 캐시에 저장하여 빠른 응답을 제공
  콘텐츠 필터링	특정 웹사이트나 콘텐츠에 대한 접근을 제한
  접근 제어	네트워크 접근을 제어하고 모니터링
  로깅 및 모니터링	모든 요청과 응답을 기록하여 네트워크 사용 현황을 분석

 

VPN (Virtual Private Network)

VPN이란?

VPN은 ‘가상 사설 네트워크’로, 인터넷상에서 물리적 네트워크 없이 사설 네트워크처럼 보이도록 만들어주는 기술.

VPN은 공용 네트워크를 통해 사설 네트워크를 안전하게 확장하는 기술로, 데이터 암호화와 인증을 통해 보안을 강화함.

 

VPN을 사용하는 이유는?

인터넷을 통해 전송되는 정보를 보호하기 위해 네트워크상에 private 한 연결을 만들기 위함.

VPN의 특징

1. 보안성: 데이터를 암호화하여 전송하며, 도청이나 데이터 유출 방지.
2. 익명성: IP를 숨기거나 다른 지역의 IP로 변경.
3. 비용 절감: 물리적 네트워크를 구축하지 않고 원격지 연결 가능.
4. 유연성: 원격 근무나 이동 중에도 사내 네트워크 접속 가능.

VPN의 용도

1. 원격 근무 지원: 외부에서도 회사 내부 네트워크에 안전하게 연결.
2. 검열 우회: 지역 제한 콘텐츠에 접근하거나 특정 국가의 검열 우회.
3. 데이터 보호: 공용 Wi-Fi를 사용할 때 데이터 도청 방지.
4. IP 변경: 지역 제한 콘텐츠 접근 및 익명성 제공.

VPN 터널링 프로토콜의 종류

VPN 터널을 만드는 데 사용되는 프로토콜에는 여러 VPN 터널링 프로토콜이 있습니다.

· PPTP(Point-to-Point Tunnelling Protocol)

· L2TP(Layer Two Tunnelling Protocol)

· IPSec(Internet Protocol Security)

· SSL(Secure Sockets Layer)

 

HTTP 상태 코드

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료줌.

응답은 5개의 그룹으로 나뉘며 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 서버 에러로 구분

• 1xx : 정보 응답
  • 100(Continue): 지금까지의 상태가 괜찮으며 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려줌
  • 101(Switching Protocol): 서버가 클라이언트가 요청한 프로토콜 변경을 승인했음을 나타
  • 102(Processing): 서버가 요청을 수신하였으며 이를 처리하고 있지만, 아직 제대로 된 응답을 알려줄 수 없음을 의미
• 2xx: 성공 응답
  • 200(OK): 요청이 성공적으로 수행되었음을 의미
  • 201(Created): 요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었음을 알려줌. 이 응답은 일반적으로 POST 요청 또는 일부 PUT 요청 이후에 따라옴
  • 204(No Content): 요청에 대해서 보내줄 수 있는 콘텐츠가 없지만, 헤더는 의미있을 수 있음을 알려줌. 사용자-에이전트는 리소스가 캐시된 헤더를 새로운 것으로 업데이트 할 수 있음.
• 3xx: 리다이렉션 메시지
  • 301(Moved Permanently): 요청한 리소스가 영구적으로 새 위치로 이동했음을 나타냄
  • 302(Found): 요청한 리소스가 일시적으로 다른 URI로 변경되었음을 나타냄
  • 304(Not Modified): 이전에 방문했던 리소스가 변경되지 않았으므로, 캐시된 데이터를 사용할 수 있음을 나타냄
• 4xx: 클라이언트 오류
  • 400(Bad Request): 서버가 요청을 이해하지 못했음을 나타냄(잘못된 요청)
  • 401(Unauthorized): 요청이 인증을 필요로 함을 나타냄
  • 403(Forbidden): 서버가 요청을 이해했으나, 승인을 거부함을 나타냄(권한 x)
  • 404(Not Found): 서버가 요청한 리소스를 찾을 수 없음을 나타냄
• 5xx: 서버 오류
  • 500(Internal Server Error): 서버가 요청을 처리할 수 없음을 나타냄
  • 503(Service Unavailable): 서버가 일시적으로 요청을 처리할 준비가 되어 있지 않음을 나타내요. 일반적으로 임시적인 과부하나 유지보수 때문에 발생

 

HTTP와 HTTPS의 차이점은 뭘까?

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜.

사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답.

웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환.

즉, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술.

이름에서 알 수 있듯이 HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전.

HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정.

	HTTP	HTTPS
의미	Hypertext Transfer Protocol	Hypertext Transfer Protocol Secure
기본 프로토콜	HTTP/1과 HTTP/2는 TCP/IP를 사용합니다. HTTP/3은 QUIC 프로토콜을 사용	HTTP 요청 및 응답을 추가로 암호화하기 위해 SSL/TLS와 함께 HTTP/2 사용
포트	기본 포트 80	기본 포트 443
용도	이전 텍스트 기반 웹 사이트	모든 최신 웹 사이트
보안	추가 보안 기능 없음	퍼블릭 키 암호화에 SSL 인증서 사용
이점	인터넷을 통한 통신 지원	웹 사이트에 대한 권위, 신뢰성 및 검색 엔진 순위 개선

HTTP(HyperText Transfer Protocol)의 의미

• HTTP는 하이퍼텍스트(HTML) 문서와 같은 리소스들을 가져와 데이터들을 교환하기 위한 주된 프로토콜을 의미
• HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 하며, 요청이 초기화되는 프로토콜을 의미
• 기본적인 작동방식은 클라이언트(보통 웹 브라우저)가 서버에 요청(request)을 보내고, 서버가 이 요청에 대한 응답(response)을 반환하는 방식
• TCP/IP 기반

프로토콜 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계

TCP/IP 다양한 하위 프로토콜로 구성되어 있으며, 이는 인터넷의 기능을 다양화하고 확장하는 데 기여해요. 예를 들어, HTTP와 같은 프로토콜들은 모두 TCP/IP 위에서 동작하며, 각각 웹 페이지 전송, 파일 전송, 등의 기능을 담당.

이메일 전송은 이를 기반으로 한 프로토콜 SMTP이고 연결지향적

 

HTTP의 특징

무상태(Stateless)

HTTP는 상태를 저장하지 않는데 이는 곧 서버가 클라이언트의 이전 상태를 보존하지 않는다는 것을 의미.

쿠키나 토큰 등을 통해 ex -> 내가 누구인지 인증을 하기 위해 요청을 하는 것처럼

→ 각 HTTP 요청이 필요한 모든 정보를 포함해야 하며, 각 요청을 별개로 처리해야 함

• 장점
  • 단순성 및 확장성: 서버가 클라이언트 상태를 유지할 필요가 없으므로, 구현이 단순하고 서버 자원을 효율적으로 관리할 수 있음
  • 서버 부하 감소: 클라이언트의 상태 정보를 저장하고 관리할 필요가 없으므로, 서버의 부하가 감소함
• 단점
  • 기능 제한: 클라이언트와 서버 간의 지속적인 상태를 유지하기 위해서는 각 요청에 상태 정보를 포함해야 하며, 이는 추가적인 데이터 전송량을 필요로 함

비연결성(Connectionless)

클라이언트가 서버에 요청을 하고 응답을 받으면 바로 그 요청에 대해 응답을 한 후 연결을 끊어 유지하지 않는 것을 의미.

즉, 서버는 응답을 완료한 후 즉시 연결을 종료하며, 각 요청/응답 사이클이 끝날 때마다 연결이 해제됨

한 번 한 번 요청을 보낼 때 요청에 연관관계가 없다는 것은 서버 입장에서는 a가 요청하고 b가 요청한 다음 다시 a가 들어와도 누가 누군지 모르는 것과 같음

• 장점
  • 서버 자원 절약: 동시에 많은 클라이언트를 처리할 수 있으며, 각 클라이언트와의 연결을 지속적으로 유지할 필요가 없음
• 단점
  • 성능: 각 요청마다 새로운 연결이 필요하므로 연결 설정에 추가적인 시간이 소요될 수 있음

⇒ 따라서 무상태와 비연결성은 서버의 간단한 구현, 자원 사용의 효율성과 높은 확장성을 가능하게 한다고 볼 수 있음

 

HTTP 요청방식

request, response

• 클라이언트와 서버들은 개별적인 메시지 교환에 의해 통신
• request: 브라우저인 클라이언트에 의해 전송되는 메시지를 요청 (브라우저는 항상 요청을 보내는 개체)
• response: request에 대해 서버에서 응답으로 전송되는 메시지 응답

ex) HTTP Request Message

start line

GET /test.html HTTP/1.1
[HTTP Method] [Request target] [HTTP version]

• HTTP method: 메서드별로 서버에 대한 특정한 종류의 작업을 의미
  • GET: 존재하는 자원에 대한 요청으로 데이터를 검색하는 데 사용되며, 데이터를 변경하지 않음
  • POST: 새로운 자원을 전송할 때 사용되며, 주로 폼 데이터를 서버에 제출 시 및 새로운 데이터를 생성 시 사용
  • PUT: 존재하는 자원에 대한 변경으로 서버에 파일을 업로드하거나 자원을 업데이트할 때 사용
    • PUT 요청은 대상 자원이 이미 존재한다면 업데이트하고, 존재하지 않는다면 새로 생성
  • DELETE: 존재하는 자원에 대한 삭제
  • PATCH: 자원의 전체가 아닌 일부분만 수정할 때 사용
  • +@
  • 기술적으로 그러도록 제한이 되어있는 건 아님!
    • ex -> POST 요청인데 데이터를 지우게 만드는 것도 기술적으로 가능함

  // user가 123인 사용자의 '이메일 주소만' 새로 변경하기 위해 보내는 요청과 같아요
  // 아래에 있는 요청 본문에는 변경하고자 하는 데이터의 일부만 포함되어 있어요
  
  PATCH /user/123 HTTP/1.1
  Host: mju.ac.com
  Content-Type: application/json
  
  {
    "email": "dbalsrl7648@mju.ac.com"
  }

• Request target: HTTP Request가 전송되는 목표 주소
• version: version에 따라 Request 메시지 구조나 데이터가 다를 수 있어서 version을 명시

headers

• 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해주는 역할
• 해당 request에 대한 추가 정보를 담고 있는 부분을 의미
  • Host: 요청하려는 서버 호스트 이름과 포트 번호
  • Accept: 클라이언트가 처리 가능한 미디어 타입 종류 나열
  • Authorization: 인증 토큰을 서버로 보낼 때 쓰이는 Header (tmi. 인증과 관련된 건 이를 통해 보내자 한 것일 뿐 기술적으로는 사실 보내지 않아도 됨)
  • Cookie: 클라이언트와 서버 간의 상태 정보를 저장하고 전송하는 데 사용되며, 쿠키 값은 key-value로 표현. 서버 컨트롤이 가능한 유일한 헤더

body

• HTTP request가 전송하는 데이터를 담고 있는 부분
• body에 담긴 데이터는 HTTP 요청 또는 응답과 관련된 내용을 담고 있음
• GET요청은 body가 필요 없음(GET요청 시 리소스는 절대 변하면 안 됨)
• 사용 목적에 따라 다르게 불림
  • 메시지 바디(message body)
    • 일반적으로 HTTP 요청이나 응답의 본문을 가리키는 데 사용됨. 데이터의 실제 내용을 담고 있으며, 이 내용은 HTTP 헤더에 지정된 'Content-Type'에 따라 형식이 결정
  • 요청 바디(request body)
    • 클라이언트가 서버로 보내는 데이터(예: POST 메서드를 사용하여 제출된 폼 데이터, PUT 요청으로 전송된 파일 등)를 포함

    //사용자가 JSON 형식으로 사용자 정보를 등록하는 API에 POST 요청을 보내는 상황
    
    POST /api/users HTTP/1.1
    Host: [example.com](<http://example.com/>)
    **Content-Type**: application/json
    Content-Length: 53
    
    { //요청 바디
    	"username": "youminki",
    	"email": "dbalsrl7648@mju.ac.com",
    	"age": 25
    }

  • 응답 바디(response body)
    • HTTP 응답에서 메시지 바디의 내용을 가리키며, 서버가 클라이언트에게 보내는 데이터(예: 웹 페이지, 이미지, API 호출 결과 등)를 포함

    //서버가 JSON 형식으로 사용자 정보를 응답하는 상황
    
    HTTP/1.1 200 OK
    **Content-Type**: application/json
    Content-Length: 68
    
    { //응답 바디
      "username": "youminki",
      "email": "dbalsrl7648@mju.ac.com",
      "age": 25,
      "status": "active"
    }

Content-Type 이란? 클라이언트에게 반환된 콘텐츠의 유형이 실제로 무엇인지를 알려줘요. 즉, 자원의 형식을 명시하기 위해 헤더에 실리는 정보

//Request
POST /api/data HTTP/1.1 //요청 라인
Host: example.com
**Content-Type**: application/json 
//현재 예시에서는 클라이언트가 서버로 JSON형식의 데이터를 전송하고 있음을 알 수 있어요

{
  "name": "youminki",
  "age": 25
}

//Response
HTTP/1.1 200 OK
**Content-Type**: application/json
//서버가 클라이언트로 JSON 형식의 응답 데이터를 보내고 있음을 알 수 있어요

{
  "status": "success",
  "message": "Data received successfully"
}

 

HTTP의 문제점

• 평문이기 때문에 도청 가능
• 통신 상대를 확인하지 않기 때문에 위장 가능
• 완전성을 증명할 수 없기 때문에 변조 가능

HTTP의 문제점을 해결하기 위한 HTTPS

HTTPS는 HTTP 요청 및 응답을 SSL/TLS 기술에 결합합니다. SSL/TLS는 HTTPS의 암호화 방식으로, 이를 통해 HTTPS 암호화를 진행하고 발신자와 수신자만 해당 암호를 해독하여 정보를 주고받을 수 있음.

위 방법을 통해 우리는 접속할 사이트가 진짜 은행 사이트인지 가짜 은행 사이트인지 SSL 인증서를 통해 신뢰할 수 있게 됨. 그 후 신뢰된 당사자 간 암호화된 통신을 진행하면 외부에서는 어떤 내용으로 통신하는지 알 수 없음.

HTTP문제점을 하결하기 위해서 우리는 SSL 인증을 활용하여 신뢰성이 높고 보안이 우수한 HTTPS를 사용.

 

HTTP 메서드

HTTP 메서드의 의미

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식. 쉽게 말하면 서버에 주어진 리소스에 수행하길 원하는 행동, 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법.

HTTP 메서드의 종류

• 주요 메소드
  • GET : 리소스 조회
  • POST:  요청 데이터 처리, 주로 등록에 사용
  • PUT : 리소스를 대체(덮어쓰기), 해당 리소스가 없으면 생성
  • PATCH : 리소스 부분 변경 (PUT이 전체 변경, PATCH는 일부 변경)
  • DELETE : 리소스 삭제
• 기타 메소드
  • HEAD : GET과 동일하지만 메시지 부분(body 부분)을 제외하고, 상태 줄과 헤더만 반환
  • OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용)
  • CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정
  • TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

 

싱글쿼터와 더블쿼터

PHP(Hypertext Preprocessor)란?

PHP는 서버 사이드 스크립트 언어로, 동적인 웹 페이지를 생성하기 위해 사용됩니다.

• 특징:
  • HTML에 쉽게 내장 가능
  • 데이터베이스와의 통합 지원 (MySQL, PostgreSQL 등)
  • 서버에서 실행되어 결과를 클라이언트에 전달
  • 플랫폼 독립적
  • 오픈 소스

싱글쿼터, 더블쿼터

• 싱글쿼터 (''):
  • 문자열을 그대로 출력.
  • 변수나 특수 문자를 해석하지 않음.
  • 성능이 더 빠름.
  • 예: 'Hello $name' → Hello $name
• 더블쿼터 (""):
  • 문자열 내 변수를 해석하거나 이스케이프 시퀀스(\n, \t)를 지원.
  • 예: "Hello $name" → Hello John (변수 $name이 John이라 가정)

보안 관점에서 싱글쿼터와 더블쿼터

• 보안 이슈:
  • SQL Injection: 변수 해석($변수)이 더블쿼터에서 발생할 수 있어, 쿼리 작성 시 주의 필요.
  • 싱글쿼터는 변수 해석을 하지 않아 SQL Injection 가능성이 줄어듦.
• 권장:
  • SQL 작성 시 싱글쿼터 사용.
  • 변수 삽입 시 prepared statement 사용.

 

URL Encoding, URL Decoding이란?

URL Encoding이란?

URL에서 특수 문자를 ASCII 형식으로 변환하는 과정입니다.

• 목적: URL의 일관성 유지와 안전성 보장.
• 방식:
  • 특수 문자: % 뒤에 16진수 값으로 인코딩.
  • 공백: %20 또는 +로 표시.
• 예:
  Hello World! → Hello%20World%21

URL Decoding이란?

URL Encoding 된 값을 원래 문자로 변환하는 과정입니다.

• 예:
  Hello%20World%21 → Hello World!

클라이언트 사이드와 서버 사이드

서버와 클라이언트는 웹 페이지로 서로 커뮤니케이션을 하는 것이다.
Client side 언어를 다루고 그에 관련된 개발자는 프론트 엔드,
Server side 언어를 다루고 그에 관련된 개발자는 백엔드라고 부른다.

서버사이드란?

• 서버에서 요청을 처리하고 클라이언트에 결과를 전달하는 방식
• 서버 사이드 프로그래밍은 웹 서버에서 실행되는 코드를 작성하는 것
• 서버(제공자) 측에서 즉시 처리하는 것이다.
• Server side는 클라이언트로 보낼 웹 페이지(HTMl, Javascript 등이 담긴 것)를 만든다.
• 중요한 작업들(사용자 유효성, DB 관련 등등)을 수행한다.
• 대표적인 언어로 Java, PHP, Ruby, Python, Node.js 가 있다.

클라이언트사이드란?

• 데이터 처리를 사용자의 장치(브라우저)에서 수행하는 방식
• 클라이언트(사용자) 측에서 처리하는 것
• 클라이언트가 입력한 것을 수신해 HTML로 만들어 크롬과 같은 애플리케이션에 해석해서 표시
• 대표적으로 Javascript가 있다.

 

데이터를 Server side로 처리할 시 장단점

장점

• 서버 관리자의 입장에서 데이터 위조의 가능성을 줄일 수 있다.
• 서버 쪽의 데이터가 확실히 진짜이며 클라이언트 쪽에서 위조해서는 안 되는 민감한 데이터의 경우 Server side로 처리해야 한다.
• 예를 들어 인터넷 뱅킹의 이체 관련 처리나 MMORPG의 게임 아이템 관련 처리에서는 Client side로 처리를 최소화해야 한다. 이때 Client 사용자의 입장에서는 클라이언트 컴퓨터의 처리부담이 줄어든다.

단점

• 서버 관리자의 입장에서 서버의 처리 부담이 커져 서버 비용이 늘어날 수 있다.

 

데이터를 Client side로 처리할 시 장단점

장점

• 서버 관리자 입장에서 서버의 처리부담을 줄여 서버 비용을 줄일 수 있다.
• 처리하는 데이터가 보안에 민감한 경우, 클라이언트 내에서 처리 가능한 부분에 대해서는 통신에 대비하여 암호화할 필요가 없어져 암호화 소요가 줄어든다.

단점

• 서버 관리자의 입장에서 Client side에서 처리한 결과를 되받아야 하는 경우에 결과의 진위성을 알기 어렵다.
• 이것은 클라이언트 쪽에서 데이터를 위조하기 쉽다는 말과 같다.
• 서버쪽의 데이터가 확실한 진위이며 클라이언트 쪽에서 위조해서는 안되는 민감한 데이터의 경우 Server side로 처리해야 한다.
• 클라이언트 사용자에게는 클라이언트 컴퓨터의 처리 부담이 많아진다.

 

상대경로와 절대경로

상대경로란?

현재 파일의 위치를 기준으로 경로를 설정하는 방식

• 예:
  • ./file.txt (현재 디렉터리)
  • ../file.txt (상위 디렉터리)

절대경로란?

파일이나 리소스의 위치를 루트 디렉터리에서부터 지정하는 방식

• 예:
  /var/www/html/file.txt

상대경로를 사용하는 이유는?

• 이식성: 다른 환경에서도 동일하게 작동.
• 유지보수 용이: 프로젝트 구조 변경 시 수정이 쉬움.
• 파일 간 연관성: 프로젝트 내 파일들 간 경로 설정이 간단해짐.

 

HTML, JavaScript

HTML(Hypertext Markup Language)의 의미

HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조와 내용을 정의하는 마크업 언어.

 

HTML의 특징

1. 문서 구조 정의

• HTML은 웹 페이지의 제목, 단락, 목록, 이미지, 링크 등 문서의 구조와 콘텐츠를 정의합니다.

2. 태그 기반 언어

• HTML은 태그(< >)를 사용하여 콘텐츠를 감싸고, 태그는 콘텐츠의 의미와 역할을 나타냅니다.
  • 예: <h1>은 제목, <p>는 단락, <img>는 이미지 삽입.

3. 비프로그래밍 언어

• HTML은 프로그래밍 언어가 아닌 마크업 언어로, 동작보다는 콘텐츠와 구조를 정의합니다.
• 동적인 동작은 JavaScript를 통해 구현됩니다.

4. 브라우저 독립적

• HTML 문서는 모든 웹 브라우저에서 동일한 방식으로 읽히며, 플랫폼 독립적으로 동작합니다.

5. 속성 지원

• HTML 태그는 **속성(attribute)**를 통해 태그에 추가적인 정보를 제공합니다.
  • 예: 
  •   
    <img src="image.jpg" alt="설명 텍스트">
  • 코드 복사
  • html

6. 계층적 구조

• HTML은 트리 구조를 형성하며, DOM(Document Object Model)으로 표현됩니다.
  • 부모-자식 관계를 통해 요소 간 계층이 형성됩니다.

7. 정적 웹 페이지의 기반

• HTML 자체는 정적인 콘텐츠를 제공하며, CSS와 JavaScript를 결합해 동적인 기능과 스타일을 추가합니다.

8. 웹 표준 준수

• W3C와 WHATWG의 웹 표준을 기반으로 개발되며, 최신 HTML5는 멀티미디어와 상호작용 기능을 강화했습니다.

9. 확장성

• HTML은 다른 기술(CSS, JavaScript)과 결합하여 다양한 기능과 확장성을 제공합니다.
• 동적인 웹 애플리케이션 제작에도 활용 가능.

 

 

JavaScript는 무슨 언어인가?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어.

• 자바스크립트는 컴파일? 인터프리터 언어? 자바스크립트 엔진은 전통적으로는 인터프리터(interpreter) 방식으로 구현.
• 하지만, 인터프리터(interpreter)는 컴파일러(compiler)에 비해 느리다는 단점이 있음. 이 단점을 해결하고자 인터프리터와 컴파일러의 장점을 결합하여 만든 것이 JIT(Just In Time: 번역한 기계어를 저장해놨다가 필요할 때 다시 꺼내 쓰는 방식)
• 자바스크립트 엔진은 전통적인 인터프리터일 수 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있음.
  

 

JavaScript의 특징

JavaScript 엔진

: 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

웹 브라우저에서 자바스크립트를 해석하기 위해, 각 브라우저마다 다른 엔진을 가지고 있다.

• 브라우저별 엔진 종류

 

ECMAScript? ES6?

각각 다른 브라우저 엔진들이 자바스크립트 코드를 해석하고 실행하기 위해서는 공통된 규격이 필요.

그 규격을 정의한 것이 ECMAScript.

즉 자바스크립트 문법의 규격 사항, 표준 사항을 정의한 것이 ECMAScript.

그래서 자바스크립트 코드를 작성할 때도 이 ECMAScript에 맞도록 해야 하고, 엔진 또한 이에 맞게 구현이 되어 있기 때문에 서로 호환됨

ES6는 오래전부터 버전이 바뀌는 중에 버전 6에 해당하는 ECMAScript를 말한다. 해당 ES6를 최근 문법으로 생각하고 대부분 자바스크립트에서 활용하는 규격은 ES6.

 

ES7도 있고 8도, 그 이후 버전도 많은데 왜 ES6를 사용하는가?

ES6 이후로는 큰 문법의 변화가 없고, 작은 변화들만 업데이트되고 있는 상황이라 아직까지는 ES6를 최신 문법으로 많이 사용하고 있다고 보면 됨.

 

자바스크립트의 함수는 일급 객체

일급 객체는 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체.

함수를 데이터(string, number)처럼 다룰 수 있다.

 

[일급 객체의 조건]

const hello = function() {
	console.log("Hello World");
}

-> 모든 일급 객체는 변수나 데이터에 담을 수 있어야 한다.

const hello = function() {
	console.log("Hello World");
}

function print(func) {
	func();
}

print(hello);

-> 모든 일급 객체는 함수의 파라미터로 전달할 수 있어야 한다.

const hello = function() {
	console.log("Hello World");
	
    return function() {
    	console.log("Hello World 22");
    }
}

const hello2 = hello();
hello2();

-> 모든 일급 객체는 함수의 리턴 값으로 사용할 수 있어야 한다.

 

자바스크립트에서 함수는 객체로 취급됩니다.

• 자바스크립트 자료형
  • 원시 타입
    • string / number / boolean / undefined / null / symbol
  • 참조 타입(객체)
    
    • 배열 [ ]
    • 함수 function
    • 객체 리터럴 { }

 

동기 & 비동기

자바스크립트의 동작 원리

• 메모리 힙(Memory Heap) : 메모리 할당이 일어나는 곳. 변수 선언, 함수 저장, 호출 등의 작업이 발생하는 공간
• 콜 스택(Call Stack) : 코드를 읽어 내려가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간
• 콜백 큐(Callback Queue) : setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역.
• 이벤트 루프(Event Loop) : 이벤트 루프는 콜 스택에 현재 실행 중인 실행 콘텍스트가 있는지, 그리고 콜백 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인함.

자바스크립트는 기본적으로 동기식 언어이다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것.

이러한 동작을 단일 스레드 (싱글 스레드), 동기(Synchronous)라고 부름.

 

비동기(asynchronous)란?

: 비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말함.

 

콜백(Callback) 함수

: 매개 변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것.

 

Promise 객체

: 자바스크립트 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 Array나 Object처럼 독자적인 객체라고 보면 됨.

비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라 명명 지어짐.

[ promise의 상태 ]

1. Pending (대기) : 이행하지도, 거부하지도 않은 초기 상태
2. Fulfilled (이행) : 연산이 성공적으로 완료됨.
3. Rejected (거부) : 연산이 실패함.

HTML과 JavaScript 간의 호환성

HTML과 JavaScript는 웹 개발의 핵심적인 요소로, 서로 긴밀하게 통합되어 동작하며, 이를 통해 동적인 웹 페이지를 구현할 수 있다.

호환이 가능한 이유

HTML과 JavaScript의 호환성은 브라우저, DOM 표준화, 내장 객체, 이벤트 기반 설계 등 여러 요소가 조화를 이루며 가능해졌습니다. 이들은 각각의 역할을 수행하면서 동적으로 협력해 웹 애플리케이션의 풍부한 기능을 제공

HTML과 JavaScript가 호환이 가능한 이유는 다음과 같은 기술적, 구조적 특성 때문이다.