미리보기

• AI 관련 사내 및 B2B 서비스 개발 참여

  • 사내 AI R&D 내용 공유 플랫폼 개발

  • Varco Art 기능 업데이트 개발

  • AI 서비스 관련 사내 백오피스 페이지 개발

  • B2B 서비스 관련 어드민 페이지 개발

• 메타버스 컨셉의 웹 게임 MINIVERSE 신규 개발 참여

  • 2022년 NC 직무 설명회 1차 론칭

  • 정식 버전 론칭 개발에도 참여

• CH-공성 서비스 기능 업데이트 개발

  • 리니지 공성전 리뷰 및 커뮤니티 플랫폼

• 모바일 앱 '스타일봇' 서비스의 의류 쇼핑몰 파트를 웹뷰(Web View)로 개발

• 사내 백오피스 페이지 개발

• 의류 추천 서비스 등 일부 백엔드 로직 개발

[주요 기술]

NextJS, Zustand, Playwright, Typescript

[프로젝트 내용]

• 리액트 모노레포 내에서 신규 프로젝트 생성시에 사용할 NextJS 템플릿 개발

• Playwright 를 사용한 E2E 테스트 로직 세팅

• 공통으로 사용할 유효성 검사 hook 개발

• 다국어 지원, 다크/라이트 테마 선택, 기본 로그인 및 랜딩 로직 개발

[주요 기술]

Vue3, Typescript, Pinia, SCSS

[프로젝트 내용]

• AI 관련 B2B 고객사에서 쓸 어드민 페이지 개발에 참여

  • 실제 서비스에서 쓰이는 JSON 데이터를 비개발자 입장에서 수정하기 용이하도록 개발

  • UI/UX 직접 설계

• JSON 데이터를 일정한 형식으로 컨버팅하고, Depth 구조를 시각적으로 표현하는 카드 형식 UI 개발

  • 재귀 로직을 활용해 동일 컴포넌트를 내부에 반복적으로 렌더링 하여, 깊이 있는 데이터 구조를 효율적으로 표현

• 수정 로그를 기록하여 최종 데이터 수정 전에 순서 변경, 삭제, 데이터 변경 등의 기록을 최종 확인하는 UX를 제공했습니다.

  • 해당 변경 사항이 어떤 경로에서 일어난 건지 정보도 함께 제공하여 의도하지 않은 수정을 방지했습니다.

• 이미지 레이지 로딩을 적용하여 카드를 오픈할 때 생기는 약간의 딜레이를 축소했습니다.

[주요 기술]

Vue3, Typescript, Pinia, SCSS

[프로젝트 내용]

• 게임 내에 쓰이는 챗봇의 대답을 유형별로 세팅할 수 있도록 해주는 사내 백오피스 페이지 개발

  • 이미지, 텍스트, html, json 등의 유형별로 챗봇의 대답을 설정할 수 있도록 개발

• 2개국어 지원

• 함수형 프로그래밍 방식을 이용해 다른 프로젝트에서도 사용할 수 있는 input 유효성 검사 로직 개발

• 모노레포 내의 프로젝트들에서 git push를 할 때 package.json의 버전을 자동으로 올려주는 bump 개발

[주요 기술]

Vue3, CanvasAPI, Javascript, Pinia, SCSS, Vue-Konva

[프로젝트 내용]

• Eslint, Git hook, Husky 등을 사용해 팀 내 코딩 및 포매팅 컨벤션을 구축 및 적용했습니다.

• CanvasAPI, tensorflow 를 활용하여 이미지의 영역의 좌표값을 유저로부터 입력받아(mouse click) 자동으로 해당 부분을 색칠하는 자동 영역 선택 기능을 개발했습니다.

• 이미지를 다양한 크기에 맞춰 리사이징 센터 크롭 하는 로직을 개발했습니다.

• 이전에 개발했던 Konva 관련 모듈을 리팩토링하여 프로젝트 내에 Vue Konva로 마이그레이션해서 브러쉬 툴을 개발 및 적용했습니다.

