성신여대 2023 PBL및 캡스톤디자

교수학습지원센터 2023-03 Based Le a t c P r oje s i gn rni n g s p Ca t e on e D 2023학년도 MADE IN SUNGSHIN 공모전 성과집 PBL 및 캡스톤디자인 교수학습지원센터 CENTER FOR TEACHING AND LEARNING Based Le a t c P r oje s i gn rni n g s p Ca t e on e D 목차 대상 아두이노와 React를 활용한 침수사고 예방시스템ㆍㆍㆍㆍㆍ 5 터널링(tunneling) 최우수상 온/오프라인 기업프로모션연출 프로젝트ㆍㆍㆍㆍㆍㆍㆍㆍ 53 소생미지리지 1인가구에게 소셜 다이닝 환경과 다이닝 무드 조성을 통해 식사 공간에서의 즐거움을 제공하는 iot 서비스, 투키ㆍㆍㆍ 95 더 글로리 우수상 서울숲 카페거리의 passage 분석과 서울숲2길 보행로 중심의 해결 방안ㆍ ㆍㆍㆍㆍㆍㆍㆍㆍ 133 성수동 힙스터 강북구 저소득층 독거노인 중 당뇨환자를 위한 영양지원 프로그램 개발ㆍㆍㆍㆍㆍㆍㆍ 169 에너자이조 더 나은 재외국민 보호 시스템 홍보와 구축을 위한 캡스톤 디자인ㆍ ㆍㆍㆍㆍㆍㆍㆍㆍㆍㆍㆍㆍ 197 크리스탈 아일랜드 2023학년도 MADE IN

SUNGSHIN 공모전 성과집 PBL 및 캡스톤디자인 Based Le a t c P r oje s i gn rni n g s p Ca t e on e D 대상 아두이노와 React를 활용한 침수사고 예방시스템 터널링(tunneling) ① 교과목 정보 프로젝트 기반 학습(PBL) 캡스톤디자인 학 과 명 융합보안공학과 강 좌 명 2023-2학기 융합캡스톤디자인 지도교수 김경진 교수님 3학년 때까지 배운 교양, 공학기초, 전공지식을 기반으로 현재 ICT 흐름을 반영한 캡스톤 설계 작품을 기획하고 설계하고 제작한다. 편성된 팀별로 시장이 요구하는 작품을 설계하고 제작하는 과정을 통하 여 문제를 이해하고 분석하는, 문제해결 능력을 함양한다. 한 학기동안 프로젝트를 지속적으로 수행 하며 팀별일 경우 구체적인 팀원 간 업무할당을 통해 상호 간의 팀워크를 맞추어 목표를 이룰 수 있도 록 하며, 지도교수와 유기적으로 협력하여 완성도를 더욱 높인다.(필요시 개인별로 변경될 수 있다.) 이 캡스톤 설계 작품은 교내외 경진대회 및 전시회에 출품하여 작품의 수준을 대내외적으로 확인한다. 6 ② 결과물 정보 보고서 PPT 영상 인쇄물 기타 GIT

