Vue.js와 D3.js를 사용하여 대시보드 만들기 Part1
Vue.js(이하 Vue)는 간편하게 웹 애플리케이션을 만들 수 있는 프론트엔드 프레임워크입니다. Vue를 사용하는 사람들 사이에선 인기가 높은 프레임워크이지만, 아무래도 React에 비해 인지도 및 사용자 수에서 많이 뒤떨어지는 것이 사실입니다. D3.js(이하 D3)는 'Data-Driven Document'의 약어로써(DDD -> D3), 웹 브라우저상에 여러 데이터 시각화 기능을 제공하는 자바스크립트 라이브러리입니다. 데이터 시각화 라이브러리는 다른 여러 가지가 있지만, 높은 자유도를 바탕으로 여러 신기한 차트를 표현할 수 있는 라이브러리는 D3 외에는 없습니다. 다만, 비교적 저수준의 기능을 다루기에 러닝 커브가 있는 편이고 적극적으로 사용하는 사용자가 많다고 하기는 힘든 실정입니다. 이렇게 ..
FrontendTools
전체 읽기 →Gmarket Mobile Web Vip 레거시 성능 개선기
안녕하세요 VI Engineering 팀 김윤제입니다. 저는 현재 Gmarket Mobile Web Vip(View Item Page = 상품 상세)를 담당하고 있는 Backend Engineer 입니다. 올해 6월 Gmarket Mobile Web Vip Backend 쪽의 성능을 최대 9배, 평균 5배를 개선하였습니다. 개선 직후 BXE 실 & 팀장님께 발표를 하고 회사 블로그에 글을 작성해야지 하면서 미루다가 지금은 어느덧 12월이 되었네요. 작업을 시작했을 때만 생각해도 막막했었는데 성공적으로 끝내니 그 기분은 이루 말할 수 없습니다. 자세한 이야기는 아래에서 상세히 다루도록 하겠습니다. View Item Page 성능개선 설명에 앞서 제가 맡고 있는 Vip (View Item Page) 파트에 ..
BackendMobileTools
전체 읽기 →Kotlin에서 리스트 추출하기 : subList, slice, take, drop
안녕하세요, Shopping Service API팀 강희정입니다. 이번 글에서는 Kotlin에서 리스트를 추출하는 메서드에 대해 다뤄보고자 합니다. 비교적 가벼운 내용이긴 하겠지만, 비슷하면서 다른 기능을 하는 메서드들을 정리해야 할 필요가 있다고 생각되어 글을 작성하게 되었습니다. Kotlin을 사용하는 사람들은 대부분 프로그래밍을 처음 접해보는 사람들이 아니라 다른 언어, 특히 Java를 주 언어로 사용하던 사람들일 텐데요, Java 개발자라면 리스트의 부분 리스트를 구해야 할 때 자연스레 subList 메서드를 사용해야겠다! 라는 생각이 드리라 예상됩니다. 실제로 subList는 Kotlin에서 지원하는 메서드기에, Kotlin에 익숙하지 않은 Java 경력의 개발자들은 한 치의 의심도 없이 sub..
BackendTools
전체 읽기 →개발자의 DIY: Github Pages로 나만의 모바일 초대장 제작하기
안녕하세요.지마켓 Seller & SD Engineering팀 김민우입니다. 며칠 전 어머니께서 대뜸 저에게 미니 전시회를 열 거라고 하시며 팜플렛을 만들었는데, 혹시 모바일로 만들어서 전달하는 게 가능한지 물어보시더군요. '아니, 저 백엔드 개발자라서 이런거 몰라요' 라는 생각이 머릿속을 스쳤지만, 필자는 어쩌다 보니 이런 기술적인 요청에도 반응하는 효자가 되었습니다. 그렇게 주말을 초대장 만드는데 보내게 되었고, 그 경험을 공유하고자 합니다. 요점부터 말씀드리자면, 방법은 html을 만들고 이를 Github Pages를 활용하여 정적페이지를 무료로 호스팅하는 것입니다. (즉, 프론트 서버만 해당됩니다. 백엔드 서버의 무료 배포 및 호스팅은 Github에서 제공하지 않습니다.) 1. Github..
FrontendMobileTools
전체 읽기 →Browser Fingerprint의 동작 원리와 운영시 예상되는 이슈
사용자 식별은 비즈니스의 중요한 역할을 담당합니다. 사용자를 식별함으로써 개인 맞춤형 화면 및 광고를 제공할 수 있고, 부정거래나 어뷰징 유저를 탐지할 수도 있습니다. 다만, 사용자 식별은 우리 생각만큼 쉽지 않습니다. 로그인을 하지 않고 서비스를 이용하는 경우 사용자의 로그인 정보를 확보할 수 없습니다. 사용자가 쿠키를 지웠거나 시크릿 모드로 접속한다면 쿠키의 도움을 받을 수도 없습니다. 전통적으로 사용자 식별은 쿠키에 의존하였고, 아직도 쿠키를 이용하는 경우가 많습니다. 하지만 점점 높아지는 개인정보 보호에 대한 요구와 이에 따르는 쿠키 정책 변경으로 인해 쿠키 외의 대안을 생각해 볼 필요가 있습니다. "쿠키리스 시대의 도래...", 미디어오늘, 2023.08.19 기사 링크"개인정보보호 소송에 시달..
BackendSecurityTools
전체 읽기 →statements 가 있는 switch/when 구문 deep dive (feat. bytecode)
안녕하세요. Mobile Application 팀 전계원입니다. G마켓 앱에는 Firebase Analytics 가 연결되어 있어서, 앱 크래시 이슈가 발생하면 Firebase Analytics 를 통해 확인해 볼 수 있습니다.그리고 Firebase 를 통해 보고된 버그를 분석하고 수정하는 과정에서 "Java 에서 String 으로 switch 를 사용하는 것이 if-then-else 로 작성할 때 보다 성능적으로 더욱 이점을 띤다"는 사실을 알게 되었습니다. 단순하게 보았을 땐 switch 와 if-then-else 가 동일한 로직일 것 같은데 어떻게 성능적으로 더 이점을 띄는지 궁금해졌습니다. 본 글을 통해 바이트코드를 직접 읽어보며 switch 가 더욱 효과적인 이유를 알아가보고, kotlin 의 ..
BackendMobileTools
전체 읽기 →Xcode 15 의 iOS 17 빌드에서 User Agent 가 원하는 값으로 설정되지 않을때 (feat. iOS 버전별 WebKit 버전과 작업 내역 확인하기)
들어가기 전에안녕하세요 Mobile Application Team iOS 개발자 강수진입니다. 오늘은 - Xcode 15로 빌드한 iOS 17에서 웹 뷰의 User Agent 가 원하는 값으로 설정되지 않는 이슈와 - 원인으로 추정되는 커밋 내역이 iOS 17부터 반영된 게 맞냐!를 추적해 가는 여정을 떠나 보도록 하겠습니다..ㅋㅎ 그럼 같이 가보져!!문제의 시작..Xcode 15.0 이 9월 18 일 (Beta 8과 RC 1을 거쳐) 릴리즈 되었습니다 👏🏻👏🏻👏🏻그러면 우리 서비스도 문제가 없나 한번 돌려봐야겠죠? Xcode 15로 iOS 17 빌드 가보자고~~~!네? ㅠ 역시 우리의 금쪽이 엑스코드에서 한 번에 잘 될 리가 없죠? 앱에서는 자체적인 native header ..
FrontendMobileTools
전체 읽기 →오픈마켓에서 여행 플랫폼으로 살아남기 (feat. msa)
0. 들어가며 안녕하세요. Vertical Engineering 팀에서 백엔드 엔지니어로 일하는 이지민입니다. 지마켓에서는 지난 7월에 실시간 가격비교가 가능한 렌터카 예약 서비스를 출시했습니다. 본 글을 통해 지마켓 내에서 신규 여행 플랫폼을 구축하면서 고민했던 점들을 공유드리고자 합니다. 글은 먼저 오픈마켓에서 여행 도메인이 지닌 어려움을 소개한 후, 이를 해결하기 위해 적용한 MSA 패턴을 살펴보는 순으로 진행하겠습니다. 1. 오픈마켓에서 여행 플랫폼의 특징 오픈마켓에서 여행 상품을 판매하는 것은 배송 상품과 비교했을 때, 크게 3가지가 다릅니다. 예약을 대행한다. 예약은 시간을 사고파는 것이다. 여행 상품은 상품군에 따라 고객에게 제공하거나, 받아야 하는 정보의 편차가 크다. 이러한 차이점은 개발..
AI/MLArchitectureBackendTools
전체 읽기 →Jetbrains Cool Tips - Part. 1) Handy Hotkeys with Life Hacking Settings
G - reetings, G - market ! This is Minwoo Kim, a developer in Seller & SD Engineering team of Gmarket. After receiving a proposal from my colleague to write an article for our company's official tech blog, with great honor, I determined to pioneer the inclusion of English articles on this platform, showcasing a sophisticated level of expertise and craftsmanship. With the intention to attract int..
FrontendTools
전체 읽기 →G마켓 쿠폰적용가 도입기 - 캐시를 중심으로
안녕하세요. 저는 Club & Discount Engineering 팀에서 지마켓 할인/쿠폰 개발 업무를 맡고 있는 윤영택입니다. 저는 올해 상반기에 G마켓 쿠폰적용가 개발에 참여했으며, 그 과정을 본 포스팅을 통해 나누어보고자 합니다. 들어가며먼저 G마켓 쿠폰적용가 도입 전/후를 직접 눈으로 보면서 비교해보겠습니다.G마켓 쿠폰적용가 도입 전)여러분은 G마켓을 어떤 이유로 사용하시나요? 딱 하나만 뽑자면 단연코 폭넓고 다양한 쿠폰 할인 혜택이라고 할 수 있을 것입니다. 그러나 이와 같은 강점에도 불구하고 소비자들은 온전한 혜택을 누리지 못하고 있었고, 오히려 쿠폰 사용에 있어 불편함을 겪어야 했습니다. 가장 먼저 고객들은 상품 상세 페이지 진입 시 쿠폰을 포함한 할인가를 곧바로 확인할 수 없었습니다. 그..
BackendToolsUX/UI
전체 읽기 →Jenkins 성능 개선 part1 - 캐싱 적용
안녕하세요, 저는 Dev Platform 팀에서 사내 배포 시스템을 담당하고 있는 강대현입니다.이번 포스팅에서는 Jenkins를 이용하고 있는 배포 시스템 개선 경험을 공유하려고 합니다.Jenkins는 Java 기반의 오픈 소스 도구로, 지속적 통합(Continuous Integration, CI)과 지속적 배포(Continuous Delivery, CD) 구축에 사용됩니다. 배경이번 주제는 Continuous Delivery(이하 CD) 과정에 초점을 둔 배포 시스템의 이야기입니다.사용 중인 사내 배포 시스템(이하 배포툴)은 직접 개발한 서비스와 오픈 소스 도구인 Jenkins를 이용하여 CD 파이프라인을 구성하고 있습니다. 배포툴은 웹 UI를 통해 배포 생성 및 승인과 같은 사용자 입력을 처리하며, ..
BackendDevOpsTools
전체 읽기 →API 메시업과 Fault Tolerance 문제 해결 전략
안녕하세요. Shopping Service Backend팀 안재열입니다.저희 팀에서는 여러 팀에서 생성하고 관리한 상품과 관련된 데이터를 적절하게 가공하여 상품 목록 정보를 제공하는 API를 개발하는 업무를 담당하고 있습니다. 이 과정에서 다양한 팀에서 제공하는 다수의 API를 사용하여 한데 묶어주는 메시업(Mashup) 작업활동을 수행하게 됩니다. 그런데 다양한 곳의 API를 엮다보면 예기치 못한 문제가 발생하기도 합니다.이번 글에서는 API 메시업 활동 중에 만나게 되는 문제점과 해결 방안에 관해서 살펴보겠습니다.API 메시업(API Mashup) API는 "Application Programming Interface"의 약자로, 다양한 소프트웨어나 애플리케이션들이 서로 상호작용하게 해주는 도구라고 ..
BackendTestingTools
전체 읽기 →막내 개발자의 Seller PD 생활 - v.2023
안녕하세요! Seller & SD Engineering 팀의 Seller 도메인에서 판매자 회원의 가입, 계정 관리 업무를 맡고 있는3년 차 막내 개발자! 김현진이라고 합니다. 이 글은 같은 팀에 계신 박명훈 님의 '막내 개발자의 Sell POD PD 생활'을 오마주한 글입니다.막내 개발자의 Sell POD PD 생활 보러가기저 글이 인상 깊게 남아 지마켓에 입사하게 된 것이 엊그제 같은데 팀원 분들과 함께한 지 벌써 1년이 다 되어가고 있습니다. 제가 명훈님의 글을 읽고 지마켓에 입사하고 싶다는 마음을 갖게 되었듯이 제 글을 읽고 누군가 "현진님 글이 감명 깊어 입사했습니다. 이렇게 뵙게 되네요!" 하는 말씀을 해주셨으면 좋겠다는 개인적인 바람을 담아 글을 적어 내려가 봅니다. 팀 소개.Seller ..
BackendCareerCulture
전체 읽기 →OS 10 이하에서 Backstack 에 Activity 가 중첩되어 쌓이는 이슈
안녕하세요. Mobile Application 팀 전계원입니다. QA 과정에서 발견된 이슈를 분석하던 중 원인이 OS 에 있어서 발생한 이슈였던 경험이 있었습니다. 원인이 OS 자체에 있다는 점이 신기했던 면도 있었지만, 해당 버그가 OS 10 이하를 지원하는 앱이라면 누구나 겪을 수도 있다는 사실이 인상 깊었습니다. 그래서 많은 분들께 공유드리고자 버그의 원인을 분석하고 해결방안을 찾아갔던 그 당시의 이야기를 작성하였습니다. 0. 프롤로그 - 버그 발견 G마켓에는 QA 부서가 별도로 존재합니다. 그리고 어느 날 QA 담당자분을 통해 재연영상과 함께 이슈를 할당받았습니다. 무엇이 문제인지 알 것 같나요?? 천천히 영상의 상황을 살펴보겠습니다. 옥션에서 새로운 페이지로 이동하였습니다. 그리고 정상적인 상황..
BackendMobileTesting
전체 읽기 →facade API와 Shopping Service API팀에 대한 이야기
들어가기 전에 안녕하세요, Shopping Service API팀 강희정입니다. 제목에서부터 유추 가능하듯이, 이번 글에서는 제가 속해 있는 Shopping Service API팀에 대해 이야기해 보고자 합니다. 약 1년 전에 지마켓에 입사한 이후로, 종종 전 직장 동료들을 만나거나 유사한 업계에 종사하는 다른 친구들을 만날 때 항상 듣던 말이 있었습니다. 물론 지금도 간간히 듣는 말이기도 합니다. Shopping Service API팀? 뭐 하는 팀이야? (과장 없이, 여태까지 만난 사람들 중 무슨 일을 하는 팀인지 맞춘 사람은 단 한 명뿐이었습니다. 여러분들도 어떤 일을 하는 팀인지 맞춰 보세요!) API는 API고 Shopping Service API는 말 그대로 쇼핑과 관련된 정보를 제공해 주는 ..
ArchitectureBackendTools
전체 읽기 →일관적인 에러응답을 달라!
안녕하세요. Seller & SD Engineering 팀에서 판매자 가입, 계정 관리 업무를 맡고 있는 주니어 개발자 김현진입니다. 개발을 빠르게 빠르게 진행하다 보면 놓치게 되는 디테일, 에러 응답 처리 방법에 대한 주제로 글을 써보려 합니다. 에러 응답을 처리하는 방법 Java에서 에러를 처리하는 코드의 기본 구조는 아래와 같습니다. try { ... } catch(예외1) { ... } catch(예외2) { ... } 예외가 발생할 가능성이 있는 코드를 try로 감싸고, 잡아내고 싶은 예외를 catch에 명시해 주는 방식입니다. try로 감싼 코드에서 예외가 발생하지 않았다면 catch 부분의 코드는 그대로 통과됩니다. 하지만 예외가 발생했다면 발생한 예외가 속한 catch 문을 찾아 해당 코드..
BackendSecurityTesting
전체 읽기 →코루틴(Coroutine)에 대하여
안녕하세요. Checkout Engineering 팀 안세희입니다. 코루틴에 대해 많이 들어 봤지만 원론적인 의미에서 코루틴을 이해하기는 어렵다고 생각합니다. 언어 수준에서 다양한 라이브러리가 코루틴을 사용할 수 있게 제공하기에 항상 깊은 고려가 필요하진 않지만, 코루틴에 대한 개념을 정확히 알고 있어야 활용도 가능하기에 해당 주제로 글을 작성하고자 합니다. 코루틴(Coroutine) 이란? 코틀린을 통해 코루틴을 처음 접하시는 분들이 많기에 코루틴이 코틀린 언어에 종속적인 기술이라고 생각하는 분들이 많습니다. 그러나 코루틴은 1958년 코루틴 용어가 만들어지고 난 후 어셈블리 프로그램에서부터 적용되었던 개념입니다. C#, Javascript, Python, Go와 같은 고급 프로그래밍 언어에서도 지원하..
BackendMobileTools
전체 읽기 →Apache Commons IO 취약점 파헤치기
안녕하세요! Platform Technology 팀 홍민지 입니다. 이번 포스팅에서는 현재 진행하고 있는 스프링부트 프로젝트에 적용되어 있던 라이브러리 'Apache Commons IO'에서 발견된 보안 취약점에 대한 이야기를 해보려고 합니다. 1. Open source 와 CVE 다수의 프로그램이 모여있는 Open source, Open source 에서 많이 발견되는 CVE Open source 는 현대 소프트웨어 개발의 핵심 구성 요소로 자리 잡았다고 볼 수 있습니다. 그러나 소스코드가 공개되어 있는 만큼 취약점이 많이 발견되기도 합니다. 2022 OSSRA 보고서에 따르면, 오픈소스는 전 세계적 산업 분야의 프로젝트 97%에 사용되고 있으며, 이 중 81%는 알려진 오픈소스 취약점을 하나 이상 가..
BackendSecurityTools
전체 읽기 →docker-compose를 이용하여 다수의 spring boot 프로젝트 연결하기 (Part 2)
docker-compose를 이용하여 다수의 spring boot 프로젝트 연결하기 Part 1 : docker-compose를 이용하여 로컬 개발환경 구성하기 Part 2 : docker-compose를 이용하여 다수의 spring boot 프로젝트 연결하기 개요 Part1에서 소개한 예제에서는 하나의 git repo로 구성된 java 멀티 프로젝트를 docker-compose를 이용하여 구성했습니다. 이번 Part2에서는 다른 git repo의 어플리케이션을 이용하여 Part1에서 생성했던 backend 서버 어플리케이션과 함께 동작하도록 구성해보겠습니다. 편의상 Part 2의 프로젝트는 frontend로 예제를 작성하였습니다. 개발 블로그에서 소개하는 코드들은 gmarket-techblog-fron..
BackendDevOpsFrontendTools
전체 읽기 →DiffUtil 이해하기
Android DiffUtil 이해하기안녕하세요 Mobile Application 팀 전계원입니다.DiffUtil 은 androidx 패키지에 포함되어 두 리스트 간의 차이를 계산하고, 새로운 리스트로 변경하기 위한 작업목록을 반영하는 것에 도움을 주는 유틸리티 클래스입니다. 현재 G마켓에는 상당히 많은 영역에서 리스트를 업데이트하기 위해 DiffUtil 을 사용하고 있습니다.G마켓에 입사하기 전에는 DiffUtil 에 대해 들어보기만 했지만, 입사 후 G마켓에 적용된 코드를 이해하기 위해 개인적으로 공부를 했었습니다. 이번 글을 통해서 DiffUtil 에 대해 공부한 내용을 공유드리고자 합니다.1. Before DiffUtil - notify 패밀리샘플 코드와 함께 RecyclerView.Adapter..
MobileTools
전체 읽기 →