SPARCS Service Hackathon은 대전광역시와 KAIST에서 주최하고, SPARCS에서 주관하는 해커톤으로, 2024년 2월 14일 수요일 13시부터 2월 16일 금요일 19시까지 진행되었다. 나는 SPARCS Service Hackathon 2024 A1팀의 백엔드 개발자로 선발되어 참여하게 되었다. 전국에서 200명가량의 지원자들 중에 80명을 선발하여 20팀이 만들어졌는데 지원자가 많다 보니까 목요일로 예정된 선발 공지가 토요일에 되었다. 코로나 이후에 게임잼과 해커톤이 많이 사라져서 아쉬웠는데 이번에 해커톤에 참여할 수 있게 되어 정말 기뻤다!🙂 대회 당일 Streamlit이라는 기술을 사용하여 시각화하는 미션이 있었기 때문에 해커톤이 시작하기 전에 엘리스코딩 플랫폼에서 Streaml..
Spring Boot와 React 프로젝트 간 Rest API를 연동하는 방법에 대해 알아보도록 하자. 이를 통해 백엔드와 프론트엔드 간의 통신을 설정하여 데이터를 주고받을 수 있다. 💡Spring Boot 프로젝트 생성 Spring Starter Project Spring Starter Project로 새로운 Spring Boot 프로젝트를 생성한다. 의존성 라이브러리로는 Spring Boot DevTolls, Lombok, WebSocket, MyBatis Framework, Oracle Driver, Thymeleaf, Spring Web을 추가하였다. 또는 Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성하여 Import해도 된다. Application.jav..
AWS와 Mobaxterm을 사용하여 Spring Boot 프로젝트를 JAR 파일로 배포하는 과정을 처음부터 차근차근 기록해 보려고 한다. Spring Boot 프로젝트를 AWS에서 배포하는 방법이 처음에는 복잡해 보일 수 있지만, 익숙해지면 꽤나 간단한 작업이다. Gradle을 사용해 보기도 하고, WAR 파일로 내보내 보기도 하고, pom.xml 파일과 application.properties 파일을 계속 수정해 가면서 파일을 배포하기도 하면서 시행착오가 있었다. 만약 서버에 Spring Boot 프로젝트를 배포하는데 어려움을 겪고 있다면 이 글이 도움이 되길 바란다. 프로젝트 배포 단계 AWS EC2 인스턴스 설정 Spring Boot 프로젝트 빌드 MobaXterm을 사용한 웹 애플리케이션 배포 ..
💡대전광역시 버스 관련 데이터 시각화 및 분석 이번에 사용할 데이터는 대전광역시의 버스와 관련한 정보이다. 이 데이터를 활용하여 대전광역시의 버스 정류장 현황을 지도에 표시하고, 버스 이용이 많이 발생하는 자치구를 확인하려고 한다. 그리고 도로 안전을 위해 버스전용차로 단속카메라의 보완이 필요한 위치를 분석해보고자 한다. 활용한 데이터 대전광역시_버스정류장 현황 https://www.data.go.kr/data/15110461/fileData.do 대전광역시_시내버스 기반정보 https://www.data.go.kr/data/15081730/fileData.do 대전광역시_자치구별 인구이동 현황 https://www.data.go.kr/data/15062511/fileData.do 한국교통안전공단_대전광..
💡대전광역시 서구 일반음식점 현황 분석 공공 데이터 포털에서 위도, 경도 지도 데이터를 포함하는 csv 파일을 Streamlit에서 folium 라이브러리를 활용하여 시각화하고, 분석해 보도록 하자. Folium 라이브러리 Folium은 지리 공간 데이터를 시각화하는 데 사용되는 Python 라이브러리이다. leaflet.js 기반으로 이루어졌으며, 시각화에 활용할 수 있는 OpenStreetMap, Mapbox, Stamen과 같은 지도 이미지를 제공한다. 자세한 내용은 아래 공식 도큐먼트에서 확인할 수 있다. https://python-visualization.github.io/folium/latest/ Folium — Folium 0.1.dev1+gd6f04cb documentation Folium..
💡웹 애플리케이션 구축 Streamlit에서 Python 파일을 생성하고, Elements를 활용하여 웹 애플리케이션을 만들어 보도록 하자. Python 파일 생성하기 VS Code에서 py 확장자로 'streamlit_app.py' 파일을 생성한다. 파일이 생성되었으므로 기본 스크립트를 입력하고, run 명령어를 통해 프로젝트를 배포할 수 있다. 웹 페이지 실행하기 streamlit run streamlit_app.py 터미널에 streamlit run과 실행할 Python 파일명을 명령어로 입력하면 웹 페이지가 실행된다. 현재 소스 코드를 작성하지 않은 상태이기 때문에 빈 화면이 표시된다. Scripts\activate.bat 만약 실행되지 않는다면 가상 환경에 접속되지 않은 상태이므로 Scripts..
💡Streamlit Streamlit은 데이터 기반 웹 애플리케이션을 만드는 오픈 소스 Python 라이브러리이다. 데이터 분석과 시각화를 위한 웹 애플리케이션 개발 과정을 단순화하여 웹 개발 경험이 없는 사용자들도 쉽게 웹 애플리케이션을 구축할 수 있다. Streamlit 공식 홈페이지 https://docs.streamlit.io/ Streamlit Docs Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come ..
💡프로젝트 구조 React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다. 이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다. 프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리 index.js 살펴보기 프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다. src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 ..
