나의 개발일지 TIL(Today I learned) - 미니프로젝트 4일차

Today I learned

• url 쿼리스트링
• API 복습
• RESTful
• 정규표현식
• 코드 피드백 반영

 

URL 쿼리스트링

url 쿼리스트링이란? 사용자 데이터를 전달하는 방법 중 하나로 url 주소에 데이터를 파라미터를 통해 넘기는 것을 말한다

쿼리 파라미터를 url 뒤에 붙여서 추가적인 정보를 서버 측에 전달하는 것이다 클라이언트가 어떤 특정 리소스에 접근하고

싶은지 정보를 담는다

 

형식

• 정해진 엔드포인트 주소 이후 ?를 쓰는 것으로 쿼리스트링이 시작함을 알려준다
• ?key=value로 필요한 값을 적는다
• 여러 개의 파리 미터가 필요한 경우는 &를 붙여 여러개를 담을 수 있다

하나의 쿼리스트링
/profiles?id=1

여러개의 쿼리스트링
/profiles?id=1&age=20&korea=100

 

API 복습

API는 애플리케이션 프로그램 인터페이스의 줄임말이다 API의 맥락에서 애플리케이션이란 고유한 기능을 가진

모든 소프트웨어를 말한다 인터페이스란 두 애플리케이션 간의 서비스 계약이라고 할 수 있다 이 계약은 요청과

응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다 API문서에는 이러한 요청과 응답을 구성하는

방법에 대한 정보가 들어 있습니다

API는 일반적으로 클라이언트와 서버 측면에서 요청을 보내는 애플리케이션을 클라이언트 응답을 보내는 애플리

케이션을 서버라고 한다

 

RESTful 복습

일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어

REST API를 제공하는 웹 서비스를 "RESTful"하다고 할 수 있다.

RESTful은 REST를 REST답게 쓰기 위한 방법으로 공식적으로 발표한 게 아니라

원리를 따르는 시스템을 RESTful이란 용어로 지칭한다

목적으로는 이해하기 쉽고 사용하기 쉬운 RESR API를 만드는 것

RESTful한 API를 구현하는 목적은 성능 향상에 있는 것이 아니라 일관적인 컨벤션을 통한

API의 이해도 및 호환성을 높이는 것이 주 동기다

 

정규표현식

정규표현식 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다 자바스크립트에서는 정규표현식도

객체로 RegEXp의 exec(), test() 메서드를 사용할 수 있다 미니프로젝트에서 test()메서드를 사용해 패턴이 맞으면 true

아니면 false가 나오는 기능을 사용했다

 

코드 피드백 반영

오늘의 나에게 중요하다고 생각했던 피드백은 같은 값이 중복적으로 서버통신을 많이 하는 것을 줄이게 해야 한다는

피드백이다

 

기존 코드

