(2020.03 ~ 2022.08) Food Tech

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

(2018.08 ~ 2020.02) Travel Tech

마이리얼트립 전체 신규 웹 front 환경 구축
typescript
next.js
emotion.js
react
context api
참여인원: 3명
css-in-js media 라이브러리 제작
• emotion, styled component 같은 css-in-js 라이브러리들을 활용할때 반응형을 쉽게 대응하기 위해 만든 유틸을 라이브러리로 제작
마이리얼트립 전체 신규 웹 front 구축
• rails 기반 웹 -> ts + next.js + emotion.js 조합 신규 웹
• cypress e2e테스트를 통한 안정성있는 프로덕개발을 위한 노력
• 상태관리 및 설계단 참여
호텔메타서치 프로젝트
react
context api
참여인원: 2명
기존: 부킹닷컴 링크로연결 -> 개선: 각 호텔 사이트들의 상품들을 리스트페이지, 상세페이지에서 확인할수 있도록 개선
• 웹뷰 대응 및 신규 인터페이스 협의 및 개발
• UI 컴포넌트 제작
• 상태관리 및 설계단 참여
웹 상품 상세페이지 view ruby on rails -> react 리뉴얼
react
참여인원: 1명
웹 상품 상세페이지 리뉴얼
• 기존 ruby on rails 레거시 파악후 제거 -> react로 전환
• 사이트 내 중요페이지를 react로 마이그레이션 -> 추후 기능 추가 용이
• 더 나은 유저경험 전달
브레이즈 이벤트 삽입
react
참여인원: 1명
브레이즈 이벤트 삽입
• 브레이즈 스크립트 웹, 웹뷰 삽입
• 마케팅 팀에서 캠페인 제작을 위한 웹 페이지내 유저 스토리별 이벤트 삽입(회원가입~구매 등등 user 이벤트일어나는 부분)
서스테이닝 이슈들, 성능개선
ruby on rails
react
react hook
참여인원: 팀 전원
서스테이닝 이슈들, 성능개선
• bundle analyzer 도입 제의및 적용을 통해 성능개선의 초석을 다짐
• 자잘한 기존 rails 페이지들 개선하면서 react로 전환
• 협력업체들(naver, 마케팅스크립트 대행사..etc)과의 커뮤니케이션을 통한 페이지 개선작업들
• sustaining 이슈들을 대응하면서 사업,운영팀에 기여

(2018.01 ~ 2018.08) Food Tech

React 기반의 신규런칭 서비스 관련(b2b 회사용 도시락 판매 사이트)
react
redux
redux-saga
node.js
참여인원: 2명, (본인, 인턴)
React 기반의 신규런칭 서비스 설계/개발/운영
• 웹사이트 프로젝트 설계 및 일정 매니징
• 기존 api 수정
• 프론트 페이지들 개발
React 기반의 배송현황 확인 웹
react
참여인원: 1명
각 지역마다 pos 프로그램 일일이 들어가서 확인해야 했던 운영팀의 효율 증가
• 큰 상태관리는 필요없었으므로 react만으로 구현
서울지역만 되던 새벽배송 -> 전지역 새벽배송 확장 (node.js 기존 중앙 api 수정)
node.js
참여인원: 1명
서울지역만 되던 새벽배송 -> 전지역 새벽배송 확장 (node.js 기존 중앙 api 수정)
• 매출 증대에 기여
• 기존 legacy 코드들의 다른 서비스들과의 dependency 분석 후 개발

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

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

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

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

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

Soft Skills

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

React

• 여러 기법을 활용해 불필요한 렌더링을 막고, 렌더링 최적화를 할 수 있습니다.
• 번들 사이즈 분석 및, 번들 사이즈 최적화를 할 수 있습니다.
• hook을 사용해 비즈니스 로직을 적절히 분리해 낼수 있습니다.
• redux, context api등의 상태관리에 대해 적절한 상황에 사용할 수 있습니다.
• next.js를 활용해 ssr에 대응 할 수 있습니다.

HTML/CSS

• 웹표준을 지키려 노력합니다.
• Sass 등 CSS Preprocessor를 사용할 수 있고, css module을 활용할 수 있습니다.
• css-in-js (styled-component , emotion) 기법을 활용할 수 있습니다
• BEM등의 CSS 방법론을 적용할 수 있습니다.
• 크로스 브라우징에 대응할 수 있습니다.

Javascript/Typescript

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

- 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

- doc: update Table component's selectedRowKeys wrong type

- 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년 차 신입입니다. 프론트엔드 개발자는 웹 사이트에서 사용자가 직접 경험하는 ...