TeamPage 프로젝트 하면서 다시 한번 알게 된 점 - 4

오늘은 프로젝트 마지막 하는 날로 회원가입 후 로그인을 하는 것을 firebase를 연동해 해봤습니다.

이 부분은 3탄에서 적은 것처럼 개발자 문서를 읽으면서 하니까 쉽게 해결이 되었습니다.

 

하지만 여기서 div와 form의 차이를 알아야할 때가 왔었습니다.

HTML에서 form은 HTML의 일반 요소와 큰 차이점을 사용방법이 아닌 쓰임새에 있습니다.

form은 단순한 요소가 아니라 사용자(클라이언트)와 웹 서버가 서로 통신하는 기술 중 하나 입니다.

즉, form은 HTML을 작성할 때 주로 사용자에게 정보를 입력받거나 전달받기 위해 사용되는 요소입니다.

여기서 form에 기입된 값은 submit 이벤트가 발생하면, 정의된 method 유형으로 action 목적지에 전송이됩니다.

여기서 전송된 데이터는 웹 서버에서 처리하고, 결과에 따라 페이지를 이동하거나 알림을 주기도 합니다.

결론적으로 form은 사용자(클라이언트)와 웹 서버 간의 통신을 위해 정의된 HTML 요소입니다.

 

그렇다면 데이터를 전달하는 form을 사용해서 서버에 요청을 할 때 중요한 속성인 method와 action이 있는데 

여기서 method는 어떤 방식 으로 어떤 기능(action)을 요청할지 정의하는 form의 속성입니다.

또한 method는 데이터를 어떤 방식으로 전달할지 결정합니다. HTTP protocol 사양은 다양한 방식 (PUT, PATCH 등)을 제공하지만, form은 GET, POST 이 두 가지 방식만 사용할 수 있습니다.

그럼 여기서 GET과 POST의 차이는 데이터를 보낼 때 body가 없느냐(GET), body가 있느냐(POST)가 가장 큰 차이점 입니다.

예시로 GET 방식

<form action="http://hello.com" method="get">
  <input name="message" value="Hello">
  <button>Send a message</button>
</form>

GET 방식을 이용해 HTTP 프로토콜로 데이터를 전달하면 아래와 같습니다.

GET /?message=Hello HTTP/1.1
Host: hello.com

또 POST 방식 예시

<form action="http://hello.com" method="post">
  <input name="message" value="Hello">
  <button>Send a message</button>
</form>

Post 방식을 이요해 HTTP 프로토콜 데이터를 전달하면 아래와 같습니다.

POST / HTTP/1.1
Host: hello.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

message=Hello

이제 action 속성에 대해서 이야기를 해보자면 action은 어떤 기능을 요청할지 정의합니다.

action의 값은 반드시 유효한 URL 이어야 합니다.

 

즉, 결론으로 돌아와서 form와 div의 차이는 아예 다른 것 입니다.

div는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용합니다.

즉, div는 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 때 사용하고

form은 통신을 할때 이용을 한다고 생각하면 됩니다.

 

이렇게 길게 적은 이유는 유튜브를 통해서 회원가입 로그인을 구현하였는데 form태크로 CSS를 하려고 하니 진행이 되지 않았습니다.

하지만 form태그위에 div를 적거나 form을 없애고 div를 이용하니 style을 조절할 수 있었습니다.

 

그리고 CSS를 하면서 div에는 style, width, height, border, background-color, float(정렬을 위해 사용), margin(여백) 이러한 것들을 사용할 수있는 반면 form에다가 사용하는건 맞지 않은 방법이라는 결론을 얻어 낼 수 있었습니다.

(여기서 float은 div의 정렬 (좌, 우)를 하는 속성으로 가운데 정렬은 다른 방식을 사용해야 합니다. 왜냐면 틀을 가운데 정렬하는 건 맞지 않기 때문에 div안에 자식에다가 text-align: center; 속성을 넣어주면 가운데 정렬을 합니다. 속으면 안되는 것은 text는 문자 이런것만이 아닌 자식을 가운데 정렬을 해줍니다.)

 

마지막으로 자바스크립트 언어를 공부하면서 왕초보로써 알게된 지식이 생겼다.

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = [line];
}).on('close',function(){
    str = input[0];
    console.log(str)
});

위의 js를 보고 설명하겠습니다.

[1] readline 모듈은 javascript에 내장된 모듈로, readable stream에서 한 줄씩 입출력을 처리할 수 있게 도와줍니다.

[2] 모듈을 불러오기 위해서는 require("모듈 이름")을 선언하고, 변수를 선언해서 저장해야 합니다.

[3] readline interface 객체를 만듦으로써 즉, 정의한 변수를 이용해 readline 인터페이스 객체를 하나 만들어 주고 readline interface 객체를 이용해 콘솔에서 표준 입출력을 처리할 수 있게해줍니다. 그리고 createInterface()메서드를 이용해 객체를 만들고 변수 rl에 저장해주는 겁니다.

 

[4] rl.on에서 on메소드는 생성한 변수 rl 객체로 입출력과 관련된 여러 이벤트를 처리해주는 함수 입니다.

예를 들어 사용자가 콘솔에 입력을 넣는 것과 같은 이벤트가 있다면 on메소드를 이용하면 이벤트가 발생할 때 실행할 동작을 지정할 수 있습니다.

 

아주 기본적인 것이지만 여기에는 많은 것들이 담겨 있습니다. 첫번째로 개발자가 이미 만든 내장된 모듈을 꺼내오는 방법과 표준입출력을 우리가 눈으로 바로 인식이 되는 input, output이라는 글자로 표현할 수 있다는 것 그것을 나타내기 위해 interface를 만들어서 저장해두는 방식이 있다는 것 이거 자체가 저한테는 오늘 공부하면서 기초가 정말 중요하다는 것을 다시 느끼게 해줬고 처음 0단계부터 하나하나 나아갈 생각입니다.