yeosang0508 님의 블로그

분명히 env 파일 만들고, 경로까지 다 지정을 해놨는데, 인식이 되지 않아 지도나 사진이 보이지 않음..
직접 키를 yaml에 입력해주니 생성되는걸 확인했는데 그러면 경로의 문제는 아니고..
근데 폴더에는 env 파일이 보이는데 sts에 env가 보이지 않음을 발견... 발견하기 전에 env를 지웠다가 리셋시켰다가.. 난리난리를

어쨌뜬 발견하고,

Project Explorer 활성화

1. 상단 메뉴 -> window -> Show View -> Project Explorer를 클릭
2. Show View 창에서 Project Explorer를 검색한 후 클릭 -> Open 버튼

View Menu

1. Project Explorer 뷰가 열리면 오른쪽 상단에 있는 작은 드롭다운 아이콘 (View Menu, 세로로 점 3개로 된.. ) 클릭
2. Filters ans Customization 메뉴 선택
3. resources* 항목 체크 해제 -> 이 옵션이 체크되어있으면 점(.)으로 시작하는 파일이 숨겨진다고 함...........

이렇게 해결...... 아니 언제 저걸 체크한거지...........

갑자기 잘 실행되던 카카오맵 API가 아예 실행이 안된다.. 왜이러지...

개발자 도구의 에러로그를 확인해보니 콘솔창 열었을 때 위와 같은 오류가 뜨는 것을 확인.. 뭐야 도대체ㅠㅠㅠ

받아온 apikey 재발급하고 실행시켜봐도 키의 문제는 아닌 것 같고, 사이트 도메인 문제?

찾아보니 사이트 도메인에 등록되어 있는 도메인이 아니라서 리소스에 접근하지 못하는 경우

와.. 진짜 바보다 발표준비할 때 port 에러 생겨서 8083으로 변경했었는데 완전히 잊고 카카오맵 도메인도 새로 등록해줘야한다는 걸 잊고있었다..
어쨌든 새로 도메인 등록해주고 해결✅

지도에 openAI한테 추천받은 목적지를 표시하고, 마커 클릭했을 때 인포윈도우를 여는 이벤트를 처리

주소 클릭 시 해당 장소를 지도에 바로 확인할 수 있도록

