Bible, Lee, Data
Faith, software, data, and everyday life.
EngineeringAll posts
[React] Spring Boot와 React 프로젝트 Rest API 연동하기
Spring Boot와 React 프로젝트 간 Rest API를 연동하는 방법에 대해 알아보도록 하자.이를 통해 백엔드와 프론트엔드 간의 통신을 설정하여 데이터를 주고받을 수 있다. 💡Spring Boot 프로젝트 생성Spring Starter ProjectSpring Starter Project로 새로운 Spring Boot 프로젝트를 생성한다.의존성 라이브러리로는 Spring Boot DevTolls, Lombok, WebSocket, MyBatis Framework, Oracle Driver, Thymeleaf, Spring Web을 추가하였다.또는 Spring Initializr를 사용하여 새로운 Spring Boot 프로젝트를 생성하여 Import해도 된다. Application.javapac..
[AWS] Spring Boot 웹 애플리케이션 AWS와 Mobaxterm으로 서버에 배포하기
AWS와 Mobaxterm을 사용하여 Spring Boot 프로젝트를 JAR 파일로 배포하는 과정을 처음부터 차근차근 기록해 보려고 한다. Spring Boot 프로젝트를 AWS에서 배포하는 방법이 처음에는 복잡해 보일 수 있지만, 익숙해지면 꽤나 간단한 작업이다. Gradle을 사용해 보기도 하고, WAR 파일로 내보내 보기도 하고, pom.xml 파일과 application.properties 파일을 계속 수정해 가면서 파일을 배포하기도 하면서 시행착오가 있었다. 만약 서버에 Spring Boot 프로젝트를 배포하는데 어려움을 겪고 있다면 이 글이 도움이 되길 바란다. 프로젝트 배포 단계 AWS EC2 인스턴스 설정 Spring Boot 프로젝트 빌드 MobaXterm을 사용한 웹 애플리케이션 배포 ..
[Streamlit] 공공데이터 앱 제작: 대전광역시 버스 관련 데이터 시각화 및 분석
💡대전광역시 버스 관련 데이터 시각화 및 분석이번에 사용할 데이터는 대전광역시의 버스와 관련한 정보이다. 이 데이터를 활용하여 대전광역시의 버스 정류장 현황을 지도에 표시하고, 버스 이용이 많이 발생하는 자치구를 확인하려고 한다. 그리고 도로 안전을 위해 버스전용차로 단속카메라의 보완이 필요한 위치를 분석해보고자 한다. 활용한 데이터대전광역시_버스정류장 현황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 한국교통안전공단_대전광역시 ..
[Streamlit] Folium 라이브러리로 csv 파일 지도 데이터 분석하기
💡대전광역시 서구 일반음식점 현황 분석공공 데이터 포털에서 위도, 경도 지도 데이터를 포함하는 csv 파일을 Streamlit에서 folium 라이브러리를 활용하여 시각화하고, 분석해 보도록 하자. Folium 라이브러리Folium은 지리 공간 데이터를 시각화하는 데 사용되는 Python 라이브러리이다.leaflet.js 기반으로 이루어졌으며, 시각화에 활용할 수 있는 OpenStreetMap, Mapbox, Stamen과 같은 지도 이미지를 제공한다. 자세한 내용은 아래 공식 도큐먼트에서 확인할 수 있다.https://python-visualization.github.io/folium/latest/ Folium — Folium 0.1.dev1+gd6f04cb documentationFolium bui..
[Streamlit] Elements를 활용한 웹 애플리케이션 만들기
💡웹 애플리케이션 구축Streamlit에서 Python 파일을 생성하고, Elements를 활용하여 웹 애플리케이션을 만들어 보도록 하자. Python 파일 생성하기VS Code에서 py 확장자로 'streamlit_app.py' 파일을 생성한다.파일이 생성되었으므로 기본 스크립트를 입력하고, run 명령어를 통해 프로젝트를 배포할 수 있다. 웹 페이지 실행하기streamlit run streamlit_app.py터미널에 streamlit run과 실행할 Python 파일명을 명령어로 입력하면 웹 페이지가 실행된다.현재 소스 코드를 작성하지 않은 상태이기 때문에 빈 화면이 표시된다.Scripts\activate.bat만약 실행되지 않는다면 가상 환경에 접속되지 않은 상태이므로 Scripts 명령어를 실..
[Streamlit] 개발자 환경 구축: VS Code의 가상 환경에 Streamlit 설치하기
💡StreamlitStreamlit은 데이터 기반 웹 애플리케이션을 만드는 오픈 소스 Python 라이브러리이다.데이터 분석과 시각화를 위한 웹 애플리케이션 개발 과정을 단순화하여 웹 개발 경험이 없는 사용자들도 쉽게 웹 애플리케이션을 구축할 수 있다. Streamlit 공식 홈페이지https://docs.streamlit.io/ Streamlit DocsJoin 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 joi..
[React] 프로젝트 구조, 프로젝트 파일 수정 및 배포
💡프로젝트 구조React 프로젝트를 구성할 때 효율적이고 유지보수가 용이한 폴더 구조를 만드는 것은 매우 중요하다.이를 위해서는 기능적으로 연관된 파일들을 그룹화하고, 각 파일이 어디에 속하는지 명확하게 파악할 수 있도록 구조를 설계해야 한다.프로젝트 구조를 적용할 때는 팀원들과의 커뮤니케이션을 통해 일관된 방식으로 파일을 구성하도록 한다. 1. src/ 디렉터리index.js 살펴보기프로젝트의 구조에서 가장 중요한 것은 src 폴더이다. src는 source의 약자로, 프로젝트의 모든 소스 코드가 포함된 최상위 디렉터리이다.src 폴더에는 입구 파일이라고 할 수 있는 index.js 파일이 있다. npm start 명령어로 create-react-app을 구동시키면 index.js를 찾아서 적혀 있는..
[React] 개발자 환경 구축: Node.js, Create React App
💡ReactReact는 사용자 인터페이스(UI) 개발에 초점을 맞춘 JavaScript 프론트엔드 라이브러리로, 복잡하고 동적인 웹 페이지를 개발하는 데에 용이하다.간단하게 말하면 React는 사용자 정의 태그를 만드는 기술이라고 할 수 있다.실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 분야에서 널리 사용된다. React의 특징 및 장점React는 Facebook(현 Meta)에서 개발한 JavaScript UI 라이브러리이다.Facebook은 매우 다양한 컴포넌트와 복잡한 사용자 인터페이스를 가지고 있는데, 이러한 복잡성에 대응하기 위해 개발된 것이 React이다.가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 UI 업데이트를 처리한다. 이를 통해..
