프론트엔드 개발자

주경진

4개의 외주 개발을 통해 드론 모니터링 사이트 제작 및 씨네투어 풀스택 개발 등 다양한 프로젝트를 경험했습니다.
누구나 자연스럽게 참여할 수 있는 개발환경을 선호하고, 이유와 매커니즘을 설명할 수 있는 코드 작성에 집중합니다.

OPIC

블로그

GitHub

노션 포트폴리오

<p><strong>응원 메시지가 담긴 책자를 가자지구에 전달 하는 프로젝트. 웹 사이트로 전 세계의 응원 메시지와 후원금을 모으는 것이 목표</strong></p>
<h4>Develop(FE)</h4>
<ul>
<li><a href="https://blog.naver.com/n_cloudplatform/223351883817">NCP</a>, <strong>Git Action</strong>으로 배포 자동화</li>
<li><strong>SQLite</strong>를 활용해 테스트 API서버 <a href="https://github.com/project-GAZA/GazaFront/pull/100">구현</a>.</li>
<li>웹 애니메이션 구현: <strong>parallax 스크롤링, Opacity fade-in</strong>적용 후 모듈로 제작 후 <a href="https://velog.io/@rud1676/Web-Animation-%EC%B5%9C%EC%8B%A0-CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EA%B8%B0%EB%B2%95%EC%9D%84-%EC%A0%81%EC%9A%A9%ED%95%A0-%EC%88%98-%EC%9E%88%EB%8A%94-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0">npm배포</a></li>
</ul>
<h4>Trouble Shooting</h4>
<ol>
<li>디자이너와 소통 간소화 : 3단계 계층으로 아토믹 패턴 적용 후 스토리북 배포. </li>
<li>Modal창 구현시 prop-drilling발생 : <strong>Recoil</strong>을 통한 Modal상태관리 방식으로 변경</li>
</ol>
<p>기술스택 : <code>Next13</code>, <code>SCSS</code>, <code>StoryBook</code>, <code>TypeScript</code>, <code>SQLite</code>, <code>NCP</code><br><a href="https://github.com/project-GAZA/GazaFront">Github</a>, <a href="https://gazas-child-read-hope.kr/">Link</a></p>


가자지구 난민 응원메세지 전달 프로젝트 / FE

<p><strong>운용 중인 드론의 상태와 해당 지역의 날씨 등 관리자가 모니터링 해주는 도구</strong></p>
<h4>Develop(FE)</h4>
<ol>
<li>OpenVidu(WebRTC비디오 플랫폼)을 활용해 드론 카메라 송출 화면 <strong>비디오 컴포넌트에 스트림 연결</strong> </li>
<li><strong>Socket-IO</strong>를 통해 드론 소켓 데이터 수신 시 UI 동작 구현</li>
<li>드론 시뮬레이션 <strong>소켓 서버 구현</strong><ul>
<li>Socket-IO를 활용해 연결된 드론 이름으로 Room구성 후 웹 클라이언트와 정보 교환.</li>
</ul>
</li>
</ol>
<h4>Trouble Shooting</h4>
<ol>
<li>드론의 카메라 화면 확인 시, 사용하지 않는 브라우저의 음성, 카메라 접근 허용 현상 발생.<ul>
<li>불필요한 Publish 과정 진행 없이 카메라 스트림 받을 수 있도록 코드 개선 후 <a href="https://velog.io/@rud1676/OpenVidu-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EB%93%9C%EB%A1%A0-%EC%98%81%EC%83%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0">기록</a></li>
</ul>
</li>
<li>초기 환경 Next로 구성해. 빌드시 필요 없는 용량 발생. =&gt; 사용하지 않은 기능들이 빌드 됨.<ul>
<li>리팩토링 시 <strong>Next대신 필요한 기능만 직접 WebPack으로 환경 구성</strong>. 빌드 결과물 용량 30% 감소.</li>
</ul>
</li>
<li>프로젝트 종료 후 <strong>리팩토링 진행</strong>: 코드 분할, 폴더 구조 개선, TypeScript 적용.</li>
</ol>
<p>기술 스택: <code>Next</code>, <code>Socket-io</code>, <code>OpenVidu(WebRTC)</code>, <code>Typescript</code>, <code>Webpack</code>, <code>React</code><br><a href="https://www.notion.so/rud1676/c1da5ccb6ded4b1e8924d63076a38aff?pvs=4">포트폴리오</a>, <a href="https://github.com/rud1676/drone_monitoring">Github</a>, <a href="https://main--droneapp.netlify.app/">Link</a></p>


