미리보기

Full-Stack 개발 연구원으로서 사내 홈페이지 프로토타입 개발, 스마트공장 MES 리뉴얼 업무를 진행했습니다.

현장실습학기제를 통해 Full-Stack 개발 연구원(인턴) 으로서 온/습도 센서 관리 웹사이트 개발을 진행했습니다.

2023 하계 연구연수생(인턴) 으로서 실시간 센서값 그래프 시각화 GUI 유지보수, 모터 제어 프로그램 구현을 진행했습니다.

2023 동계 연구연수생(인턴) 으로서 실시간 센서값 그래프 시각화 GUI 개발을 진행했습니다.

Description

• 본인 담당 : API 및 공통 컴포넌트 개발, 그래프 페이지 개발
• tailwindCSS design system 구성
• AdobeXD 기반 스타일링 (디자인 팀과의 협업 역량 보유)
• 협업을 위한 공용 컴포넌트 분담 개발
• 실시간 데이터, 그래프 뷰어 구현
• 설비명, 날짜/시간 데이터 필터링 구현
• Next.js API Route를 이용한 API 개발
• API 명세(Schema, docs) 작성 및 구현
• 기상청 단기예보 API 적용
• React-Query Custom Hook 모듈화
• Docker를 이용한 사내망 배포

Tech Stack

• FE: React Next.js TypeScript tailwindCSS
• BE: Next.js API Route MySQL

Description

• CSS design system 구성
• AdobeXD 기반 스타일링
• Docker를 이용한 사내망 배포
• 반응형 지원 (PC, 태블릿, 모바일)
• 이미지 업로드 및 저장 기능
• 입력값 검사(정규식) 및 에러 핸들링

Tech Stack

• FE: React

Description

• Node.js socket 통신을 이용한 센서 데이터 수신 및 파싱 환경 구성
• DB Schema/CRUD 설계 후 API 구현
• 클러스터링 기반 기기 설치 위치 지도 개발 (Class 형태의 Tree 구조 데이터 관리, Recoil 전역 상태 관리)
• 기기 관리 대시보드 개발 (Table Viewer(react-chartjs-2) 및 CSV Download 구현, 시계열 데이터 결측치 처리)

Tech Stack

• FE: React Next.js TypeScript
• BE: Node.js express MariaDB
• ETC: Figma

사용자가 원하는 사양의 클라우드 컴퓨팅 서비스를 제공하기 위한 웹사이트입니다.

[정리]
[대회 수상]

Description

• 본인 담당 : 프론트엔드 개발
• UI/UX 개발 : 로그인, 회원가입, 서비스 구독, 마이페이지
• 각 페이지에서 사용자의 개인 정보/서비스 구독 정보를 불러와 관리할 수 있고, 서비스 구독 정보를 추가할 수 있음

Tech Stack

• FE: Vue.js tailwindCSS (본인 담당)
• BE: Node.js express MariaDB
• Infra: k8s Jenkins ArgoCD
• ETC: Figma

부산 시민들이 더욱 쉽게 문화·예술 행사 정보를 취득하고 공유할 수 있는 웹앱 서비스를 제공합니다.

['갈매기' Website]
[정리]
[블로그]
[프론트엔드 레포지터리]
[백엔드 레포지터리]

Description

• 본인 담당 : 팀 리드 및 프론트엔드 개발, 배포
• 카테고리별 색상 구분 행사 위치 marker 구현
• 카테고리별 해시태그 기능 구현
• Vercel을 이용한 Front-End 배포 적용
• Github Actions, pm2 module을 이용한 자동 배포 구현
• Back-End Server에 AWS EC2/Route53/LB를 이용한 HTTPS 적용

Tech Stack

• FE: React tailwindCSS
• BE: Node.js express MariaDB
• Infra: AWS EC2 AWS RDS AWS Route53 Github Actions Vercel
• ETC: KakaoMap API Figma

변경된 프로토콜에 따라 소켓 통신 코드를 수정하고, 채널별 데이터 필터링을 위한 Class를 구현했습니다.

Description

• 본인 담당 : 팀 리드 및 전반적 개발 업무
• 근전도 센서의 프로토콜 변경에 따른 패킷 파싱 코드 수정
• 근전도 센서 GUI 재구성(CSV Viewer, Graph Viewer)
• 근전도 센서의 채널별 데이터 필터링 Class 구현

