미리보기

• ZookeeperUI 업무툴 개발

  • Linux 명령어를 이용한 클러스터 등록과 ZNode 트리 구조를 매번 명령어를 통해 확인하는 것이 어렵기 때문에, 이 과정을 API를 통해 시각적으로 확인할 수 있도록 효율적인 업무 툴을 개발하였습니다.

  • ZNode를 리눅스 VI에서 일일이 확인하는 것을 정말 어려웠습니다. 이를 위해 json-tree-view 라이브러리 도입을 진행하였고, 적절한 스타일 및 라이브러리 커스텀을 통해 트리 구조의 시각화로 이 문제를 해결하였습니다.

  • 일부 제한된 노드 작업 및 접근 권한 제어를 위해 Vue3, Pinia를 이용한 사내 업무 툴 권한 상태 관리 진행 및 개발을 하였습니다.

  • 사내 인프라 파트에서 해당 업무 툴을 지속적으로 사용 중이며, 개선 사항에 따른 유지보수 및 기능 개선을 진행하고 있습니다.

• 안랩 연구소 (ASEC) 보안 블로그 리뉴얼

  • 워드프레스 플러그인 및 소스코드 커스텀을 통한 안랩 블로그 퍼블리싱을 진행하였습니다.

  • 워드프레스 게시 자동화를 위해 여러 분석 문서(워드프레스 Hook · REST API)를 작성하고, 이를 팀 내에 공유하며 프로젝트 진행에 큰 기여를 하였습니다.

  • 사내 백오피스와 워드프레스 게시 자동화를 위해 백오피스에 워드프레스 게시 관련 API 연동을 진행하였습니다.

  • REST API를 연동하면서 에디팅 기능의 충돌이 발생하였습니다. 워드프레스의 TinyEditor와 사내 백오피스의 Ckeditor의 태그 충돌로 인해 태그 치환 관련 로직을 구성하였고, 일부 Ckeditor의 스타일 시트 태그 래핑을 통해 작성된 게시글의 통일성을 보장할 수 있었습니다.

• 커스텀 컴포넌트 마이그레이션 및 구조 컨벤션 구축

  • Vue2를 이용한 사내 백오피스 프론트엔드 개발을 진행하면서 오래된 Vuetify 버전과 의존성에 대한 문제가 발생하여 추후 버전 업 및 의존성을 제거하고자 자체 서비스의 커스텀 컴포넌트 및 스타일링을 통해 UI 라이브러리에 대한 의존도를 제거하고 있습니다.

  • 도메인 별로 구분되어있지 않은 데이터 패칭 파일들을 구조화하고자 폴더 및 파일 구조에 대한 컨벤션을 팀 내에서 확립하고자 구조화시키고, 기존 코드의 버그들을 발견하고 이를 개선하고 있습니다.

• 나모 에디터 (WYSIWYG) 리액트 NPM 라이브러리 개발 및 배포

  • 기존 에디터는 바닐라 자바스크립트로 이루어져있어, SPA를 사용하는 기업들에게는 많은 설치 과정의 불편함으로 다가왔습니다. 이를 위해 에디터의 설치 과정을 간소화시키고자 리액트를 통해 에디터를 래핑하여 NPM 라이브러리를 개발하였습니다

  • 기존 CRA 방식에서 번들링 사이즈를 줄이고자, Webpack과 Rollup을 통해 NPM 라이브러리를 배포하였습니다.

  • 라이브러리 제공을 통해 에디터 설치 과정을 간소화시키고, 케이스 별 예제와 README.MD를 제공하여 에디터 접근성을 향상시켰습니다.

• 나모에디터 (WYSIWYG) 개발 및 유지보수

  • 8,000여 고객사의 필드 이슈를 패치하고, 2주 간격의 스프린트를 통한 체계적인 개발 일정 관리를 경험하였습니다.

  • IE 대응과 더불어 모던 브라우저들의 크로스 브라우징 현상을 자바스크립트와 제이쿼리를 적절하게 사용하여 개발을 진행하였습니다.

• 에디터 웹 기반 한글 뷰어 개발

  • 에디터에서 PDF 뷰어와 같이 라이브러리 없이 한글 뷰어 레이아웃을 자체적으로 개발하였습니다.

  • 한글 컨버터를 통해 패칭된 태그를 아이프레임을 통해 적절하게 데이터 핸들링하고, 스로틀링을 통해 스크롤 이벤트의 성능 최적화를 하였습니다.

  • 모던 브라우저들의 크로스 브라우징 현상을 해결하는 것은 정말 어려운 일이었습니다. 이를 위해 유저 에이전트 헤더를 판별하는 공통 함수 개발과 조건별 분기처리를 통해 모든 모던 브라우저에 대응을 할 수 있었습니다.

  • 웹으로 개발된 뷰어에서 인쇄 이벤트를 자연스럽게 개발하기 위해서, 사용자가 인쇄 전 설정해놓았던 상태를 그대로 표현하고자 스타일 요소(scale)를 통한 배율 이벤트를 구현하고, 프린트 이벤트 시에 원래의 배율 값을 찾아 원본 그대로 정상 출력되도록 하였습니다.

