ZUM 기술 블로그

리다이렉트 서버와 FCM 푸시 연동

Tue, 11 Jul 2023 00:00:00 +0000

안녕하세요. 포털개발팀 박정현(Kate) 입니다.
이전 글에 이어서 FCM 푸시와 리다이렉트 서버와의 연동 과정을 작성하게 되었습니다. 과정 중에 만난 문제를 해결해가는 경험을 간략하게 작성을 해보았는데요, 재밌게 읽어주시면 감사하겠습니다.

1. 개요 2. 푸시 서버와 연동 3. 배경 3-1. 내용 4. 클릭 외에도 노출 API 추가하여 log 적재 4-1. 리다이렉트 서버 1차 요구사항 적용 4-2. 리다이렉트 서버 2차 요구사항 적용 5. web 푸시 노출 로그의 문제점 5-1. 푸시 서버 노출 로그 문제에 대한 해결방법 적용 6. 기존 푸시 cms 에...



제목은 Spring Session 도입기로 하겠습니다. 근데 이제 Redis를 곁들인
Fri, 07 Jul 2023 00:00:00 +0000
 
  안녕하세요. 줌인터넷 핀테크개발팀 김민수입니다. 
 사내에서는 문제를 개선하고 지속 가능한 서비스를 만들기 위한 많은 노력을 하고 있습니다. 회원 서비스의 세션 저장소를 교체하면서 Spring Session을 도입한 경험을 공유합니다.
 
 이런 분들이 읽으면 더 도움이 됩니다.
  분산 환경에서 세션 동기화 문제를 해결하고자 하는 분
 Spring Session을 도입하고자 하는 분
 기존 아키텍처를 유지하면서 서비스를 개선하는 과정이 궁금하신 분 등
 
 목차는 아래와 같습니다.
  개요
 도입 배경
 Spring Session
 아키텍처
 코드로 살펴보는 개선 과정
 해치웠나?
 마무리
 
 개요
 줌인터넷의 회원 서비스는 분산 환경에서...


Tuist 도입부터 적용까지 알려ZUM요! (feat. 모듈화)
Wed, 24 May 2023 00:00:00 +0000
 
  안녕하세요 ZUM iOS개발자 김남수(Enes)입니다.
 ZUM에서는 Tuist를 어떻게 도입하게 되었는지, 어떻게 사용하고 있는지와
 Tuist를 적용한 프로젝트를 개선한 경험을 공유하고자 합니다.
 가이드 없이 맨땅에 시작한 Tuist와 모듈 아키텍쳐 학습을 기반으로 설계하고 개발한 경험을 공유하는 글이여서 부족한 부분이 있을 수 있습니다.
 편하게 읽어주시면 감사하겠습니다 :)
 
 Tuist 란?
 Xcode 프로젝트 생성과 유지관리를 편리하게 하는 것을 목표로 하는 CLI 도구입니다.
 Project.swift파일을 기반으로 프로젝트(.xcodeproj)를 생성해 줍니다.
 이 파일에 프로젝트의 설정값을 정의하면 프로젝트 생성 시 정의한 설정값으로 생성됩니다.
 이를 통해 프로젝트 설정값을 실수로 건드려서 일어날 에러를 방지할 수 있습니다.
 Tuist 도입
 사실...


Next, d3로 서버 사이드 지도 렌더링하기
Thu, 18 May 2023 00:00:00 +0000
  
 안녕하세요! 프론트엔드개발팀 신입 개발자 백도훈입니다.
 줌인터넷 입사 이후에 약 5주동안 진행한 파일럿 프로젝트 진행 과정에 생긴 고민들과 해결 과정을 공유하려고 합니다.
 목차
 1. 개요 2. 기술 스택 3. 디자인 4. 기능 5. 프로젝트 설계 6. 기술적 고민 7. 마치며 
 
 1. 개요
 주제
 이번에 진행한 파일럿 프로젝트의 주제는 부동산 데이터 시각화입니다.
 Next.js, 차트, 시각화 라이브러리 등 실무에 필요한 기술 역량을 강화하는것이 이번 프로젝트의 목표입니다.
 요구 사항
  지역/기간 선택에 따라 변동률 데이터가 변경되어야 합니다 ...


