개발 일기

20250826 HTML을 배우면서 URL 구조, get과 post 차이에 대해 배웠다. 본문

TIL

20250826 HTML을 배우면서 URL 구조, get과 post 차이에 대해 배웠다.

종현종현 2025. 8. 26. 18:58

직접 파일 열기와 개발 서버 실행 URL 차이

🧩 직접 파일 열기

html은 메모장으로도 작성할 수 있고 파일을 웹 브라우저로 열 수 있었다.

이 경우에는 주소창에 file://로 시작해서 내 컴퓨터에서 파일 위치 주소가 뜬다.

서버를 띄우지 않고 그냥 파일을 열었기 때문에 브라우저가 직접 파일을 열고 보여주게 된다.

즉, 이 경우는 HTTP 요청/응답이 일어나지 않게 된다.

 

 

🧩 개발 서버 실행

vscode를 이용해 Live server 실행을 했다.

이 때 url은 다음과 같다. http://127.0.0.1:5500/index.html

http는 프로토콜을 의미하고 :는 구분자 127.0.0.1은 로컬 개발 서버

5500은 포트 /는 구분자 index.html은 context명(app 이름)을 의미한다.

 

 

오늘 배운 GET과 POST 차이

html의 <form> 요소는 사용자 입력을 위한 HTML 양식을 만드는 데 사용된다.

예를 들어,

<body>
  <form action="loginController">
    ID <input name="id"> <br>
    PW <input name="pw"> <br>
    <input type="submit" value="login">
  </form>
</body>

 

위의 코드를 실행하고 입력 폼을 작성해 제출하면 get 방식으로 데이터를 보내게 된다. (method의 디폴트 값이 get)

 

 

url과 오류 메세지를 볼 수 있다. loginController라는 url로 보내려고 해도 서버 자원이 없기 때문에 오류가 발생하게 된다.

url을 보면 loginController에 id 값과 pw 값이 노출되어 있는 것을 볼 수 있다.

get은 요청을 전송할 때 URL 주소 끝에 파라미터로 포함되어 전송되고 이 부분을 쿼리 스트링이라고 부른다.

 

위 처럼 파라미터에 내용이 노출되기 때문에 민감한 데이터를 다룰 때는 get 방식을 사용해서는 안된다.

 

post의 경우

<body>
  <form action="loginController" method="post">
    ID <input name="id"> <br>
    PW <input name="pw"> <br>
    <input type="submit" value="login">
  </form>
</body>

 

위의 코드를 브라우저에서 실행해서 id, pw를 값을 넣어 요청하면 다음과 같이 오류가 발생한다.

 

 

get과는 다르게 url에 파라미터의 값이 있지 않고 데이터를 HTTP 메세지의 Body에 담아서 전송한다. get과 다르게 post가 더 안전하게 보인다.

 

 

 

하지만 위에 그림처럼 post 방식 또한 개발자 도구를 통해 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우 반드시 암호화해 전송해야 한다.

 

 

✔️  추가적인 GET과 POST 차이 정리표

구분 GET POST
데이터 전송 위치 URL 쿼리스트링 HTTP Body에 담김
주소창 표시 URL에 그대로 노출 주소창에는 보이지 않음
데이터 길이 제한 있음 (브라우저/서버별 상이, 보통 2~8KB) 거의 없음
사용 목적 데이터 조회, 검색, 페이지 이동 등 데이터 생성/전송, 로그인, 회원가입 등
캐싱 가능 여부 가능 (브라우저 캐시, 북마크 가능) 불가
보안 URL에 노출되므로 민감한 정보 사용 금지 URL에 노출되지 않지만 HTTPS로 전송해야 안전
특징 단순 요청, 브라우저 히스토리에 남음 서버에서 처리 후 결과 반환, 브라우저 히스토리에 남지 않음
저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

20250902 JavaScript 비동기  (0) 2025.09.02
20250901 JavaScript 화살표 함수와 this  (0) 2025.09.01
20250829 JavaScript  (1) 2025.08.31
20250828 자바스크립트 기본을 배웠다.  (0) 2025.08.28
20250827 CSS와 bootstrap을 배웠다.  (1) 2025.08.27
'TIL' Related Articles more
Comments