Team.

1명

Introduce.

· 블로그의 플랫폼들은 가지각색으로 다양합니다. 그러다보니 여러 플랫폼을 이동해서 봐야하는 불편함이 있는데, 내가 보고 싶은 개발자들의 피드 블로그를 플랫폼 상관없이 볼 수 있도록 개발자 블로그 피드 서비스를 개발하였습니다.

Tech Stack.

React, Remix, TypeScript, Tanstack, Axios, Emotion, Vite, Git Action, Python

Tasks.

· SSR을 이용한 SEO 개선 및

· 여러 플랫폼 블로그 스크래핑을 위한 스크립트 제작

· Git Action을 이용한 블로그 파싱

Experience.

· Remix의 v1, v2 각각 다른 Nested Route 비교하기

Description.

• SSR을 이용한 SEO 개선

  • 1차적으로 React로 구성했던 프로젝트가 SEO에 취약하다는 것을 파악하고, SSR로 페이지를 구축하고자 Remix를 사용하여 취약한 SEO에 대응할 수 있었습니다.

  • Remix의 시맨틱 철학에 공감하여, Loader 함수를 통해 서버에서 초기 데이터를 프리패칭 후 Tanstack 초기 데이터 설정과, 성능 상의 이점을 가져올 수 있었습니다.

• Git Action을 이용한 파싱 자동화

  • 처음에는 RSS를 매일 밤마다 수동으로 가져오는 작업을 진행했었습니다, 그러다보니 어떻게 해당 개발환경을 개선할 수 있을까에 대한 고민을 하게 되었고 Git Action을 통해 매일 정해진 시간에 파싱 스크립트를 실행시켜 자동으로 입력한 도메인에 대한 RSS 정보를 파싱해올 수 있도록 스크립트를 설계할 수 있었습니다.

  • 각 플랫폼 별로 RSS 피드 정보에 대한 구조체가 다르다는 문제를 확인하였습니다, 이를 위해 플랫폼 별 파싱 스크립트에 대한 분기 처리를 진행하였고, 깃허브 · 미디엄 · 티스토리 · 벨로그 등 다양한 플랫폼에서 대응가능한 스크립트를 만들 수 있었습니다.

Referrence.

관련 서비스 링크

Team.

9명 (프론트 4, 백엔드 3, 디자인 2)

Introduce.

· 학부 생활때부터 지금의 회사 생활까지, 매번 회고를 진행할 때마다 항상 어려운 점들이 많았습니다. 회고를 진행하고나서 오랜 기간 지나고 발견되는 회고들과, 더불어 어떻게 내 상황에 맞는 회고를 할 수 있을까에 대한 고민들을 했던 것 같습니다. 이런 문제들을 서비스로 풀고자 회고 서비스를 구상하게 되었습니다.

· 링크 : 서비스 개발 배경 보러가기

Tech Stack.

React, TypeScript, Express, Tanstack, Axios, Jotai, Emotion, framer-motion, Vite

Tasks.

· 디자인 시스템 개발 및 컴파운드 패턴을 이용한 공통 컴포넌트 개발

· 회고 작성 플로우 및 여러 페이지 별 퍼널 설계

· SPA에서 부분 SSR을 이용한 동적 오픈 그래프 태그 적용

· 전체적인 화면 인터렉션 구성 및 애니메이션 구현

Experience.

· 협업 시에 이슈 관리자와 리뷰어를 일일이 설정하기 불편한가요?

· 레이어 서비스의 SPA에서 동적 오픈그래프 대응해보기

· 레이어 서비스는 어떻게 퍼널 관리를 했을까요?

Description.

• API 연동을 위한 Axios Interceptor 에러 및 토큰 공통 핸들링

  • API 연동을 위해 Axios Interceptor 에러 및 토큰 공통 핸들링 작업을 진행하여 개발 생산성을 증가시켰습니다.

• 디자인 시스템 개발 및 컴파운드 패턴을 이용한 공통 컴포넌트 개발

  • 디자인 시스템을 만들고 프론트엔드 DX 향상과 더불어 컴파운드 패턴을 이용해 변경 사항에 빠르게 대응할 수 있는 공통 컴포넌트를 개발하였습니다.

