profileImage

한어진

(부경대 컴퓨터공학 학사 졸업)

5년차 프론트엔드 개발자(React, React-Native, Next.js)

phone: +82-10-6886-2058
email: haneojin@gmail.com
Portfolio:🔗
Github:🔗
Linkedin:🔗

SUMMARY

유연하고 확장가능한 설계를 통한 생산성과 안정성을 중요시 여기며, 팀으로써의 공동성장과 성과를 위해 헌신합니다. 전직 해커 출신으로 남들이 기피하는 딥한 챌린지와 파고드는 것을 즐기며 어떡해서든 결과를 만들어냅니다.

WORK EXPERIENCE

1년 공백기 : 휴학없이 대학 3학년부터 업무 병행 이후 첫 공백기. 관악구 대규모 전세사기 피해자로 민형사 대응(피해 임차인 20인 단체고소 대표자 - 증거수집, 자료가공, 고소장 작성 등)/ 출산 준비(03.29 출산완료) / Next.js & Nest.js 웹개발 위주 풀스택 자기계발
알고케어 (스타트업)
2022.01 - 2024.03
FrontEnd Developer
Seoul, KR

챕터 세션 운영

Jotai
Design System
  • 동기:
    • 팀원 간 이해도 차이로 인한 코드 품질 및 기술 활용 방식의 일관성 부족
    • 특히 설계 관련 코드 리뷰 및 재작업에 많은 시간이 소요되며, 소통의 어려움 등으로 업무 비효율 발생
    • 기술적 성장과 팀원 간 기술력 싱크(동기화)의 필요성
  • 수행:사용중 혹은 도입검토 기술에 대한 이해수준 향상과 공동의 성장을 도모하고자 자발적으로 챕터 세션 운영
  • 성과:기술 스택에 대한 이해도 및 활용 능력 강화, 공유 문화 분위기 형성
  • 성장:혼자 하는 성장의 임팩트에는 한계가 있다. 팀으로써 성장하고 팀으로 성과를 내야 한다.

큰 태스크 사전 설계

  • 동기:
    • 빠르게 변화하는 비지니스에 비해, 수정·변경에 너무 많은 시간이 소요되는 문제 발견
    • 설계 관련 숙련도 이슈로 판단, 당시 설계에 많은 관심을 갖고 있어 자발적으로 큰 태스크 사전 설계 진행
  • 수행:결제 모듈 설계 / 프로덕트 폴더구조 변경 / 확장성을 고려한 글로벌 모달 재설계 / 하드웨어 제어 클래스 클래스 기반 설계 / 재사용성 고려한 컴포넌트 구현방안 제시 / 확장성 있는 아키텍처 설계 등
  • 성과:
    • 고쳐야 하는 한 줄을 찾아 고치기까지 몇시간이 걸리던 문제는 점점 줄어듦
    • 팀원들이 코드 설계로 인한 장점에 공감하고, 코드 설계에 관심을 기울이고 협의하기 시작
  • 성장:원하는 기능을 구현할 줄 아는 것을 넘어, 이제는 잘 구성하고 잘 활용하며, 일회용 코드가 아닌 계속 유지되고 활용될 자산을 쌓아나가는 것이 중요하다.

챕터 통합 추진 | 모든 프론트엔드 프로덕트 코드품질 관리

  • 동기:충분한 가용인원이 있음에도 효율적인 업무 분담이 이루어지지 않고 특정 인원에게 과중되는 문제 인식
  • 수행:
    • 팀원 개개인 원온원 미팅을 통해 메인 프로덕트임에도 꺼려하는 원인 파악 (로우레벨에 대한 두려움)
    • 프로덕트 내 레이어를 나누고 진입장벽인 요소를 추상적으로 접근할 수 있도록 설계 변경
    • 이후 페어프로그래밍, 프로덕트 코드 세션를 통한 로우레벨에 대한 이해도 향상 및 막연한 두려움 해소
  • 성과:팀원들 모두의 "개발 할 수 있을 거 같아요" 의견을 받은 후, 경영진 설득을 통한 챕터 통합 결정
  • 성장:문제상황에 불만만 가질 것이 아니라, 원인과 해결방안을 고민하고 만들어나가는 것이 중요하다.

