미리보기

디지털 성범죄 대응 기업인 라바웨이브의 서비스 개발팀으로서 내외부 웹 서비스 개발, 프로젝트 기획, 빌드 및 배포 자동화 환경 구축 업무를 진행하였습니다.

프로젝트 설명

• 기업 정체성과 브랜드 이미지를 확립하는 것을 목표로 진행한 홈페이지 개발

• 채용 홈페이지, 기술 블로그 등 여러 채널의 확대 가능성 有

담당 역할

• Front-End 개발

• 내부 컨텐츠 작성

담당 수행 업무

• 홈페이지 스크롤 위치에 따라 렌더링되는 동적 Header 컴포넌트 제작

• LightHouse를 통해 홈페이지 성능, 접근성, 권장사항, SEO 개선

• 내부 컨텐츠(Job Interview) 작성

• 이미지 용량 압축을 통해 이미지 로딩 속도 개선
  => 웹 페이지 로딩 속도 개선

• 구글, 네이버 색인 생성

사용 기술 스택

React.js, Next.js, Emotion.js, react-query, framer-motion, FxTS, ts-pattern, NX Workspace, zx

프로젝트 설명

• 유지보수성 및 성능 향상을 목표로 진행하는 홈페이지 리뉴얼

담당 역할

• Front-End 개발

담당 수행 업무

• 기존 홈페이지 사용자 인터페이스를 Atomic 패턴 기반으로 리뉴얼
  => 가독성 증진, 재작성되고 충돌되는 코드의 양을 감소시켜 효율성 증진
• NX Workspace plugin을 통해 클라이언트, 서버, 코어 모듈, shared 모듈, 엔티티, 타입 등 다양한 종류의 프로젝트 및 파일들을 간단하게 생성할 수 있도록 제너레이터 개발
• TailwindCSS 기반의 컴포넌트 CSS를 제거하고, Emotion styled 패키지를 활용하여 컴포넌트 디자인 적용
• 유지보수성 및 성능 향상을 목표로 자사 홈페이지 리뉴얼 진행
  => Lighthouse 90+ 및 유저 시나리오 별 성능 비용 50% 이상 감소 목표
• Client, Admin 페이지 Front-End 개발
• 트래킹 코드 삽입 (GoogleAnalytics, Naver 추적코드, 카카오픽셀 등)

사용 기술 스택

React.js, Next.js, Emotion.js, react-query, framer-motion, FxTS, ts-pattern, NX Workspace, zx

프로젝트 설명

• 신규 서비스 오픈에 빠르고 효율적으로 대비하고 일관적인 UX를 제공하기 위한 디자인 시스템

담당 수행 업무

• 테스트케이스 작성
• 컴포넌트 명세 작성
• VAC 패턴 기반의 컴포넌트 구조 적용
• NameSpace 컴포넌트 패턴 기반으로 제작
• 각 컴포넌트 Storybook 구축
• Emotion.js 를 활용하여 컴포넌트 스타일 (CSS-in-js) 적용

사용 기술 스택

Next.js, React.js, Nx Monorepo, Emotion.js, Storybook, MUI, Jest

프로젝트 설명

• 마케팅부서에서 자사 특정 키워드를 검색하여 모니터링하는 고정 업무의 시간을 효율적으로 단축하기 위해 키워드 크롤링 기술을 활용하여 모니터링 자동화 시스템 개발
• 24시간 자동 모니터링

담당 역할

• PO 및 풀스택 개발

담당 수행 업무

• 플로우차트 및 요구사항 명세서 제작
• API 명세서 작성
• ERD 설계
• Node.js 런타임 환경에서 Chrominum을 제어할 수 있는 puppeteer 라이브러리를 활용하여 키워드 크롤링 로직 구현
• Nest.js 패키지인 Cron을 활용하여 매 30분마다 크롤링 실행 구현 (자동화)
• Next.js 기반의 대시보드 페이지 개발
• Semi-Atomic 패턴 기반으로 컴포넌트 개발
• react-query를 활용하여 데이터캐싱을 통해 서버 부하 감소
• Nest.js 기반의 데이터 API 개발
• Google Oauth 인증 로직 구현
• GoogleChat 웹훅을 통한 Notification 기능 구현
• 페이지 접근 권한 로직 구현
• Jenkins 파이프라인 작성

사용 기술 스택

• FE : Next.js, TailwindCSS, Axios, Recoil, react-query,Emotion.js
• BE : Nest.js, puppeteer, OAuth ,TypeORM
• Infra: Docker Jenkins, mariaDB, Nginx,

프로젝트 설명

• UI 개발 시 사용되는 각 컴포넌트들이 프로젝트나 서비스에 따라 기능은 같지만 UI는 달리 구현되는 경우를 고려하여 컴포넌트의 기능적 역할만 구현한 컴포넌트 라이브러리 제작

담당 수행 업무

• UI-less (Functional) 컴포넌트 라이브러리를 구축
• NameSpace 컴포넌트 패턴 기반으로 제작
• 추후 서비스에 따라 UI를 입혀 사용할 수 있도록 설계 및 구축
• React Hook을 활용하여 컴포넌트 기능 구현
• Emotion.js를 활용하여 컴포넌트 Default UI 적용

사용 기술 스택

• FE : React.js, Emotion.js
• 테스트 : RTL, Jest
• 서버 : Nginx, Docker, verdaccio(registry)

이 프로젝트로 진행하면서 컴포넌트들의 기능이 돌아가는 로직에 대해 알게 되었고, 다음 프로젝트를 진행할 때 자사 내부 개발자들이 해당 라이브러리를 사용함으로서 편의성 제공과 개발 속도를 증진 시킬 것이라고 생각합니다.

프로젝트 설명

• 외주사에 맡긴 php 기반의 자사 홈페이지를 JS 기반으로 리뉴얼 및 개발 진행

담당 역할

• Front-End 개발

담당 수행 업무

• ERD 설계
• Client페이지 Front-End 개발
• Next.js 기반의 SSR 웹사이트 개발
• StyledComponent, TailwindCSS를 활용하여 각 페이지 레이아웃 및 컴포넌트 스타일(css) 적용
• Graphql에 특화되어 있는 Apollo Client패키지를 활용하여 데이터 호출(mutation, query)
• GoogleAnalytics 및 카카오 태그 매니저등 반복되는 스크립트 삽입 로직 구현 및 유지보수

사용 기술 스택

• FE : Next.js, React.js, StyledComponent, TailwindCSS, Recoil
• BE : ExpressJS
• 공통 : apollo
• Infra : Docker, Nginx, Jenkins

이번 프로젝트 경험을 통해 Front-End 개발자로서, 한 단계 성장하게 되었습니다.

프로젝트 설명

• 입사하고 첫 진행 프로젝트
• 오늘 하루 스터디한 내용에 대해서 간단하게 적을 수 있는 블로그 사이트 개발

담당 역할

• 전반적인 기획 및 풀스택 개발

담당 수행 업무

• React.js 기반의 SPA 웹사이트 제작
• Axios 기반의 서버 HTTP 통신 구현
• Recoil을 활용하여 전역 데이터(로그인 유저) 상태 관리
• TailwindCSS를 활용하여 컴포넌트 CSS 적용
• Nodejs 런타임 환경에서 ExpressJS를 활용하여 데이터 API 개발

사용 기술 스택

• FE : React.js, Axios, TailwindCSS, Recoil
• BE : Express.js
• Infra : Docker, Nginx, FireBase(NoSql)

위와 같은 풀스택 경험을 통해 웹개발자로써 더욱 성장할 수 있는 기회가 되었습니다.