Growth

타임라인

2021년 첫 인턴십부터 지금까지, 해마다 한 일과 그 덕분에 할 수 있게 된 것을 적었습니다. 그때 쓴 블로그 글도 시기별로 함께 붙여 두었습니다.

연차
6
블로그 글
30
2021—2026

  1. i.

    웹 개발 시작

    2021년 — 교내 웹사이트 유지보수를 맡으며 개발을 시작했습니다

    아주대학교 커뮤니케이션팀에서 웹 개발 장학인턴으로 일했습니다. 비개발 조직이라 개발 담당은 저 하나였고, 교내 공식 웹사이트 유지보수를 맡았습니다. 계약이 끝난 뒤에도 외주로 유지보수를 이어 갔습니다.

    HTML·CSS·jQuery만 쓰던 때라 구조랄 게 없었습니다. 직접 디자인해 올린 팝업의 반응을 Google Analytics로 확인해 본 것이, 만든 결과를 데이터로 확인한 첫 경험이었습니다.

    있었던 일

    1. 2021.08아주대학교 커뮤니케이션팀 웹 개발 장학인턴 시작
    2. 2021.09 —교내 공식 웹사이트 유지보수 — 중복 HTML 구조 통합, CSS 네이밍 체계 정리
    3. 2021.11팝업 UI 직접 디자인·구현 후 Google Analytics로 반응 확인
    4. 2022.03계약 종료 후에도 외주 형태로 유지보수 지속

    할 수 있게 된 것

    • HTML 구조 정리와 CSS 네이밍 체계 세우기
    • 레거시 코드에서 불필요한 로직 걷어내기
    • Google Analytics로 변경 효과 확인하기
    기술
    HTML5, CSS3, JavaScript, jQuery

  2. ii.

    첫 실무 코드베이스

    2022년 — 코드 리뷰를 받는 실무 코드베이스에서 처음 일했습니다

    블록체인 지갑 회사에서 인턴으로 일했습니다. React·TypeScript로 된 오픈소스 크롬 익스텐션이었고, 프론트엔드 시니어분 밑에서 티켓 단위로 기능을 받아 작업하며 렌더링 최적화, content script와 provider 주입 같은 깊은 부분까지 배웠습니다.

    동작하는 코드를 올려도 바로 머지되지는 않았습니다. 리뷰 코멘트에 맞춰 같은 기능을 여러 번 다시 올리면서, 조건문을 단순하게 쓰고 필요 없는 코드를 지우는 습관이 생겼습니다.

    있었던 일

    1. 2022.08스탬퍼(Cosmostation) 프론트엔드 개발 인턴 시작
    2. 2022.10Kujira 체인 추가 — 체인 상수·에셋·목록 등록까지 신규 체인 온보딩 전 과정
    3. 2022.11이더리움 ERC20 토큰 리스트·검색 페이지 제작
    4. 2022.12CW20 검색을 전 체인 지원으로 확장, 검색 입력 디바운스 도입
    5. 2022인턴 주간 코드 스터디 — 매주 발표하며 간결한 코드·메모리 누수 없는 리팩토링 공부

    할 수 있게 된 것

    • 실무 React·TypeScript 코드베이스를 읽고 규칙에 맞춰 기여하기
    • 작업을 티켓 단위로 끊고, 리뷰받기 좋게 커밋을 나눠 PR로 올리기
    • 입력 디바운스로 불필요한 조회 줄이기
    • 다국어(i18n) 리소스 구조 다루기
    • 렌더링 최적화와 메모리 누수 없는 리팩토링을 의식하며 코드 짜기

    그 해에 만든 것

    기술
    React, TypeScript, Redux, Emotion, Webpack

  3. iii.

    디자인과 퍼블리싱

    2023년 — 공공기관 사이트 약 200페이지를 디자인부터 마크업까지 맡았습니다

    공공기관 웹사이트를 만드는 회사로 옮겼습니다. 시안을 받아 옮기는 게 아니라 직접 디자인하고, 반응형 마크업과 PHP 연동까지 혼자 맡는 일이었습니다.

    6개 기관, 약 200페이지였습니다. 비슷한 화면을 반복해서 만들다 보니 어떤 부분을 공통 컴포넌트로 묶고 어떤 부분은 따로 두는 게 나은지 판단이 서기 시작했고, 나중에 디자인 시스템을 만들 때 그 기준을 그대로 썼습니다.

    있었던 일

    1. 2023.11웹비즈 크리에이티브 입사 — 공공기관 SI 디자인 · 퍼블리싱 · PHP 연동
    2. 2023.11 —이민재단·싸템·양구수목원·사회보장정보원 등 6개 기관 약 200페이지 퍼블리싱을 혼자 맡음
    3. 2023.12리픽 — Vue·TypeScript 컴포넌트 설계와 Pinia 상태 관리, Storybook 문서화

    할 수 있게 된 것

    • 시안을 반응형 마크업으로 옮기고 PHP 템플릿에 연결하기
    • 웹 접근성(A11Y)과 크로스 브라우징을 마크업 단계에서 처리하기
    • 무엇을 공통 컴포넌트로 묶을지 판단하기
    • Vue 컴포넌트 설계와 Pinia 상태 분리, Storybook 문서화

    그 해에 만든 것

    기술
    Vue.js, TypeScript, Pinia, Storybook, HTML5, CSS3, PHP, Figma

  4. iv.

    백엔드와 배포

    2024년 — 백엔드 부트캠프에서 서버와 배포를 직접 해 봤습니다

    프론트만으로는 부족하다고 느껴 백엔드 부트캠프에 들어갔습니다. 같은 서비스를 세 번 만들었습니다 — BOOT_UP을 Spring 백엔드로, 다음엔 Vue 프론트로, 마지막엔 Docker와 GitHub Actions로 배포까지.

    한 서비스를 서버·화면·배포 순서로 모두 만들어 보니, 프론트에서 백엔드에 무엇을 구체적으로 요청해야 하는지 알게 됐습니다. 2026년에 API 응답 불일치를 표로 정리해 백엔드에 넘긴 것도 이때 경험이 바탕입니다.

    매주 회고를 velog에 남겼습니다.

    있었던 일

    1. 2024.04한화시스템 BEYOND SW Camp 6기(백엔드 트랙) 입과
    2. 2024.07BOOT_UP 2차 — Spring·QueryDSL 백엔드, 전역 예외처리와 응답 코드 체계 구현
    3. 2024.0799클럽 코테 스터디 참여, 주차 회고를 velog에 연재
    4. 2024.08BOOT_UP 3차 — Vue 프론트엔드 커밋 54건, DevOps 단계 담당
    5. 2024.08CalIT — 팀장을 맡아 프론트엔드를 혼자 개발, 100개 이상 API 연동
    6. 2024.10BEYOND SW Camp 수료, 프리코스 학생 대상 크로스 강의 진행

    할 수 있게 된 것

    • Spring·JPA·QueryDSL로 API와 동적 쿼리 만들기
    • 전역 예외처리와 응답 코드 체계를 세워 팀에 공유하기
    • Docker 이미지 빌드, GitHub Actions·Jenkins로 CI/CD 구성하기
    • Sentry·Prometheus·Grafana로 배포 후 상태 보기
    • 팀장으로 스프린트를 운영하고 이슈 우선순위 정하기

    그 해에 만든 것

    기술
    Java, Spring Boot, QueryDSL, Vue.js, Docker, GitHub, Jenkins, Kafka
    그 해에 쓴 글 18편펼치기

  5. v.

    관제 SI

    2025년 — 관제 현장에 CCTV를 붙이고, 공통 패키지를 만들었습니다

    연초에는 프론트엔드 심화 과정과 스터디에서 개인 프로젝트를 연달아 했습니다. 번개팅에서 CI/CD를 처음부터 세우고, 해커톤에서 20시간 만에 MVP를 배포했습니다. 스터디에서 시작한 ChatFlow는 여름까지 이어 가며 웹소켓 실시간 채팅을 붙였습니다.

    4월에 플럭시티 DX 기술팀에 합류했습니다. 부산 도시철도 관제에서 협업처가 CCTV 연동 코드도 문서도 주지 않아, WebRTC를 먼저 조사해 가능한 연결 방식을 미리 준비해 간 뒤 현장에서 하나씩 붙여 보며 맞는 것을 찾았습니다. CCTV는 실제 운영까지 올라갔고, 사무실에서 재현되지 않는 버그는 현장에서 고쳐 다시 배포했습니다.

    여름에는 탄천물재생센터 악취 관제를 혼자 맡았습니다. 고정 센서·드론 측정·대기확산 모델링이 전부 다른 형식으로 쌓이기만 하던 걸 Cesium 3D 지형 하나 위에 겹쳐 올렸고, 화면만이 아니라 수집 API와 DB, 인터넷이 닿지 않는 서버로의 배포까지 끝까지 맡았습니다. 데이터가 많으면 화면 구조부터 달라져야 한다는 걸 이때 배웠습니다.

    같은 시기에 프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 옮겼습니다. 다른 프로젝트에서 가져다 쓰는 코드를 만든 건 이때가 처음입니다.

    있었던 일

    1. 2025.01 — 03코드잇 프론트엔드 심화 우수 수료 · 번개팅, PPIYO 완주
    2. 2025.04플럭시티 DX 기술팀 입사
    3. 2025.05 — 09부산 도시철도 통합 관제 — WebRTC CCTV 현장 운영, 시설물 9종 API 연동
    4. 2025.06 — 08탄천 악취 모니터링 — Cesium 3D 위에 센서·드론·CALPUFF 확산을 올리고, 수집 API와 온프레미스 배포까지
    5. 2025.04 — 09Plug Platform — 디자인 시스템·공통 API 계층 모노레포화 (머지 PR 17건)
    6. 2025.10 — 11Plug Atlas — Cesium 지도 IoT 관제의 이벤트·알람 도메인 전반 구현
    7. 2025.11클라우드팀으로 이동 — VGOLF 프로덕션 서비스 합류

    할 수 있게 된 것

    • Jest·RTL·Cypress로 단위·E2E 테스트 자동화, Kubernetes 카나리 배포
    • Three.js·Cesium으로 3D 모델과 지도 위 객체 다루기
    • WebRTC SDP 교환과 ICE 상태 기반 연결·재연결 제어
    • SSE 다채널 구독을 화면 상태로 옮기기
    • pnpm 모노레포로 여러 프로젝트가 함께 쓰는 디자인 시스템·공통 API 계층 만들기
    • 외부 협업처의 API 스펙을 타입으로 고정해 화면이 응답 형태를 추측하지 않게 하기
    • 정보를 주지 않는 상대와 일할 때, 가능한 경우를 미리 준비해 가서 맞는 방식 찾기
    • 폐쇄망 현장에 배포하고 그 자리에서 고쳐 다시 올리기
    • 많은 데이터를 프론트에서 줄이는 대신, 보여 줄 단위를 먼저 정하고 서버에서 집계해 내려받기
    • Express·Prisma로 수집 API를 직접 만들고 응답 형식까지 화면에 맞춰 설계하기
    • 인터넷이 닿지 않는 서버에 Docker 이미지를 파일로 옮겨 배포하기

    그 해에 만든 것

    기술
    React, TypeScript, Three.js, CesiumJS, WebRTC, SSE, Zustand, Storybook, pnpm, Express, Prisma, PostgreSQL, Docker
    그 해에 쓴 글 2편펼치기

  6. vi.

    VGOLF

    2026년 — 매장 하드웨어와 앱 스토어까지 다뤄야 하는 서비스를 맡았습니다

    골프장에서 매일 쓰는 서비스를 맡았습니다. 클라우드에 정적 배포된 웹앱이 매장 사설망 프린터에 닿지 못하는 문제는 로컬 에이전트 브릿지로 풀었고, 망분리된 미니 PC가 네트워크 없이 부팅해도 화면이 뜨도록 서비스워커를 설계했습니다.

    React Native 앱은 Expo 없이 네이티브 프로젝트를 직접 관리하며 릴리스 서명과 스토어 제출까지 마쳤습니다. 서버가 par에 null을 내려주는 바람에 모든 홀이 더블보기로 표시되던 오류는 zod 2층 계약 테스트로 화면에 반영되기 전에 잡았고, API 응답 불일치 12건은 영향·우선순위 표로 정리해 백엔드에 넘겼습니다.

    9월에는 경기관제 앱을 소형 단말(PM30)로 옮기는 일을 맡았습니다. 기능을 옮기기 전에 모바일만 떼어낸 저장소를 만들고, 상태 저장 방식과 번들, 테스트부터 다시 세웠습니다.

    이때부터 막혔던 문제를 Tistory에 정리하기 시작했습니다. 무인 단말에서 CDN을 쓸 수 없는 문제, 인앱브라우저에서 blob URL 다운로드가 안 되는 문제처럼 검색해도 답이 잘 안 나오던 것들입니다.

    있었던 일

    1. 2025.12 — 2026.09VGOLF F&B — ESC/POS 주방 프린팅, 오프라인 부팅 사이니지, WYSIWYG 편집기까지 단독 개발 (520커밋)
    2. 2026.01 — 03OnMeet — 팀장을 맡아 팀원들과 AI 회의록 화상회의 플랫폼을 기획부터 배포까지, 과정 내 수강생 우수상
    3. 2026.04제1회 코리아IT아카데미 바이브코딩 공모전 500팀 중 3위(장려상) — Argos 프론트엔드 담당, AI 에이전트 팀 파이프라인 설계
    4. 2026.06 — 09VGOLF 앱 — React Native 개발부터 Play Console 제출까지 (555커밋)
    5. 2026.04 —Tistory에 기술 정리와 실무 트러블슈팅 연재 시작
    6. 2026.09 —VGOLF 경기관제 PM30 — 모바일 저장소 분리, Recoil → zustand, 테스트 0 → 162개, 태블릿 기능 이관

    할 수 있게 된 것

    • React Native 네이티브 프로젝트를 Expo 없이 직접 관리하기
    • 릴리스 서명·환경 분리·스토어 심사 대응까지 배포 마지막 단계 처리하기
    • 서비스워커 프리캐시로 오프라인에서도 동작하게 만들기
    • 브라우저가 닿지 못하는 하드웨어를 로컬 에이전트로 연결하기
    • zod 2층 스키마로 백엔드 응답을 계약 테스트하기
    • 영향·우선순위를 붙인 API 수정 요청서 쓰기
    • Supabase RLS와 AI SDK로 역할별 데이터 격리 구현하기
    • AI에게 규칙·역할·검증 루프를 주고, 만드는 쪽과 검증하는 쪽을 나눠 돌리기
    • 기준을 세워 레거시 코드를 안전하게 걷어내고, 측정한 뒤에 구조 바꾸기
    • 코드를 일부러 깨 보는 변형 검증으로 테스트가 실제로 버그를 잡는지 확인하기

    그 해에 만든 것

    기술
    React Native, Next.js, TypeScript, Zod, Supabase, Workbox, ESC/POS, iOS, Android
    그 해에 쓴 글 10편펼치기

Notes

블로그

두 블로그의 글 30편을 위 타임라인의 해당 연도에 연결해 두었습니다.

Now

스터디 · 활동

퇴근하고 나서도 계속 배웁니다

활동 전체 보기