영양제 디스펜서 제어 앱 개발

styled-components
  • 동기:4년 연속 CES 혁신상을 받은 혁신 아이디어 실현
  • 수행:high pressure 일정 준수 및 MVP 기능 구현 / 외주 펌웨어 업체와 협업, 인도어 펌웨어 개발자 온보딩 / 하드웨어 통신 프로토콜 설계 협업 / 체계적인 컴포넌트&클래스 설계 / 확장성 있는 아키텍처 설계 / 필요 부분 네이티브 모듈 구현 / 약사, 펌웨어, 생산, CX 등 다양한 파트와 협업
  • 성과:회사가 원했던 최단기 일정 소화 / 혁신 아이디어 실현 / 매출 발생 및 영업 시작 / 시리즈 A 150억 투자 / 경쟁사에 잡히지 않도록 개발속도 유지 / 확장성 있는 아키텍처로 비지니스 성장속도에 발맞춰 대응
  • 성장:비즈니스 임팩트를 우선시하며, 오버엔지니어링을 지양하고 실용적인 접근의 필요성 / 동시에 기술자로서 난제를 기술로 풀어내기 위한 전문성과 기술력의 중요성 / 즉 필요한 곳에 필요한 만큼을, 하지만 필요 시 끝까지 파고드는 기질의 가치

영양제 디스펜서 제어 앱 성능 최적화

styled-components
  • 동기:고-마진을 위한 저사양 태블릿, 기기당 예상보다 많은 인원 등록과 사용, 초기 기획과 달리 다양한 기능 탑재로 확장 등 여러 요인으로 인한 사용 불가 수준의 버벅임이 있었고, 일부 마진을 포기하면서 고사양 태블릿으로 전 기기 교체 검토 중
  • 수행:소프트웨어 최적화로 문제 해결 시도. (메모이제이션 최적화, 상태별 영향범위 국소화, 설계 변경, 최적화 라이브러리 검토, 부하 로직 서버 이전 등 종합적 검토) / Profiler 디버깅 도구 활용 및 사용법 팀 내 전파
  • 성과:
    • 소프트웨어 최적화로 문제 해결 (기기당 약 25만원 마진 사수, 엔진 전량 회수 및 교체 시간과 비용 절약)
    • 초기 렌더링 시간 82.67% 단축(1800ms->320ms), 인터랙션 후 리렌더링 시간 96% 단축(1100ms->220ms->50ms) 등
  • 성장:
    • 쓸 수 있는 것과 잘 쓰는 것은 엄청난 차이다. 사용 기술 스택에 대한 더 깊은 이해와 탐구가 필요하다.
    • 이 기점으로 챕터 세션에서 딥다이브 세션 진행 (캐시관리, 상태관리 동작원리 등 코드 뜯어보기)

영양제 디스펜서 안정화 TF

  • 동기:런칭 초기에 엣지케이스 고려 미흡으로 인한 각종 오류 및 민원 발생
  • 수행:
    • 에러코드 정의, 발생 가능한 에러/대응방안 문서화 및 공유하여 하드웨어팀과 CX 파트와 싱크
    • 특히 원격복구 불가, 서비스 이용 불가를 초래했던 펌웨어 업데이트 관련 이슈는 모든 경우의 수 나열, 원인분석, 대응방안 수립, 테스트 케이스 작성, 3명 이상의 인원과 크로스체크
    • 미처 고려하지 못한 이슈 발생 시 정확한 파악을 위한 유저 행위, 엔진별 상태 로깅
  • 성과:펌웨어 먹통 현상 보고 0건, CX 파트의 일관된 대응, 오류 발생 시 정확한 사용 플로우와 현황 확인
  • 성장:파트 내 싱크 뿐만 아니라 관련 있는 여러 파트들과의 싱크와 협업의 중요성 / 에러 대응 체계 마련

B2B Admin 개발