[주요 기술]

React, React-redux, React-Query, Typescript, MaterialUI, SCSS

[프로젝트 내용]

• 유저들의 권한 설정 및 애플리케이션을 관리할 수 있는 admin 페이지 개발

• 기존 서비스에 댓글 기능 추가 개발

• JS 코드를 TS 코드로 마이그레이션 진행

[주요 기술]

React-Native, React, Recoil, Typescript, NestJS, MySQL, TypeORM, AWS S3, LightSeil, Route53, CloudFront

[프로젝트 내용]

• 개인적으로 사용할 목적으로 만들었으나 200명 정도의 유저들을 대상으로 서비스를 운영해 본 경험을 할 수 있었던 심플한 운동 기록 저장 서비스입니다.

• 기획, 디자인, 개발, 배포 및 론칭 등 모든 IT 개발 프로세스를 혼자 경험해 본 프로젝트입니다.

  • 실제 IOS, Android store에 출시를 했었으나 최근 이슈가 생겨 서비스 종료를 했습니다.

  • 프로젝트 링크: https://github.com/0715yk/healthapp

• React-Native를 네이티브 프레임으로 두고, 메인 콘텐츠는 React를 사용하여 웹뷰 형태로 개발했습니다.

[주요 기술]

Konva, Typescript

[프로젝트 내용]

• Konva 모듈을 사용하여 팀 프로젝트 내에서 사용할 모듈을 개발했고, npm에 publish 했습니다.

  • https://www.npmjs.com/package/image-prompt

  • https://www.npmjs.com/package/inpainter

• 이미지를 커스텀 할 수 있는 브러쉬 툴과 관련된 편의 기능들 개발 및 각각의 이미지를 분리해서 전송하는 로직을 담당했습니다.

[주요 기술]

React, Redux-Toolkit, Typescript, Storybook, SCSS

[프로젝트 내용]

• 미니버스 게임 개발의 랜딩 페이지 및 커뮤니티 플랫폼 사이트 개발에 참여했습니다.

• 팀 내 회의를 통해 결정한 아토믹 패턴을 적용하여 개발했습니다.

• 개발자 도구의 lighthouse 탭을 활용하여 이미지 및 CSS layout과 관련된 최적화에 기여했습니다.

[주요 기술]

React, Redux-Toolkit, Typescript, Storybook, SCSS

[프로젝트 내용]

• 메타버스 컨셉의 웹 게임인 '미니버스' 개발에 참여했습니다.

  • 게임상에서 쓰이는 미니맵, 이모티콘, 튜토리얼 기능 등을 개발을 했습니다.

  • 과거 홍보 사이트 링크: https://url.kr/nv4xm8

• OOP 방식으로 프론트엔드 코딩을 해봤고, 장단점을 이해할 수 있었습니다.

• requestAnimationFrame을 활용해 플레이어의 위치 데이터를 기반으로 따라다니는 버튼 및 이름표 등을 구현했습니다.

  • 크롬의 fps 미터를 활용해 작업을 하면서 UX 상으로 불편한 지점을 찾아 디버깅 및 최적화 작업을 진행했습니다. 유저 수가 많아질수록 과부하가 심해져 이에 대한 최적화가 필요했고 GPU를 활용하는 css 속성 등을 이용해 최적화를 이뤄내어 CPU 리소스 사용 부담을 줄였습니다.

• 실제 해당 버전의 미니버스 서비스를 통해 사내 직무 설명회를 진행했습니다.

[주요 기술]

React, Redux, Javascript, Typescript, Storybook, Styled-Component, Redux-saga, Redux-thunk

[프로젝트 내용]

• 채널 공성 웹 사이트의 신규 기능 개발에 참여했습니다.

  • 과거 홍보 사이트 링크: https://lineage2m.plaync.com/board/cm_story/view?articleId=61a4ab327b08200f655decda