Redirect 서버 리팩토링 - 파일럿 프로젝트
Tue, 14 Feb 2023 00:00:00 +0000
 
 
  안녕하세요. 포털개발팀 포털백엔드 개발파트의 박정현(Kate) 입니다. 
 파일럿 프로젝트로 URL 리다이렉트 서버 레거시 시스템 개선 및 AWS 로 이관하는 업무를 맡게 되어 관련 내용을 공유드리려고 합니다.
 
 
 목차
 1. 프로젝트 설명 1-1. Intro 2. 전체 구성도 2-1. AS-IS 2-2. TO-BE 3. 파일럿 프로젝트 진행(1) - 설계 3-1. 기술 스택 3-2. 개발 일정 3-3. 목표 3-4. 전체 기능 리스트 및 엔티티 구조 4. 파일럿 프로젝트 진행(2) - 클릭 요청 API 4-1. Cache 4-2. Log 4-3. push API 와 연동 5. 추가...


FCM 푸시 파헤치기
Mon, 06 Feb 2023 00:00:00 +0000
 
 안녕하세요 현재 줌인터넷 핀테크 개발팀 서버개발자로 근무하고있는 김의빈입니다.
 이번 포스팅에서는 입사 이후 진행하였던 파일럿프로젝트에 대한 회고와 FCM의 푸시에 대한 이야기를 풀어내 보려고합니다. 해당 글의 내용이 처음 푸시를 접하시는 분들이나 현재 구현을 진행중이신 분들에게 도움이 될 수 있도록 한번 정리해보았습니다. 😊
 이번 포스팅에서 알아갈 수 있는 내용은 전반적으로 다음과 같습니다.
  푸시란 무엇일까?
 FCM의 TOKEN, TOPIC 정의와 이해
 Spring Boot를 활용한 FCM을 적용사례 참고
 통합 푸시서버를 만들기 위한 서버내 앱관리 방법
 푸시 발송 방법과 종류
 FCM의 한계점
 
 목차
  시작
 푸시컴포넌트 
 2.1 푸시란 무엇일까? 
 2.2 FCM 이란?...


OOP 기반 선착순 투표 시스템 아키텍처
Tue, 01 Nov 2022 00:00:00 +0000
 
  안녕하세요. 저는 Trading Platform팀 Backend 엔지니어로 근무하고 있는 현건수(Pir)입니다. 이번에 투표시스템을 맡게 되어, 일반 투표와 선착순 투표시스템 그리고 앞으로 확장적으로 늘어날 투표 시스템 아키텍처에 대해 OOP 기반으로 구성한 것을 공유하려고 합니다.
 
 목차
  투표 시스템 요구사항
 투표 시스템 아키텍처 요구사항
 투표 시스템 아키텍처 
 3-1. 확장적인 투표 아키텍처 
 3-2. 선착순 투표 아키텍처
 코드로 보는 투표 시스템 
 Step 1. 투표 타입 선택 
 Step 2. 투표 타입 구현체 
 Step 3. 선착순 투표 동시성 제어
 테스트
 마치며
 
 1. 투표 시스템...


WorkStory - 개발자와 함께 성장하는 줌인터넷, 김태기 CTO님 편
Sun, 23 Oct 2022 00:00:00 +0000
 줌인터넷에는 혁신적이고, 사용자의 입장에서 더욱 쉽고 편리하게 콘텐츠 경험을 제공할 수 있도록 끊임없이 고민하는 개발자분들이 계십니다. 빅데이터팀, 핀테크개발팀, 포털개발팀, 부설 연구소 그리고 인프라 보안팀까지! 같은 개발실이지만 업무와 역할이 팀마다 천차만별인데요. 줌인터넷의 개발자분들은 어떻게 업무를 하고 있는지 또 맡고 계신 업무의 영역은 무엇인지 미래의 개발자분들과 줌인터넷에서 일하고 싶어 하시는 개발자분들의 궁금증을 말끔하게 해소할 만한 콘텐츠를 준비해 보았습니다. 줌인터넷에서 가장 열정적이시고, 최근 사내 이사님으로 선임되신 실력파 개발자이십니다. 줌인터넷 개발실 업무를 총괄하고 계시는 김태기 CTO님입니다!
 
   
 
 김태기 CTO : 안녕하세요, 줌인터넷에 근무한 지 6년 차로...


