[211229] url, uri, form

table 복습

• tr : 줄(행)부터 시작하는 테이블
• td : 줄(행)을 기반으로 열(칸)을 붙여나가기

 

 

---

url, uri, queryString, 주소 읽기

작성한 html끼리는 a 태그를 이용해 연결이 가능하다. 이제는 연결을 해서 생성하는 주소에 신경쓸때가 되었다

 

 

 

URI와 URL의 차이점

• uri
  • Uniform Resource Identifier, 자원을 구분하고 접근하기 위해 사용하는 유일한 식별자
  • 주요목적 : 리소스를 찾는것, html, xml 및 기타 파일에도 사용됨
  • 예) :urn:isbn:0-342-34243-3
• url
  • Uniform Resource Locator (지원의 위치), 자원의 주소로 자원을 식별한다
  • 주요목적 : 웹 페이지만 찾는데 사용
  • 예) http://google/com

 

 

url 구문 읽기

의도 : 브라우저 " 네가 작성한 코드를 가져와서 그리겠다. 그 중에서 index.html을 열겠다. "

http://127.0.0.1:5500/index.html?<Query>#<Fragment>

scheme(프로토콜) : 브라우저가 사용할 프로토콜

host : 요청이 도달할 서버. 도메인 네임이나 IP adress

port : 서버에서 프로그램(서비스)이 사용하는 소켓을 구분

path : 서버에서 자원의 경로

queryString : ? 이후로 시작. 서버에 전달할 파라미터. key=value 쌍으로 표기하고 복수개의 경우 &로 구분

fragment : html 요소의 id를 가르켜 해당지점으로 스크롤을 이동

 

 

---

데이터를 넘겨주는 form 요소

form은 언제 쓸까?

1. 게시판을 만들고 싶다.
2. 보기만 하는게 아니라 입력을 하는 게시판을 만들고 싶다.
3. input으로 입력한 데이터는 어떻게 넘겨줘야할까?

이때 쓰는게 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획인 form이다.

 

 

form의 특성

<form method="get" action="./view.html">

• action : 양식 데이터를 처리할 프로그램의 URL을 담는다. <a>같은 역할이라고 생각하면 쉽다.
• method : 양식을 제출할 때 사용할 http 메소드. post, get, dialog를 사용할 수 있다.

 

get과 post의 차이점 (+dialog)

get : url을 통해서 양식데이터를 요청 본문으로 전송한다.

post : 안보이는 곳에서 데이터를 전송하는 행위. 양식데이터를 action URL과 ?구분자 뒤에 이어 붙여 전송한다.

(dialog : 양식이 dialog 안에 존재할 경우, 제출과 함께 대화 상자를 닫는다.)

 

모든 브라우저는 get 요청만 렌더를 한다.

왜? post는 화면에 렌더링할 목적이 아니라 오직 데이터를 전달할 목적만 가지고 있기 때문.

(현재 내가 배운 지식으로는 사용하지 않음. 백엔드에서 사용)

보안이 뭐가 더 약한게 아니고 서로 같다 의미없음. 눈에 보이고 안 보이고 차이.

 

실습

See the Pen submit by supermint (@ma_ad_shouri) on CodePen.

 

 

 

 

submit을 사용해 링크 이동할때 : action에 있는 링크로 이동, get 사용

<form method="get" action="./view.html">
	<input type="submit" value="글쓰기">
</form>

적은 내용이 각 텍스트박스 name 옆에 뜬다. (텍스트 박스 name은 위 코드팬 참고)

문제점 : password도 URL에 고스란히 모두 표기됨.

 

 

submit을 사용해 링크 이동할때 : action에 있는 링크로 이동, post 사용

<form method="post" action="./view.html">
	<input type="submit" value="글쓰기">
</form>

짜짠. 에러가 뜬다. 화면에 렌더링을 안하니 당연한 결과.&amp;amp;amp;nbsp; 주소도 http://127.0.0.1:5500/view.html 라고 a 요소로 이동했던것처럼 단순하게 뜸.

 

 

하지만 작성했던 데이터를 확인할 수 있다.

 

 

+덧) a로 링크 이동할때 : href에 있는 링크로 이동

<a href="./view.html"> 글쓰기 </a>

 

---

 

실습 : 만들어보자

이런걸 만들어보자. a 사용하지 말고.

 

페이지별 구현해야하는 기능

1. 각 페이지

   1-1. LOGO를 누르면 index.html로 이동

 

2. index 페이지

   2-1. 게시글의 제목을 누르면 view.html로 이동

   2-2. 글쓰기를 누르면 web.html로 이동

 

3. web 페이지

   3-1. 데이터를 입력할 수 있는 input 박스

   3-2. 입력한 데이터를 전송할 수 있는 글쓰기 버튼