Experiences.

Lablup 소프트웨어 엔지니어 - 인턴 (2022.11 ~ 2022.12)

Backend.AI core CLI 기능 구현

session show-graph 명령어 추가

연산 세션 사이들 사이의 종속성을 DFS, 위상 정렬 등의 알고리즘을 통해 CLI에 테이블, 트리 형태로 나타내는 기능을 추가했습니다.

https://github.com/lablup/backend.ai/pull/886

session rm 명령어 recursive 옵션 추가

연산 세션을 종료할 때 해당 세션에 의존하는 세션들을 모두 재귀적으로 제거할 수 있도록 관련 옵션을 추가했습니다.

https://github.com/lablup/backend.ai/pull/893

딥러닝 프레임 워크 환경 구성 및 모델 테스트 및 벤치마킹

MLPerf maskrcnn Backend.AI에서의 벤치마킹 트레이닝 로그를 파싱해 pandas, seaborn을 사용하여 시각화 하였습니다.

https://github.com/jopemachine/mlperf-maskrcnn

Backend.AI Jail 디버깅 및 seccomp profile update 자동화

개발된 지 몇 년이 지나 작동하지 않던 Backend.AI Jail을 strace를 이용한 디버깅으로 default-policy에 allowed list에 일부 파이썬 바이너리에서 호출하는 일부 시스템 콜이 누락되어 생긴 버그인 것을 확인해, Github action을 이용해 seccomp default policy가 업데이트 되도록 자동화 했습니다.

https://github.com/lablup/backend.ai-jail/pull/18


**Redwit 프론트엔드 엔지니어 - 계약직 (2021.11 ~ 2021.12)**

Goono 서비스 유지보수 및 최적화

연구 노트 서비스 페이지 (데스크톱 / 모바일) 개발 (리뉴얼)

  1. 노트 정렬 Dropdown 버튼을 구현해 추가했습니다. Dropdown 컴포넌트에 리스트 스타일, 텍스트 스타일, 박스 스타일 등 많은 인자를 넘겨 쉽게 재 사용 가능하도록 설계해 이후 Basalt 프로젝트에서도 해당 컴포넌트를 재활용했습니다.
  2. 프로젝트 내 유저 수에 따른 아바타 리스트 컴포넌트를 구현했습니다.

스크린샷 2021-12-29 오전 12.15.54 복사본.png

블록체인 인증 현황 페이지 (데스크톱) 개발 (리뉴얼)

  1. 메인 블록은 clip-path 속성을 사용해 이미지를 육각형으로 렌더링하고 더 높은 zindex 값을 주는 형태로 구현했습니다.
  2. react-spring으로 육각형 내부의 이미지가 변경될 때 새 이미지가 페이드 인 되면서 들어오면서 기존 이미지가 페이드 아웃 되도록 처리했습니다.
  3. 체인 이동 애니메이션 및 이미지 페이드 인, 페이드 아웃 애니메이션을 구현했습니다.

스크린샷 2021-12-29 오전 12.18.27.png

페이지 로딩 성능 최적화

  1. Code splitting으로 로딩 성능 30% 개선했습니다.

    모든 페이지에서 전체 자바스크립트 모듈을 모두 로드하는 것에서 필요 없는 트래픽 오버헤드이 발생하는 것을 확인한 후, React에서 제공하는 Router 기반의 Code splitting 모듈을 적용해 Lighthouse 퍼포먼스 점수 기준 30%의 성능 향상을 이끌어 냈습니다.

    개선 전 벤치마킹 결과

    개선 전 벤치마킹 결과

    개선 후 벤치마킹 결과

    개선 후 벤치마킹 결과

  2. 타입 체크 라이브러리에 Lazy loading을 적용해 자바스크립트 실행 시간을 20% 감소시켰습니다.

    회사에서 네트워크 입출력 경계에 내부적으로 제작한 Type validator를 사용하고 있었고, 페이지가 로드될 때 마다 모든 스키마에 대해 validator 객체를 생성하는 과정에서 로딩 성능을 크게 감소시키는 것을 확인했습니다. 클로저를 이용한 간단한 코드 변경으로 validate 함수가 처음 평가될 때로 compile 함수의 호출 시점을 변경함으로써, Lighthouse 디폴트 설정 값, 랜딩 페이지를 기준 Unused Javascript 실행 시간을 20% 감소 시켰습니다.

    개선 전 벤치마킹 결과

    개선 전 벤치마킹 결과

    개선 후 벤치마킹 결과

    개선 후 벤치마킹 결과

  3. index.html에 script로 붙어 있어 매번 로드되던 일부 서드 파티 스크립트들을 (결제 / 로그인 모듈)을 필요한 페이지에서만 적용하도록 변경했습니다.

  4. 랜딩 페이지의 반응형 이미지 (Hero element)에 aspect-ratio 적용해 CLS를 개선하였습니다.

Basalt 서비스 베타 개발 참여

랜딩 페이지 개발 (리뉴얼)

  1. 랜딩 페이지에 들어가는 섹션 별로 IntersectionObserver 객체를 만들어 섹션 별 유저가 머물러 있던 시간을 측정해 차트로 보여주는 인사이트 레포트 데모 기능을 구현했습니다.

    무제.png

  2. *react-spring*을 사용해 아래의 블록 애니메이션을 구현했습니다.