검색 데이터 서빙 플랫폼 구축
Fri, 25 Mar 2022 00:00:00 +0000
  
  사용자에게 검색 서비스를 제공하려면 검색 대상이 될 문서에 대한 색인(indexing) 과정과 사용자가 요청하는 쿼리(query), 즉 검색 내용에 대해 일치하는 결과 문서를 제공해야 합니다. 이때 사용자에게는 언제든지 문제 없이 실시간 서비스를 제공해야 합니다. 이러한 검색 서비스를 제공하기 위해 진행했던 개발 과정에 대해 소개합니다.
 
 
 1. 프로젝트 개요
 본 프로젝트는 줌인터넷 신규 입사자로서 진행했던 파일럿 프로젝트로 주요 목적은 검색 대상 문서에 대해 색인하여 서빙하는 플랫폼을 구축하고 사용자가 요청하는 쿼리에 대해 적절한 문서를 검색할 수 있는 서비스를 제공하는 것 입니다.
 요구사항
 1. Solr 검색엔진 서버...


BentoML 을 활용하여 딥러닝 모델 API 서빙하기
Mon, 21 Feb 2022 00:00:00 +0000
  
  안녕하세요. 부설연구소 & 빅데이터팀 Data Intelligence 파트의 류혜정입니다. 최근 줌포털 투자탭에 적용하기 위해 개발한 ‘투자줌 뉴스 카테고리 분류 모델’을 BentoML 로 패키징하여 서빙한 경험에 대해 공유하고자 합니다. 😇
 
 0. 모델 배포와 서빙을 더 효율적으로
 
 BentoML 의 공식 깃허브에서는 BentoML 을 아래와 같은 한 문장으로 소개하고 있습니다.
 “BentoML enables users to create a machine learning powered prediction service in minutes and bridges the gap between data science and DevOps.”
 이 중에서도 “bridges the gap between data science and DevOps” 부분이 핵심이 아닐까...


댓글 모듈 레거시 걷어내기 with TDD
Thu, 06 Jan 2022 00:00:00 +0000
  
  안녕하세요, 포털개발팀 프론트파트의 신입 개발자 김선규 입니다. 이번 글은 파일럿 프로젝트로 진행하게 된 줌인터넷 댓글 모듈 개선과정에 대한 내용입니다.
 
 TL;DR
  JavaScript, jQuery 기반으로 이루어진 댓글 모듈 → Vue, TypeScript 로 개선
 TDD(테스트 주도 개발)로 프로젝트를 진행
 댓글 모듈 컴포넌트 사내 라이브러리 배포
 
 
 줌 소셜 댓글 모듈
 현재, 줌인터넷의 서브 도메인(투자, 뉴스, 허브 등)은 모두 사진과 같은 댓글 모듈을 통해서 댓글을 입력하고 답글을 달게 됩니다.
 
 문제점
 여러 가지...


