ZUM

RSS

게시글: 52
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
Tuist 도입부터 적용까지 알려ZUM요! (feat. 모듈화)
이 글은 ZUM iOS 개발팀이 Tuist를 도입하고 iOS 프로젝트에 적용한 경험을 공유합니다. Tuist는 Xcode 프로젝트 생성 및 관리를 자동화하는 CLI 도구로, `Project.swift` 파일을 통해 프로젝트 설정을 정의합니다. Tuist 도입의 주요 장점으로는 `xcodeproj` 파일 관리 불필요로 인한 Git 충돌 방지, 모듈화의 편리성, 프로젝트 모듈 의존 관계 시각화 용이성, 그리고 Swift 언어를 이용한 설정 정의 등이 있습니다. 특히 모듈화에 초점을 맞춰 Tuist를 활용하여 프로젝트 구조를 개선하고 개발 효율성을 높인 경험을 상세히 다룹니다. 가이드 없이 맨땅에 시작한 Tuist와 모듈 아키텍처 학습 기반의 설계 및 개발 경험을 공유하며, iOS 프로젝트 관리 및 모듈화에 대한 실질적인 인사이트를 제공합니다.
TuistiOS모듈화
ZUM·2023년 5월 24일
Frontend
Next, d3로 서버 사이드 지도 렌더링하기
본 글은 Next.js와 d3 라이브러리를 활용하여 부동산 데이터를 시각화하고 서버 사이드 렌더링을 구현한 파일럿 프로젝트 경험을 공유합니다. 프로젝트 목표는 실무 기술 역량 강화였으며, 지역/기간별 변동률 데이터를 지도 위에 색상으로 표현하고 상세 정보를 제공하는 요구사항을 만족시켜야 했습니다. 지도 라이브러리 선택 시 leaflet, mapbox, d3-geo를 비교 검토한 결과, 구체적인 지도 정보보다는 행정구역 구분이 중요하고 다양한 차트 활용 가능성을 고려하여 d3를 선택했습니다. 또한, 서버 사이드 렌더링을 통해 초기 로딩 성능을 개선하고 SEO를 강화하는 방안을 모색했습니다.
Next.jsd3데이터 시각화
ZUM·2023년 5월 18일
Frontend
댓글 모듈 레거시 걷어내기 with TDD
이 글은 줌인터넷의 서브도메인에서 사용되던 댓글 모듈의 레거시 코드를 Vue와 TypeScript를 사용하여 개선한 과정을 소개합니다. 기존 JavaScript, jQuery 기반의 댓글 모듈은 MPA(Multi Page Application) 환경에 맞춰져 있어 SPA(Single Page Application) 전환 시 불편함과 유지보수의 어려움을 야기했습니다. 특히 페이지 전환 시 스크립트 주입 방식, 최상위 document 이벤트 등록, 상태 추적의 어려움 등이 문제점으로 지적되었습니다. 이를 해결하기 위해 TDD(테스트 주도 개발) 방법론을 적용하고 Jest를 활용하여 효율적인 유지보수가 가능한 댓글 컴포넌트를 개발했습니다. 최종적으로 개선된 댓글 모듈 컴포넌트는 사내 라이브러리로 배포되어 재사용성을 높였습니다.
VueTypeScriptTDD
ZUM·2022년 1월 6일
Frontend
Zum Portal Core JS 소개
이 글은 줌인터넷 프론트엔드 파트에서 사용 중인 'zum-portal-core-js' 패키지를 소개합니다. 이 패키지는 서비스 개발에 필요한 프론트엔드 및 백엔드 설정과 유틸리티를 추출하여 관리하며, 줌프론트, 모바일줌 등 여러 서비스에서 이미 사용되고 있고 향후 적용될 서비스도 많습니다. 과거 줌인터넷 포털개발팀은 풀스택으로 서비스를 운영했지만, 모바일줌 개편 프로젝트를 계기로 SpringBoot와 SPA(Vue)를 도입하며 기술 스택 변화를 겪었습니다. 기존 Spring MVC(Template Engine) 방식의 UI 관리의 불편함을 해소하고, 표준화된 core package를 통해 개발 효율성을 높이고자 하는 노력의 일환으로 'zum-portal-core-js'가 탄생했습니다. 이 패키지는 프론트엔드 개발의 생산성 향상에 기여하고 있습니다.
zum-portal-core-jsFrontend패키지
ZUM·2021년 12월 6일
Frontend
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
이 글은 Vue.js를 사용하여 SSR(Server Side Rendering)을 적용하는 과정을 다룹니다. SSR의 개념을 PHP, JSP, ASP와 같은 전통적인 웹 개발 방식과 비교하며 설명하고, 왜 SSR이 필요한지에 대한 근본적인 질문을 던집니다. 특히, 브라우저 발전과 JavaScript 성숙에 따라 SSR의 중요성이 재조명되는 배경을 설명하며, 독자들이 Vue.js 환경에서 SSR을 효과적으로 구현할 수 있도록 실질적인 가이드라인을 제공하는 데 초점을 맞춥니다. Vanilla SSR과의 연관성을 언급하며, 실제 적용 사례를 통해 이해를 돕고자 합니다.
VueSSRServer Side Rendering
ZUM·2021년 10월 1일
Frontend
INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
줌인터넷 프론트엔드 파트 주니어 개발자들이 수습 기간 동안 INVESTING.COM 클론 코딩 프로젝트를 진행한 경험을 공유합니다. 이 프로젝트는 신규 입사자들이 실무에 빠르게 적응하고 웹 서비스 기반 지식 및 기술을 습득하는 것을 목표로 했습니다. Vue.js SSR(Server-Side Rendering)과 CANVAS API를 활용하여 금융 시장 데이터를 시각화하는 데 중점을 두었으며, 프로젝트 개요, 요구사항, 기능 소개, 협업 방법, 프로젝트 구조, 기술적 고민, 그리고 개인별 회고까지 상세하게 다룹니다. 이를 통해 실무 투입 전 도메인 학습과 프로젝트 성공 가능성을 높이고자 했습니다.
Vue JSSSRCANVAS API
ZUM·2021년 7월 21일
Frontend
크롬 확장프로그램 개발⛏️ 회고
이 글은 Vue.js를 사용하여 크롬 확장 프로그램 'Zum NewTab'을 개발한 경험을 회고하는 내용입니다. 크롬 확장 프로그램은 웹 기술(HTML, JavaScript, CSS)을 기반으로 사용자의 브라우징 경험을 향상시키는 소프트웨어이며, Chrome 개발자 대시보드를 통해 배포됩니다. 개발팀은 다양한 확장 프로그램 리서치를 통해 바로가기 링크, 위젯, 웰페이퍼, 검색 기능 등을 포함한 확장 프로그램을 기획했습니다. 개발 과정에서의 어려움과 배포, 검수 경험을 공유하며, 최종적으로 사용자가 다운로드할 수 있는 결과물을 소개합니다. 이 글은 프론트엔드 개발자가 크롬 확장 프로그램 개발에 도전하는 과정과 그 결과물을 이해하는 데 도움을 줄 수 있습니다.
크롬 확장프로그램Vue.js웹 기술
ZUM·2020년 9월 11일
Frontend
주제별 영상 제공 웹 서비스
본 글은 줌인터넷 포털개발팀의 주니어 개발자가 수습 기간 동안 진행한 파일럿 프로젝트를 소개합니다. 외부 API(Youtube Data API)와 크롤링 기술을 활용하여 주제별 영상 제공 웹 서비스를 구축하는 과정을 다룹니다. 프론트엔드는 Vue.js와 Vue-cli3(Webpack 4), SCSS 등을 사용했으며, 백엔드는 Java8, Spring Boot, Gradle, H2 DB, Ehcache 등을 활용했습니다. 프로젝트의 목표는 모바일 웹 서비스 페이지 개발, 외부 데이터 획득 및 정제, 그리고 Vue.js 기반의 프론트엔드 구성입니다. 주요 요구사항으로는 외부 페이지 크롤링 및 가공, Youtube API를 통한 음원 검색, 비디오 플레이어 제작, 캐시 처리, 모듈화, 화면 스와이프 기능 구현 등이 포함됩니다. 또한, Bundle Analyze & Optimize를 통해 웹 서비스의 성능 최적화를 시도했습니다.
Vue.jsVue-cli3Webpack 4
ZUM·2020년 1월 20일
Frontend
Webpack dev server를 이용한 개발 환경 구성 Part2
본 글은 Webpack dev server를 활용하여 백엔드와 연동하는 개발 모드 구현 방법을 설명합니다. Part1에서 다룬 프론트엔드 단독 개발 모드와 달리, Part2에서는 리버스 프록시를 사용하여 백엔드 API 호출 및 페이지 이동이 가능하면서도 Webpack Hot Reload 또는 Hot Module Replacement를 통해 수정 사항을 즉시 반영하는 개발 환경 구축에 초점을 맞춥니다. SPA가 대세인 환경에서 전체를 SPA로 만들기 어려운 경우, 일부 페이지만 SPA로 구성하는 하이브리드 방식의 장점을 살리면서도 개발 편의성을 높이는 방법을 제시합니다. 이를 위해 Webpack4, Vue-CLI2, Axios를 사용하며, 싱글 페이지 형식 프로젝트에서 멀티 페이지 형식 개발의 장점을 흡수하는 방안을 모색합니다.
Webpackdev server프록시
ZUM·2019년 7월 1일
Frontend
Webpack Dev Server를 이용한 개발 환경 구성 Part1
이 글은 Webpack Dev Server를 활용하여 프론트엔드 단독 개발 모드를 구성하는 방법을 Part 1에서 설명합니다. 모바일 줌 개편 프로젝트에서 Webpack 기반의 프론트엔드 개발 경험을 공유하며, 특히 JS 파일과 백엔드 API를 하나의 웹 애플리케이션 서버로 배포하는 환경에서 빠른 개발과 협업을 위해 프론트엔드와 백엔드 개발을 분리하는 것의 중요성을 강조합니다. NPM 스크립트 소개와 함께 publish 모드 및 dev 모드별 구성 방법을 다룹니다. 이 글은 Webpack4와 Axios를 예제 코드로 사용하며, 프론트엔드 개발 생산성을 높이는 데 초점을 맞춥니다.
WebpackWebpack Dev Server프론트엔드 개발
ZUM·2019년 7월 1일
Frontend
Vuejs로 모바일 웹 구축하기
이 글은 Vue.js를 활용하여 모바일 웹사이트를 구축하는 파일럿 프로젝트 경험을 공유합니다. 프로젝트의 핵심 목표는 Vue.js를 사용하여 웹사이트의 각 기능을 모듈화하는 것이었습니다. 개발 스펙으로는 Java, Spring Boot 등의 백엔드 기술과 Freemarker, Vue.js, Webpack 등의 프론트엔드 기술이 사용되었으며, Lombok, Lory, Axios, Vue-lazyload, Sass 등 추가 라이브러리도 활용되었습니다. Vue.js는 SPA를 지향하고 컴포넌트 기반 설계를 특징으로 하며, NPM, Webpack, Babel, TypeScript 등 다양한 개발 도구와 생태계를 지원하는 대세 프레임워크임을 강조합니다. 이를 통해 Vue.js를 이용한 효율적인 모바일 웹 개발 가능성을 보여줍니다.
Vue.js모바일 웹Frontend
ZUM·2018년 8월 23일
Frontend
실서비스에서 CoffeeScript를 ES6로 변환하기
이 글은 사내 모바일웹 프로젝트에서 사용되던 CoffeeScript를 ES6로 전환하는 과정을 공유합니다. 기존 CoffeeScript 환경은 전역 객체 사용 남발, 모듈화 부족, 느린 개발 속도, 높은 러닝 커브 등의 문제점을 안고 있었습니다. 이러한 문제 해결과 최신 기술 트렌드에 발맞추기 위해 Webpack과 ES6 도입을 결정했습니다. ES6는 개발자 친화적인 문법과 Webpack과의 뛰어난 호환성을 제공하며, Dependency Tree 개념을 활용한 모듈화로 코드 가독성과 유지보수성을 향상시킬 수 있습니다. 또한, 향후 React 등 다른 프레임워크 도입에도 유리하며, 브라우저의 ES6 지원 확대 시 원본 소스 그대로 배포가 가능해집니다. 글에서는 전환 과정에서 사용된 decaffeinate와 같은 도구와 함께, 기존 스크립트 구조 분석 및 기능 파악의 중요성을 강조하며 성공적인 마이그레이션 경험을 공유합니다.
CoffeeScriptES6Webpack
ZUM·2017년 3월 22일