[TIL] URL에서 값 가져오기!! - Querystring

쿼리스트링(Querystring)이란?

지정된 매개변수에 값을 할당하는 URL의 일부입니다. 쿼리스트링에는 일반적으로 웹 브라우저나 기타 클라이언트 응용 프로그램에서 기본 URL에 추가한 필드가 포함됩니다. 웹 서버는 URL 경로를 기반으로 파일 시스템에서 파일을 읽거나 리소스 유형에 특정한 논리를 사용하여 요청을 처리하여 HTTP 요청을 처리할 수 있습니다.

출처 : 위키피디아

형식

기본적으로 "http://localhost/path?querystring" 형식이며 URL 뒤에 덧붙여서 추가적인 정보를 서버에 전달하고 클라이언트가 어떤 리소스에 접근하고 싶어 하는지 정보를 담아놓습니다.

• URL과 조건문 사이에 ' ? ' 구분자를 두고 필요한 파라미터 값을 적습니다.
• 파라미터가 여러 개일 경우 ' & '를 붙여 여러 개의 파라미터를 넘길 수 있습니다.

 

예제 - 현재 미니 프로젝트 진행 부분!

사진을 클릭하면 소개 페이지로 넘어가는데 파라미터에 key값을 보내서 그 값에 맞는 정보를 DB에서 가져와 보여주는 서비스를 구현하려고 합니다.

1) 메인 페이지 부분

우선 메인 페이지에 DB에 저장되어 있는 팀원들의 사진을 뿌려줍니다. 우선 정식 프로젝트가 아니고 로컬에서 구현하기에 이미지는 static/image에 저장을 해두고 가져오는 형식을 취했습니다.

 

1. $(document).ready()

//index.html

$(document).ready(function () {
            show_photo();
        });

첫째로  $(document).ready()를 사용하여 DOM 객체가 생성되는 시점에서 함수를 실행시켜 페이지에 팀원들의 사진을 보여줍니다.

 

2. ajax

//index.html

		function show_photo() {
            $.ajax({
                type: 'GET',
                url: '/details',
                data: {},
                success: function (response) {
                    let rows = response['user']
                    for (let i = 0; i < rows.length; i++) {
                        let profile_img = rows[i]['profile_img']
                        let key = rows[i]['key']


                        let temp_html = ` <div class="team-intro__imgbox__1">
                                                  <form action="http://localhost:5000/detail">
                                                  <input type="text" name="key" value="${key}" style="display: none">
                                                      <input type="image" src="${profile_img}">
                                                  </form>
                                              </div>`

                        $('#team_img').append(temp_html)
                    }
                }
            });
        }

사진들을 뿌려주는 함수인데 ajax를 사용하여 /detail에 저장되어 있는 JSON 형식의 리스트들을 가져옵니다.

이후, for반복문을 사용하여 리스트 내에 있는 profile_img와 key값을 전부 가져온 후 그 값들을 활용하여 form태그로 파라미터 값을 만들어줍니다.

 

2) 상세 페이지 부분

1. param 값 가져오기

<script>
            const qs = window.location.search.substring(1); //URL에서 ?뒤 param을 가져옵니다.
            const params = qs.split("&")[0]; //가져온 param을 &단위로 끊고 그 중 첫 번째 값을 가져옵니다.
            let num = Number(String(params).split('=')[1]) //가져온 첫 번째 값에서 = 기준으로 자르고 두 번째 값을 숫자로 변환해 가져옵니다.
            show_comments(num)

 

2. 값에 해당하는 정보들을 뿌려주기

function show_detail() {
                $.ajax({
                    type: 'GET',
                    url: '/details',
                    data: {},
                    success: function (response) {
                        let rows = response['user']
                            let name = rows[num]['name']
                            let age = rows[num]['age']
                            let style = rows[num]['style']
                            let blog = rows[num]['blog']
                            let profile_img = rows[num]['profile_img']


                            document.getElementById("my_name").innerHTML = name
                            document.getElementById("age1").innerHTML = `${age}`
                            document.getElementById("style1").innerHTML = `${style}`
                            document.getElementById("blog1").innerHTML = `${blog}`
                            document.getElementById("profileimg1").src = profile_img


                    }
                });
            }

가져온 변수 num에 맞는 값들을 가져와 HTML로 뿌려줍니다!!

 

마치며

페이지 이동시 어떻게 값을 보내서 원하는 값을 DB에서 가져올지 고민을 많이 했는데 튜터님의 말씀과 과제, 아는 동생의 Hint로 잘 해결했습니다. 확실히 직접 구글링 하고 힘들게 해결한 코드들은 기억에 잘 남는 것 같습니다.😎😎