• 신규 공성전 업데이트 알림 서비스 개발을 담당했습니다.

  • 특정 요일 및 시간에 공성전 알림 팝업이 뜨고, 자동으로 새로운 공성전 데이터를 갱신하는 로직을 개발했고 정상 작동하여 유저들이 신규 업데이트 내용을 쉽게 알 수 있도록 했습니다.

• JS 코드를 TS 코드로 마이그레이션 진행

• Storybook 도입을 통한 디자인 및 기획팀과의 협업 프로세스 효율화

[주요 기술]

React, Redux, Javascript, Css module

[프로젝트 내용]

• 사내 MD 분들이 사용할 백 오피스 페이지를 개발했습니다.

• 모바일 웹뷰에서 보여질 기획전 의상을 선택하는 페이지로서 대량의 의류 데이터에 대해 필터를 통한 검색, 데이터 및 순서 변경 및 삭제 그리고 최종 저장하는 기능 등이 메인 기능이었습니다.

• Drag and Drop 방식의 순서 변경 UI/UX 개발

• Infinite Scroll 을 통한 데이터 조회 최적화

• 그 외에 웹뷰에 보여질 이미지 및 기획전 타이틀 등을 CRUD 할 수 있는 페이지 제공했습니다.

[주요 기술]

React, Redux, Javascript, Css module, MySQL

[프로젝트 내용]

• 스타일봇 네이티브 앱의 커머스 파트를 담당하여 웹뷰로 개발했습니다.

• 유저의 취향 코드 및 과거 로그 데이터 등을 바탕으로 의류 추천 서비스를 직접 개발했습니다.

• 의류 쇼핑몰의 메인 기능인 의류 검색 및 상세 보기 페이지를 개발했습니다.

• Pull down refresh UI/UX를 제공하여 추천 아이템을 새로고침 하도록 했습니다.

• django, mysql 쿼리를 이용해 제 작업과 관련된 api를 직접 개발했습니다.

[스터디 방법]

• 팀원들과 함께 1주일에 한 번씩 프론트엔드 스터디 내용을 공유하고, 개인 발표를 진행합니다.

• 스터디는 '모던 자바스크립트 Deep Dive' 책을 이용합니다.

• 같은 챕터를 동시에 공부하되 발표할 내용은(30분 정도 분량) 각자가 선택하도록 합니다.

• 스터디 내용 정리 링크(일부를 제외하고는 제 파트만 따로 정리해둔 노션 입니다) : https://numerous-potato-d3b.notion.site/JS-Study-b292f0ccd0a946088fc76c8744eca853

[느낀 점]

• 한국말을 쓸 때, 익숙해져서 당연하게 쓰던 것들도 그 안에 문법이나 원리를 파악해 보면 더욱 깊게 이해할 수 있게 되는 게 있듯이 JS를 그런 측면에서 더욱 깊게 이해할 수 있었습니다.

• 평소 헷갈렸던 내부 동작 원리에 대해(실행 컨텍스트 등) 더욱 깊게 배울 수 있어 좋았고, 클로저 모듈 패턴과 즉시 실행 함수를 이용해 실제로 팀 프로젝트에서 쓰는 모듈을 만들 때 관련 지식을 활용할 수 있었습니다.

• Javascript 기반 Full-stack 과정(React, NodeJS, AWS 등)

• 자료구조, 알고리즘, 인증, 배포

• Git work flow

• 페어 프로그래밍,

  2번의 협업 프로젝트 진행

  • https://github.com/codestates/zootopia_client

  • https://github.com/0715yk/Todaying-client

• 리눅스를 통한 서버 관리 기초 수업 1, 2

• django를 활용한 웹서버 구축

• 자바 문법 기초

• html, css 및 bootstrap 기초 교육을 통한 Front-end 학습

• Python 및 Django 기반 Back-end 과정 학습 및 AWS 배포

• Git work flow

• 1번의 협업 프로젝트 진행