basalt.so-1920x2620.png

Q&A 페이지 FAQ 컴포넌트 개발

  1. FAQ 문의 검색을 hangul.js를 사용해 구현해 자연스러운 한글 검색이 가능하도록 구현했습니다.
  2. 질문 / 답변 데이터들을 다국어 지원이 가능하도록 json 파일로 따로 분리해 처리하였습니다.
  3. +more 버튼을 누를 때 마다 10개를 추가로 보여주도록 구현했습니다.

basalt.so!contact-1920x3020.png

솔루션 페이지 동영상 플레이어 개발

video 엘리먼트로 동영상 플레이어를 만들고, 해당 웹 API를 사용해 재생, 멈춤, progress bar 등 비디오 컨트롤러에 해당하는 부분을 개발하였습니다.

2022-02-07_13-57-58.png

My takeaway

  1. 개발 팀과 디자이너팀 간의 보다 체계적인 소통에 대해 고민해보았습니다.
  2. 프론트 엔드 최적화에 대해 공부하고, 적용하고 벤치마킹 하는 과정을 반복하면서 많은 공부가 되었습니다.
  3. 이전보다 Notion 사용이 익숙해졌습니다.

Encored - React Native 앱 개발, 유지보수 - 인턴, 계약직 (2020.03 ~ 2021.02)

Enertalk 유지보수

2022-02-07_14-05-13.png

20년 9월까지 미국 산호세에서 해외 인턴십 (ICT 글로벌 인턴십)을 진행하였으며, 해당 인턴십 기간 동안 위 제품의 유지보수를 진행했습니다.

제품 개요

Enertalk은 가정 및 기업을 대상으로 전기 에너지 사용량 및 태양광 에너지 생산량을 Billing 및 차트 데이터 형태로 제공하는 IoT 전자식 전력량계 시스템으로 Encored의 주상품입니다.

유지보수 세부 사항

Enerflow UI 컴포넌트 작성

2021-12-26_19-00-42.png

제품 개요

Enerflow는 Encored에서 새로 준비 중인 Energy storage system(ESS)에 Photovoltaic system(PV)를 결합한 보다 확장된 에너지 생산량 및 사용량 분석 시스템 및 앱의 이름입니다.

개발 내역

해당 제품의 아래 UI 컴포넌트들을 작성하는 역할을 맡아 진행했습니다.

Figma, Zeplin로 작성된 와이어프레임을 보고 UI 컴포넌트들을 구현하는 방식으로 진행했으며, 기획에서 미심쩍은 부분들은 디자이너 분과 telegram으로 상의하며 진행했습니다.

iDERMS 다국어 지원 진행

제품 개요

iDERMS는 Spring, JSP 등의 기술 스택을 활용하여 만들어진 인공지능 기반 통합 분산전원 관리시스템 및 홈페이지 입니다.

해당 제품의 영문화 및 다국어 지원 작업을 맡아 주도적으로 진행했습니다.

개발 내역

다국어 지원 작업을 맡았을 때 2000개 이상의 한국어 문자열들이 있었고 이것들이 자바스크립트 파일, jsp 파일, html 등에 같은 파일에 혼재하는 상황이었습니다. html과 jsp 코드에 서로 다른 방식으로 다국어 지원이 적용되어야 했기 때문에 일괄적인 변경이 불가능 했으며, 모든 문자열들을 개발자가 직접 확인하고 작업해야 했습니다.

번역해야 하는 문자열들을 csv 파일에 정리하고, code-replacer 라는 CLI 프로그램을 작성해 정규표현식으로 변경해야 하는 문자열이 나올 때 마다 html인 부분과 jsp에 해당하는 부분을 Interactive CLI를 통해 판단해 변경을 적용하는 식으로 버그 없이 깔끔하게 다국어 지원 소스 코드를 작성할 수 있었습니다.

My takeaway

  1. cherry-pick, stashgit 명령어에 익숙해졌습니다.
  2. npm 패키지 및 자바스크립트 생태계에 익숙해졌습니다.
  3. 와이어프레임 (Figma, Zeplin으로 진행)을 보고 프론트 단을 구현하는 작업에 익숙해졌습니다.

OSS Contributions.

RustPython

A Python Interpreter written in Rust

RustPython은 2022 오픈소스 컨트리뷰톤 챌린지 및 마스터 과정에서 멘티로 참가해보게 된, 오픈소스 프로젝트입니다.

아래 활동을 포함하여 다양한 컨트리뷰션을 진행했으며, 해당 프로젝트의 컨트리뷰션을 통해 2022 Hacktoberfest에도 참여하였습니다.

  1. cpython의 C 언어로 작성된 breakpoint 내장 함수를 RustPython으로 포팅했습니다.

https://github.com/RustPython/RustPython/pull/4122

  1. 클래스 내 멤버변수로 람다식에 디폴트 매개변수를 사용할 때 발생하는 스코프 에러를 해결했습니다.

https://github.com/RustPython/RustPython/pull/4226

  1. Float 타입의 나눗셈 함수 구현에서 피연산자들을 float으로 변환한 후 나누는 과정에서 발생한 수치 오차 버그를 발견하고 해결했습니다.

https://github.com/RustPython/RustPython/pull/4199