Jotai
  • 동기:월마다 엑셀 파일로 받아 수기로 처리하던 부분을 어드민 사이트로 시스템화 하고, 보틀 수량 관리 등의 관리 주체를 클라이언트로 이관 (회사 담당자가 회사 전 기기 현황 확인 및 수량 주문 할 수 있도록)
  • 수행:Next.js로 B2B Admin 사이트 개발 (영양제 주문 현황 및 잔여 수량 확인 페이지, 영양제 주문 페이지)
  • 성과:보틀 개별 추적이 안돼 항상 보틀 수량 부정확 이슈가 있어 잦은 정기방문을 통해 관리해왔는데, 이를 펌웨어 개발자와 협업하여 보틀별 개별 시리얼을 부여하며 해결 하였고, 정확해진 보틀 추적의 결과로 B2B Admin을 구축해 관리 기능 제공 및 관리 주체를 온전히 클라이언트 측으로 넘길 수 있었습니다.
  • 성장:하나의 문제 해결이 때로는 연쇄적으로 다른 문제들을 해결하는 키가 되기도 한다.
하임 시큐리티 (오펜시브 리서치 회사)
2021.07 - 2022.01
Security Researcher
Seoul, KR

연구과제 취약점 연구

C++
Reverse Engineering
  • 수행:
    • 자바스크립트 구문 제너레이션 기반 커스텀 퍼저 개발 (development, automation)
    • 타겟 프로그램의 내부 기능별 수동 취약점 탐색 (manual analysis)
  • 성과:취약점 발견 및 연구과제 성공적인 마무리 / 취약점 탐색 자동화 도구 개발
  • 성장:다양한 경험과 전문지식을 갖춘 팀원들과의 지식공유와 협업의 중요성 / 필요 도구 직접 커스텀 개발

기무사 맞춤 교육 진행

Reverse Engineering
  • 동기:멀티캠퍼스 강의 이후 개인적으로 받은 기무사 측의 맞춤 강의 요청
  • 수행:기무사 측의 기술 요구사항 반영한 맞춤 커리큘럼 구성 및 교육 진행 (일주일 교육과정)
  • 성과:교육 이후 교육사업을 구상중이던 회사와, 보다 전문적인 교육을 원하던 기무사 측과의 브릿지 역할
옵스테크 (스타트업)
2019.08 - 2021.07
Fullstack Developer | Instructor
Seoul, KR

구공팩토리 부트캠프 수강 서비스 개발

Express
ELK
S3
  • 동기:모듈화된 보안 강의 플랫폼 개발 목표로 개발 착수, 이후 수요에 따라 개발자 양성 프로그램으로 전환
  • 수행:
    • 풀스택 개발. 앱 개발을 메인으로, 웹, 백엔드 태스크 모듈 단위로 개발 서포트
    • 강의 수강 시스템 웹뷰 개발 / vimeo player 연동 / 속도, 위치, 정지 등 변수 고려 누적수강시간 측정
    • UID 커스텀 인코딩 모듈 개발, aws 파일 관리 백엔드 모듈 개발, 푸시 알림 송수신 백엔드 모듈 개발
    • RN으로 모바일 앱 개발 / 강의 수강 웹뷰 연동 / 그 외 로그인, 과제, 푸시알림 등 RN으로 구현
    • 로깅 시스템 구축 / 백엔드 도커 로깅 드라이버 syslog로 변경 / ELK 구축 및 연동 / 대시보드 시각화
  • 성과:
    • 앱1, 웹1, 백엔드1 각 프로덕트를 전담하는 환경에서, 여기저기 붙으며 같이 개발하는 키 맨 역할
    • 구공팩토리 부트캠프 공식 런칭
  • 성장:분야 상관없이 필요한 기술을 필요한 수준으로 빠르게 습득하고, 빠르게 임팩트를 낸다.

세종시 스마트 주차장 예약 시스템 프로토타입 구현

  • 수행:React-Native로 모바일 앱 프로토타입 개발 / 네이버지도 연동 / 네비게이션 앱 연동 / GPS 좌표 기반 주차장 검색 기능 구현
  • 성장:
    • 미련하게 직접 다 구현하는 것이 아닌, 잘 구현되어 있는 라이브러리와 서비스의 적절한 활용
    • 서비스 러닝커브와 비용, 회사의 시기와 시간 등을 적절히 고려하여 채택

해킹/보안 전문강사 활동