주소(https://github.com/sejin67/tunneling) NOTION 주소(https://maple-digit-660.notion.site/83f2634e12874d9ea07f4820eba95f76 ) 프로젝트 주제 아두이노와 React를 활용한 침수사고 예방시스템 목적및필요성 2020년 여름철 집중호우가 지속되면서 오송 지하차도에서 물이 급격하게 차올라 침 수 사고가 발생하여 큰 인명피해를 입었습니다. 지하차도는 물 수위가 1/3만 차도 차량 이 지나다닐 수 없는 데에 비해, 지하에 있다는 특성상 육안으로 수위를 확인할 수 없다 는 한계점이 있습니다. 침수 사고가 나타나기 이전엔 위험성을 인식하지 못하였고 아직 뚜렷한 해결 방안이 제시되지 않았습니다. 아두이노와 React를 활용한 침수사고 예방시스템은 지하차도 침수 사고를 예방하고 자 물 높이 센서로 수위를 측정합니다. 또한, 급속도로 물이 차오르는 것을 감지하는 유 량 센서를 사용합니다. 이를 통해 유연한 상황 대처가 가능하게 하고, 지도 API를 통해 사용자(운전자)에게 실시간으로 경고해 주는 시스템을 개발했습니다. 활 동 과 정 [활동 계획 및 순서] 7 [역할 분담] 아두이노는

팀원이 대면으로 직접 실험하여 코드를 작성하였습니다. NAVER Map API 를 통해 지도에 표시하고 KAKAO Map API를 통해 검색 결과 불러오기 및 DB에 저장 하는 부분까진 협업으로 진행하였습니다. 이후 작업으론 클라이언트는 최수정, 서버는 엄세진이 담당했습니다. 자세한 역할 분담표는 노션에서 확인 부탁드립니다. [Notion 링크 첨부] https://maple-digit-660.notion.site/83f2634e12874d9ea07f4820e- ba95f76 저희 팀은 Notion에서 카테고리를 만들고 이를 통해 주차별 계획을 짜고, 이를 완료했 습니다. 필요한 자료에 대해서는 목차를 추가해 기록하도록 하였고, 완성된 자료에 대 해서도 빠짐없이 기록했습니다. 시작 전, 진행 중, 완료 상태 표시를 통해 무엇이 부족한 지 매번 체크 했으며 이를 지속적으로 보완하며 프로젝트를 마쳤습니다. 아래는 노션 목차 설명입니다. [아두이노] c++ 코드를 이용한 아두이노 소스코드 아두이노 테스트 영상 – 유량 센서 x, 수위 센서 o tinkercad를 이용한 아두이노 시뮬레이션 아두이노 자료조사 아두이노 아이디어 구체화 아두이노 최종 Test(영상) -

유량 센서 o, 수위 센서 o [웹개발] 웹 개발 – 소스코드 아이디어 및 전체적인 개발 방향 아두이노 웹서버 연결 – 연결 시도해본 코드들 아두이노 연결 참고 자료 리액트 강의 후보 – 참고했던 강의들 VSCODE TIP – 개발하는데 사용한 확장 프로그램 git upload – git주소 서버 개발 프론트엔드(FE) 개발 최종 영상 8 [주간보고] 매주 교수님께 보고하기 위해 주차별 진행했던 내용을 정리하여 Google docs로 제출 했던 URL입니다. [공모전] 공모전 목록입니다. 공대 성공주간 온라인 과제전에 참여했습니다. [개발 과정] * HW 하드웨어 개발 도구로는 아두이노UNO, 아두이노IDE, 수위 센서(물높이 센서), 유량 센서를 사용했습니다. * SW 소프트웨어 개발 도구로는 React, mongoDB, node.js, Express, TypeScript, kakao map API, Naver map API를 사용했습니다. SW, 웹 개발은 코딩애플과 인프런 강의를 참고해 개발 진행하였습니다. 웹 개발을 진 행하면서 크게 2가지 어려움이 있었습니다. 1. 처 음에 각자 강의를 들으며 개발을 진행했기 때문에 통합환경을 만들기 어려웠습

니다. 특히 MongoDB는 각자의 DB를 생성했었습니다. 이를 해결하기 위해 Mon- goDB Atlas라는 것을 도입했습니다. MongoDB Atlas는 cloud환경에서 DB 작 업을 할 수 있어서 모니터링과 연결이 쉽다는 장점이 있습니다. 무료버전은 512GB 까지 제공한다는 단점이 있었지만, 대용량을 처리하지 않아 문제가 되지 않았습니 다. SERVER에서 기존 MongoDB 부분을 Atlas부분으로 성공적으로 변경하면서 서로 같은 DB를 공유하게 되어 개발하는데 큰 도움이 되었습니다. 또한 GIT을 통 해 같은 소스코드를 공유하여 개발하였습니다. GIT 사용법도 익숙하지 않아 많은 어려움이 있었습니다. GIT GUI Tool인 fork 프로그램을 설치하여 commit과 pull, push 등 좀 더 쉽게 접근하는 방안으로 해결하였습니다. 2. 아두이노와 웹을 Js(웹서버)로 연결하는 부분에서 많은 시간을 할애했습니다. 처 음 프로젝트를 계획 할 때 앱인벤터를 사용할 예정이었습니다. 그러나 앱인벤터는 프로젝트의 완성도가 높지 않을 것이라 판단하여 Js(Ts)를 통해 웹 페이지 제작으 로 변경하게 되었고 그 과정에서 Js와 아두이노 연결 자료가 다른

언어에 비해 현 저히 적은 자료량 때문에 큰 어려움이 있었습니다. 그나마 있는 정보들도 저희가 사 용하는 편집기인 VsCode가 아닌 아두이노 편집기 IDE 버전의 정보들만 나왔습니 다. 그러나 Vscode의 아두이노 사용법부터 습득 후 다른 언어 사용법을 참고하여 성공적으로 연결할 수 있었습니다. 또한 다양한 방식으로 사고를 전환하여 아두이 노를 라우팅하여 구현해 내는 방식을 습득하였습니다. 9 최종 산출물  수위 센서를 사용해 지하차도 물 높이를 파악하고 물이 급격하게 차오르는 상황을 대 요 약 설 명 비한 물의 유속을 파악합니다.  이 두 데이터를 받아 led와 lcd로 현장에서 1차적으로 운전자에게 경고합니다. *유 량 센서가 일정 값을 넘을 시 더 위험하다는 경고 표시도 함께 출력합니다. 수위 센서와 물 높이 센서를 웹서버로 전송하여 웹 지도에 실시간으로 경고를 표시 합니다.  이 로 인해 안전하게 차량 통제를 할 수 있고, 유량을 감지해 유연한 상황 대처가 가능 하게 합니다. 또한 멀리 있는 운전자에게 실시간으로 경고하여 미리 우회할 수 있도록 도와주어 지하차도 침수 사고를 예방합니다. 향후 활용방안 저희가 개발한 지하차도 침수

시스템은 사고 예방에 초점을 둡니다. 지도를 통해 침수 및 기대효과 위험 지하차도를 표시하고, 차단기 앞에 LED 경고등과 LCD 경고문을 출력해 차량 통 제를 원활히 함으로 침수 사고를 방지합니다. 사고 예방 외에도 수위 센서, 유량 센서값 을 측정해서 웹서버로 데이터 값을 받아오는 과정까지 개발했으니 위 데이터값을 이용 해 유의미한 네비게이션 앱을 개발하거나 현장에서 사용될 수 있습니다. 저희 팀은 추후 AWS 배포와 모바일 앱 개발을 염두하고 있습니다. 모바일 지도나 네비 게이션을 개발하게 된다면, 사용자에게 더욱 편리한 서비스를 제공할 수 있을뿐더러 안 전한 삶을 영위할 수 있도록 도움을 줄 것입니다. 상용화가 된다면 각종 지하차도 및 도로를 관리하는 단체에서 사용할 수 있겠습니다. 저희 프로젝트는 지하차도 침수 사고를 예방하여 인명 피해를 자체를 막을 수 있기 때 문에 사회적으로 인적, 물적 재산 피해 예방에 큰 기여를 할 수 있겠습니다. 10 ③ PBL 및 캡스톤디자인 강좌 수강 소감 PBL 및 캡스톤디자인 강좌 수강 전후의 느낌(생각) 변화 엄○진 개발자가 되고는 싶었으나, 어떤 개발자가 될지 정하지 못했었습니다. 사용할 줄 아는 기 술 스택도

거의 없었고, 4학년이 될 때까지 완료한 프로젝트 하나 없었습니다. 모호한 상황 에서 프로젝트를 하나 가지고 싶어 캡스톤디자인을 도전해보게 되었고 좋은 팀원을 만나 개인 프로젝트를 진행할 수 있을 정도로 성장해 나갈 수 있었습니다. 저에게는 가장 활동적으로 참여한, 의미 있었던 수업이었고 수업이 끝나고도 눈에 보이 는 결과물이 남아있다는 점에서 더욱 성취감을 준 과목이었습니다. 최○정 아두이노를 몇 번 사용해 본 적은 있지만 이렇게 다양한 도구를 연결하는 방식은 처음 사 용해 봤습니다. 그로 인해 다양한 모듈도 쉽게 구현해 낼 수 있다는 자신감을 얻었습니다. 프로젝트를 진행하면서 구글링을 정말 많이 해봤더니 구글링하는 실력도 늘었고 코드에 대한 전반적인 지식이 크게 향상되었습니다. 또한 나 교수님이 주간 보고를 시켜주셔서 프 로젝트가 정돈되며 개발이 되어, 추후에 다시 프로젝트를 보완하더라도 큰 어려움 없이 보 완할 수 있겠다고 생각하였습니다. PBL 및 캡스톤디자인 강좌 장점 및 보완점 엄○진 혼자 프로젝트를 진행하는 것보다 팀 프로젝트로 진행해서 부족한 기술들을 서로 메꾸어 줄 수 있었고, 주마다 목표하는 바가 있으니 동기부여가 잘 되었습니다. 다만,

코드에서 막 히는 부분이 있을 때 멘토가 없어서 될 때까지 스스로 진행해야만 했습니다. 프로젝트를 진 행할 때 가장 많이 시간을 뺏겼던 부분이기도 해서 멘토가 있었으면 좋겠다는 생각을 했습 니다. 최○정 졸업하기 전 캡스톤 디자인 강좌를 통하여 확실한 프로젝트를 하나 만들고 갈 수 있다는 것이 큰 장점이라고 생각합니다. 또한 학교 예산으로 실무자의 강의를 들을 수 있고 프로젝 트에 사용되는 도구를 구매할 수 있다는 점도 장점입니다. 교수님이 매주 프로젝트의 피드 백을 해주셔서 방향성이라든지 개발 진행 과정을 객관적으로 판단 받아볼 수 있는 경험이 되어 좋았습니다. 11 프로젝트 참여로 인해 향상된 역량 엄○진 실무 협업에 자주 사용되는 Notion과 GIT에 대한 이해도가 전무했으나, 위 프로젝트를 통해 툴에 대한 이해도를 높일 수 있었습니다. 또한 완성물을 하나 만드는 팀 프로젝트에 참 여하게 되면서, 협업 역량과 소통 역량을 키울 수 있었습니다. 개발을 진행하게 되면서 아두이노와 SW적인 기술 스택도 늘게 되었고, 어떤 과정으로 웹 개발이 이루어지는지 파악할 수 있었습니다. 그리고 강의를 듣고 혼자서 개발하는 과정 중 학습내용이해 및 적용역량이 향상됨을

몸소 느꼈고, 마지막으로 될 때까지 시도해보는 끈 기를 기를 수 있었습니다. 최○정 스스로 프로젝트를 이끌어 가야 하는 점이 가장 어려웠고 그 부분을 가장 개선을 많이 할 수 있었습니다. Notion을 사용해서 프로젝트를 관리하는 방법을 배웠습니다. 팀 프로젝트다 보니 협업역량이 크게 성장하였습니다. 소스코드가 간단하면 상관없지만 이렇게 긴 소스코드와 많은 파일 트리를 공유하기엔 어려움이 있지만 GIT 도구를 사용하여 소스코드를 쉽게 공유할 수 있었습니다. 개발 지식이 많이 늘었습니다. 이제까지 한 파일 안에서 다양한 기능들을 처리하는 방식 으로 개발하였습니다. 이번 프로젝트는 컴포넌트를 정말 많이 쪼개져 있어서 처음 이해하 는 데 많은 어려움이 있었지만 이해하니 편한 방식이었구나, 깨달았습니다. JS를 TS로 바 꾸는 방식(타입 유무 차이), API 다루는 방식, 서버와 클라이언트, DB가 서로 어떻게 통신 하고 전체적인 프로젝트의 생애주기를 이해하는 데 큰 도움이 되었습니다. 12 PBL 및 캡스톤디자인 ① 최종 보고서 대상 1조 터널링 최종보고서 아 두 아두이노와 React를 활용한 이 침수사고 예방시스템 노 와 R e a c t를 활 용 한 침 수 사

고 예 방 시 스 템 교과목 융합캡스톤디자인 담당교수 김경진 교수님 2023.12.13 제출일 팀명 터널링 20200934 엄세진 팀원(학번⠂/ 이름) 20200962 최수정 팀원(학번⠂/ 이름) 13 2023학년도 MADE IN SUNGSHIN 공모전 성과집 목차 1.개발 배경 2.개발 도구 3.개발 주제 및 기대효과 4.HW개발 과정 5.S W개발 과정 6.아두이노-웹서버 연동 및 G IT 업로드 7.Develop 계획 8.회고록 14 PBL 및 캡스톤디자인 01. 개발 배경 대상 2020년 여름철부터 집중호우가 계속되면서 지하차도 침수 사고가 아 끊이질 않고 있다. 지하차도는 물 수위가 1/3만 차도 차가 지나다닐 수 두 없는데에 비해, 지하에 있다는 특성 상 육안으로 수위를 확인할 수 없다는 이 한계점이 있다. 노 와 충북 전역 호우 경보…지하차도 침수로 1명 사망 / KBS 2023.07.15. R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 “지하공간, 종아리만 잠겨도 탈출 어렵다”, 세계일보(2023.07.19) 따라서 우리는 지하차도 침수 사고를 예방하고자 물높이 센서로 수위를 측정하고, 빠르게 물이 차오르는 것을 방지한 유량을

측정한다. 이를 통해 유연한 상황 대처가 가능하게하고, 지도 AP I를 통해 사용자(운전자)에게 실시간으로 경고해주는 시스템을 개발한다. 15 2023학년도 MADE IN SUNGSHIN 공모전 성과집 실시간으로 터널 수위 감지 및 경보 알림을 통한 침수 사고 예방 효과 02.개발 도구 [하드웨어 개발 도구] [ 아두이노 UNO, 아두이노 IDE , 수위 센서(물높이 센서), 유량 센서 ] [소프트웨어 개발 도구] [ React, mongoDB, node.js, Express, TypeScript, kakaomap API, Navermap API ] 16 03. 개발 주제 및 기대효과 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 수위 센서를 사용해 지하차도 물 높이를 파악하고 물이 급격하게 차오르는 상황을 대비한 물의 유속을 파악한다. 이 두 데이터를 받아 led와 lcd로 현장에서 1차적으로 운전자에게 경고한다. 유량 센서가 일정 값을 넘을시, 더 위험하다는 경고 표시도 함께 출력한다. 수위 값을 웹서버로 전송하여 리액트를 통해 지도에 실시간으로 경고를 표시한다. 이로 인해 안전하게 차량

통제를 할 수 있고, 유량을 감지해 유연한 위기 상황 대처가 가능하도록 한다. 또한 멀리 있는 운전자에게 실시간으로 경고하여 미리 우회할 수 있도록 도와주어 지하차도 침수 사고를 예방한다. 17 2023학년도 MADE IN SUNGSHIN 공모전 성과집 지하차도 침수 사고 시스템은 예방에 초점(다른 시스템과 차이점) 04. HW개발 과정 04-1) 아두이노 시뮬레이션 아두이노 시뮬레이션을 제공해주는 www.tinkercad.com 위 사이트에서 연결해본 LCD, 초음파센서, 모터 ╳물높이 센서, 유량 센서 미지원 04-2) 웹/앱 화면 구성 figma툴로 작성해본 모바일 앱 화면 구성 18 PBL 및 캡스톤디자인 네비게이션 화면 구성  대상 지도 화면 구성 아 두 04-3) 아두이노 IDE 코드 작성 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 19 2023학년도 MADE IN SUNGSHIN 공모전 성과집 아두이노 센서 연결 TEST 영상 https://www.notion.so/dc 96ba914239417d91b47 dbc34166a0a 20 04-3) 코드 설명 PBL 및 캡스톤디자인 ☑수위값 < 550 대상 전체 LED

