안녕하세요. Seller & SD Engineering 팀의 개발자 김민우입니다. 저는 주로 백엔드 개발을 담당하고 있지만, 최근에 프론트엔드 개발, 특히 React로 캘린더 컴포넌트 만들기에 도전했습니다. 이 글에서는 백엔드 개발자의 시각에서 본 프론트엔드 개발의 독특한 점들과 더불어 Props Drilling 문제를 해결한 경험을 공유하고자 합니다. 프론트엔드 개발에 대한 저의 경험은 전문적인 관점이 아닐 수 있지만, 이 분야에 대한 새로운 시각을 제공하려 합니다. 배경 : 저희 팀은 새로 오픈 할 ESM 개편안 중 '통계' 작업을 맡았습니다. 본래는 통계 페이지들의 특성상 상단에는 단순 조건 필터링, 하단에는 해당 조건에 따른 결과(그래프, 테이블 등)로 단순하게 구성하기 때문에 프론트에 대한 리소..
Vue.js(이하 Vue)는 간편하게 웹 애플리케이션을 만들 수 있는 프론트엔드 프레임워크입니다. Vue를 사용하는 사람들 사이에선 인기가 높은 프레임워크이지만, 아무래도 React에 비해 인지도 및 사용자 수에서 많이 뒤떨어지는 것이 사실입니다. D3.js(이하 D3)는 'Data-Driven Document'의 약어로써(DDD -> D3), 웹 브라우저상에 여러 데이터 시각화 기능을 제공하는 자바스크립트 라이브러리입니다. 데이터 시각화 라이브러리는 다른 여러 가지가 있지만, 높은 자유도를 바탕으로 여러 신기한 차트를 표현할 수 있는 라이브러리는 D3 외에는 없습니다. 다만, 비교적 저수준의 기능을 다루기에 러닝 커브가 있는 편이고 적극적으로 사용하는 사용자가 많다고 하기는 힘든 실정입니다. 이렇게 비..
안녕하세요. 지마켓 Seller & SD Engineering팀 김민우입니다. 며칠 전 어머니께서 대뜸 저에게 미니 전시회를 열 거라고 하시며 팜플렛을 만들었는데, 혹시 모바일로 만들어서 전달하는 게 가능한지 물어보시더군요. '아니, 저 백엔드 개발자라서 이런거 몰라요' 라는 생각이 머릿속을 스쳤지만, 필자는 어쩌다 보니 이런 기술적인 요청에도 반응하는 효자가 되었습니다. 그렇게 주말을 초대장 만드는데 보내게 되었고, 그 경험을 공유하고자 합니다. 요점부터 말씀드리자면, 방법은 html을 만들고 이를 Github Pages를 활용하여 정적페이지를 무료로 호스팅하는 것입니다. (즉, 프론트 서버만 해당됩니다. 백엔드 서버의 무료 배포 및 호스팅은 Github에서 제공하지 않습니다.) 1. Github Pa..
사용자 식별은 비즈니스의 중요한 역할을 담당합니다. 사용자를 식별함으로써 개인 맞춤형 화면 및 광고를 제공할 수 있고, 부정거래나 어뷰징 유저를 탐지할 수도 있습니다. 다만, 사용자 식별은 우리 생각만큼 쉽지 않습니다. 로그인을 하지 않고 서비스를 이용하는 경우 사용자의 로그인 정보를 확보할 수 없습니다. 사용자가 쿠키를 지웠거나 시크릿 모드로 접속한다면 쿠키의 도움을 받을 수도 없습니다. 전통적으로 사용자 식별은 쿠키에 의존하였고, 아직도 쿠키를 이용하는 경우가 많습니다. 하지만 점점 높아지는 개인정보 보호에 대한 요구와 이에 따르는 쿠키 정책 변경으로 인해 쿠키 외의 대안을 생각해 볼 필요가 있습니다. "쿠키리스 시대의 도래...", 미디어오늘, 2023.08.19 기사 링크 "개인정보보호 소송에 시..
서론 자바스크립트로 프론트엔드 웹 코딩을 하면서 Key - Value 쌍의 데이터를 저장하고 조회할 때 어떤 자료구조를 이용하시나요? 열이면 여덟 아홉 객체(Object)를 이용하는 듯합니다. interface Kimchi { name: string; alias: string; score: number; ingredients: string[]; } const kimchis: Record = { 1: [ { name: "백김치", alias: "맵린이", score: 1, ingredients: ["소금", "무", "양파", "배", "배추", "설탕"] }, { name: "나박김치", alias: "깍두기먹을바엔나박김치", score: 1, ingredients: ["소금", "무", "배추", "미..
Intro 안녕하세요. 사회복지학과 출신 개발자 Web Frontend팀의 이민하입니다. 저는 입사 4개월 차에 설레는 첫 업무를 받게 되었고 이내 운명을 느꼈습니다. 그것은 바로 제 전공과 관련된 a11y 개선 프로젝트였기 때문이죠. a11y? k8s 라는 말 들어보셨나요? 백엔드 개발자에게는 친숙한 Kubernetes의 줄임말입니다. 첫 글자 k와 마지막 글자 s 사이에 8개의 문자가 있어 k8s라고 표현합니다. 이를 숫자약어(Numeronym)라고 하는데요, 이 유래가 참 재미있습니다. 지금은 HP(Hewlett-Packard)사에 합병된 DEC(Digital Equipment Corporation) 사의 Jan Scherpenhuizen라는 직원이 입사하게 되었습니다. 전통적으로 이름을 이메일 계..
안녕하세요 Mobile Application Team 에서 iOS 개발을 하고 있는 강수진입니다. 이번 글에서는 지마켓 iOS 프로젝트에서 사용하고 있는 프레임워크들의 관계와, Framework 에서 다른 Framework 를 사용할 때 Mach-O type 에 따른 주의 사항을 알아보겠습니다. 상황 Gmarket 에서 사용하고 있는 framework 는 다양하지만, 문제에 집중하기 위해 UI 와 Util 이라는 두 가지 framework 를 사용한다고 상황을 간략화해보겠습니다. 이때 Util.framework 는 유틸성 코드를 담고 있어서 UI.framework 에서도 사용합니다. 따라서 아래와 같이 사용 관계를 표현할 수 있습니다. 위 상황을 관리하기 위해 프레임워크들의 관계를 어떻게 설정할 수 있을..
안녕하세요! BXP POD에서 iOS 개발자로 일하고 있는 강수진입니다. 🙋🏻♀️ 개발 과정에서 아래와 같이 디바이스에 따라 아이템 UI 일부가 잘려 보이는 이슈가 있었습니다. 결론부터 말씀드리면 기기에 따른 해상도 때문에 생기는 문제였는데요, 지금부터 깨달음의 내용과 해결 과정을 공유해보고자 합니다. 요구 사항 CollectionView의 left와 right margin은 16 itemSpacing은 8 아이템 width는 각각 남는 영역의 1/2로 가변적 요구 사항은 위와 같았고, 이에 맞게 열심히 구현을 했습니다.👩🏻🏭🛠 문제 사항 하지만 곧 QA 하는 과정에서 이슈가 들어오게 됩니다. "아이템 corner 쪽이 각져서 잘려보이고, 아이템 사이 간격은 8.3처럼 보여요!" 네?? 좀 더 자세히..