브이원씨 (VERTICAH)

(2022.12 ~ ing) FinTech

CLOBE(구 레베뉴마켓) 서비스 개발
react
typescript
next.js
react-query
zustand
turborepo
emotion.js
aws
CLOBE(구 레베뉴마켓) 초기 구축/설계/개발/운영
• 유일한 프론트엔지니어로 기업 자금관리/조달을 도와 기업의 성장을 도와주는 CLOBE(구 레베뉴마켓) 초기 구축/설계/개발/운영
• Turborepo를 활용한 모노레포 환경 개발 및 CI/CD 구축 (github actions)
• SSR + ECS 기반 대고객 서비스 운영 / SSG + S3 + CloudFront 기반 어드민 서비스 운영
성능 최적화를 위한 기여
• 서비스 Light house 성능 점수를 64점에서 90점으로 향상
• 서비스 내 주요액션(재무데이터 라벨링 과정)의 INP(Interaction to Next Paint)를 CPU 성능 4분의 1 기준의 디바이스라 가정했을때 1.5초~4초에서 360ms ~ 540ms정도로 개선
프로덕트 방향성과 팀 생산성 향상을 위한 기여
• Playwright 기반 E2E 테스트 도입으로 서비스 안정성과 회귀 테스트 자동화 체계 구축
• Swagger 기반 API 명세에서 TypeScript 타입 자동 추출 크롬 확장 도구 개발
• Figma 플러그인 개발(이미지 S3 업로드 자동화, svg react 컴포넌트 추출), 운영 효율성과 콘텐츠 관리 편의성 개선
• 디자이너 합류 후 디자인 시스템 정립 및 협업 방식 개선에 참여하여, 디자이너-개발자 간 소통 효율화
• 백엔드 개발자들도 프론트엔드 개발에 쉽게 참여할 수 있도록 cursor rule 등 코드 컨벤션을 정립, 코드 일관성을 확보하고 개발 및 QA 과정에서 소요되는 시간을 줄이기 위해 노력함
• 개발 외에도 팀의 일하는 방식과 프로덕트 방향성에 기여할 수 있는 다양한 방법을 주도적으로 실험 및 개선

(2020.03 ~ 2022.08) Food Tech

B마트/배민스토어 통합 웹뷰 환경 개발
react
next.js
typescript
redux
emotion.js
웹뷰 개발환경에서의 여러 비즈니스 대응 (설계/개발/운영)
• 기존 vue환경의 페이지들을 react 환경으로 이관
• 앱스킴, 인터페이스 효과적으로 관리하는 App Protocol Manager 개발
• 추천 화면 대응을 위해 A/B 테스트 컴포넌트 개발
B마트 프로모션 페이지 제작 builder 및 프로모션 페이지들 개발
react
typescript
mobx
마케터 분들이 프로모션(이벤트) 페이지 제작에 사용하는 builder 개발 및 기능 추가 / 개선
• 섹션, 그룹, 아이템, 액션등의 레이어를 나눠 모델을 설계해 개발하여 다양한 프로모션 페이지 대응가능하도록 개선
• 매달 개발자가 개발했던 이벤트 페이지들을 마케터분들이 제작가능하도록 설계하여 시스템화/자동화로 마케팅 효율 증대
• 마케팅팀에 요구사항에 따른 여러 사용성 개선 및 기능 추가 (스와이퍼 제작 기능, 쿠폰발급, 딥링크 이동..etc)
다양한 프로모션 페이지 개발
• 신규고객 유입 및 기존고객 재구매 유도, 기획자/디자이너와 함께 요구사항을 정립해가며 복잡한 요구사항을 협의하여 이벤트 페이지 개발
B마트 v1 디자인 시스템 개발
react
typescript
rollup.js
emotion.js
docz
loki
초기의 B마트 디자인 시스템 개발
• rollup, ts, react 기반 디자인 시스템 개발
• 젠킨스 연동으로 배포 방식 개선 및 슬랙알람 연동 (버전, 배포 성공/실패여부)
• 시각적 회귀테스트 도입으로 디자인시스템 개발 안정성 확보
팀 문화를 만들어 나감
soft skill
하나의 팀으로써 유기적으로 협업하고 공유하는 문화
• 신규 입사자 온보딩 프로세스 정립 및 온보딩 프로젝트 기획 및 문서화
• 하나의 서비스를 함께 만들어간다는 생각을 바탕으로 한 지속적으로 공유하는 문화
• 팀 내 정보공유 채널 생성 제안 및 기술 관련 아티클 공유 -> 전사 프론트엔트 공유채널로 확장(지식/기술공유)
• 매주 빠짐없이 주간 회고를 주도함 (배포 일정 체크/ 이슈 체크 / 논의)
• 코드리뷰를 통해 동료가 작업하는 도메인과 코드작성 의도파악,히스토리 파악, 더나은 프로덕트를 만들기 위한 필수 불가결한 과정이라 생각하며 함께하고 있음 (PR 템플릿 생성..etc)