AWS DynamoDB 모델링
Mon, 20 Dec 2021 00:00:00 +0000
 DynamoDB를 소개하며 RDBMS ERD기반 설계에서 DynamoDB로 Reverse Modeling하는 방법을 공유합니다.
 
 
 1. DynamoDB 도입 배경
 
 현재 스타트줌(https://start.zum.com/)에서 개인 별 배경화면 / 레이아웃 / 위치설정 / 사이트 바로가기를 설정할 수 있습니다.
 해당 데이터들은 브라우저 로컬 스토리지에 저장되어서 페이지가 렌더링 될 때 로컬 스토리지의 데이터를 읽어서 렌더링하고 있습니다. 그렇기 때문에 타PC나 다른 기기로 접속할 경우 개인화 데이터를 재설정해야한다는 불편함이 있습니다.
 
 줌은 개방형 포털이라는 슬로건을 가지고 있는 플랫폼이기 때문에 줌을 통해서 다양한 컨텐츠가 제휴될 수 있고 연결 시켜주는 특징이 있습니다....


Zum Portal Core JS 소개
Mon, 06 Dec 2021 00:00:00 +0000
  
  본 포스트는 줌인터넷 포털개발팀 프론트엔드 파트에서 사용되고 있는 표준화 core package 에 대해 다루고 있습니다.
 
 안녕하세요! 다시 한 달 만에 블로그 포스트를 작성하게 되었습니다. 이번에는 저희 프론트엔드 파트에서 사용하고 있는 zum-portal-core-js에 대해 다뤄볼 생각입니다. zum-portal-core-js 는 서비스를 만들 때 필요한 Frontend config와 uilts, 그리고 backend config 및 utils를 추출하여 관리하고 있는 패키지입니다. 줌인터넷 프론트엔드 파트가 하는 업무도 홍보할겸, 그리고 파트에서 사용중인 기술스택에 대해 상세히 다뤄본적이 없어서 이렇게 포스트를 작성하게 되었습니다.
 zum-portal-core-js는 현재
  줌프론트
 모바일줌
 금융줌
 

NestJS Custom Caching Decorator 만들기
Thu, 11 Nov 2021 00:00:00 +0000
  
  본 포스트는 NestJS에 호환 되는 Caching Decorator 를 만들기 위한 삽질 과정을 담고 있습니다.
 
 안녕하세요! 약 한 달 만에 기술블로그에 투고를 합니다. 조금 더 자주 해야 할텐데.. 글쓰기는 항상 어렵네요 😭
 줌인터넷 프론트엔드 파트는 프론트 서버에서 NestJS를 사용합니다. 정확히는 NestJS를 이용하여 Backend Core Package를 별도로 구성하여 사용하고 있습니다. 이에 대한 내용은 다음에 제대로 다루도록 하고, 최근에 NestJS의 컨테이너에서 작동하는 Custom Decorator를 만들었는데 이건 꼭 공유해야겠다고 생각하여 최대한 빠르게 글을 작성하게 되었습니다.
 0. 불편함을 감지하기
 처음에 언급한 것 처럼, 팀 내에서...


Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
Fri, 01 Oct 2021 00:00:00 +0000
  
 안녕하세요, 줌인터넷 포털개발팀 프론트엔드 파트리더 황준일입니다 🙇‍♂️
 오랜만에 기술블로그에 투고를 하네요. 어떤 글을 주제로 글을 작성해야 유익할까 꽤 오랜 시간 동안 고민을 했습니다. 이번에는 제가 실무를 하면서 생각보다 꽤 많은 삽질을 했던, SSR(Server Side Rendering)을 주제로 다뤄보도록 하겠습니다.
  본 포스트는 모바일 줌 SpringBoot → NodeJS 전환기 (feat. VueJS SSR)을 먼저 읽어보면 더 유익합니다.
 
 1. SSR(Server Side Rendering)이란?
 이 글을 읽고 있는 많은 분들이 SSR에 대한 개념은 이미 숙지하고 있으리라 생각합니다. 그럼에도 불구하고 한 번 SSR의 개념적인 부분을 정리해보겠습니다.
 (1) 무엇(What) 인가
 저는 웹...


INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)
Wed, 21 Jul 2021 00:00:00 +0000
 파일럿 프로젝트 
줌인터넷 서비스개발팀 프론트엔드 파트 주니어 개발자들(재민, 도경, 정훈)이 수습 기간 동안진행했던 파일럿 프로젝트 입니다. 진행된 프로젝트는 GitHub 레포지토리에서 확인하실 수 있습니다.
 
   
 목차
   프로젝트 개요
 1.1 프로젝트 주제
 1.2 요구사항
 1.3 프로젝트 기능소개
 
  협업 방법
 
  프로젝트 구조
 3.1 프로젝트 전체 구조
 3.2 패키지별 구조
 3.3 Backend 구조
 3.4 Frontend 구조
 3.5 common 구조
 
  기술적 고민
 4.1 재민 님의 고민
 4.2 도경 님의 고민