Tech Stack

• Python PyQt pyqtgraph Jetson Nano C C++

기존 제공되는 특정 Motor SDK를 이용한 모터 제어 프로그램을 개발했습니다.

Description

• 본인 담당 : 팀 리드 및 전반적 개발 업무
• 모터 제어 관련 객체를 반환하는 C++ 함수 작성 후, Python에서 사용할 수 있도록 Wrapper API 개발
• 키보드 입력을 통한 모터 START/STOP/EXIT 제어를 위해 Thread 구현

Tech Stack

• Python Jetson Nano C C++

AWS Chime SDK를 이용하여 라이브 강의 플랫폼을 제작하였습니다. 관리자는 라이브 강의를 생성 및 관리할 수 있고, 사용자는 특정 라이브 강의에 접속할 수 있습니다.

Description

• 강의 녹화 구현 및 녹화 영상 저장을 위한 EC2, S3, RDS 연동
• 녹화 강의 목록 확인을 위한 관리자는 클라우드 페이지 개발
• 입출력장치 ON/OFF toggle 기능 구현, Camera Preview 제공
• AWS Chime SDK를 이용한 라이브 강의 생성
• 강의/참석자 세션을 생성 및 삭제하는 API, SQL Query를 통해 MariaDB에 접근/수정하는 API를 작성
• AWS EC2의 컴퓨팅을 통해 Node.js 서버 관리

Tech Stack

• FE: Vue.js tailwindCSS
• BE: Node.js express
• Infra: AWS EC2 AWS RDS AWS S3 AWS Chime SDK

Description

• 본인 담당 : 팀 리드 및 전반적 개발 업무
• 기존 Matplotlib로 제작된 GUI 프로그램을 PySide2, pyqtgraph를 사용하여 개선 (그래프 갱신 속도 개선)
• 클라이언트와 서버 간 양방향 통신을 위한 구조 개선 및 각종 센서의 이진 데이터를 실시간 파싱할 수 있도록 구성
• 실시간 그래프의 이진 데이터 기록 기능 및 이진 데이터를 불러와 그래프를 작성/CSV 변환하는 기능 구현

Tech Stack

• Python PyQt pyqtgraph Jetson Nano C C++

부산시 수영구 생활/재난 단말 데이터 관리 시스템 웹사이트에서 수집한 데이터를 시각화하여 사용자에게 제공하기 위한 웹앱 플랫폼을 개발했습니다.

Description

• 데이터 수집 : 웹사이트 크롤링 후, Node.js로 구성한 서버에 데이터를 저장하여 클라이언트로 전송
• 데이터 시각화 : 서버와 API 통신을 통해 사용자가 선택한 기상 데이터를 불러와 지도에 표시
• 위치 기반 : 사용자의 현재 위치에 따라, 주변 센서 데이터의 가중 산술 평균값을 왼쪽 상단에 항상 표시
• PWA(Progressive Web App) : 하나의 웹사이트를 개발하여 앱으로도 배포함으로써 유지보수가 용이한 웹앱을 완성

Tech Stack

• FE: Vue.js tailwindCSS
• BE: Node.js express
• ETC: KakaoMap API Figma

캡스톤디자인 시작품 부문에 참여하여 기획/설계/제작 과정으로 완성된 클라우드 노트북(’CloudLaptop’) 및 클라우드 서비스 웹서비스(’Blueberry’) 시작품을 행사 부스에 전시하고 발표를 진행하였고, '장려'를 수상했습니다.

학과 내 튜터 활동을 통해 1학년 후배들의 ‘프로그래밍실습I’ 전공 과목 튜터링을 진행하며 프로그래밍 기초 지식을 공유했습니다.

교내 알고리즘 동아리에서 매주 알고리즘 문제 해결을 수행했습니다.
[깃허브]

문예동아리 '지은'에서 수행한 봉사 프로그램 소통고리 공모전에 참여하여 '대상'을 수상했습니다. 디자인 팀으로서 팜플렛, 편지지, 편지 봉투, 포스터, 문집, 슬로건 등 디자인 작업을 수행했습니다.