Portfolio

📑 Project/👨‍💻 Portfolio

Portfolio

DarrenKwonDev 2021. 12. 28. 00:18

블로그 운영은 중지되었습니다.

현재는 금융 관련 회사에서 SWE로 경력을 계속 이어가는 중입니다.
경력 초기와 다르게 C++, python을 주로 다루며 웹 개발은 하고 있지 않습니다.

https://github.com/DarrenKwonDev

Naver AI Boostcamp : 2023.03 ~ 2023.08

Business Canvas (Typed) : 2021.06 ~ 2023.02

https://typed.do/

Typed - Your Second Brain

An easy-to-use workspace that transforms scattered information into your knowledge.

typed.do

사내 데이터 플랫폼 개발 및 운영
• Airflow를 활용한 data orchestration
• data ETL, reverseETL 관리
• clickstream data 수집을 위한 logging 서버 운영
• metric 연산 서버(FastAPI) 관리
• Event taxonomy 관리

Typed 개발

- dataTransfer와 clipboard 간 연계를 통해 blob 객체 핸들링

- 레거시 번들러 코드(neutrino.js)제거, 직접 작성한 webpack로 번들링

- typescript 마이그레이션

- 기존 prettier-standard 제거에 따른 formatter 및 lint 재설정 (ex - eslint-plugin-import)

- figma API를 활용한 asset 자동 추출 -> api hit limit으로 사용하지 않게 됨

- 한/영 다국어 처리

- absolute path, styleint 설정 등 다양한 FE 개발자를 위한 DX 향상 작업

- storybook + rollup을 통한 design system 구축 및 bundling

https://www.npmjs.com/package/typed-design-system

typed-design-system

## if you want add svg

www.npmjs.com

Chrome Extention 개발

- mouseless한 경험을 위한 extension shortcut 개발
- vite 번들러를 활용한 new Tab 개발

(2022.01~ ...)

Typed 개발

- 검색 기능 개발

Flutter

- Flavor에 따른 동적 Firebase 활용을 위한 bash 스크립트 작성

- GetX pattern을 참고한 모바일 아키텍처 구현

autoFuzzy

한국어 특성을 고려한 일치 검색, 초성 검색, 정규식을 활용한 간단한 fuzzy 검색.
벤처창업론 수업 중 poc의 개념으로 제작시작, 이후 번들링하여 오픈 소스로 전환

https://www.npmjs.com/package/ko-fuzzy

ko-fuzzy

regex generator for korean auto complete and fuzzy search

www.npmjs.com

- typescript
- tsup

Fuze (서비스 종료)

구현은 전부 완료되었으나 50명 가량의 심층적인 베타테스트 결과, 오프라인에서 진행하는 것이 고객 segment에 더 적합하다고 판단하여 정지되었습니다.
https://fuzekorea.com(서비스 종료)

나만을 위한 원어민 파트너를 만나다

Fuze는 원어민 회화 과외를 주선해주는 프리미엄 매칭 플랫폼입니다

www.fuzekorea.com

Next + Node.ts + MariaDB
web(nginx)-was(Node)-db(AWS RDS Maria DB)

- typescript
- 커스텀 달력과 glide.js를 활용한 타임라인 구현
- intersection Observer
- nginx web server => 리버스 프록시, let's encrypt
- react-spring
- kakao 비즈니스 채널, 비즈메세지
- custom hook 제작(DetectOutsideDomEvent, SetIntervalWrapper, useScrollFadeIn)

# Next-Cineps (서비스 종료)

🏆 해당 프로젝트를 기반으로 한 사업 계획서가 벤처기업협회에서 주관하는 PSWC합격을 받았습니다.
🚨 아쉬운 점으론, 인프라에 대한 이해가 전혀 없어서 직접 EC2를 썼다는 점 + CloudFront를 제거하여 S3 본 주소가 노출되다는 점입니다. 다음 프로젝트에서는 컨테이너 기반 배포, OAI를 활용하여 오리진 S3에 직접 접근을 막아 볼 예정입니다.

3-tier architecture : web(nginx, next)-was(express)-db(mongoDB atlas)
Next.js(SSR + CSR) + Redux + MongoDB + Express + AWS

- AWS ACM SSL 인증서 + route53
- nginx 리버스 프록시
- svg로 직접 그린 FullPageLoader- MongoDB projection + index를 통한 DB 튜닝 + Pagination
- Cloudflare
- Social Login (Google Auth)
- 대댓글 및 좋아요
- Quill 텍스트 에디터
- webpack-bundle-analyzer
- Treeshaking, gzip 압축
- styled-compoment theme을 통한 디자인 시스템 + 애니메이션 관리
- Log rotate (pm2 logrotate)
~~- Redis caching server~~