...


주니어 프론트엔드 개발자의 채용 프로세스 참여 후기
Thu, 01 Jul 2021 00:00:00 +0000
 본 포스트는 기술적인 내용이 아닌, 주니어 개발자인 필자가 함께 일하게 될 신입 개발자 분들을 모시는 과정에 대해 소개하는 글입니다.
 
   
 1. 변화, 그리고 모집
 올해 들어 줌인터넷에는 굉장히 많은 변화가 있었습니다. 먼저 줌 닷컴의 대대적인 개편이 있었습니다. Spring Boot 로 작성 된 레거시 프로젝트를 버리고, nodejs + vuejs 를 적용하면서 거의 모든 것을 갈아엎었습니다.
  개편 전 줌닷컴
 
 
  현재 줌 닷컴
 
 
 그리고 줌 닷컴의 개편을 시작으로 뉴스줌도...


Quartz Scheduler Admin 고도화 - 파일럿 프로젝트
Mon, 25 Jan 2021 00:00:00 +0000
 개별 서비스에 직접적인 영향은 없으나 서비스 유지보수에 도움이 되는 Quartz Scheduler Admin 에 대한 고도화 작업을 진행함으로서 실무 투입전 포털개발팀에서 사용하는 기술 스펙 적응 및 업무 프로세스 등을 익히고 파일럿 프로젝트 이후에도 계속 사용할 수 있는 산출물을 남김으로서 팀에 기여 하고자 하였습니다.
 
 Intro
 Quartz Scheduler Admin 이란?
 
 Quartz Job Scheduler 는 DB 기반으로 스케줄러 간의 클러스터링 기능을 제공합니다.  Quartz Scheduler Admin 은 Quartz Job Scheduler 의 DB 관리를 위한 Admin 입니다.
 배경
 
 기존에는
 Common Scheduler DB 안에 모든 서비스의 Job Scheduler 를...


크롬 확장프로그램 개발⛏️ 회고
Fri, 11 Sep 2020 00:00:00 +0000
안녕하세요! 최근에 포털개발팀에서 Zum NewTab 이라는 크롬 확장프로그램을 만들었습니다. 4월부터 8월까지의 확장프로그램을 개발, 배포, 검수하는 과정에서의 삽질한 경험을 공유하고자 이렇게 글을 올립니다.
 
 1. 프로젝트 개요
 크롬 확장프로그램
 확장프로그램은 사용자의 브라우징 경험을 긍정적으로 확장시킬 수 있는 작은 소프트웨어입니다. 이를 통해 사용자는 브라우저의 기능과 동작을 개인의 필요 또는 선호도에 맞게 조정할 수 있습니다.
 확장프로그램 개발은 HTML, JavaScript 및 CSS와 같은 웹 기술을 기반으로 이루어지며, Chrome 개발자 대시 보드를 통해 배포할 수 있습니다. 이에 대한 내용은 뒤에서 자세하게 다루도록 하겠습니다.
 배포가 완료되면 Chrome 웹 스토어에서 다운로드할 수 있습니다. 앱 개발과 많은 부분에서 유사합니다.
 * 참고: https://developer.chrome.com/extensions...


모바일 줌 SpringBoot → NodeJS 전환기 (feat. VueJS SSR)
Sat, 20 Jun 2020 00:00:00 +0000

 정말 오래간만에 기술 블로그에 글을 작성하는 것 같습니다.
 이 글을 쓰기 약 3개월 전인 03월 26일 모바일 줌 프로젝트는 내부적으로 다시한번 큰 변화를 맞았습니다. 어플리케이션의 언어와 운영환경을 변경한 것인데, 팀 내에 공유했던 자료와 완료 보고에 사용했던 자료들을 이용해 저희 팀이 어떤 선택을 했고 왜 그런 선택을 했는지, 또 어떤 성과를 보였는지 공유하고자 합니다.
 들어가며
  모바일 줌 (m.zum.com)
 모바일 줌은 줌 인터넷에서 제공하고 있는 모바일 포털 서비스입니다.
 모바일 줌은 Spring Boot 백엔드에 Vue.js 프론트엔드를 이용한 프로젝트로 운영되고 있었고, 이번 작업을 통해 백엔드로 Node.js를 사용하는 AWS 도커...


