[데이터 엔지니어링 부트캠프]11월 5주차 회고

좋았던 점

• 처음 기획에서 기술적인 부분은 많이 타협하기는 했지만, 어찌저찌 구색을 갖춘 웹사이트와 서비스가 만들어졌습니다. 아, 물론 이 글을 적고 있는 이 시간에도 에어플로우(Airflow) 적용이 가능할 지 어떨지를 체크하는 마지막 테스트가 가동 중이지만, 설령 실패하더라도 이 정도면 시원섭섭하나마 잘 마무리할 수 있을 것 같습니다.

아쉬웠던 점

• 백엔드를 각잡고 했다면 신경쓸 수 있었을 로드 밸런싱과 큐 등의 문제에 대한 지적이 있었습니다. 로드 밸런서는 어찌저찌 AWS EC2에 올리면서 구현했지만 큐 관련 내용은 수업 중에도 전혀 배우지 않아서 미처 생각지 못한 부분인데, 수료 후 다른 사이드 프로젝트를 할 때는 좀 더 신경써볼 부분인 것 같습니다.
• 백엔드도 고생하면서 구현했는데, 막상 서비스 단계로 넘어가려 하니 프론트엔드도 공부를 많이 해봐야겠더라고요... 이렇게 다들 풀스택 개발자의 길로...?
• 막바지에 다가서니 행정적으로 챙길 것도 있고, 무엇보다 실제로 취업을 위한 서류를 작성하기 시작해야 하는 압박감이 오고 있습니다. 프로젝트 처음 1주일을 조금이라도 덜 헤맸다면, 아니 그 이전에 프로젝트가 시작되기 전에라도 프로젝트에 대해 더 깊이 생각해보거나 아니면 반대로 이력서 같은 서류를 미리 작성해뒀다면 지금 느끼는 압박감이 조금이라도 줄어들었을까요?

배운 점

자바스크립트 - 구글 맵 API와 관련하여

구글 맵 API에 위도와 경도 데이터를 넘겨줄 때, DTO에서 정의를 했는데도 프론트엔드와 API에서 인식하지 못하는 문제가 있었습니다. 이유인 즉, 넘겨받은 데이터를 자바스크립트 객체로 변환해서 넘겨줘야 한다는 내용이었습니다. 그래서 mustache 파일에서 script를 한 번 더 정의해서 자바스크립트 배열을 정의하는 기능을 만든 후에 API로 넘겨줘야 했습니다.

<script>
{{#locations}}
    <input type="hidden" name="question" id="lon" value="{{lon}}" />
    <input type="hidden" name="question" id="lat" value="{{lat}}" />
{{/locations}}
<script>
  // 자바스크립트 코드 작성
  const lonInputs = document.querySelectorAll('#lon');
  const latInputs = document.querySelectorAll('#lat');

  // 각 입력 요소의 값을 배열로 추출
  const lonArray = Array.from(lonInputs).map(input => parseFloat(input.value));
  const latArray = Array.from(latInputs).map(input => parseFloat(input.value));

  // 생성된 배열(lonArray, latArray) 출력
  console.log(lonArray);
  console.log(latArray);

  // 위도와 경도를 결합하여 locations 배열 생성
  const locations = lonArray.map((lon, index) => {
    return {lat: latArray[index], lon: lon};
  });

  // 생성된 배열(locations) 출력
  console.log(locations);

  // 배열 분할 → locationsTravel, locationsRestaruant
  const locationsTravel = locations.slice(0, 5);
  const locationsRestaruant = locations.slice(5, 10);

  console.log(locationsTravel);
  console.log(locationsRestaruant);
</script>

<!-- 구글 지도 API -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initMap"></script>
  <script type="text/javascript">
    function initMap() {
        var mapOptions = {
          zoom: 13,
          center: {lat: 33.51411, lng: 126.489125}  // 제주도 중심
        };

      var map = new google.maps.Map(document.getElementById('map_div'), mapOptions);
      var map2 = new google.maps.Map(document.getElementById('map_div2'), mapOptions);


        // 여행지 마커에 대한 옵션
        var travelMarkerOptions = {
            url: '/blue_icon.png',
            scaledSize: new google.maps.Size(50, 50) // 마커 크기 조정
        };

        // 음식점 마커에 대한 옵션
        var restaurantMarkerOptions = {
            url: '/red_icon.png',
            scaledSize: new google.maps.Size(50, 50) // 마커 크기 조정
        };

        var bounds1 = new google.maps.LatLngBounds();
        var bounds2 = new google.maps.LatLngBounds();

        // 여행지 마커 생성
        for (var i = 0; i < locationsTravel.length; i++) {
            var position = new google.maps.LatLng(locationsTravel[i].lat, locationsTravel[i].lon);
            var marker = new google.maps.Marker({
                position: position,
                icon: travelMarkerOptions,
                label: (i + 1).toString(),
                map: map
            });
            bounds1.extend(marker.position);
        }
        map.fitBounds(bounds1); // 모든 마커가 보이도록 첫 번째 지도 뷰포트 조정

        // 음식점 마커 생성
        for (var i = 0; i < locationsRestaruant.length; i++) {
            var position = new google.maps.LatLng(locationsRestaruant[i].lat, locationsRestaruant[i].lon);
            var marker = new google.maps.Marker({
                position: position,
                icon: restaurantMarkerOptions,
                label: (i + 1).toString(),
                map: map2
            });
            bounds2.extend(marker.position);
        }
        map2.fitBounds(bounds2); // 모든 마커가 보이도록 두 번째 지도 뷰포트 조정
    }

    google.maps.event.addDomListener(window, 'load', initMap);
  </script>

• 앞으로 바라는 점

• 6개월의 여정은 어느덧 그 끝을 코앞에 두고 있습니다. 평소 같으면 '짧다면 짧고, 길다면 긴'이라는 표현을 덧붙였겠지만, 이번 교육만큼은 지금까지 들어온 어떤 교육보다도 시간이 모자라다는 느낌을 크게 받았단 것 같습니다. 6개월 만에 파이썬 기본과 머신러닝/딥러닝, 기초 자바 문법부터 스프링 부트를 이용한 백엔드, 리눅스와 도커를 이용한 서비스, 그리고 실질적인 프로그램의 배포까지 굉장히 많은 것을 배운 만큼 이걸 제대로 소화시켰는지도 모르게 파이널 프로젝트에 들어왔고, 이제 드디어 그 프로젝트도 최종 발표만을 남겨놓고 있습니다.
  IT 분야의 개발자가 되기로 마음먹은 이상 결국 IT의 모든 분야를 폭넓게 알고 있을 필요가 있다는 한 강사님의 말씀이 떠오릅니다. 실제로 이번 교육 과정에서 이렇게 많은 것을 가르치고 또 그것을 적용하는 파이널 프로젝트를 준 것도 그런 맥락이 아니었나 싶습니다. 그렇기 때문에 부족한 부분을 가다듬고 새롭게 세상으로 나서기에 앞서, 다가오는 화요일에 파이널 프로젝트 발표가 끝난 뒤에는 지난 6개월 간 숨가쁘게 달려왔던 이 여정에서 내가 배운 모든 것과 부족했던 점, 그리고 저 자신에게 진심으로 바라는 점을 통틀어서 이번 교육과정의 마지막 회고를 해보고자 합니다. 내가 배운 것들을 정제해서 블로그와 깃허브 리포지터리 등에 리뉴얼해서 올리고, 연구실에 막 나온 2월의 모습과 교육을 시작한 6월의 모습과 함께 12월의 나는 어느 위치에 있는지를 객관적으로 점검해보겠습니다.