1주차 WIL - 프로젝트 리뷰(PR, REST API)

- 오류1. 등록된 카드 내 드롭다운으로 선택한 생월 누락.

JavaScript

// 등록 버튼을 눌러 저장
        $("#savebtn").on('click', async function () {
            // Check if any of the required fields is empty
            if (!$('#image').val() ||
                !$('#name').val() ||
                !$('#year').val() ||
                !$('#month').val() ||
                !$('#day').val() ||
                !$('#mbti').val() ||
                !$('#introduce').val() ||
                !$('#pors').val() ||
                !$('#collabo').val() ||
                !$('#blog').val()) {
                alert('모든 항목을 입력해야 등록이 가능합니다.');
            } else {
                let image = $('#image').val();
                let name = $('#name').val();
                let year = $('#year').val();
                var m = document.getElementById("month");
                var month = m.value;
                let day = $('#day').val();
                let mbti = $('#mbti').val();
                let introduce = $('#introduce').val();
                let pors = $('#pors').val();
                let collabo = $('#collabo').val();
                let blog = $('#blog').val();

                let doc = {
                    'image': image,
                    'name': name,
                    'year': year,
                    'month': month,
                    'day': day,
                    'mbti': mbti,
                    'introduce': introduce,
                    'pors': pors,
                    'collabo': collabo,
                    'blog': blog
                };
                await addDoc(collection(db, "self_intro"), doc);
                alert('저장 완료');
                window.location.reload();
                console.log("저장완료");
            }
        });

HTML

<!-- 생년월일 -->
            <div class="mb-3 form-item">
                <label for="birthdate" class="form-label">생년월일</label>
                <div class="input-group">
                    <input type="number" id="year" placeholder="년(4자)" class="form-control">
                    <select id="month" class="form-select">
                        <option value="">월</option>
                        <option value="1">1월</option>
                        <option value="2">2월</option>
                        <option value="3">3월</option>
                        <option value="4">4월</option>
                        <option value="5">5월</option>
                        <option value="6">6월</option>
                        <option value="7">7월</option>
                        <option value="8">8월</option>
                        <option value="9">9월</option>
                        <option value="10">10월</option>
                        <option value="11">11월</option>
                        <option value="12">12월</option>
                    </select>
                    <input type="number" id="day" placeholder="일" class="form-control">
                </div>
            </div>

• 이전 코드

var month = $('#month').val();

• 수정 코드

var m = document.getElementById("month");
var month = m.value;

비어있던 select option value 값에 12달의 숫자를 차례로 넣어 (option value="11") 생월의 숫자인 value를 받게 했다.

- 오류2. 등록된 카드 내 생년등록 오류

$('#update_card').on('click', '.card', function () {
            let card = $(this);
            let imageUrl = card.data('image');
            let name = card.find('.card-title').text();
            let yearMonthDay = card.find('.card-text:nth(0)').text().split('/');
            let year = yearMonthDay[0].trim().split(':')[1];
            let month = yearMonthDay[1].trim();
            let day = yearMonthDay[2].trim();
            ...
});

• 이전 코드

let year = yearMonthDay[0].trim();
console.log(year) => ['생년월일: 1996']

• 수정 코드

let year = yearMonthDay[0].trim().split(':')[1];

' : ' 를 기준으로 split() 해서 1996만 추출.

알게된 용어

- PR

프로젝트를 여러 명이서 진행하다 보면 필수적으로 Pull Request (흔히 줄여서 PR) 이란 것을 하게 될 것이다. PR은 개별의 개발 참여자가 작업한 코드를 메인 코드베이스에 통합하기 전에, 코드를 검토 받기 위한 일련의 과정을 의미한다.

- Rest API

Representational State Transfer 의 약자로 소프트웨어 프로그램 아키텍쳐의 한 형식이다. 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 월드 와이드 웹(WWW)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍쳐의 한 형식이다. REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장접을 최대한 활용할 수 있는 아키텍쳐 스타일이다.

• REST의 구체적인 개념

HTTP URI를 통해 자원을 명시하고, HTTP 메소드 (POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD OPERATION을 적용하는 것을 의미한다. 즉 REST는 자원 기반의 구조 (ROA: Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통헤 Resource를 처리하도록 설계된 아키텍쳐를 의미한다. 웹의 모든 자원에 고유한 ID인 HTTP URI를 부여한다.

• REST API 가 등장하게 된 이유

최근의 서비스 / 애플리케이션의 개발 흐름은 멀티 플랫폼, 멀티 디바이스 시대가 도래했다. 단순히 하나의 웹 브라우저만 지원하던 과거와는 달리 최근의 서버 프로스램은 여러 웹 브라우저뿐만 아니라 아이폰, 안드로이드 애플리케이션과의 통신에 대응할 수 있어야 한다. 이로 인해 플랫폼에 맞추어 새로운 서버를 만드는 수고를 들이지 않기 위해 범용적으로 사용성을 보장하는 서버 디자인이 필요하게 된 것이다.

• RESTful APIs를 만드는 이유

RESTful APIs를 개발하는 가장 큰 이유는 Client Side를 정형화된 플랫폼이 아닌 모바일, PC, 어플리케이션 등 플랫폼에 제약을 두지 않는 것을 목표로 했기 때문이다. 스마트 기기들이 등장하며 TV, 스마트 폰, 태블릿 등 Client 프로그램이 다양화 되고 그에 맞춰 Server를 일일이 만든다는 것이 비효율적인 일이 되었다. 이런 과정에서 개발자들은 Client Side를 전혀 고려하지 않고 메시지 기반, XML(W3C에서 개발된 데이터를 정의하는 규칙을 제공하는 마크업(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. ) 언어이다.), JSON과 같은 Client에서 바로 객체로 치환 가능한 형태의 데이터 통신을 지향하게 되면서 Server와 Client의 역할을 분리하게 되었다.

=>이런 변화를 겪으면서 필요해진 것은 HTTP 표준 규약을 지키면서 API를 만드는 것이다.

• REST의 구성

  1. 자원(Resource) - URL
     
     모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원을 구별하는 ID는 /orders/order_id/1 와 같은 HTTP URI 이다.
     
     2. 행위 (Verb) - Http Method
     
     HTTP 프로토콜의 Method를 사용한다. HTTP 프로토콜은 GET, POST, PUT, DELETE와 같은 메서드를 제공한다.
     
     3. 표현 (Representaion of Resource)
     Client가 자원의 상태 (정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답 (Representation)을 보낸다. REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타낼 수 있다. 현재는 JSON으로 주고 받는 것이 대부분이다.