(2018.08 ~ 2020.02) Travel Tech

마이리얼트립 웹 전반 설계/개발/운영
typescript
next.js
emotion.js
react
context api
참여인원: 3명
협업 문화
• 사내 협업문화를 만들어가며 유기적으로 일하는 업무 프로세스들 구축
css-in-js media 라이브러리 제작
• emotion, styled component 같은 css-in-js 라이브러리들을 활용할때 반응형을 쉽게 대응하기 위해 만든 유틸을 라이브러리로 제작
웹 상품 상세페이지 ruby on rails -> react 마이그레이션
react
참여인원: 1명
웹 상품 상세페이지 리뉴얼
• 기존 ruby on rails 레거시 파악후 제거하여 react로 전환
• 커머스에서 중요한 상세 페이지를 react로 마이그레이션함으로써, 묵혀뒀던 백로그들 추가가 용이해짐

(2018.01 ~ 2018.08) Food Tech

플레이팅 서비스 개발/운영
react
redux
redux-saga
셰프 음식을 집으로 전달해주는 B2C 서비스였고, 개발/운영을 담당했습니다

- 스타트업 첫번째 프론트 엔지니어로 합류해 어떻게 일해왔는지에 대해 작성한 글

- 병역특례 기간을 회고한 글이고, 그 기간동안 학생에서 개발자가 된 후 어떻게 성장하였고 어떠한점들을 느꼈는지 작성한 글

- 협업에 관한 생각들, 그리고 어떻게 사내 협업문화를 만들어나갔는지 사내 기술블로그에 작성한 글

- 회사에서 개발자로 일하기 시작하며, 개발자라는 타이틀을 가지고 본인의 생각을 정리하며 1년을 회고한 글

- 꾸준함을 바탕으로 일일커밋 6개월을 진행하고 느꼇던 생각들, 그리고 어떻게 일일커밋 6개월을 하였는지에 대해 정리 한 글

Soft Skills

• 꼼꼼히 요구사항과 기획을 파악하며 완벽히 개발을 진행하려 노력 합니다.
• 개발 직군이나 비 개발 직군 모두 전문성을 바탕으로 업무를 진행하고 있으므로 항상 다른 팀에 귀 기울이며 열린 마음으로 서로가 이해 할 수 있는 말로 대화하려 노력 중입니다.
• 본인의 일이 아니더라도 문제 상황에 적극적으로 도움을 주려 노력합니다.
• 혼자 빛나는 사람보다는, 함께할때 더 빛나는 사람이 되고 싶습니다. 협업을 중요시 하고, 팀내에서의 협업 뿐 아니라, 타팀과의 소통을 위해 노력합니다.
• 상황에 대한 공유 및 정리능력이 뛰어납니다.
• 새로운 기술에 호기심을 갖고, 적극적으로 탐구합니다.
• 코드 리뷰에 대해 매우 긍정적이며, 함께 더 좋은 서비스를 만드는 힘은 리뷰에서 나온다 생각하며, 의견을 주저없이 제시합니다.

Web

• web vitals에 대해 이해하고, 최적화를 할 수 있습니다.
• 크로스 브라우징에 대응할 수 있습니다.

React

• 번들 사이즈 분석 및, 번들 사이즈 최적화를 할 수 있습니다.
• hook을 사용해 비즈니스 로직을 적절히 분리해 낼수 있습니다.
• 여러 라이브러리들을 활용해 상태관리에 대해 적절한 상황에 사용할 수 있습니다.

Javascript/Typescript

• ES2015 이후의 자바스크립트 문법에 익숙합니다.
• typescript를 사용하며 적절한 타입을 활용할 수 있습니다.

- type: seperate type of button onclick event with more detail

- doc: update Table component's selectedRowKeys wrong type

- feat: arrange import section of combineReducers

- Suggest `reactstrap` instead of `react-bootstrap`

- Remove irrelevant suggestion of a legacy method from a warning

- Fix node engines

- Fix Issue about addons.md's Wrong links

- fix: fix wrong links in readme and update readme examples

- doc: add korean translation of useMemo and useCallback

- add `css-in-js media library` to readme ecosystem (add my library : https://github.com/Brew-Brew/css-in-js-media)

- doc: add 'css-in-js-media' to helpers

- doc: update readme of addon viewport about configure section more accurately

동국대, 해커톤 행사 성황

출처 : 한국대학신문(http://news.unn.net)

동국대 총장상(소셜 이노베이터상)은 스마트폰 스쿨(대표:중앙대 이승규)팀의 ‘실버세대 교육용 스마트폰 튜토리얼 서비스’가 수상했다...

[신입사원 다이어리]신입 개발자도 다양한 여행 프로젝트 주도해요

출처 : 아시아경제

마이리얼트립 웹플랫폼개발팀에서 프론트엔드 개발을 담당하고 있는 1년 차 신입입니다. 프론트엔드 개발자는 웹 사이트에서 사용자가 직접 경험하는 ...