[Log]내일배움단 Making Challenge 프로젝트 개발일지 9~12일차

내일배움단_MakingChallenge

스파르타 5기_4조 메이킹 프로젝트

# 개발 업무내용

[개발 목표]

1. 검색 기능 구현에 대하여 학습하여 기능 구현 하기
2. 홈 화면에 카드 칼럼 내용을 데이터베이스에서 랜덤으로 받아서 보여주기

[실습 내용]

< 검색기능을 구현하고 새로운 페이지에서 검색이 바로 진행되게 설정 >

• 기존 검색창을 다른 page로 이동
• 이동할 때 입력받은 input 값을 가져갈 수 있게 설계
• 받은 값을 이용하여 검색 기능을 바로 실현할 수 있게 설정

< 랜덤 칼럼 보여주기 기능 구현 >

• 데이터 베이스에서 값을 랜덤으로 받아와서 $('#search-box').append(temp_html) 실행

# 업무 중 이슈/고민.. 그리고 해결한 내용

1. 다른 페이지로 이동시키는 것은 <a> 태그를 이용한다면 간단한 문제였지만 데이터를 같이 가져가야 하므로 다른 방법이 필요함

- form태그를 이용한 방법으로 1차적으로 해결을 생각 이 방법대로 작업을 1차적으로 진행함

- get method를 이용하여 url전송시에 입력값이 주소 뒤에 같이 보내지게 됨

2. URL로 값을 보내긴 하지만 해당내용을 받아서 어떻게 처리할지 구상 

- 처음 url값이 전송되게 되면 url을 분석해서 입력값만 추출하는 기능이 필요하다고 생각하여 

 

function getParameter(strParamName) {

            var arrResult = null;

            if (strParamName) {

                arrResult = location.search.match(new RegExp("[&?]" + strParamName + "=(.*?)(&|$)"));

                return arrResult && arrResult[1] ? arrResult[1] : null;

            }

        }

을 실행함 내용은 정규식을 이용하여 name= 다음에 쓰인 입력값을 추출해냄

 

3. 추출한 입력값을 사용 시 Escaping 되어서 이것을 다시 사용할 수 있는 문자로 만들려면 디코딩 과정이 필요함

- decodeURIComponent(p_name); 을 사용하여 해결 처음에는 incode로 사용하다가 한 번 더 생각해보니 decode로 하였더니 실행이 잘됨

 

4. 페이지 전환 후 자동으로 검색이 바로 실행되지 않음

- 페이지가 준비되었을 때 함수가 실행되도록 설정 $(document).ready

 

5. 검색을 하면 할수록 append 된 내용들이 많아지고 초기화가 되지 않음

- $('#search-box').empty()를 내용을 보여주는 함수 제일 처음 부분에 추가하여 함수가 실행되면 1회 초기화를 하게 설정

 

 

 

# To-do List

[주요 일정]

1. 아이디어 축약

2. 프런트엔드, 백엔드 역할 분담

3. 주제 선정 확정

4. Git hub 사용법 습득

5. 기능 구체화 및 참고할 만한 사이트 선정(https://www.visitjeju.net/kr/visitjejuapi)

6. Selector 경로 잡아서 DB에 관광지, 맛집 데이터 등록

7. Mongo DB에서 자료 확인하여보기

8. 음식점, 관광지 데이터 각각 크롤링(1000개씩 완료)

9. 지역 선택 후 관광지 또는 맛집 구분하여 선택할 수 있는 페이지 샘플 테스트

10. FAQ 기능 추가

11. 검색 기능 완성