미리보기

응원 메시지가 담긴 책자를 가자지구에 전달 하는 프로젝트. 웹 사이트로 전 세계의 응원 메시지와 후원금을 모으는 것이 목표

Develop(FE)

• NCP, Git Action으로 배포 자동화
• SQLite를 활용해 테스트 API서버 구현.
• 웹 애니메이션 구현: parallax 스크롤링, Opacity fade-in적용 후 모듈로 제작 후 npm배포

Trouble Shooting

1. 디자이너와 소통 간소화 : 3단계 계층으로 아토믹 패턴 적용 후 스토리북 배포.
2. Modal창 구현시 prop-drilling발생 : Recoil을 통한 Modal상태관리 방식으로 변경

기술스택 : Next13, SCSS, StoryBook, TypeScript, SQLite, NCP
Github, Link

운용 중인 드론의 상태와 해당 지역의 날씨 등 관리자가 모니터링 해주는 도구

Develop(FE)

1. OpenVidu(WebRTC비디오 플랫폼)을 활용해 드론 카메라 송출 화면 비디오 컴포넌트에 스트림 연결
2. Socket-IO를 통해 드론 소켓 데이터 수신 시 UI 동작 구현
3. 드론 시뮬레이션 소켓 서버 구현
   • Socket-IO를 활용해 연결된 드론 이름으로 Room구성 후 웹 클라이언트와 정보 교환.

Trouble Shooting

1. 드론의 카메라 화면 확인 시, 사용하지 않는 브라우저의 음성, 카메라 접근 허용 현상 발생.
   • 불필요한 Publish 과정 진행 없이 카메라 스트림 받을 수 있도록 코드 개선 후 기록
2. 초기 환경 Next로 구성해. 빌드시 필요 없는 용량 발생. => 사용하지 않은 기능들이 빌드 됨.
   • 리팩토링 시 Next대신 필요한 기능만 직접 WebPack으로 환경 구성. 빌드 결과물 용량 30% 감소.
3. 프로젝트 종료 후 리팩토링 진행: 코드 분할, 폴더 구조 개선, TypeScript 적용.

기술 스택: Next, Socket-io, OpenVidu(WebRTC), Typescript, Webpack, React
포트폴리오, Github, Link

여행 투어를 예약, 탐색할 수 있도록 돕고, 스케줄러 기능을 통해 여행을 보다 즐겁고 편안하게 만드는 여행 스케줄러.

Develop(FE)

1. 여행상품 목록, 예약 관리 페이지 등 목록 페이지에서 Grid, Flex를 활용해 반응형 디자인 구현.
2. Google Map API를 활용하여 일정에 대한 장소 정보 연동(사진URL,전화번호, 위치)
3. React-Query를 통해 서버데이터 상태관리.

Develop(BE)

1. 정의된 ERD를 활용해 패키지 여행 예약 부분 API명세 - 노션으로 작업 공유
2. Sequelize(MYSQL), Express를 활용해 Router-Controller-Model 구조로 구현.
3. S3, Multer모듈 사용해 이미지 업로드를 위한 미들웨어 구현.

Trouble Shooting

1. Google 사진 URL이 3일 뒤 만료되어 이미지가 표시되지 않는 문제.
   • 서버에서 이미지를 다운로드한 후 S3에 저장하여 해결.
2. 프로젝트 종료 후 리팩토링하며 코드 분할, 폴더 구조 개선 사항 적용.
   • 폴더구조 : APP-Routing 폴더 구조 개선, 라우팅 그룹, private folder를 활용해 구조 변경.
   • 코드분할: 중복 컴포넌트는 Common폴더로 분리

기술 스택: Next13, React-Query, sass-module, MUI Express, Sequelize, MYSQL, AWS S3, Multer

포트폴리오, Github

근무자 PC의 실시간 모니터링 시스템. “근무자의 PC현황” 을 관리자가 확인 할 수 있습니다.

Develop(BE/FE)

• vue와 vue-chart를 사용해 15개의 데이터 테이블과 2종류의 Pie,Line 그래프를 활용해 대시보드 구현
• FlaskAPI로 ElasticSearch서버와 Front서버의 중개 서버 구현 : QueryDSL을 통해 약 20개의 api작성

Develop(AGENT)

• 사전에 설계한 시나리오에서 필요한 윈도우 이벤트들을 필터링.
• 기술 공부 후 wazhu+ElasticSearch 의 동작을 아키텍처로 제작해 팀원들과 공유.

기술 스택: Wazhu, Vue,Sysmon, ElasticSearch, MetricBeat, FlaskAPI,
포트폴리오, Github

웹 서비스 유지보수

• PHP, Javascript 레거시 코드 개선
• 사용자 경험 개선(SQL 개선, Javascript 동작 오류 수정)