NeurIPS 2019 논문 통계
Thu, 27 Feb 2020 00:00:00 +0000
 2019년도 NeurIPS 학회의 논문 통계를 공유합니다
 
 본 문서는 2019년 12월에 개최되었던 NeurIPS 2019(the Thirty-third Conference on Neural Information Processing Systems)에 게재된 논문들의 각종 통계 수치를 분석한 글입니다.
 
 Introduction
 NeurIPS는 세계 최고 권위의 인공지능 학회로, 1987년부터 매해 컨퍼런스를 개최하여 2019년 12월에는 캐나다 밴쿠버에서 33번째 컨퍼런스를 개최하였습니다. 해마다 폭넓은 범주의 AI 관련 연구 논문들이 게재되고 있으며 특히 NeurIPS 2019에서는 deep learning, reinforcement learning, probabilistic methods, biology 등 매우 다양한 분야에서 총 1428 편의 논문이 게재되었습니다. 본 포스팅에서는 논문 내용에 대한 분석이 아닌, 논문들의 각종 통계 수치에 대한 분석을 다루었습니다.
 NeurIPS의 시작과 현재
 NeurIPS는...


주제별 영상 제공 웹 서비스
Mon, 20 Jan 2020 00:00:00 +0000
 파일럿 프로젝트
 줌인터넷 포털개발팀의 주니어 개발자가 수습 기간 동안 진행하는 파일럿 프로젝트입니다.
 
 1. 프로젝트 개요
 프로젝트의 목표, 개발 스펙, 그리고 기본적인 기능들에 대해 소개합니다.
 목표 및 의의
  모바일 웹 서비스 페이지 개발
 외부 API를 이용한 데이터 획득 및 정제
 Vue.js로 front-end 구성
 
 front-end
  Vue-cli3(Webpack 4)
 Terser Webpack plugin
 SCSS, Lodash, Swiper
 
 back-end
  Java8 이상
 Spring Boot + Gradle
 Spring Data JPA (선택, DB는 H2사용)
 Ehcache
 Pebble Template Engine (선택)
 
 기타
  UI 디자인/구성 자유
 SSR, Prerendering 적용 필요 없음
 브라우저 스펙 관련 처리(ex. BF 캐시) 필요...


Amazon MQ의 Virtual Topics를 활용한 (Pub-sub)메시지 로드밸런싱
Thu, 12 Dec 2019 00:00:00 +0000
서비스 간 컨텐츠 동기화를 위해 사용하던 AWS SQS를 AmazonMQ로 마이그레이션하면서,
 AmazonMQ(ActiveMQ)의 Topic을 이용한 Pub-Sub 방식의 메시지 브로커를 구성했습니다.
 하지만 모든 Subscriber에 같은 메시지가 전달되기 때문에 메시지 중복처리 문제가 발생했는데요.
 이 문제를 ActiveMQ의 Virtual Topics 를 활용하여 해결한 과정을 소개합니다.
 목차
   Queue 방식과 Topic 방식 개념 이해
 기존 상황
 변경된 상황
 AmazonMQ(ActiveMQ) 마이그레이션
 문제 발생
 해결 방안 1 - Batch 서버를 1대만 사용
 해결 방안 2 - UUID 사용
 해결 방안 3 - Virtual Destinations 활용
 Virtual Topics 개념 이해
 Virtual Topics 적용 결과
 Virtual Topics 사용 방법 (with Spring Boot)
 추후 고려할 사항들...


