지마켓

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
RSS로 누구보다 빠르게, 그리고 자동으로 새 소식 가져오기
본 글은 G마켓 테크블로그의 UI 개편 과정을 소개합니다. 티스토리 플랫폼을 기반으로 HTML과 CSS를 직접 수정하는 '스킨 편집' 기능을 활용하여 블로그 디자인을 변경했습니다. 주요 변경 사항으로는 신규 로고 적용, 카테고리 상단 추가, 썸네일 이미지 및 애니메이션을 통한 콘텐츠 가독성 강화, 그리고 기존 푸터 제거 후 연락처 및 패밀리 사이트 링크를 포함한 새로운 푸터 업데이트가 있습니다. 이러한 개선을 통해 독자들이 원하는 콘텐츠를 더 쉽고 빠르게 파악할 수 있도록 사용자 경험을 향상시키는 데 중점을 두었습니다.
티스토리HTMLCSS
지마켓·2025년 1월 2일
Frontend
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편
카카오 웹 프론트엔드 팀에서 신규 서비스 "꿀템" 개발 여정을 공유하는 글입니다. 이전 편에서 서비스 기획 및 데이터베이스 설계를 마쳤고, 이번 편에서는 기술 스택 선택과 개발 과정을 상세히 설명합니다. 외부 망에는 Node.js와 Fastify 기반의 기존 프론트엔드 애플리케이션들이 있으며, "꿀템" 서비스는 기존 "event" 애플리케이션에 번들 형태로 통합되었습니다. 프론트엔드 개발에는 Typescript, React 18.2, Tanstack Query (무한 스크롤 구현), Tanstack Virtual, Fastify 프레임워크, 그리고 Vite 번들링이 사용되었습니다. 이를 통해 API 호출 및 상태 관리를 효율화하고, 사내 배포 시스템을 통해 배포되었습니다. 이 글은 신규 서비스 개발 시 프론트엔드 기술 선택과 통합 과정을 보여줍니다.
ReactTypeScriptFastify
지마켓·2024년 6월 30일
Frontend
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -1편
본 글은 G마켓의 Web Frontend팀 이민하님이 신규 서비스 '꿀템 피드'를 개발하며 겪은 여정을 공유하는 글입니다. 임직원 추천 상품 페이지인 '챗GBT'를 고객에게도 공개하고, 나아가 고객이 직접 게시글을 작성할 수 있는 커뮤니티 기능을 추가하여 서비스에 활기를 불어넣고자 하는 아이디어에서 시작되었습니다. 필자는 신규 서비스 개발 경험이 부족했음에도 불구하고, 지속 가능한 개발을 위한 설계의 중요성을 강조하며, 개발 비용 효율성과 꾸준한 개선이 가능한 프로덕트 구축을 목표로 삼았습니다. 이 글은 신규 서비스 개발을 앞둔 개발자들이 시행착오를 줄이는 데 도움을 주기 위해 작성되었습니다.
신규 서비스꿀템 피드Frontend
지마켓·2024년 6월 30일
Frontend
백엔드 개발자의 험난한 React 캘린더 컴포넌트 만들기 대작전 (feat. Props Drilling)
백엔드 개발자가 React로 캘린더 컴포넌트를 직접 개발하며 겪은 경험을 공유하는 글입니다. 통계 페이지 개편 작업 중, 기존 공통 컴포넌트 라이브러리의 한계로 인해 복잡한 UI/UX 요구사항을 만족하는 새로운 캘린더 컴포넌트를 직접 만들어야 했습니다. 특히 일/주/월 단위 표시, range 및 single 모드 지원 등 다양한 기능을 구현해야 했으며, 이 과정에서 백엔드 개발 방식과 다른 프론트엔드 개발의 특징과 마주했습니다. 또한, Props Drilling 문제를 해결하며 프론트엔드 개발의 어려움과 재미를 경험한 내용을 담고 있습니다.
React캘린더 컴포넌트Props Drilling
지마켓·2024년 1월 31일
Frontend
Vue.js와 D3.js를 사용하여 대시보드 만들기 Part1
이 글은 Vue.js와 D3.js를 사용하여 대시보드를 만드는 방법을 소개하는 시리즈의 첫 번째 편입니다. 상대적으로 인지도가 낮은 Vue.js와 D3.js를 함께 사용하는 데 어려움을 겪는 개발자들을 위해 실제 업무 경험을 바탕으로 예제를 공유하고자 합니다. Part 1에서는 데이터 및 시각화 시나리오를 소개하고, 프로젝트 구성을 설명하며, 라인 차트를 그리는 과정을 다룹니다. Kaggle에서 다운로드한 2000년부터 2022년까지의 대한민국 인구 통계 데이터를 활용하여 시각화를 진행합니다. Part 2에서는 막대 차트, 파이 차트 등을 추가하여 프로젝트를 마무리할 예정입니다.
Vue.jsD3.js데이터 시각화
지마켓·2023년 12월 20일
Frontend
Browser Fingerprint의 동작 원리와 운영시 예상되는 이슈
이 글은 쿠키에 의존하지 않는 사용자 식별 대안으로 브라우저 핑거프린트의 동작 원리와 운영 시 예상되는 이슈를 다룹니다. 사용자를 식별하는 것은 개인 맞춤형 서비스 제공 및 부정거래 탐지에 중요하지만, 로그인 정보 부재, 쿠키 삭제, 시크릿 모드 접속 등으로 인해 어려움이 따릅니다. 특히 개인정보 보호 강화와 쿠키 정책 변경으로 인해 쿠키 외의 식별 방법이 필요해지고 있습니다. 브라우저 핑거프린트는 브라우저의 다양한 속성을 조합하여 고유한 식별자를 생성하는 기술로, 유일성과 불변성을 특징으로 합니다. 다만, 사용자가 능동적으로 입력하는 정보는 포함하지 않습니다.
Browser Fingerprint사용자 식별쿠키리스
지마켓·2023년 11월 1일
Frontend
Xcode 15 의 iOS 17 빌드에서 User Agent 가 원하는 값으로 설정되지 않을때 (feat. iOS 버전별 WebKit 버전과 작업 내역 확인하기)
Xcode 15로 iOS 17을 빌드할 때 WebView의 User Agent가 원하는 값으로 설정되지 않는 문제를 다룹니다. 이 문제는 Xcode 15 릴리즈와 iOS 17의 WebKit 변경 사항과 관련이 있을 것으로 추정됩니다. User Agent는 HTTP 요청 헤더의 한 종류로, 애플리케이션, 운영 체제 등의 정보를 식별하는 데 사용됩니다. iOS 앱에서 WebView의 User Agent는 특정 형식으로 설정되지만, Xcode 15 환경에서 이 설정이 제대로 동작하지 않아 앱 단의 요청인지 구분하기 어려운 상황이 발생했습니다. 글에서는 이 문제의 원인을 추적하고 iOS 버전별 WebKit 버전 및 관련 커밋 내역을 확인하는 과정을 설명합니다.
XcodeiOS 17User Agent
지마켓·2023년 10월 19일
Frontend
DiffUtil 이해하기
본 글은 Android 개발에서 리스트 업데이트를 효율적으로 처리하기 위한 DiffUtil 유틸리티 클래스에 대해 설명합니다. DiffUtil은 androidx 패키지에 포함되어 두 리스트 간의 차이를 계산하고, 변경 사항을 반영하는 작업 목록을 생성하여 UI 업데이트를 최적화합니다. 글에서는 DiffUtil을 사용하기 전의 notify 패밀리 메서드(예: notifyDataSetChanged)의 한계를 지적하고, DiffUtil이 어떻게 더 효율적인 리스트 업데이트를 가능하게 하는지 예제 코드와 함께 설명합니다. 이를 통해 개발자는 RecyclerView와 같은 UI 컴포넌트에서 데이터 변경 시 발생하는 성능 저하를 개선하고 사용자 경험을 향상시킬 수 있습니다.
DiffUtilAndroidRecyclerView
지마켓·2023년 5월 17일
Frontend
버그와 함께 알아보는 RecyclerView 에서 wrap_content 사용을 조심해야 하는 이유
본 글은 G마켓 모바일 앱 팀에서 겪었던 RecyclerView의 `wrap_content` 사용 시 발생하는 버그와 그 원인을 분석한 내용을 공유합니다. 개발자가 코드 리팩토링 중 발견한 이 버그는 `wrap_content` 속성이 예상치 못한 레이아웃 문제를 일으키는 경우를 다룹니다. 글에서는 버그 발생 상황을 보여주는 GIF와 함께 문제의 원인을 파악하기 위한 분석 과정을 설명하며, 개발자들이 RecyclerView 사용 시 `wrap_content` 속성을 주의 깊게 사용해야 함을 강조합니다. 이는 유지보수성과 개발 트렌드 준수를 위한 리팩토링 과정에서 발견된 실질적인 문제 해결 경험을 공유하는 데 의의가 있습니다.
RecyclerViewAndroidwrap_content
지마켓·2023년 4월 5일
Frontend
자바스크립트 Map 자료구조 적극 이용하기
이 글은 자바스크립트에서 Key-Value 쌍 데이터를 다룰 때 객체(Object) 대신 Map 자료구조를 적극적으로 활용하는 방법을 소개합니다. 일반적으로 객체를 많이 사용하지만, Map은 다양한 이점과 함께 더 효율적인 데이터 관리를 가능하게 합니다. 글에서는 김치 데이터를 예시로 들어 Map의 사용법을 설명하며, 객체와 Map의 차이점 및 Map을 사용했을 때 얻을 수 있는 성능상의 이점 등을 다룹니다. 특히, 객체의 키는 문자열이나 심볼만 가능한 반면 Map은 어떤 타입의 값이든 키로 사용할 수 있다는 점을 강조합니다. 이를 통해 개발자는 더욱 유연하고 효율적인 코드 작성이 가능해집니다.
JavaScriptMap자료구조
지마켓·2023년 3월 8일
Frontend
기획전 a11y 개선 프로젝트
사회복지학과 출신 프론트엔드 개발자가 입사 4개월 차에 맡게 된 a11y(접근성) 개선 프로젝트에 대한 경험을 공유합니다. 글에서는 k8s(Kubernetes)와 같이 개발자들 사이에서 흔히 사용되는 숫자약어(Numeronym)의 유래를 소개하며, a11y 역시 Internationalization(i18n) 등과 같은 맥락에서 사용되는 약어임을 설명합니다. 이 글은 a11y 개선 프로젝트의 시작을 알리며, 앞으로 진행될 과정에 대한 기대감을 높입니다.
a11y접근성숫자약어
지마켓·2023년 1월 17일
Frontend
iOS Framework 에서 다른 Framework 사용시 Mach-O type 에 따른 주의 사항
이 글은 iOS 개발자가 Gmarket iOS 프로젝트에서 프레임워크 간의 관계와 Mach-O 타입에 따른 주의사항을 설명합니다. UI와 Util이라는 두 가지 프레임워크를 예시로 들어, Util 프레임워크가 UI 프레임워크에서 사용될 때 발생할 수 있는 문제와 해결 방안을 제시합니다. Util을 동적 프레임워크로 설정하거나 정적 프레임워크로 설정하는 두 가지 방법을 소개하며, 각 방법의 설정 방식과 장단점을 비교합니다. 특히, 프레임워크의 의존성 설정과 Mach-O 타입이 빌드 및 런타임 동작에 미치는 영향을 중점적으로 다룹니다.
iOSFrameworkMach-O
지마켓·2022년 11월 2일
Frontend
Component 와 Transclude
이 글은 Web Component 자체를 설명하는 것이 아니라, 'transclude'라는 컴포넌트 디자인 패턴의 의미와 활용에 대해 논의합니다. Transclude는 클로저나 람다와 같이 높은 수준의 추상화를 가능하게 하는 도구로 설명됩니다. 글에서는 웹에서 가장 많이 사용되는 `<div>` 태그의 예시를 통해, 작은 기능에 집중하고 나머지 책임은 자식 요소에 위임하는 컴포넌트 설계 원칙을 제시합니다. 또한, 함수형 프로그래밍의 관점에서 카드를 출력하는 함수 예시를 통해, 특정 기능을 다른 함수에 위임하는 'transclude'의 개념을 설명하고, 이를 통해 컴포넌트의 유연성과 확장성을 높일 수 있음을 시사합니다.
ComponentTranscludeWeb Component
지마켓·2021년 4월 12일
Frontend
iPhone 해상도에 따른 UI 이슈
iOS 개발 중 다양한 기기 해상도로 인해 발생하는 UI 이슈를 해결한 경험을 공유하는 글입니다. 요구사항은 CollectionView의 좌우 마진 16, 아이템 간 간격 8, 아이템 너비는 가변적으로 구현하는 것이었으나, 실제 QA 과정에서 아이템 모서리가 잘리고 간격이 예상과 다르게 보이는 문제가 발생했습니다. 이 문제는 기기별 해상도 차이로 인해 발생하며, 개발자는 이 이슈를 해결하기 위한 과정을 설명합니다. 주로 UI 레이아웃 관련 문제를 다루고 있으며, iOS 개발자에게 유용한 정보를 제공합니다.
iOSUI해상도
지마켓·2021년 1월 26일
Frontend
Swift에서 String String? String! 의 차이
이 글은 Swift 언어에서 String, String?, String! 의 차이점을 설명합니다. iOS 개발자 강수진 님이 동료들과의 퀴즈를 통해 이 주제에 대한 궁금증을 가지게 된 경험을 공유하며 시작합니다. String은 일반 문자열을, String?은 옵셔널 문자열(값이 없거나 있을 수 있음)을, String!은 암시적 해제 옵셔널 문자열(값이 반드시 존재한다고 가정)을 나타냅니다. 각 타입의 차이점과 사용 시 주의할 점을 예시와 함께 설명하여 Swift 초보 개발자들이 문자열 타입에 대한 이해를 높이고자 합니다.
SwiftStringiOS
지마켓·2020년 11월 4일