최종프로젝트 10일차 - 경기장 예약 화면 작성 중, 좌표에서 주소 변환

최종프로젝트 10일차 경기장 예약 화면 작성 중, 좌표에서 주소 변환

 

 

월요병을 극복하는 가장 좋은 방법은 일요일부터 일을 하고 있으면 된다고 합니다. 아직 일도 안하고 있지만 월요병 날 일을 없을 듯 합니다. 하루 넘어가기 전 잊지 않고 쓰고 있는 오늘의 작업 현황입니다.

 

 

리엑트로 고군분투하는 백엔드 개발자

 

최종프로젝트 9일차 - 리엑트 공부 시작, 리엑트 부트스트랩 사용

전날 작업 현황입니다

 

 

지금 하고 있는게 백엔드인지 프론트엔드인지 혼란이 되는 요즘 오늘도 어제와 다름없이 프론트엔드 작업에 열을 가하고 있습니다. 오늘 작업하고 있는 곳은 경기 예약 화면으로 전날 작업한 아래 화면에서 클릭시 경기 예약 하는 화면으로 넘어가서 예약이 이루어지는 화면을 만들고 있습니다. 

 

 

 

위의 화면은 전날 작업한 화면이고, 오늘 다시 수정한 화면은 아래와 같습니다. 

 

 

위 데이터는 서울시 체육시설 공공서비스예약 사이트에서 가져온 데이터로, 저희 프로젝트에서 필요한 자료(이름, 이미지,위치 등)만 가져왔습니다.

 

사실 오늘 이 자료 만드는 데서부터 상당한 시간이 걸렸습니다. 원래는 일정한 주기로 데이터 가져오는 코드를 만드려고 했으나, 작업 시간이 너무 많이 걸려 우선 필요한 데이터만 추출하여 테이블에 넣는 작업을 하였습니다.

 

 

 

위 데이터 추출하는 코드는 아래와 같습니다.

 

import axios from 'axios';
import { parseString } from 'xml2js';
import { getAddressFromCoordinates } from './coordToAddr.js';
import { config } from 'dotenv';

// 환경 변수 파일(.env)을 로드
config();

const url = `http://openapi.seoul.go.kr:8088/${process.env.SEOUL_FIELD_API_KEY}/xml/ListPublicReservationSport/1/20/축구장`;

axios.get(url)
    .then(response => {
        const xml = response.data;

        // parseString을 Promise로 감싸기
        const parseXml = xml => {
            return new Promise((resolve, reject) => {
                parseString(xml, (err, result) => {
                    if (err) reject(err);
                    else resolve(result);
                });
            });
        };

        // XML 파싱 및 주소 가져오기
        parseXml(xml)
            .then(async result => {
                const rows = result.ListPublicReservationSport.row;

                for (const item of rows) {
                    console.log(`---------------start------------------`);
                    console.log(`경기장명 : ${item.PLACENM[0]}`);
                    console.log(`경기장 이미지 : ${item.IMGURL[0]}`);
                    console.log(`경기장 지역구 : ${item.AREANM[0]}`);
                    console.log(`예약가능일자 : ${item.RCPTBGNDT[0]}`);
                    console.log(`시작시간 : ${item.V_MIN[0]}`);
                    console.log(`전화번호 : ${item.TELNO[0]}`);
                    console.log(`X 좌표 : ${item.X[0]}`);
                    console.log(`Y 좌표 : ${item.Y[0]}`);
                    console.log(`---------------end------------------`);
                    try {
                        const address = await getAddressFromCoordinates(item.Y[0], item.X[0]);
                        console.log(`주소 : ${address}`);
                    } catch (error) {
                        console.error(error);
                    }
                }
            })
            .catch(error => {
                console.error('Error parsing XML: ', error);
            });
    })
    .catch(error => {
        console.error('Error fetching data: ', error);
    });

 

 

