Web Dev

46일차 Study

수오니니 2021. 12. 16. 18:36

스터디 주제

- DOM 이란?

- HTML 기초용어 및 태그

 

 

스터디 내용 

 

HTTP 개요

  • HTTP
    • http -> https(+security / 크롬 때문에)
    • 패킷을 훔쳐서 해킹하는 케이스를 막기위해
    • 부호화, 복호화 등을 방식으로 알아볼 수 없게 처리하는 것이 protocol + s 패킷을 훔쳐서 해킹하는 케이스를 막기위해 부호화, 복호화 등을 방식으로 알아볼 수 없게 처리하는 것이 protocol + s
  • 네트워크
    • 네트워크 그룹 = 서브넷
    • www = 인터넷 기반의 서비스 중 하나
    • www는 80번 포트는 개발이 최종 완료 된 후에 사용
  • XML, JSON(javascript object note) 데이터를 보내고 응답할 때 사용
  • REST
  • AJAX
  • Servlet : 데이터 처리(모델 컨트롤러) JSP : 구현(뷰)
  • => MVC Design Pattern
  • 리퀘스트 메세지 : 필요한 리소스(웹프로그램, 웹문서 등)를 요청할 때 서버에 전달
  • 리스폰스 메세지 : 리소스를 전달받아 헤더에 상태코드 기입, 바디에 실제 헤더에서 보내주기로 약속한 HTML 문서나 이미지를 보내줌 -> 브라우저가 마인탭에 맞는 형태로 처리
  • id/pw 입력받아 전달하는 방식 : POST
  • 클릭 이벤트 핸들러 방식 : GET(대부분)
  • HTTP 동작방식 - 응답
  • null point exception : 참조변수에 null이 저장(객체가 없는데)되어 있는데 메소드를 호출할때

정적웹 vs 동적웹

  • 정적웹 : 만들어진 페이지 자체만을 보여주는 웹페이지(HTML), 변경하려면 새로운 HTML 페이지로 교체하여 보여지게 해야함.
  • 동적웹 : 만들어진 페이지에서 원하는 부분을 새로운 데이터가 보여질수 있도록 이벤트가 구현되어 있다면 정적인 페이지(JavaScript, CSS, JSP) → 이벤트를 안해주면 정적이라 볼수도 있음. '이벤트' 여부가 가장 중요!
  • Dynamic Web Project
    • context root : 최상위 디렉토리\
    • site의 메인 페이지는 무조건 : Welcome pages - index.jsp
    • src / main / webapp : 컨텍스트(아파치 톰캣이 클라이언트 요청을 받아서 제공할 수 있는 WEB자원) 저장 → HTML, CSS, JS, jsp
    • webapp 경로에 저장해야 WAS가 컨텍스트를 읽어올수 있음!

HTML5

DOM(Document Object Model)

문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다.

여기에 Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있습니다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있습니다.

DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.

이벤트에 의해 박스모델이 바뀌는 것

(데이터는 AJAX를 통해 가져옴)

 

  • 절대경로

<img alt="코알라" src="/web/html/images/Koala.jpg" width="200">

/ : 최상위 경로

web : 컨텍스트

  • 상대경로

<img alt="코알라" src="images/Koala.jpg" width="200">

: 현재 요청문서의 디렉토리 를 표현

 

 

'Web Dev' 카테고리의 다른 글

49일차 Study  (0) 2021.12.21
48일차 Study  (0) 2021.12.20
47일차 Study  (0) 2021.12.18
45일차 Study  (0) 2021.12.16
다시 처음  (0) 2021.12.16