Reverse Engineering
  • 수행:
    • 멀티캠퍼스 보안 전문강사 (리버스엔지니어링 입문 / 소프트웨어 버그헌팅 취약점·공격기법 분석)
    • IoT 디바이스 펌웨어 분석 및 공격(펌웨어 직접 추출, 공격환경 세팅, 장악 시연) - 국정원 강의
    • 리버스 엔지니어링 - 기무사 측 요청 커리큘럼 강의
    • ios 앱 보안 진단 교육 커리큘럼 개발
  • 성과:년차를 이유로 반대가 있었으나, 강사 만족도 전부 90점 초과, 성과금 기준 매번 달성, 연간일정+추가강의
  • 성장:주어진 기회에 기대 이상의 결과와 퀄리티를 낸다면 더 많은 기회가 찾아온다.

PERSONAL PROJECTS

프리다이빙 플랫폼 풍덩

  • 수행:
    • 2년간 6인 팀 개발 전체 과정 리딩 - 풀스택1(본인), 프론트엔드3, 백엔드1, 디자이너1
    • 자료조사 / 수익모델 설계 / 프론트엔드 아키텍트 / 비전공자 개발자 멘토링 / 태스크 분배 / 일정 관리
  • 성과:결제 기능 제외 중개 플랫폼 MVP 개발완료 / 개발자 지망생 3인 전원 개발자 취업
  • 성장:팀 시너지와 성과를 위한 매니저의 역할 (맞춤 동기부여, 독려, 비전 제시 등)

개인 포트폴리오, 이력서 사이트 개발

motion
  • 동기:노션에 자료가 많지만, 노션 api가 너무 느리고, 이를 감수하며 내 노션을 자세히 볼 이유가 없다.
  • 수행:
    • react-notion-x를 이용해 notion을 CMS(Content Management Service)로 활용
    • Next.js의 SSG를 통한 빌드 타임 시 프리렌더링으로 노션의 느린 api 문제 해결
    • motion과 sticky 기반 애니메이션 구성으로 시네마틱한 포트폴리오 구현
  • 성과:SSG를 통한 빠른 렌더링과 토스처럼 스크롤만 내려도 말하고자 하는 바가 전달되는 포트폴리오 구현
  • 성장:가진 것을 잘 표현·활용 할 줄 아는 능력의 중요성

AI를 활용한 종이설문지 집계 자동화

C++
MFC
ELK
Tesseract OCR
  • 동기:
    • 사회복무요원(몸무게 미달) 복무 당시 정기적인 종이설문지 결과물 수천장 수동 데이터화 업무.
    • 비효율적인 단순반복 업무를 자동화 시키고, 복무 이후에도 공무원에게 도움이 되고자 시작
  • 수행:
    • MFC(C++)를 이용하여 윈도우 툴 개발 (이미지 전처리, 마우스로 문항별 좌표 입력)
    • Tesseract OCR 라이브러리와 이미지 처리를 기반으로 객관식 종이설문지 집계 자동화
    • 실시간 집계 현황 모니터링 및 집계데이터 저장을 위한 ELK 구축 및 연동
  • 성과:종이 설문지 결과를 스캔 후 파일로 넘기면 객관식 문항 집계 자동화 구현 완료 / 업무에 활용
  • 성장:AI 자체는 잘 모르더라도 잘 만들어진 데이터셋과 공개된 라이브러리들을 활용한 편의 툴 개발은 충분히 가능하다. / 업무 자동화의 중요성

카카오 팟플레이어 원격코드 실행 취약점 (CVE-2018-16797)

Reverse Engineering
  • 동기:정답이 있는 기존 취약점 분석과 대회 연습문제를 넘은 실무 취약점 연구 및 성과
  • 수행:
    • 커스텀 퍼저 개발을 통한 취약점 탐색 자동화 / 수동 탐색 병행
    • 각 분석 단계별 필요 자료 학습 (힙 버퍼오버플로우, Windows 메모리 관리기법, 단편화 문제 등)
    • 목표 달성을 위해 문제를 세분화 하고, 각 문제별 해결책 및 우회·타파 방안 마련
    • 제약사항을 고려한 데이터 자동 생성 등 자동화 툴 개발
  • 성과:
    • 주변에서 계속 안될 거라고 했지만, 안된다면 안되는 이유라도 명확히 도출할 수 있어야 한다는 마인드로 6개월간 물음표와 가능성을 열며 파고든 결과 원격코드 실행 취약점으로 발전 성공
    • 카카오 제보 및 패치 확인 후, CVE 제보하여 CVE-2018-16797 등재 (위험도 7.8 HIGH)
  • 성장:경험을 수용하되 결과를 맹신하진 말자. 안된다고 믿었던 것이 자세히 보면 해결할 수 있는 것들이 많다.

