네이버 부수기

본문 바로가기 메뉴 바로가기

티스토리 뷰

개념

네이버 부수기

상어악어 2022. 1. 10. 17:01

오늘 해 볼 실습은 네이버 부수기이다

이 실습을 통해 웹을 더 깊게 이해할 수 있다

네이버에 접속하고 오른쪽 마우스 클릭을한 후

검사를 누른다

Elements중 <head>태그가 있는 부분을

오른쪽 클릭하고 Delete element를 클릭한다

네이버를 부숴버렸다

정확히 말하면

CSS를 부숴버렸다

네트워크에 들어가면

많은 파일들이 있고, 하나의 파일을 선택했을때

Request Method : GET

Status Code : 200

content-type : image/jpeg

이런 정보가 뜬다

이제는 이게 무슨의민지 알 수 있따

Get은 CRUD중 R에 속하는 READ의 메소드 GET을 의미한다

즉 파일을 읽어온다는 의미

Status Code: 200

코드가 200번대라는 것은 클라이언트의 요청이 정상적으로 이루어졌다는 것

content-type : image/jpeg

이 파일이 이미지 파일이고 jpeg형식을 가지고 있다라는 것

다음으로 body를 부숴보자

body태그에 오른쪽 마우스를 클릭하고 delete element를 클릭하면

네이버가 사라졌다

하지만 새로고침하면 다시 나타난다

<body>에서 계쏙 내려가다보면

div class="logo area"라는 태그가 보인다

마우스를 갖다대면 웹페이지 상단부분이 파란색 네모로 감싸진다

이 부분을 나타내는 것 같다

더 하위로 가서

class=search area인 부분을 오른쪽클릭하고

delete element를 클릭하면

검색창이 사라진다

로그인과 중앙 배너부분도 부숴버렸다

하지만 새로고침을 하면 다시 원래대로 돌아온다

이 실습을 해보면서 확인할 수 있는것은

내 컴퓨터에서 아무리 네이버를 부숴도

새로고침을 하면 원래대로 돌아온다

이 말인 즉슨 새로고침을 할 때 서버에서 HTML, CSS, JavaScript를 받아온다는 것

그래서 내 로컬 환경에서 아무리 delete element로 네이버를 부숴도

이건 사본이기 때문에 네이버 서버의 웹페이지에 적용되지 않는다

새로고침을 하면 원래 웹페이지 그대로를 서버로부터 받아온다

웹은 이렇게 서버에서 HTML, CSS, JavaScript를 받아오는 방식으로 동작한다

그래서 서버의 HTML, CSS, JavaScript를 변경해주고

내가 새로고침을 하면

그 변경사항이 바로 적용된다

웹의 동작방식과 새로고침의 역할에 대해 직접 확인해볼 수 있는 실습이다

직접 해보니 이해가 더 잘되는 것 같다

'개념' 카테고리의 다른 글

프레임워크와 라이브러리 개념 (0)	2022.01.13
데이터베이스 개념 (1)	2022.01.12
웹 개념 (0)	2022.01.10
API 개념 (0)	2022.01.05
네트워크 개념2 (0)	2022.01.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

글 보관함

티스토리툴바