[HTTP] 클라에서 서버로 데이터 전송 과정

* POST 폼 전송과정

1. 나의 form을 가지고 웹브라우저(크롬)이 HTTP 메시지(req)로 만들어준다.

post인경우, body에 input들을 넣는다. //get인경우, url경로에 넣는다.

<!-- The form will be hidden initially -->
            <div id="task-form" style="display: none;">
                <form action="/add" method="POST">
                    <label for="title">제목을 입력하세요:</label><br>
                    <input type="text" id="title" name="title" required><br><br>

                    <label for="details">내용을 입력하세요:</label><br>
                    <textarea id="details" name="details" required></textarea><br><br>

                    <input type="hidden" name="status" value="todo">
                    <button type="button" id="cancel-btn1">취소</button>
                    <button type="submit">등록</button>
                </form>
            </div>

//req
POST /add HTTP/1.1
Host: localhost:3030
Content-type: application/x-www-form-unlencoded

title=할일1&details=숨쉬기&status=todo //req.body

 

2. 서버에서 req를 파싱후 사용한다

app.post('/add', (req, res) => {
    // const taskContent = req.body.task;
    console.log(req.body.title, req.body.details);
    const title = req.body.title;
    const details = req.body.details;
    const status = req.body.status;

    const newTask = { id: uuidv4(), title: title, details: details ,status: status };
    db.get('tasks').push(newTask).write();

    // db.get('history')
    //     .push({ timestamp: new Date().toISOString(), action: `Added task: ${title}` })
    //     .write();

    res.redirect('/');
});

 

* GET 폼 전송과정

쿼리 파라미터 방식.

get인경우 크롬브라우저가 input을 url에 넣어서 HTTP 메시지를 만들어준다.

.

* 안드로이드, ios에서 백엔드에 데이터 전달방법

직접 HTTP 메시지를 만들어서 넘긴다! // ios, android라이브러리들이 있음

그 외에도 HTTP 메세지를 직접 전송하는 경우들

 

* 데이터 전달 방식 2way