$(document).ready(function () {
    // index페이지에 팀원 리스트 가져오기
    $.ajax({
        type: "get",
        url: "/members",
        data: {},
        success: function (response) {
            // 가져온 response안에 members리스트를 변수에 저장
            // for of를 이용해 리스트를 반복
            const members = response["members"];
            for (const member of members) {
                const id = member["id"];
                const image = member["image"];
                const name = member["name"];
                const sns = member["sns"];
                const cnt = member["viewcnt"]
                const city = member["my_city"];

                // 가져온 지역 변수를 사용해서 날씨 정보를 가져온다
                $.ajax({
                    type: "get",
                    url: "http://spartacodingclub.shop/sparta_api/weather/" + city,
                    data: {},
                    success: function (response) {
                        const temp = response["temp"]

                        const temp_html = `<div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-4">
                                        <img src="${image}"
                                             class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                            <h5 class="card-title title_color">${name}</h5>
                                            <p class="card-text">지역:${city}</p>
                                            <p class="card-text temp">${temp}도</p>
                                            <a href="${sns}" class="card-text">개발일지 블로그</a>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                            <button><a href="/profile?id=${id}">프로필 보기</a></button>
                                            <p class="card-text">조회수: ${cnt}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                        // html구조를 작성하고 가져온 데이터를 삽입한다.
                        $(".members").append(temp_html);
                    }
                });
            }
        }
    });

여기서 잘못된 부분이 우리의 웹에서는 정해진 지역만 제공한다 프로필에 등록할 때 정한 지역을 사용해 자신의 지역의

온도를 표시해준다 온도를 가져오기 위해 API를 사용하는데 서울의 지역을 가지고 있는 팀원이 30명이 있다고 한다면

위 코드에서는 같은 값을 30번씩이나 반복해야 한다 너무 비효율적이다

 

피드백 반영

$.ajax({
        type: "get",
        url: "/members",
        data: {},
        success: function (response) {
            // 가져온 response안에 members리스트를 변수에 저장
            // for of를 이용해 리스트를 반복
            const members = response["members"];
            const member_cities = []

            // 중복된 지역 날씨를 계속 요청하면 너무 많은 요청을 하게 됨
            // 지역은 고정되있어 팀원들의 지역중 중복된 값을 모두 지우고 필요한 지역만 남김
            for (const member of members) {
                member_cities.push(member["my_city"]);
            }
            // 전개연사자를 이용해서 중복을 없애는 Set()을 적용한 결과물을 리스트로 만듬
            const cities = [...new Set(member_cities)];

            // 팀원 정보를 처리
            for (const member of members) {
                const id = member["id"];
                const image = member["image"];
                const name = member["name"];
                const sns = member["sns"];
                const cnt = member["viewcnt"]
                const city = member["my_city"];

                const temp_html = `<div class="card mb-3 cards-radius" style="max-width: 540px;">

                                <div class="row g-0">
                                    <div class="col-md-4">
                                        <img src="${image}"
                                             class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                            <h5 class="card-title title_color">${name}</h5>
                                            <p class="card-text">지역:${city}</p>
                                            <p class="card-text ${city}"></p>
                                            <a href="${sns}" class="card-text blog_hover">개발일지 블로그</a>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                        <button type="button" class="btn btn-light blog_hover"><a href="/profile?id=${id}">프로필 보기</a></button>
                                            <p class="card-text">조회수: ${cnt}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                // html구조를 작성하고 가져온 데이터를 삽입한다.
                $(".members").append(temp_html);
            }

            // 정리해둔 지역 리스트로 필요한 요청만 진행
            for (const city of cities) {
                // 가져온 지역 변수를 사용해서 날씨 정보를 가져온다
                $.ajax({
                    type: "get",
                    url: "http://spartacodingclub.shop/sparta_api/weather/" + city,
                    data: {},
                    success: function (response) {
                        const temp = response["temp"]

                        $(`.${city}`).text(`${temp}도`)
                    }
                });
            }
        }
    });

바꾼 코드를 확인하면 팀원이 가지고 있는 지역을 모두 리스트로 만들고 중복 값을 제거해버린다

그렇다면 서울이 30번 반복하던 중복을 1번 반복으로 바꿀 수 있다 이 생각을 못하고 그냥 코드를 작성했었다

오늘 잠깐 보신 코드로 바로 피드백을 주셔서 튜터님께 감사했다 다음에 프로젝트를 진행할 때 불필요하게 서버통신을 하는 게 없는지 꼭 확인해봐야겠다.

 

오늘의 느낀 점

오늘은 어제 피드백받았던 API를 RESTful하게 작성하는 방법과 API가 무엇인지를 복습하면서 공부하면 공부할수록 더 많은 공부할 내용이 생긴다는 것을 느꼈다 그리고 내가 작성하고 잘 작동하던 코드를 튜터님께서 스윗하게 피드백해주셨지만 그래도 나름 충격이었다 다른 사람에게 나의 코드를 평가당하고 수정하는 일에 익숙해져야겠다고 생각했다