정적컨텐츠 , 동적컨텐츠 정적컨텐츠: 요청인자값에 상관없는, 변하지 않는 컨텐츠 동적컨텐츠: 요청인자값에 따라 바뀔 수 있는 컨텐츠 ✏️ 웹 서버 웹 브라우저로부터 http요청을 받아서 요청에 맞는 정적 컨텐츠를 제공한다. 웹 서버의 기능 클라이언트로부터 http요청을 받을수 있다. 정적컨텐츠 요청시 정적 컨텐츠 제공 동적컨텐츠 요청시 was로 요청전달, was가 처리한 내용을 클라이언트에 전달 ✏️ 웹 어플리케이션 서버 DB조회나 다양한 로직처리를 요구하는 동적인 컨텐츠를 제공한다. WAS의 기능 클라이언트로부터 http요청을 받을수있다(대부분 was는 웹서버를 내장하고있기때문(웹서버+웹컨테이너)) 요청에맞는 정적컨텐츠를 제공할수있다 db조회나 다양한 로직처리를 통해 동적컨텐츠를 제공할수있다. 📍 웹 ..

http는 메시지 형식으로 요청과 응답을 한다. 각 메세지의 구조를 살펴보면 HTTP 메시지 구조 Request 메시지 구조 Response 메시지 구조 Status Line의 Status Text(SUCCESS)는 status 코드에 따른 메시지이고 body안의 메시지 'success'는 편의를 위해 지정해준 메시지이다. 외국어 사용자를 위해 외국어로 작성하는 등으로 활용할 수 있다. >status code 더보기 status code 401과 403의 차이 401: 아예 권한이 없을때 403: 권한은 있는데 제한이 있을때 500이라고 무조건 백엔드에서 잘못한 것은 아니다 백엔드에서 에러에 대한 예외사항을 처리해 놓지만 예상 외의 에러가 발생했을때도 반환되는 상태 코드이다 HTTP Request Met..

HTTP의 특징 2개 1. 요청-응답 요청이 있어야 응답을 하게 된다. 메시지 형식으로 요청을 보내고 같은 형식으로 응답을 한다. 2. Stateless HTTP 개별 통신은 모두 독립적이어서 지난 통신의 결과를 보존하지 않는다. 로그인을 성공한다. 그리고 다른 요청을 보내면 상태를 저장하지 않는 stateless 성질 때문에 이전에 로그인 했던 기록이 없다. 그래서 지금 접속한 사람이 인가된 사용자인지 알 수 없기 때문에 원래대로라면 새로운 요청을 할 때마다 로그인을 해야 한다. stateless statefull 더보기 stateless statefull statefull 통신의 결과가 보존된다. ex) 실시간채팅 stateless 이전 통신에 대한 결과를 기억하지 못하기 때문에 통신을 할 때마다 이..

웹페이지와 서버 사이에서 데이터 흐름을 볼 수 있다.네트워크 패널을 열고 네이버 홈페이지를 새로고침 하면 이렇게 페이지를 로딩하는데 필요한 모든 리소스들이 호출되는 과정을 볼 수 있다네트워크 탭을 통해 페이지 로딩 성능 테스트, api크롤링을 할 수 있다. statusInformational responses (100–199)Successful responses (200–299): 성공Redirection messages (300–399): 우회 ex 요청한 리소스의 URI가 일시적으로 변경되었을때Client error responses (400–499): 클라이언트에러 (404 찾을수없다, 403 허가가 안된다)Server error responses (500–599)preveiw미리보기를 할 수 있다..

block 요소 HTML block 요소에는 , , , , , , 등이 있다. block 요소는 화면의 한 줄을 모두 차지해서 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다. inline 요소 , , 태그 등의 inline 요소는 block요소와 다르게 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다. p는 block요소 span은 inline span은 inline p는 block요소 html을 위와 같이 작성하고 p와 span에 배경색을 칠해보면 각 요소가 차지하는 영역을 알 수 있는데 inline과 block의 차이를 한눈에 알 수 있다. display 속성 이런 특성은 css의 display를 통해 바꿀 수 있다. p { background-color: yellow; display: inl..

레이아웃을 짜기 위해 사용하는 position의 속성을 알아보자 static .static { position: static; } position의 기본값은 static이다 어떤 엘리먼트의 위치가 지정됐다면 static이외에 relative, absolute, fixed등의 값이 지정된 것이다. 위치가 지정됐다 = position이 static이 아니다 relative .relative1{ position: relative; } .relative2 { position: relative; top: 40px; left: 40px; } relative는 별도의 프로퍼티가 지정되지 않으면 static과 똑같이 동작한다. relative2는 top과 left값을 주었기 때문에 프로퍼티 값이 없었다면 원래 있었을 ..

Semantic Web 의미론적 웹 그냥 데이터가 아닌 정보로써 의미가 있는 웹이라는 개념이다. 웹페이지들에 메타데이터를 부여해서 웹을 하나의 거대한 데이터베이스로 구축한다는 발상이다. 시멘틱 웹의 목표는 인터넷 데이터를 기계가 읽을 수 있게 하는 것이다. 시멘틱 태그로 웹을 구성하는 요소에 의미를 더해서 시멘틱 웹을 실현할 수 있다. Semantic Tag 시멘틱 웹을 만들기 위한 태그들 나 같은 디자인적인 기능만 있는 요소와 구별해서 사용한다 제목 이 코드에서 태그는 어떤 기능이 있는 것은 아니지만 해당 웹 페이지를 대표하는 제목이라는 의미를 가지고 있다. 시멘틱 태그를 의미에 맞게 잘 사용하면 코드의 구조화에 도움이 된다. 코드만 보고 해당 부분이 어떤 역할을 하는지 알수있기 때문에 데이터의 공유와..

인터넷이란? 인터넷은 서로 연결된 망, interconnected network를 줄인 말로 수많은 웹 서버들을 연결하는 네트워크 시스템이다. 웹이란? 인터넷상에 하이퍼텍스트를 구축한것 하이퍼텍스트란? 비순차적으로 다른 텍스트에 연결할수 있는 링크를 포함한 텍스트 HTML 삽입 미리보기할 수 없는 소스 공부하다가 궁금한거 검색하러 웹에 접속했다가 링크를 타고 타고 정신차려보면 웹서핑을 하고있는 상황이 가능하게 해주는 것이 하이퍼텍스트이다 HTML은 이런 하이퍼텍스트를 작성하는 언어이고 하이퍼텍스트 파일을 송수신할때 사용하는 프로토콜이 http이다 프로토콜 데이터 교환 방식을 정의하는 규칙 체계 HTTP (HyperText Transfer Protocol) 나는 하이퍼텍스트 파일을 요청하니까 너는 하이퍼텍..