셀럽 NOW - 딥러닝 기반의 연예 뉴스 분석 시스템
Mon, 04 Nov 2019 00:00:00 +0000
 줌닷컴의 이미지 검색 서비스, 셀럽 NOW의 뉴스 분석 시스템을 소개합니다!
 
 목차
  Intro
 Query 문서 탐색
 중복 이미지 제거 및 연관 이미지 클러스터링
 뉴스 문서 정렬
 결론
 Reference
 
 들어가기 전에
 본 문서는 최근 줌닷컴에 런칭된 서비스 “셀럽NOW” 에 대한 내용을 다루기 위해 작성된 글입니다. 셀럽NOW는 유명 연예인들의 뉴스와 사진을 고품질 이미지 순(그리드) 또는 최신 이벤트 순(타임라인) 으로 제공하여 포털 사용자에게 더 높은 수준의 검색 결과를 보여줌으로써 서비스 만족도를 높일 수 있는 시스템입니다.
 시스템 개발에는 최신 딥러닝 기술(face detection, semantic segmentation, image classification, image quality assessment) 뿐만 아니라 자연어 처리(NLTK, 문장분리, 구문분석, 인명사전, 대표인명 추출) 및...


Webpack dev server를 이용한 개발 환경 구성 Part2
Mon, 01 Jul 2019 00:00:00 +0000
 Part1에서는 JS파일을 이용한 프론트엔드 단독 개발 모드 publish 모드에 대해 설명드렸고, Part2에서는 리버스 프록시를 활용하여 백엔드와 연동하는 dev 모드에 대해 설명드립니다.
 이번 예제도 Webpack4, Vue-CLI2, Axios를 이용합니다.
 
 다시 들어가며…
 Part1에서 설명드린 publish 모드는 개발 편의성을 위한 설정에 가까웠습니다. 이미 많은 개발자들이 하고 있었던 방식일 것이구요.
 Part2에서는 조금 색다른 내용을 소개합니다. 일반적인 백엔드 개발 환경과 마찬가지로 페이지를 이동하고 API를 호출할 수 있지만, Webpack Hot Reload 또는 Hot Module Replacement를 적용하여 수정 사항이 바로 적용하는 개발 모드입니다.
 ‘dev 모드’가 필요한 이유
 이제 많은 사이트가 SPA로 만들어지고 있습니다. 한 도메인당 하나의 웹앱이라고 볼 수 있을...


Webpack Dev Server를 이용한 개발 환경 구성 Part1
Mon, 01 Jul 2019 00:00:00 +0000
 Part1에서는 프론트엔드 단독 개발 모드를 구성하는 방법을,
 Part2에서는 백엔드 연동 개발 모드를 구성한 방법에 대해 공유합니다.
  설명드릴 예제 코드는 Webpack4, Axios를 이용합니다.
 
 
 목차
  들어가기 전에
 도입 배경
 NPM 스크립트 소개
 각 모드별 구성 방법
 4-1. publish 모드
 4-2. dev 모드
 정리
 마치며
 
 1~4까지는 Part 1, 5~7은 Part2로 나누어 설명을 진행하겠습니다.
 1. 들어가기 전에
 최근 Github 트렌드 Javascript를 보면 번들링 툴은 Webpack이 압도적인 자리를 차지합니다. 많은 프레임워크와 라이브러리가 이미 Webpack을 기반으로 하고 있고, 계속된 업데이트로 기능을 더해나가고 있기 때문일 것입니다.
  웹팩은 언제까지...


