미리보기

조기경보 시스템 통합 플랫폼의 웹 애플리케이션 개발 및 유지 보수, IOT 기술 및 공공데이터 연동

리눅스, 윈도우, Docker 서버에 프론트엔드 프로그램 직접 배포 및 관리

UI/UX 기획 및 다양한 사용자 요구사항을 반영한 웹 인터페이스 설계 및 구현

HTTPS 보안 강화, 자동화된 배포 프로세스 구축 등 플랫폼 안정성 및 효율성 향상 작업 수행

분산된 사이트들을 조기경보 시스템 플랫폼으로 통합 및 플랫폼 개선 작업

기술 스택 : Next.js, Emotion, TypeScript, Socket.io, Axios, PM2, Git, Figma

구현

• 사용자 요구사항을 반영하여 피그마로 전체 UI/UX 설계

• 공공데이터포털 API를 활용해 기상특보 및 산사태 발생 시 실시간 알림이 표시되도록 구현

• 매주 개발 서버 정기 배포 및 운영 서버 배포를 통해 사용자 테스트 지원

• 유해가스 데이터를 시각화하여 그래프와 테이블 형태로 출력

• 배수펌프 데이터를 백엔드 API로 받아 UI에 출력하고, Socket.io를 통해 CCTV 실시간 스트리밍 연동

• 개발 서버에서 로딩 속도가 느려지는 문제를 운영모드 전환을 통한 webpack-hmr 비활성화로 해결, 속도 약 3배 향상

결과

• 사용자 요구사항 반영된 통합 플랫폼 완성

• 실시간 알림 시스템 및 모니터링 기능 구축

• 테스트 및 개발 속도 향상

서버 재부팅 시 플랫폼이 자동으로 실행되도록 설정

구현

• NSSM을 활용해 Window 서버에서 재부팅 시 Next.js, React 프로그램이 자동 실행되도록 설정

• Systemd를 활용해 Linux 서버에서 재부팅 시 Next.js 프로그램이 자동 실행되도록 설정

결과

• 서버 재부팅 후 발생하던 서비스 중단 문제를 해결하고, 관련 민원 해소

• 자동화로 운영 효율성과 시스템 안전성 향상

https://coding-je.com/entry/윈도우-서비스로-재부팅시-자동실행-설정하기-feat-nextjs

조기경보 시스템 플랫폼을 소프트웨어 품질인증(GS인증) 기준에 맞게 수정

기술스택 : Next.js, Typescript, Emotion, Nginx, PM2, Git

구현

• HTTP를 HTTPS로 전환, 인증서 자동 갱신 설정으로 보안 강화

• NSSM을 활용해 서버 재부팅 시 Nginx가 자동 실행되도록 설정, Nginx를 통해 Next.js 정적 파일이 실행되도록 구현

• 서버 다운 시 에러 처리 로직을 추가하여 안정성 향상

• 다양한 기능을 사용자 입장에서 검토 및 개선하여 플랫폼의 안정적인 운영을 도모

• Windows 서버에 Next.js 환경 설정 및 배포

결과

• GS 인증 획득을 통해 플랫폼의 품질과 안정성을 공식적으로 인정받음

• HTTPS 전환 및 자동화 설정을 통해 서비스 중단을 예방하고 운영 효율성을 높임

https://codingirl.tistory.com/entry/윈도우-리눅스-HTTPS-인증서-발급-방법-Lets-Encrypt

조기경보 시스템 플랫폼 웹 & 모바일 기획 및 개발

기술 스택: Next.js, React, TypeScript, Docker, PM2, Git, Figma

구현

• 피그마를 활용해 모바일 UX/UI 설계

• Docker 환경 설정부터 배포까지 직접 수행

• PM2를 사용해 배포 프로세스 자동화

결과

• 웹 및 모바일 버전 개발 완료, 플랫폼의 접근성과 사용성 향상

• 자동화된 배포 프로세스 구축, 운영 효율성 및 안정성 강화

농장/목장 체험 웹사이트 개발

배포 URL : http://wefarm.kro.kr/

구현

• NextAuth를 사용해 안전한 로그인 및 회원가입 기능 구현

• RESTful API를 활용하여 백엔드와의 데이터 연동

• Google Maps API를 활용해 사용자에게 각 농장의 위치를 직관적으로 제공

• Context API를 사용해 전역 상태 관리 및 컴포넌트 간 데이터 공유 최적화

결과

• 체험 예약 기능을 성공적으로 구현

• 팀 프로젝트로 공모전 참여, 효율적인 협업과 완성도 높은 결과물 제공

기술스택 : Next.js, Tailwind, TypeScript, NextAuth, Context API

https://coding-je.com/entry/회고록-농림축산식품부-공공데이터-활용-창업경진대회-후기