• 회고 작성 플로우 및 여러 페이지 별 퍼널 설계

  • 하나의 목표를 이루기 위해 여러 페이지에서 플로우에 대한 뎁스를 헤쳐나가는 것은 정말 불편한 일입니다. 이를 위해 기존 여러 페이지를 통한 퍼널 단계를

    하나의 뷰 화면에서 여러 페이즈를 관리하고, 하나의 목표를 위해 Context API와 JSX Switch를 이용한 퍼널 설계를 통해 상태의 복잡도와 가독성을 향상시킬 수 있었습니다.

• 동적 오픈 그래프 태그 적용

  • 기본적으로 SPA에서는 클라이언트 렌더링으로 동작하기 때문에 동적으로 태그가 변경되지 않습니다. 초대 링크에 대한 내용들을 동적을 적용하기 위해 Express를 사용하여 부분 SSR을 적용해 동적으로 오픈 그래프 태그를 적용할 수 있었습니다.

• 인터렉션 및 애니메이션 구현

  • 일부 애니메이션에 대한 부분은 로띠를 이용해 구현이 되었지만, 텍스트와 이미지가 동적으로 렌더링 되어야하는 영역의 경우 직접 구현을 해야했습니다. keyframe을 통해 편지 초대장에 대한 애니메이션을 구현하였고, 사용자에게 부드러운 동작을 제공하기 위한 transition 효과를 제공하였습니다. (초대장 인터렉션 확인하기)

Reference.

관련 서비스 링크

Team.

8명 (프론트 4, 백엔드 3, 디자인 2)

Introduce.

· 칭찬 구슬을 통한 애니메이션과 이미지 기반 이벤트 성 SNS 입니다.

· 다양한 인터렉션을 통해 구현된 인터페이스를 통해 일정 시간 이후 나에게 쌓인 칭찬 구슬들을 타임 캡슐처럼 열어보는 듯한 느낌을 얻을 수 있습니다.

Tech Stack.

React, TypeScript, Matter, React-Query, Axios, zustand, tailwiindCSS, framer-motion, Vite

Tasks.

· 온보딩, 게시글 플로우 개발

· 서비스 공통 컴포넌트 개발

Description.

• API 연동을 위한 Axios Interceptor 에러 및 토큰 공통 핸들링

  • API 연동을 위해 Axios Interceptor 에러 및 토큰 공통 핸들링 작업을 진행하여 개발 생산성을 증가시켰습니다.

• 이미지 크롭과 이미지 압축을 통한 서버 비용 절감

  • 정방형 이미지 사이즈를 위한 이미지 크롭을 react-easy-crop를 이용해 서비스에 맞춰 크롭 기능을 개발하였습니다.

  • 대용량 이미지의 경우 서버 비용 절감을 위해 browser-image-compression를 이용하여 이미지 압축(GB -> KB)을 통해 서버에 전송을 하였습니다.

• 개발 생산성 향상을 위한 tailwindCSS 디자인 시스템 구축

  • 팀 내 디자이너와 협업하여 디자인 토큰을 만들고, tailwindCSS 디자인 시스템을 구축하여 개발 생산성을 증가시켰습니다.

• 서비스 공통 컴포넌트 개발

  • 컴파운드 패턴을 사용하여 디자인 변경 사항에 유동적으로 반응할 수 있도록 컴포넌트를 개발하였습니다.

  • 처음 컴파운드 패턴을 사용하면서 컴포넌트 구조화에 대해 관심을 가지게 된 계기가 되었습니다.

Referrence.

관련 서비스 링크

Team.

2명 (프론트 1, 백엔드 1)

Introduce.

· 멋쟁이사자처럼 강남대학교 공식 페이지입니다.
· 멋쟁이사자처럼 강남대학교를 홍보하기 위한 서비스입니다.

Tech Stack.

Next.js 13, TypeScript, Emotion, Redux-Toolkit, Axios, Github Actions

Tasks.

· 피드 페이지 개발을 위한 Github Actions를 통한 RSS 자동 스크랩

· Next를 활용한 SSR 구현

Description.

• 학교 홍보를 위한 SEO 최적화를 통한 페이지 상단 노출

  • SSR을 통해 멋쟁이사자처럼 검색 시 페이지 상단에 노출을 시킬 수 있었습니다.

  • SEO 최적화를 위해 Next.js를 처음 사용해보면서 SSR로 구성된 프로젝트에 관심을 가지게 된 계기가 되었습니다.

Referrence.

관련 서비스 링크

Team.

2명 (프론트 1, 백엔드 1)

Introduce.