알람 서비스 - 파일럿 프로젝트
Wed, 05 Jun 2019 00:00:00 +0000
 짧지만 강렬했던 파일럿 프로젝트 이야기
 
 소개
 안녕하세요. 해당 글은 제가 지난 4주간의 파일럿 프로젝트를 진행하면서 경험했던 것들에 대해 이야기하고자 합니다.
 1. 파일럿 프로젝트 시작
 줌인터넷에 들어오면, 실무에 바로 투입시키지 않고 파일럿 프로젝트라는 것을 진행합니다. 특정한 주제를 선정하고 이후에 주어진 기술스택과 기능스펙을 가지고 하나의 서비스를 만드는 것인데, 저 또한 파일럿 프로젝트를 진행하게 되었습니다.
 저에게 주어진 주제와 기술스택 및 기능스펙은 아래와 같습니다.
 2. 알림 시스템 만들기
 알림 시스템을 듣자마자 머릿 속에 떠오르는건, 유튜브 알림이 떠올랐습니다. 평소 유튜브를 자주 보고 듣는데, 내가 구독한 채널의 채널장이 스트리밍을 한다거나 혹은 새롭게 영상을 업로드하면 구독하고 있는 구독자에게 알림이 오는 모습을 생각했습니다....


게시판 CMS - 파일럿 프로젝트
Wed, 05 Jun 2019 00:00:00 +0000
 입사일부터 일주일간 세팅 및 적응기간을 마치고 팀에서 실무를 하기 위한 전반적인 웹 기술들을 숙지하고자 하는 목적을 가지고 4주간 파일럿 프로젝트를 진행하였습니다. 이 글에서는 제가 파일럿 프로젝트를 진행할 때 사용한 기술들 , 진행하면서 어려웠던 점을 어떻게 해결하였는지 , 프로젝트를 마친 뒤 느낀 점에 대해 공유하고자 합니다. 
 
 1. 프로젝트 주제
 제가 전달받은 프로젝트 주제는 소셜 로그인을 이용한 게시판 서비스 및 CMS시스템 구현이었습니다. CMS라는 용어를 들어보기는 하였지만 정확히 어떤 의미를 가지고 있는지 몰라 우선 CMS가 무엇인지 찾아보았습니다. 
  CMS
 Contents Management System 즉 콘텐츠 관리 시스템의 약자이다.
 시스템에서 제공되는 각종 정보나 그 내용물들을 관리하는 통합...


개발 컨텐츠 공유 서비스 - 파일럿 프로젝트
Mon, 22 Apr 2019 00:00:00 +0000
 제가 줌인터넷 포털개발팀에서 일하고 싶었던 이유 중 하나가
 바로 신입사원 파일럿 프로젝트 였습니다.
 신입 개발자 혼자서 주어진 주제와 기술들로 프로젝트를 진행하고,
 함께 일 할 동료들로 부터 코드 리뷰를 받고 개선하는 과정을 꼭 경험해보고 싶었기 때문입니다.
 
  이 글을 통해 지난 6주간 신입 개발자로서 파일럿 프로젝트를 진행한 과정과 결과, 느낀 점을 공유하고자 합니다.
 
 1. 파일럿 프로젝트 주제
 저에게 주어진 파일럿 프로젝트 주제는 개발 컨텐츠 공유 서비스였습니다.
 유익한 개발 블로그 글이나 영상을 팀원들간에 공유할 수 있는 서비스를 만드는 것이었습니다.
 (완성된 서비스의 메인 페이지) 
 처음 파일럿 프로젝트...


카페 형식 게시판 구현 - 파일럿 프로젝트
Fri, 19 Apr 2019 00:00:00 +0000
줌인터넷에는 “파일럿 프로젝트” 라는 좋은 개발 문화가 있습니다. 신입 개발자들이 실무에 들어가기 전 전반적인 웹 서비스 개발 기술을 숙지하고 개인 및 업무 역량을 강화할 수 있도록 도와주는 것이죠.
 파일럿 프로젝트를 통해서 앞으로 사용할 기술에 대한 두려움을 없앨 수 있었고 실무에서 수도 없이 많이 마주하게 될 문제들을 미리 경험해보면서 스스로 해결할 수 있는 능력을 강화시키고 위기를 극복함으로써 개발에 대한 자신감을 얻을 수 있었습니다.
  [목차]
  개요  프로젝트 주제 및 개발 스펙
 프로젝트 상세 기능
 
 
 Project Architecture
 FrontEnd  VueRouter 구성
 컴포넌트 구성
 Vuex, 상태 관리 도구
 
 
 BackEnd  사용자 인증 과정
 접근 권한 제어...