Growth
타임라인
2021년 첫 인턴십부터 지금까지, 해마다 한 일과 그 결과 할 수 있게 된 것을 정리했습니다. 그때 쓴 블로그 글도 연도별로 연결해 두었습니다.
6
Years
30
Posts
2021년부터 2026년까지
- 2021
교내 웹사이트를 혼자 맡으며 개발을 시작했습니다
아주대학교 커뮤니케이션팀에서 웹 개발 장학인턴으로 일했습니다. 비개발 조직이라 개발 담당은 저 하나였고, 교내 공식 웹사이트 유지보수를 맡았습니다.
HTML·CSS·jQuery만 쓰던 때라 구조랄 게 없었습니다. 직접 디자인해 올린 팝업의 반응을 Google Analytics로 확인해 본 것이, 만든 결과를 데이터로 확인한 첫 경험이었습니다.
- 2021.08아주대학교 커뮤니케이션팀 웹 개발 장학인턴 시작
- 2021.09 —교내 공식 웹사이트 유지보수 — 중복 HTML 구조 통합, CSS 네이밍 체계 정리
- 2021.11팝업 UI 직접 디자인·구현 후 Google Analytics로 반응 확인
- 2022.03계약 종료 후에도 외주 형태로 유지보수 지속
할 수 있게 된 것
- HTML 구조 정리와 CSS 네이밍 체계 세우기
- 레거시 코드에서 불필요한 로직 걷어내기
- Google Analytics로 변경 효과 확인하기
HTML5CSS3JavaScriptjQuery - 2022
코드 리뷰를 받는 실무 코드베이스에서 처음 일했습니다
블록체인 지갑 회사에서 인턴으로 일했습니다. React·TypeScript로 된 오픈소스 크롬 익스텐션이었고, 티켓 단위로 기능을 받아 작업했습니다.
동작하는 코드를 올려도 바로 머지되지는 않았습니다. 리뷰 코멘트에 맞춰 같은 기능을 여러 번 다시 올리면서, 조건문을 단순하게 쓰고 필요 없는 코드를 지우는 습관이 생겼습니다.
- 2022.08스탬퍼(Cosmostation) 프론트엔드 개발 인턴 시작
- 2022.10Kujira 체인 추가 — 체인 상수·에셋·목록 등록까지 신규 체인 온보딩 전 과정
- 2022.11이더리움 ERC20 토큰 리스트·검색 페이지 제작
- 2022.12CW20 검색을 전 체인 지원으로 확장, 검색 입력 디바운스 도입
할 수 있게 된 것
- 실무 React·TypeScript 코드베이스를 읽고 규칙에 맞춰 기여하기
- 작업을 티켓 단위로 끊고, 리뷰받기 좋게 커밋을 나눠 PR로 올리기
- 입력 디바운스로 불필요한 조회 줄이기
- 다국어(i18n) 리소스 구조 다루기
ReactTypeScriptReduxEmotionWebpack - 2023
공공기관 사이트 약 200페이지를 디자인부터 마크업까지 맡았습니다
공공기관 웹사이트를 만드는 회사로 옮겼습니다. 시안을 받아 옮기는 게 아니라 직접 디자인하고, 반응형 마크업과 PHP 연동까지 혼자 진행하는 일이었습니다.
6개 기관, 약 200페이지였습니다. 비슷한 화면을 반복해서 만들다 보니 어떤 부분을 공통 컴포넌트로 묶고 어떤 부분은 따로 두는 게 나은지 판단이 서기 시작했고, 나중에 디자인 시스템을 만들 때 그 기준을 그대로 썼습니다.
- 2023.11웹비즈 크리에이티브 입사 — 공공기관 SI 디자인 · 퍼블리싱 · PHP 연동
- 2023.11 —이민재단·싸템·양구수목원·사회보장정보원 등 6개 기관 약 200페이지 단독 퍼블리싱
- 2023.12리픽 — Vue·TypeScript 컴포넌트 설계와 Pinia 상태 관리, Storybook 문서화
할 수 있게 된 것
- 시안을 반응형 마크업으로 옮기고 PHP 템플릿에 연결하기
- 웹 접근성(A11Y)과 크로스 브라우징을 마크업 단계에서 처리하기
- 무엇을 공통 컴포넌트로 묶을지 판단하기
- Vue 컴포넌트 설계와 Pinia 상태 분리, Storybook 문서화
Vue.jsTypeScriptPiniaStorybookHTML5CSS3PHPFigma - 2024
백엔드 부트캠프에서 서버와 배포를 직접 해 봤습니다
프론트만으로는 부족하다고 느껴 백엔드 부트캠프에 들어갔습니다. 같은 서비스를 세 번 만들었습니다 — BOOT_UP을 Spring 백엔드로, 다음엔 Vue 프론트로, 마지막엔 Docker와 GitHub Actions로 배포까지.
한 서비스를 서버·화면·배포 순서로 모두 만들어 보니, 프론트에서 백엔드에 무엇을 구체적으로 요청해야 하는지 알게 됐습니다. 2026년에 API 응답 불일치를 표로 정리해 백엔드에 넘긴 것도 이때 경험이 바탕입니다.
매주 회고를 velog에 남겼습니다.
- 2024.04한화시스템 BEYOND SW Camp 6기(백엔드 트랙) 입과
- 2024.07BOOT_UP 2차 — Spring·QueryDSL 백엔드, 전역 예외처리와 응답 코드 체계 구현
- 2024.0799클럽 코테 스터디 참여, 주차 회고를 velog에 연재
- 2024.08BOOT_UP 3차 — Vue 프론트엔드 커밋 54건, DevOps 단계 담당
- 2024.08CalIT — 팀장으로 프론트 단독 개발, 100개 이상 API 연동
- 2024.10BEYOND SW Camp 수료, 프리코스 학생 대상 크로스 강의 진행
할 수 있게 된 것
- Spring·JPA·QueryDSL로 API와 동적 쿼리 만들기
- 전역 예외처리와 응답 코드 체계를 세워 팀에 공유하기
- Docker 이미지 빌드, GitHub Actions·Jenkins로 CI/CD 구성하기
- Sentry·Prometheus·Grafana로 배포 후 상태 보기
- 팀장으로 스프린트를 운영하고 이슈 우선순위 정하기
JavaSpring BootQueryDSLVue.jsDockerGitHubJenkinsKafka그 해에 쓴 글 · 18편펼치기접기
- 2024-08-21velog[IT 북리뷰] 스프링부트 핵심 가이드
- 2024-07-29velog99클럽 코테 스터디 8일차 TIL + Stack 문제에 Deque 적용해보기
- 2024-07-26velog99클럽 코테 스터디 4일차 TIL + 예외처리 적용하기
- 2024-07-23velog99클럽 코테 스터디 1일차 TIL + 오버헤드 피하기
- 2024-07-09velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 8주차 회고🦭
- 2024-07-09velog한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 7주차 회고🦭
- 2024-06-10velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 6주차 회고🦭
- 2024-06-09velog[한화시스템🎇 BEYOND SW 캠프 6기] - Monthly(1) 5월 회고🦭
- 2024-06-03velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 5주차 회고🦭
- 2024-05-26velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 4주차 회고🦭
- 2024-05-19velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 3주차 회고🦭
- 2024-05-12velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 2주차 회고🦭
- 2024-05-09velogVMware 세팅 절차 정리
- 2024-05-06velog[한화시스템🎇 BEYOND SW 캠프 6기] - Weekly 1주차 회고🌪️
- 2024-05-04velogMaria DB & MySQL을 맥에 설치해보자
- 2024-03-15velog[TS Error]Cannot find module or its corresponding type declarations
- 2024-03-14velog[Jekyll] 깃페이지에 블로그 운영하기 도전!
- 2024-03-06velog[Git Error] fatal: refusing to merge unrelated histories/ 커밋 기록이 달라 푸시가 안될 때
- 2025
관제 현장에 CCTV를 붙이고, 공통 패키지를 만들었습니다
연초에는 프론트엔드 심화 과정과 스터디에서 개인 프로젝트를 연달아 했습니다. 번개팅에서 CI/CD를 처음부터 세우고, ChatFlow에서 Kubernetes 카나리 배포와 WebRTC를 붙이고, 해커톤에서 20시간 만에 MVP를 배포했습니다.
4월에 플럭시티 DX 기술팀에 합류했습니다. 부산 도시철도 관제에서 협업처가 CCTV 연동 코드도 문서도 주지 않아, WebRTC를 먼저 조사해 가능한 연결 방식을 미리 준비해 간 뒤 현장에서 하나씩 붙여 보며 맞는 것을 찾았습니다. CCTV는 실제 운영까지 올라갔고, 사무실에서 재현되지 않는 버그는 현장에서 고쳐 다시 배포했습니다.
같은 시기에 프로젝트마다 복사되던 컴포넌트와 API 호출을 모노레포 패키지로 옮겼습니다. 다른 프로젝트에서 가져다 쓰는 코드를 만든 건 이때가 처음입니다.
- 2025.01 — 03코드잇 프론트엔드 심화 우수 수료 · 번개팅, ChatFlow, PPIYO 완주
- 2025.04플럭시티 DX 기술팀 입사
- 2025.05 — 09부산 도시철도 통합 관제 — WebRTC CCTV 현장 운영, 시설물 9종 API 연동
- 2025.04 — 09Plug Platform — 디자인 시스템·공통 API 계층 모노레포화 (머지 PR 17건)
- 2025.10 — 11Plug Atlas — Cesium 지도 IoT 관제의 이벤트·알람 도메인 전반 구현
- 2025.11클라우드팀으로 이동 — VGOLF 프로덕션 서비스 합류
할 수 있게 된 것
- Jest·RTL·Cypress로 단위·E2E 테스트 자동화, Kubernetes 카나리 배포
- Three.js·Cesium으로 3D 모델과 지도 위 객체 다루기
- WebRTC SDP 교환과 ICE 상태 기반 연결·재연결 제어
- SSE 다채널 구독을 화면 상태로 옮기기
- pnpm 모노레포로 여러 프로젝트가 함께 쓰는 디자인 시스템·공통 API 계층 만들기
- 외부 협업처의 API 스펙을 타입으로 고정해 화면이 응답 형태를 추측하지 않게 하기
- 정보를 주지 않는 상대와 일할 때, 가능한 경우를 미리 준비해 가서 맞는 방식 찾기
- 폐쇄망 현장에 배포하고 그 자리에서 고쳐 다시 올리기
ReactTypeScriptThree.jsCesiumJSWebRTCSSEZustandStorybookpnpm - 2026
매장 하드웨어와 앱 스토어까지 다뤄야 하는 서비스를 맡았습니다
골프장에서 매일 쓰는 서비스를 맡았습니다. 클라우드에 정적 배포된 웹앱이 매장 사설망 프린터에 닿지 못하는 문제는 로컬 에이전트 브릿지로 풀었고, 망분리된 미니 PC가 네트워크 없이 부팅해도 화면이 뜨도록 서비스워커를 설계했습니다.
React Native 앱은 Expo 없이 네이티브 프로젝트를 직접 관리하며 릴리스 서명과 스토어 제출까지 혼자 진행했습니다. 서버가 par에 null을 내려주는 바람에 모든 홀이 더블보기로 표시되던 오류는 zod 2층 계약 테스트로 화면에 반영되기 전에 잡았고, API 응답 불일치 12건은 영향·우선순위 표로 정리해 백엔드에 넘겼습니다.
9월에는 경기관제 앱을 소형 단말(PM30)로 옮기는 일을 맡았습니다. 기능을 옮기기 전에 모바일만 떼어낸 저장소를 만들고, 상태 저장 방식과 번들, 테스트부터 다시 세웠습니다.
이때부터 막혔던 문제를 Tistory에 정리하기 시작했습니다. 무인 단말에서 CDN을 쓸 수 없는 문제, 인앱브라우저에서 blob URL 다운로드가 안 되는 문제처럼 검색해도 답이 잘 안 나오던 것들입니다.
- 2025.12 — 2026.09VGOLF F&B — ESC/POS 주방 프린팅, 오프라인 부팅 사이니지, WYSIWYG 편집기까지 단독 개발 (520커밋)
- 2026.04제1회 코리아IT아카데미 바이브코딩 공모전 500팀 중 3위(장려상) — Argos 프론트엔드 전담
- 2026.06 — 09VGOLF 앱 — React Native 개발부터 Play Console 제출까지 (555커밋)
- 2026.04 —Tistory에 기술 정리와 실무 트러블슈팅 연재 시작
- 2026.09 —VGOLF 경기관제 PM30 — 모바일 저장소 분리, Recoil → zustand, 테스트 0 → 162개, 태블릿 기능 이관
할 수 있게 된 것
- React Native 네이티브 프로젝트를 Expo 없이 직접 관리하기
- 릴리스 서명·환경 분리·스토어 심사 대응까지 배포 마지막 단계 처리하기
- 서비스워커 프리캐시로 오프라인에서도 동작하게 만들기
- 브라우저가 닿지 못하는 하드웨어를 로컬 에이전트로 연결하기
- zod 2층 스키마로 백엔드 응답을 계약 테스트하기
- 영향·우선순위를 붙인 API 수정 요청서 쓰기
- Supabase RLS와 AI SDK로 역할별 데이터 격리 구현하기
- 기준을 세워 레거시 코드를 안전하게 걷어내고, 측정한 뒤에 구조 바꾸기
- 코드를 일부러 깨 보는 변형 검증으로 테스트가 실제로 버그를 잡는지 확인하기
React NativeNext.jsTypeScriptZodSupabaseWorkboxESC/POSiOSAndroid그 해에 쓴 글 · 10편펼치기접기
- 2026-08-28tistory아무도 누르지 않는 화면은 전체화면이 될 수 없다
- 2026-08-27tistoryCDN을 쓸 수 없는 웹앱 — 무인 단말에서 깨진 전제들
- 2026-08-26tistory[TypeScript] ② 타입을 믿을 수 없을 때 — 구조적 타이핑의 구멍과 런타임 검증
- 2026-08-25tistory카카오톡 인앱브라우저에서 이미지 저장이 안 되는 이유 — blob URL과 WebView 다운로드 위임
- 2026-04-23tistory[TypeScript] ① 왜 쓰는 건지, 컴파일러와 tsconfig 제대로 이해하기
- 2026-04-22tistory[Framework] 꼭 리액트여야 할까? — 프레임워크 선택에 대한 솔직한 정리
- 2026-04-21tistory[PackageManager] npm, pnpm, yarn, Yarn Berry 뭘 써야 하는 건지
- 2026-04-20tistory[CSS] 잘 쓰는 법 — 선택지가 너무 많은데 뭘 써야 하는 건지
- 2026-04-19tistory[Claude Code] 잘 쓰는 법 — 세팅부터 에이전트까지 실무에서 쓰는 패턴
- 2026-04-18tistoryNode.js 시리즈 ③ — Node.js로 어디까지 할 수 있는가, Deno와 Bun의 도전
블로그
두 블로그의 글 30편을 위 타임라인의 해당 연도에 연결해 두었습니다.