· 멋쟁이사자처럼 강남대학교 리크루팅 서비스입니다.
· 멋쟁이사자처럼 강남대학교의 회원 모집을 자동화 및 간편화하기 위해 서비스를 기획부터 배포 및 서비스를 진행하였습니다.

Tech Stack.

React, TypeScript, Axios, Emotion, Redux-Toolkit

Tasks.

· 멋쟁이사자처럼 리크루팅 백오피스 개발
· 멋쟁이사자처럼 리크루팅 모집 플로우 개발

Description.

• 단순 구글 폼이 아닌 서비스만이 제공하는 사용자 경험 제공

  • 단순 구글 폼으로 구성된 지원서가 아닌, 학교의 데이터가 담긴 지원서를 작성한다면 조금 더 작성하는데 시간을 줄일 수 있다고 생각을 하였습니다.

  • 지원서를 작성하면서 지원에 대한 궁금한 사항이 생기면, 이메일로 소통을 하는 것이 아닌 채널톡을 통해 실시간으로 주고받을 수 있도록 하였습니다.

• 언제 어디서든지 사용할 수 있는 서비스

  • 서버에 임시 저장 기능을 통해 사용자들이 언제 어디서든지 데이터를 불러와 작성을 할 수 있습니다.

  • 사용자가 서비스 내에서 작성을 하다가 이동할 경우, Redux를 통해 현재의 값을 전역으로 저장했다가 다시 값을 넣어주는 방식을 사용했습니다.

• 구글 폼을 통한 모집 과정에서 느꼈던 불편함을 해소

  • 구글 폼은 지원자 현황을 보기 힘든 반면, 합 · 불합 상태 별 지원자 리스트를 관리할 수 있도록 구성하였습니다.

  • 모바일 환경까지 대응을 했기 때문에 언제 어디서든지 지원자들을 관리할 수 있습니다.

  • 합 · 불합 메일의 경우 SMTP 서버를 통해 프론트엔드에서 비동기 요청으로 메일 결과를 자동화할 수 있었습니다.

Referrence.

관련 서비스 링크

· 디프만 16기 선정 및 디프만 16기의 리더로 동아리를 이끌고 있습니다.

· 전체적인 개발 · 디자인 직군을 위한 컨퍼런스를 구성하고, 데브챗에서 경험했던 Developer Relations의 영감을 받아 프로그램의 전체적인 부분을 기획하고 있습니다.

· Next.js로 구성된 디프만 홈페이지를 16기 브랜딩에 맞게 리뉴얼하는 작업을 진행하였습니다.

· 노션 공식 커뮤니티인 코리아 서울 1기 멤버로 참여하여 활동을 하고 있습니다.

· 노션에 대한 다양한 템플릿 및 노하우를 공유하고, 노션에 기여할 수 있는 방향성을 노션 엠배서더와 함께 고민을 하고 있습니다.

· 로켓펀치 플랫폼에서 코치로 활동을 하고 있습니다.
· 멘티들과 커피챗을 통해 사이드 프로젝트 및 프론트엔드 기술 교류를 하고 있습니다.

· 기획부터 배포까지 진행하면서 현업 개발자들과 협업을 진행하였습니다.
· 개발하면서 다른 기업들의 다양한 개발 문화를 습득하며 성장할 수 있었습니다.
· 대외활동이 끝나도 프로젝트를 유지하며 네트워킹을 유지하고 있습니다.
· 15기에서 제작한 회고 서비스인 레이어 서비스의 전체적인 서비스 관리를 맡고 있으며, 사용자들과의 실질적인 소통을 통해 계속해서 서비스 개발을 지속하고 있습니다.

· 기획부터 배포까지 진행하면서 현업 개발자들과 협업을 진행하였습니다.
· 개발하면서 다른 기업들의 다양한 개발 문화를 습득하며 성장할 수 있었습니다.
· 대외활동이 끝나도 프로젝트를 유지하며 네트워킹을 유지하고 있습니다.

· 멋쟁이사자처럼 프론트엔드 기초 교육과 운영진으로 활동을 하였습니다.
· 프로젝트 팀을 구성하여 PO로서 의미있는 프로젝트를 리드하여 개발하였습니다.
· 멋쟁이사자처럼 기수 별 커뮤니티를 제작하고, 현재 원활하게 활동과 운영을 하고 있습니다.

· 국내 테크기업들의 Developer Relation 커뮤니티인 DevChat에 참여를 하고 있습니다.
· 매 달 밋업을 가지며 테크 기업 별 개발 문화와 기술 동향 등을 공유하는 장을 만들어가고 있습니다.
· 개발자로서 새로운 기술 동향을 파악하고 다른 기업들이 가진 개발 문화를 이해하고 있습니다.