드론 모니터링 사이트 / FE

<p><strong>여행 투어를 예약, 탐색할 수 있도록 돕고, 스케줄러 기능을 통해 여행을 보다 즐겁고 편안하게 만드는 여행 스케줄러.</strong></p>
<h4>Develop(FE)</h4>
<ol>
<li>여행상품 목록, 예약 관리 페이지 등 목록 페이지에서 <strong>Grid, Flex</strong>를 활용해 <strong>반응형 디자인 구현</strong>.</li>
<li><strong>Google Map API</strong>를 활용하여 일정에 대한 장소 정보 연동(사진URL,전화번호, 위치)</li>
<li><a href="https://velog.io/@rud1676/React">React-Query</a>를 통해 서버데이터 상태관리.</li>
</ol>
<h4>Develop(BE)</h4>
<ol>
<li>정의된 ERD를 활용해 패키지 여행 예약 부분 API명세 - 노션으로 작업 공유</li>
<li>Sequelize(MYSQL), Express를 활용해 Router-Controller-Model 구조로 구현.</li>
<li>S3, Multer모듈 사용해 이미지 업로드를 위한 미들웨어 구현.</li>
</ol>
<h3>Trouble Shooting</h3>
<ol>
<li>Google 사진 URL이 3일 뒤 만료되어 이미지가 표시되지 않는 문제.<ul>
<li>서버에서 이미지를 다운로드한 후 S3에 저장하여 해결.</li>
</ul>
</li>
<li>프로젝트 종료 후 리팩토링하며 코드 분할, 폴더 구조 개선 사항 적용.<ul>
<li>폴더구조 : APP-Routing 폴더 구조 개선, 라우팅 그룹, private folder를 활용해 구조 변경.</li>
<li>코드분할: 중복 컴포넌트는 Common폴더로 분리</li>
</ul>
</li>
</ol>
<p>기술 스택: <code>Next13</code>, <code>React-Query</code>, <code>sass-module</code>, <code>MUI</code> <code>Express</code>, <code>Sequelize</code>, <code>MYSQL</code>, <code>AWS S3</code>, <code>Multer</code></p>
<p><a href="https://www.notion.so/rud1676/dc091e16a74e4f70b2d16b6679930168?pvs=4">포트폴리오</a>, <a href="https://github.com/rud1676/my_travel_app">Github</a></p>


씨네 투어 / (BE,FE)

<p><strong>근무자 PC의 실시간 모니터링 시스템. “근무자의 PC현황” 을 관리자가 확인 할 수 있습니다.</strong></p>
<h4>Develop(BE/FE)</h4>
<ul>
<li><strong>vue와 vue-chart</strong>를 사용해 15개의 데이터 테이블과 2종류의 Pie,Line 그래프를 활용해 대시보드 구현</li>
<li><strong>FlaskAPI</strong>로 <strong>ElasticSearch</strong>서버와 Front서버의 중개 서버 구현 : <strong>QueryDSL</strong>을 통해 약 20개의 api작성</li>
</ul>
<h4>Develop(AGENT)</h4>
<ul>
<li>사전에 설계한 시나리오에서 필요한 <strong>윈도우 이벤트</strong>들을 필터링.</li>
<li>기술 공부 후 <strong>wazhu</strong>+ElasticSearch 의 동작을 아키텍처로 제작해 팀원들과 공유.</li>
</ul>
<h2>기술 스택:  <code>Wazhu</code>, <code>Vue</code>,<code>Sysmon</code>, <code>ElasticSearch</code>, <code>MetricBeat</code>, <code>FlaskAPI</code>,<br><a href="https://www.notion.so/rud1676/c762158756a14634a69d0207cd8cc140?pvs=4">포트폴리오</a>, <a href="https://github.com/rud1676/intheforestProject">Github</a></h2>


보안 모니터링 웹 서비스 / FE,BE,AGENT배포

<h3>웹 서비스 유지보수</h3>
<ul>
<li>PHP, Javascript 레거시 코드 개선</li>
<li>사용자 경험 개선(SQL 개선, Javascript 동작 오류 수정)</li>
</ul>
