Back-End는 Spring으로, Front-End는 React 환경으로 개발 환경을 만들어 보도록 하자. 한 프로젝트 내에서 Spring으로 백엔드를 구축하고 React로 프론트엔드를 개발하는 방식은 백엔드와 프론트엔드를 동시에 관리하고 통합하는 편리한 방법이다. 이와 같은 구조를 사용하면 하나의 코드베이스에서 모든 업무를 처리할 수 있으며, 백엔드와 프론트엔드를 동시에 빌드할 수 있어 개발과 배포를 간편하게 관리할 수 있다. 하지만 이러한 구조에도 단점은 존재한다.🤔 React는 정적인 앱으로, 백엔드가 종료되어도 프론트엔드는 여전히 작동할 수 있다. 그러나 이러한 구조에서는 백엔드가 종료되면 프론트엔드도 동시에 종료되므로 전체 시스템의 안정성에 대한 리스크가 있다. 또한, 두 애플리케이션의 빌드가..
프로그래밍을 할 때 디버깅은 굉장히 중요하다. 자바 프로그래밍을 하다 보면 오류를 해결해야 할 때가 있는데, 이때 디버깅이라는 기술을 사용하면 오류를 쉽게 찾고 해결할 수 있다. 디버그와 디버깅에 대한 개념을 이해하고 VS Code를 사용하여 자바 프로그램을 디버깅하는 방법에 대해 알아보도록 하자. 💡디버깅 관련 개념 디버그와 디버깅 디버깅(debugging)은 프로그램이 예상대로 작동하지 않거나 오류가 발생했을 때 이를 해결하는 과정을 의미한다. 여기서 디버그(debug)는 버그(bug)를 찾아 잡는 것을 의미하며, 버그란 프로그램이 개발자의 의도와 다르게 동작하거나 예상치 못한 오류로 인해 실행이 중단되는 상황을 가리킨다. 디버깅을 이용하여 이러한 오류를 잡아낼 수 있다. 디버거 디버깅 도구 중 하나..
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..
💡대전광역시 버스 관련 데이터 시각화 및 분석 이번에 사용할 데이터는 대전광역시의 버스와 관련한 정보이다. 이 데이터를 활용하여 대전광역시의 버스 정류장 현황을 지도에 표시하고, 버스 이용이 많이 발생하는 자치구를 확인하려고 한다. 그리고 도로 안전을 위해 버스전용차로 단속카메라의 보완이 필요한 위치를 분석해보고자 한다. 활용한 데이터 대전광역시_버스정류장 현황 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를 찾아서 ..