OFF 실시간 LCD 출력 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 ☑550 < 수위값 <= 650 ⅓ 임박 빨간색 LED ON  실시간 LCD 출력 10 <= 유량센서값 물의 유속이 빠르다고 판단되어 Dangerous! LC D 추가 출력 ☑650 < 수위값 <= 750 ⅓ 지점 빨간색, 노란색 LED ON  실시간 LCD 출력 10 <= 유량센서값 물의 유속이 빠르다고 판단되어 Dangerous! LC D 추가 출력 ☑750 < 수위값 ⅓ 넘을시 빨간색, 노란색, 흰색 LED ON  ⚪ 실시간 LCD 출력 10 <= 유량센서값 21 2023학년도 MADE IN SUNGSHIN 공모전 성과집 물의 유속이 빠르다고 판단되어 Dangerous! LC D 추가 출력 04-4) 아두이노 센서 연결 최종 Test 물높이 센서,유량 센서, LE D, LC D 연결 Test [동영상은 아두이노 센서 최종 테스트 파일이나, Notion 참고 바랍니다.] https://www.notion.so/Test- 148e77d4a53846a6bf38d857cbf503d3?pvs=4 22 05. SW개발 과정 PBL 및 캡스톤디자인

05-1) 개발 기능 (지도는 Navermap API이용) 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 1. 내가 클릭한 위치 마커보기 2. KaKao AP I를 활용한 위치 키워드 정보 검색 기능 3. 내위치 정보 DB업로드 기능 4. 침수 위험 지역에 경고 표시 기능 ● 메인 페이지와 업로드 페이지 구별해 개발 23 2023학년도 MADE IN SUNGSHIN 공모전 성과집 05-2) 세부 기능: 내위치 마커보기 데이터를 조회하고, 마커와 인포윈도우를 지도 위에 표시하는 기능 [동영상은 SW개발 영상 파일이나, ppt 참고 바랍니다.] [내 위치 마커보기 주요 소스코드] 24 PBL 및 캡스톤디자인 ● 왼쪽 코드는 MarkerP rops를 통해 Naver map에서 데이터를 대상 가져오고, Marker.css를 통해 클릭 이벤트 발생 시 마커를 빨간색에서 파란색으로 바꿔주고 있다. 아 두 ● 오른쪽 코드는 InfoWindow를 초기화하고 Info window 이 marker함수로 InfoWindow를 만들어내고 있으며, 위치 정보를 노 가져오는 함수인 selectInfo를 정의하고 있다. 와 R e a c t를 활

