[Web Skill] 이미지 스프라이트(Image Sprite)

정의

필요한 이미지를 여러번 호출하는 것이 아니라 하나의 이미지 파일을 받아 Background로 Position을 잡아주어 여러개의 이미지를 가져올 수 있게 하는 방법.

장점 :
- HTTP 요청횟수를 줄여 웹페이지의 로딩 시간을 절약함.
- 하나의 이미지 파일만 관리하면 됨.
단점 : 이미지를 불러오기 위해선 해당이미지의 Position을 알아야함. CSS로 관리할 경우 클래스로 분리하여 관리하고 background-image 속성으로 가져오면 편하지만 SVG이미지로 관리를 위해서는 js코드를 모듈화해야함.
관련링크 : Image Sprite Online Generator Sprite 이미지, CSS 클래스도 만들어줌.

적용해보기

적용대상 : 나의 Data Lab 프로젝트 중 18/19 UEFA 챔피언스리그 결과

변경 전 : 구단의 이미지 파일들을 각각 저장하여서 불러옴

기존 코드

downSeedNameBox.append('image')
                  .attr('x', 10)
                  .attr('y', SeedNameBox.margin/2)
                  .attr('width', SeedNameBox.height - SeedNameBox.margin)
                  .attr('height', SeedNameBox.height - SeedNameBox.margin)
                  .attr('xlink:href', (d) => require(`@/assets/images/UEFA/Clubs/${d.participant[1].name}.png`))

문제점: 토너먼트 내에서 여러번 이미지를 불러올 경우 이미지 역시 여러번 호출하고 있음.

개선 이후

전체 구단의 이미지들을 하나로 담은 파일을 만들고

해당 구단이미지의 position을 저장하여서 뿌려주는 방식으로 변경함

images: {
  Ajax: {
    position: '5 5 70 70'
    // ...
  },
  //...
}

downSeedNameBox.append('svg')
              .attr('x', 10)
              .attr('y', SeedNameBox.margin/2)
              .attr('width', SeedNameBox.height - SeedNameBox.margin)
              .attr('height', SeedNameBox.height - SeedNameBox.margin)
              .attr('viewBox', (d) => this.images[d.participant[1].name].position) // this.images['Ajax'].position
            .append('image')
              .attr('xlink:href', ClubsImage)

2023 1
2022 2
2019 45
2018 1

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론

[Methodology] CDD(Component Driven Development) - 테스트(2/2)

1 분 소요

Intro

[Methodology] CDD(Component Driven Development) - 계획(1/2)

1 분 소요

CDD(Component Driven Development)란?

GraphQL, Prisma, Apollo 공부

2 분 소요

GraphQL? RESTful?

[CodingTest] Combination(조합) 문제풀이 2

최대 1 분 소요

문제

[CodingTest] Combination(조합) 문제풀이 1

최대 1 분 소요

문제

[ESlint & Prettier] 개발 관습 설정 in Visual Studio

1 분 소요

회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...