function handleAddressClick(address, event) {
    if (event) event.preventDefault(); // 기본 클릭 동작을 막음

handleAddressClick는 사용자가 주소를 클릭했을 때 호출되는 함수이며, address는 클릭된 주소

현재 상태가 장소 클릭하면 계속 마커가 추가되니 지저분한 느낌 클릭하면 한 장소만 나타내고 싶은데, 동일한 키워드 들어가는 장소까지 다 찍히는 문제..때문에 일단 지금은 클릭 시 나타나는 마커들은 다음 목적지 클릭 시 제거한 뒤 해당 목적지만 나타나도록 하고 싶은데.. 일단 중간 발표 이후에 수정해야할 듯 하다

http://apis.data.go.kr/B551011/PhotoGalleryService1/gallerySearchList1?serviceKey=' + API_KEY + '&MobileOS=ETC&MobileApp=AppTest&keyword='+ encodeURIComponent(region) +'&numOfRows=10&pageNo=1'

keyword에 popup창에서 지역을 선택한 정보를 encodeURIComponent로 인코딩하여 API 호출 시 문제가 발생하지 않도록 설정할 수 있다!

받은 지역에 대한 API 사진 가져오기

let images = [];
let currentIndex = 0;

API로 가져온 여러 이미지를 배열 images에 저장하고, currentIndex를 통해 현재 표시되는 이미지의 인덱스를 관리

if (imageUrlElements.length > 0) {
            for (let i = 0; i < imageUrlElements.length; i++) {
                images.push(imageUrlElements[i].textContent);
            }
            // 첫 번째 이미지를 표시
            document.getElementById('displayImage').src = images[currentIndex];

// 슬라이드 이미지 변경 함수
function changeSlide(direction) {
    currentIndex += direction;
    if (currentIndex < 0) {
        currentIndex = images.length - 1; // 마지막 이미지로
    } else if (currentIndex >= images.length) {
        currentIndex = 0; // 첫 번째 이미지로
    }
    document.getElementById('displayImage').src = images[currentIndex];
}

// 좌우 버튼 클릭 이벤트
document.getElementById('prevBtn').addEventListener('click', () => changeSlide(-1));
document.getElementById('nextBtn').addEventListener('click', () => changeSlide(1));

changeSlide() -> direction 값이 -1일 때는 이전 슬라이드로 이동하고, +1일 때는 다음 슬라이드로 이동 / 슬라이드가 끝에 도달하면 다시 처음으로 순환하도록 설정

목표

1. 여행 계획에 보다 직관적이고, 효율적인 계획을 세울 수 있도록 돕는 것을 목표

2. 여행 준비 과정에서의 시간 절약과 스트레스 감소 기대

ERD

사용기술 및 개발환경

메인페이지

로그인 & 회원가입 (유효성 검사)

항공 및 숙박 예약

체크리스트

일정추가

카카오맵API 사용 - 키워드로 장소검색하고 목록으로 표출하기
코드 안에는 장소검색, 마커표시 기능만 제공 / 리스트에 추가하는 기능 X / 그리고 검색 시 전국 기준으로 나옴

자바스크립트
localStorage.setItem('selectedRegion', selectedRegion);

const savedRegion = localStorage.getItem('selectedRegion');
if (savedRegion && keyword) {
	keyword = savedRegion + ' ' + keyword;
}

카카오맵에서 제공하는 keyword와 로컬 스토리지에 저장한 region 연결

목적지 검색 시 해당 지역 내에서만 보일 수 있도록 함

addDestination 함수 -> 목적지 로컬 스토리지 저장, 지도에 마커 추가

li.innerHTML = destination + `<i class="bi bi-dash-square-dotted" style="cursor: pointer; margin-left: 10px;"></i>`;

Date Range Picker -> 라이브러리 사용 (달력)

/ 저장할 데이터를 하나의 객체로 구성
	const dataToSend = {
		places : savedPlaces,
		startDate : startDate,
		endDate : endDate,
		region : selectedRegion
};

-> ajax POST 타입

상세보기

카카오맵API 사용 - 선의 거리 계산하기, 키워드로 장소검색하기

https://github.com/yeosang0508/project_tripset/blob/main/src/main/webapp/WEB-INF/jsp/user/plans/planDetail.jsp

var travelPlaces = [
    <c:forEach var="place" items="${travelPlaces}">
    {
        placeName: "${place.placeName}"
    }<c:if test="${!status.last}">,</c:if>
    </c:forEach>
];

서버에서 전달받은 여행 장소 목록을 JavaScript 배열로 변환
전달받은 travelPlaces 배열에 있는 각 장소에 대해 키워드 검색하여 지도에 마커 추가

경로를 시각적으로 보여주기 위해 폴리라인

여행지 추천

1. gpt API 동작흐름
   https://velog.io/@haze0225/Project-09.16-gpt-API-Pythonflask
2. 버전이슈
   https://velog.io/@haze0225/Project-09.17-Python%EC%9C%BC%EB%A1%9C-openAI-%EC%97%B0%EA%B2%B02
3. JSON 파싱
   https://velog.io/@haze0225/Project-09.18-recommended-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B5%AC%ED%98%84-openAI
4. 연결 성공
   https://velog.io/@haze0225/Project-09.19

향후 개선할 점

1. update, delete
2. 네이버 플레이스 리뷰 크롤링
3. 게시글

게시글, 체크리스트, 일정관리 페이지 정리 후, 맞춤형 여행 추천 서비스 디테일 수정...

일정관리 페이지에서 지역부터 선택할 수 있도록 popup창을 만든 후
확인 버튼 클릭 시 localstorage 에 저장 한 뒤 나중에 일정 저장버튼 클릭 시 insert 할 수 있도록 한다.

그리고 저장된 지역을 기반으로 키워드 검색할 수 있도록, searchPlace()에 키워드 saveRegion + ' ' + keyword 로 지정해서 목적지 지역없이 검색해도 해당 지역에서만 검색되도록 지정

달력에서 날짜 선택 시에도 localstorage에 넣었는데, console로 확인했을 때 위 사진과 같은 결과가 나와서 계속 내용이 생기나 했더니 아니였지..
localStorage에 저장할 때는 새로운 값이 이전 값을 덮어쓰는거지, 그러니깐 여러번 클랙해서 날짜 범위를 변경하더라도 마지막으로 저장된 값만 localStorage에 남게 된다.

결과적으로 일단 날짜까지 localStorage에 저장완료..!

목적지 검색하고 클릭 시 배열이 깨지는 걸 확인 왜..?

찾아보니 localStorage에 저장되는 데이터는 항상 문자열 형태이어야 하기에, 브라우저는 배열을 자동으로 문자열로 변환하지 않기 때문이라고 한다.

배열이나 객체를 localStorage에 저장하려면 JSON 문자열로 변환하여 저장해야한다.

localStorage.setItem(key, value)의 value는 반드시 문자열이여야하고, 배열이나 객체를 localStorage에 저장할 때는 JSON.stringify()로 문자열로 변환하여 저장하고, 저장된 JSON 문자열을 다시 사용할 때는 JSON.parse()로 자바스크립트 객체로 변환!!

확인 완료!

{"role": "user", "content": f"따로 {region}의 소개글 두 줄 '소개:'로 따로 보내"}

 elif "소개:" in line:
            location_info = line.replace("소개:", "").strip()
            if location:
                location["info"] = location_info # 기존 location에 info 추가
            else:    
                location = {"info": location_info} # 지역 소개글 객체 생성

다시 페이지에 소개글 한마디 정도 보여주고 싶어서 openai 한테 부탁하는 중인데 위와 같이 코드를 쓰고, jsp에서 ${response.info}라고 불러들였는데 찾을 수 없다네..? 뭘 빠뜨렸지?

JSP 코드의 response 객체는 flask 서버에서 반환된 JSON 데이터 리스트잖아... c:forEack해서 각 location 객체의 info 값을 출력할 수 있도록 해야지...

응답 결과가

알겠어요, 검색해서 파악한 정보를 바탕으 로 가장 인기있는 제주의 자연 속 힐링 장소 10곳을 추천해드리겠습니다. 각 장소의 주소만 따로 보내 드리겠습니다. 먼저, 제주에 관한 소개글 두 줄을 찾아보겠습니다. 잠시만 기다려주세요

위와 같이 나와서 제대로 장소와 소개글을 얻어낼 수 없다.. gpt한테 작업을 요청할 때 좀 더 명확하게 할 필요가 있다..

따라서
"모든 정보는 대화형 응답이 아닌, 텍스트 형식으로만 전달해줘." 추가

다른 기능도 만들어야하는데.. 위 작업도 쉽지가 않네.. 디자인 부분도 문제지만 옆 목록을 클릭 했을 경우 옆 지도에서 나오지 않음.. 사진부분도 특정 키워드를 지정해줘야 나옴.. 그리고 리스트나 지역 정보 못 얻어 낼 때도 있음..

수정할 부분은 많은데 다른 부분 기능 구현 못한 부분도 많아서 일단 여기서 멈추고.. 일정 관리하는 부분이랑, 체크리스트 구현 후 다시 수정 해보자...