용 한 침 수 사 고 예 방 시 스 템 05-3) 세부 기능: 위치 정보 검색 기능 25 2023학년도 MADE IN SUNGSHIN 공모전 성과집 KaKao 키워드 검색 AP I를 활용한 위치 정보 검색 기능 [위치 정보 검색 기능 주요 소스코드] ● 왼쪽 코드(클라이언트)에서는 각 변수들을 초기화하고 검색창의 css를 정의한다. ○ 길이가 0이상이고 검색 개체가 있을 경우 infos 정보에서 key:value값을 받아오고 있다. ● 오른쪽 코드(서버)에서는 axios를 통해 G E T형식으로 Kakao AP I KE Y를 받아오고 있으며, 그 정보를 infos에 저장하고 있다. 26 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 05-4) 세부 기능: 내위치 정보 업로드 기능 사용자가 원하는 위치 정보 업로드 기능 , 등록 버튼을 누르면 DB에 해당 위치 정보가 저장 27 2023학년도 MADE IN SUNGSHIN 공모전 성과집 [내위치 정보 업로드 기능 주요 소스코드] ● 왼쪽 코드(클라이언트)에서는 creatInfo가 정상적으로 만들어졌을 시 ‘업로드 성공’, 에러가 나면 ‘중복된 데이터

