[새싹 프론트엔드] 서울 문화행사 검색 프로젝트

개요

수강중인 새싹에서 배운 것 들을 활용하여 일주일간 간단한 프로젝트를 진행하였는데 서울에서 진행하는 문화행사들을 검색하는 기능을 주제로 삼고 구현해 보았다. 데이터는 서울 공공데이터를 사용하였다.

기능 구성

처음 기획 했을때는 검색이라는 계획에 맞게 당연히 포털사이트 마냥 검색시 키워드에 맞는 검색결과를 화면에 출력하려 했었다. 그런데 막상 데이터를 둘러보니 키워드 검색으로 문화행사를 찾는게 어렵겠다는 생각이 들었고 API에서 지역과 장르를 제공하길래 앞의 두가지 항목 선택시 조건에 맞는 행사들을 출력하는 방향으로 선회하였다.

결과

코드

//json data fetch 및 사용자 입력값 비교
function fetchData() {
  fetch("JSON URL")
    .then((response) => response.json())
    //data json 전체
    .then((data) => {
      //newData = 조건에 맞는 요소만 필터링 한 것
      newData = data.filter(
        //ele = json객체 1개
        (ele) => ele.codename == selectCode && ele.guname == selectplace
      );
      console.log(newData);

      //조건에맞는 요소 없을시
      if (newData.length == 0) {
        contents.innerHTML = ` <img src="img file source 들어가는 곳" alt="" width="100%" height="500px" id="">`;
        alert("행사목록이 없습니다!");
      }
      //newData 배열 각각의 요소 화면 출력
      newData.forEach((info) => {
        const content = `
        <div class="info">
        <img src="${info.main_img}" alt="" width="230px" height="200px" class="img">
        <div class="title">${info.title}</div>
          <div class="guname">${info.guname}</div>
          <div class="codename">${info.codename}</div>
          <div class="date">${info.date}</div>
          <a href="${info.org_link}" target="_blank">홈페이지 바로가기</a>
          </div>
          `;
        contents.innerHTML += content;
      });
    })
    .catch((error) => console.log(error));
  //이벤트 실행마다 div 내용 초기화
  contents.innerHTML = "";
}

json fetch 및 조건에 맞는 행사 필터링 하는 함수인데 전체 json data에서 지역과 장르에 맞는 행사들을 따로 newData에 저장 후 화면에 출력되게끔 하였다.

실행시 초기 화면

분류와 지역을 선택할 수 있게끔 하였다.

결과출력화면

선택 후 검색 버튼 클릭시 조건에 맞는 결과가 출력된다.

후기

이전까지는 JSON이나 API를 들어보기만 한 상태였는데 이번 프로젝트를 진행하면서 제대로 활용하는 기회를 가질 수 있었다. 아쉬운 점은 기능적으로 너무 간단하다는 것이다. 좀 더 욕심을 내서 다양한 기능들을 추가해볼껄 이라는 아쉬움이 남고 코드를 작성할 때도 좋은 코드란 무엇일까라는 생각을 하고 작성을 해야겠다.

느낀 점

프로젝트와 별개로 지금까지의 느낀 점을 한줄 요약하자면

나는 아직 멀었구나

누군가 저 한줄요약을 보고 그러면 과거에는 가까웠던적이 있냐고 물어보면 할 말이 없다. 맞는 말이니까. 나는 항상 멀었고 항상 부족했다.
어찌보면 당연하다. 여태 제대로 안했으면서 이제와서 가깝기를 바라는건 욕심이고 양심이 없는거다.
이런 양심없는 내가 할 수 있는거라고는 계속 걸어나가는거 아닐까 싶다. 계속 걷다보면 어디라도 도착을 할테니까.