배포 후에 예상치 못한 문제들을 많이 발견했다. 우선 실제 서버에 배포하면서 console.log 등을 제거할 필요가 있었고 공지사항 스크래핑을 비롯해 다소 느린 문제, 그리고 콘솔 창의 많은 경고였다. 이를 위해 차근차근 해결해보기로 하였다. 우선 콘솔 로그를 제거하기 위해 App.js에 다음 설정을 추가하였다. 콘솔 로그 제거// 배포 환경에서 console.log, console.warn 지우기if (process.env.NODE_ENV === "production") { console = window.console || {}; console.log = function no_console() {}; console.warn = function no_console() {}; con..

CloudType을 이용해 테스트 배포를 해보기로 한다.클라우드타입 (cloudtype.io) 모두의 플랫폼팀, 클라우드타입복잡한 클라우드 설정 없이 10분 만에 서비스를 배포하고 운영하는 방법, 클라우드타입cloudtype.io CloudType은 쉽게 프로젝트를 배포할 수 있는 플랫폼이다. 물론, 프레임워크와 웹에 대한 이해가 있어야 쉬운 것 같다. 나는 그리 많이 아는 것은 아니었으나 이번에 약 3일간, 하루 몇시간씩 배포, 버그 수정, 배포, 버그 수정을 반복하다 보니 어느정도는 이해하게 된 것 같다.  배포를 진행하기에 앞서 몇가지 수정이 필요하다. 우선 기존의 프로젝트는 "http://localhost:8080"로 설정되어 있기 때문에 이를 실제 서버 url로 변경해주어야 한다. 이는 배포 후..

홈에는 어떤 것들이 있어야 할까라는 질문에 공지사항이라 답한 마약사범 형님의 의견에 따라, 아주광장의 주요 공지사항 일부를 스크래핑해 배치하기로 했다. 스크래핑 특정 웹 페이지에서 필요한 데이터(텍스트, 이미지, 메타데이터 등)를 추출하는 작업 크롤링자동화된 프로그램(일명 웹 크롤러, 웹 스파이더, 봇 등)을 사용하여 웹 사이트의 여러 페이지를 탐색하면서 데이터를 수집하는 과정 두 정의는 약간 다르다. 나도 내가 한게 크롤링인 줄 알았다. SpringBoot에서는 Jsoup 라이브러리를 통해 스크래핑과 간단한 크롤링 작업을 지원한다. 학교 홈페이지에서 공지사항 페이지의 HTML 구조를 분석하고 Jsoup 라이브러리를 이용해 일반공지와 장학공지, 고정된 공지사항들을 스크래핑하려 한다.  이 포스트에서는 일..

길고 긴 버그와 버그와 버그와 버그 끝에 시간표를 렌더링할 수 있게 되었다. 정말 길고 길었고, 이전에 '시간표 페이지(SchedulePage) 구성하기(2)'에서 가장 어려웠다고 언급했던 것과는 비교가 안될 정도로 어려웠다.  시간표를 렌더링하는데 있어서 아래 사항들을 중점에 두었다. 1. 시간표는 SchedulePage의 right-section에 맞추어 배치되어야 한다.2. 담은 과목들의 체크박스를 수정할 때마다 실시간으로 반영되어야 한다.3. 각 과목의 수업시간을 요일과 교시로 분리하고, 각 교시마다 차지해야하는 시간을 명확히 해야 한다. 4. 각 과목이 차지하는 시간만큼 셀을 병합하고, 그 내부를 과목 정보로 채워야 한다.5. 시간과 구분선을 표기해야 한다. 6. 과목마다 다른 색을 가져야 한다..

시간표 페이지를 비롯해 일부 페이지는 DB의 사용자 데이터를 기반으로 동작한다. 즉, 사용자가 저장되어 있지 않으면 이 페이지를 사용하는데 문제가 생긴다. 이미 SchedulePage.js 내부에서 사용자 정보가 확인되지 않았을 경우에 대한 예외처리가 되어 있지만. 그럼에도 관리와 사용자 편의를 위해 로그인해야만 접근할 수 있도록 PrivateRoute를 구현했다. PrivateRoute로 감싸진 라우트에 접근 시, 로그인이 필요함을 alert하고 로그인 페이지로 이동시킨다.// src/main/frontend/src/components/PrivateRoute.jsimport React from 'react';import { Navigate } from 'react-router-dom';import { ..

로그인, 로그아웃, 세션 유지까지 구현이 끝났으니 이제 본격적으로 시간표 페이지를 구성한다. 일전에 테스트를 위한 subjectInfoPage까지 구성했는데, 이 페이지는 개설과목정보를 한눈에 보는 페이지로 남겨두었다.  css를 살짝 수정해. 중앙페이지 중앙에 배치하도록 하였고, 추후 필요에 따라 검색 기능 등을 추가할 수 있을 것 같다.  다음으로 시간표 페이지인데, 아래 이미지처럼 구상하였다. 검색창을 통해 과목명을 검색하면 검색결과가 아래 테이블에 나타난다. 담기 버튼을 클릭하면 그 아래 테이블이 추가되며, 이 테이블들은 과목마다 별도로 생성된다. 그리고 체크박스로 선택하면 오른쪽 공간의 시간표에 배치되는 구조이다. 이렇게 미리 관심있는 과목을 담아두고, 과목마다 즉각적으로 시간표에 반영하여 시간..