코드를 보면 서울시 공공 api 에서 받은 api 키로 url을 작성하고, 반환된 xml 형태의 결과값을 json으로 변환한 뒤 결과 값 console.log에 출력하는 것을 볼 수 있습니다. 또한, getAddressFromCoordinates() 라는 함수 호출로 좌표에서 주소로 변환하는 것을 볼 수 있습니다.  이는 카카오 API를 활용하여 좌표에서 주소로 변환하도록 구현하였습니다. 이 코드는 다음과 같습니다.

 

 

카카오 REST API를 활용한 좌표 → 주소 변환

import axios from 'axios';
import { config } from 'dotenv';

// 환경 변수 파일(.env)을 로드
config();

export async function getAddressFromCoordinates(latitude, longitude) {
    const apiKey = process.env.KAKAO_API_KEY; // 카카오 REST API 키
    const url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${longitude}&y=${latitude}`;

    try {
        const response = await axios.get(url, {
            headers: { 'Authorization': `KakaoAK ${apiKey}` }
        });
        if (response.data.documents.length > 0) {
            // 첫 번째 결과의 주소를 반환합니다.
            return response.data.documents[0].address.address_name;
        } else {
            throw new Error('주소를 찾을 수 없습니다.');
        }
    } catch (error) {
        console.error('Error fetching address: ', error);
        throw error;
    }
}

 

카카오에서 발급받은 REST API키를 header 값 안에 넣어 get 요청한 후 결과 값에서 주소를 가져오는 과정의 코드입니다.

 

이렇게 해서 경기장 더미 데이터를 만들어 테스트를 진행해 볼 수 있었습니다. 이 작업이 끝난 후 경기장 목록에서 '일정 확인' 클릭하면 경기장 예약 상세정보를 볼 수 있는 화면을 만들기 시작했습니다. (정확히 말하면 글쓰는 지금도 아직 만들고 있습니다.. 글 다쓰면 바로 작업해야됩니다)

 

지금까지 만든 경기장 예약 상세정보 화면은 다음과 같습니다.

 

 

화면을 보면 왼쪽에 경기장 목록에 있던 사진이 확대되서 나오고 있고, 그 아래 경기장명과 경기장 위치, 전화번호가 표출됩니다. 이 자료 모두 서울 공공API에서 가져온 자료로, 경기장 위치의 경우는 좌표로 있던 공공자료를 카카오API로 변환하여 저장한 주소입니다. (이 데이터들은 경기장 목록에서 넘어온 데이터들이라 바로 조회할 수 있었습니다.)

 

그리고 가운데 달력으로 예약 일정을 클릭할 수 있도록 하였으며, 원하는 일자 클릭시 오른쪽 박스안에 해당일자 예약정보라는 제목과 함께 예약 가능한 시간대를 리스트형식으로 보여지도록 화면을 구성하였습니다. 여기서 이미 예약된 시간대가 있다면 '예약불가'라는 글씨와 함께 리스트 클릭할 수 없도록 하였고, 예약가능한 시간대의 경우 초록색 테두리로 칠해지면서 버튼 클릭 가능하도록 화면을 만들었습니다.

 

 

작업한 전체 과정

 

오전 계획한 화면 구상도

 

오늘 오전 팀원에게 공유한 대략적인 화면 구조를 보니 그래도 70%정도는 달성해 놓지 않았나 싶습니다. 물론 프론트 엔드 작업만입니다.

 

이제 해야할 건 달력 밑에 구단주 선택하는 콤보박스와 경기 신청시 전달하고픈 멘트 적는 텍스트 상자 넣고, 맨 오른쪽 예약 일정 리스트 밑에 취소, 저장 버튼 넣으면 화면은 얼추 끝날 듯 합니다.

 

시간의 여유가 더 있다면 API 연결하는 작업까지 하고 싶은데 그건 가능하다면 작업해놓고 잘 것 같습니다.

 

 

▼ 이전 진행한 프로젝트들 ▼

 

내일배움캠프 Node트랙 심화 프로젝트 역할 및 진행사항

 

내일배움캠프 NestJS 프로젝트 코드리뷰 - 온라인 공연 예매 서비스