입니다.’를 출력한다. ● 오른쪽 코드(서버)에서는 creatInfo로 사용자가 원하는 데이터를 저장하고, getInfo로는 데이터를 G E T형식으로 받아온다. 28 PBL 및 캡스톤디자인 ● DB에 이미 존재하는 데이터면 ‘중복된 데이터 입니다.’ 대상 ● DB에 존재하지 않는 데이터면 ‘업로드 성공’ 메시지 출력 이벤트 아 구현 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 05-5) 세부 기능: 침수 위험 지역에 경고 표시 기능 underway라는 지하차도 DB를 만들고 더미데이터 생성해, 이를 기반으로 해당 지하차도에 경고 표시 29 2023학년도 MADE IN SUNGSHIN 공모전 성과집 [침수 위험 지역에 경고 표시 주요 소스 코드] ● 눈에 띄기 위한 기존 marker와 다른 warning 마커 구현 ● underway 더미데이터에만 아이콘을 가져온다. 30 06.아두이노-웹서버 연동 및 GIT 업로드 PBL 및 캡스톤디자인 06-1) 아두이노-웹서버 연동 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 06-2) GIT 업로드 [클라이언트 업로드] 31 2023학년도

MADE IN SUNGSHIN 공모전 성과집 [서버 업로드] 32 07. Develop 계획 PBL 및 캡스톤디자인 warning 마크 클릭시 이벤트 추가 대상 지하차도 API 불러올 방법 연구 UI 디자인 아 R eact Native 공부 및 개발 두 AWS 배포 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 33 2023학년도 MADE IN SUNGSHIN 공모전 성과집 08. 회고록 08-1) 중간보고와 달라진 점 08-2) 프로젝트에서 얻은 경험과 성과 34 08-3) 최종 진행 과정 PBL 및 캡스톤디자인 대상 08-4) 역할 분담 R 아두이노, 웹 개발: 협업 e 클라이언트: 최수정 a 서버: 엄세진 c t 35 2023학년도 MADE IN SUNGSHIN 공모전 성과집 [Notion 링크 첨부] https://www.notion.so/83f2634e12874d9ea07f4820eba95f76 [Github 링크 첨부] https://github.com/sejin67/tunneling 36 PBL 및 캡스톤디자인 ② 최종 발표자료 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 2

37 2023학년도 MADE IN SUNGSHIN 공모전 성과집 3 4 38 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 5 6 39 2023학년도 MADE IN SUNGSHIN 공모전 성과집 7 8 40 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 9 10 41 2023학년도 MADE IN SUNGSHIN 공모전 성과집 11 12 42 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 13 14 43 2023학년도 MADE IN SUNGSHIN 공모전 성과집 15 16 44 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 17 18 45 2023학년도 MADE IN SUNGSHIN 공모전 성과집 19 20 46 PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를 활 용 한 침 수 사 고 예 방 시 스 템 21 22 47 2023학년도 MADE IN SUNGSHIN 공모전 성과집 23 24 48

PBL 및 캡스톤디자인 대상 아 두 이 노 와 R e a c t를