EDUCATION

  • Bachelor of Computer Science
    Pukyong National University

    2015 - 2021

    Busan, KR

OPEN SOURCE CONTRIBUTIONS

Jotai

Jotai
  • 동기:Jotai 상태관리 라이브러리 상세 이해를 위한 코드 분석 도중 개선점 발견
  • 성과:상태변화 전파 과정에서 발생한 에러를 모두 핸들링 할 수 있도록 에러처리 개선 (merged)

React-Notion-X

  • 동기:라이브러리 사용 중 맞닥뜨린 이슈 직접 해결
  • 성과:
    • Next.js Hydration mismatch 이슈 2개 해결 (code 컴포넌트, collection 컴포넌트) (merged)
    • 노션 신규 기능인 Link Mention 기능구현 대응 (링크 마우스 호버 시 미리보기 카드 노출) (merged)

Recoil

  • 동기:Redux를 대체할 Recoil 상태관리 라이브러리 이해도 증진 및 국내 활성화 기여
  • 성과:
    • 발표 1년 이내인 초기에 공식문서 한글 번역 기여 (4개 merged)
    • 번역 개선 및 미번역 문장 번역 (core-concepts, useGetRecoilValueInfo, motivation, installation)

react-native-pager-view

  • 동기:최신버전 라이브러리 install 에러 발생 직접 해결
  • 성과:
    • 커밋 의도와 다른 프로젝트 설정파일 변경 코드가 같이 머지되었던 이슈 해결 (merged)

radash

  • 동기:오브젝트 관련 set 유틸에서 숫자 형식의 key를 key로 인식하지 못하는 이슈 직접 해결
  • 성과:
    • 숫자 형식의 key를 키로 올바르게 인식하도록 정규표현식 및 처리로직와 테스트코드 수정 (waiting)

react-native-code-push

  • 동기:
    • 코드푸시 업데이트 도중 올바른 번들링의 경우에도 간혹 여러 이유로 롤백이 발생하는 경우가 있음
    • 백엔드가 롤백 버전에 대응되지 않을 경우, 롤백은 의미있는 복구방안이 아님
    • 최신버전이 보장되거나, 에러가 있다면 롤백이 아닌 에러 화면을 띄울 수 있도록 구성 필요
    • 롤백 발생 시 대응방안 마련을 위한 코드푸시 로직 분석 도중 유용한 옵션 타입 누락 발견
  • 성과:
    • 현재 타입 상으로는 재시도 횟수에 제약이 있지만, 코드 상으로는 실패한 번들에 대해 예외없이 재시도하는 기능이 존재하여 이를 공개 타입으로 노출 (approved but closed)
    • 이제는 각자가 코드푸시 서버를 구축해야 하는 상황이므로 유저에게 선택지를 열어주는 것이 더 올바른 접근이나, 더이상 Microsoft에서 관리하지 않는다는 이유로 approved but closed

react-router

  • 동기:
    • 내부로직 이해를 위해 코드 분석 중, 타입이 분명 다른 데 플랫하게 타입 나열이 되어 있어 차이점과 구현 의도를 파악하기 어려운 문제
    • 타입을 매번 as로 강제 해서 사용해야 하는 것에 대한 불편함과 타입 이슈
  • 성과:
    • 환경에 구애받지 않는 기본 구현인 Agnostic을 상속받아 React를 위한 코드가 추가된다는 의도가 코드로 명확히 드러나도록 설계 리팩토링 (closed) - depth로 인해 초심자가 이해하기 어려울 수 있다
    • useLocation 훅 타입을 제네릭으로 받도록 개선 (closed)- 현재의 사용방식을 고수하는 취지