제가 만든 스크립트의 전체적인 흐름은 이래요:
- 어떤 sprite SVG를 만들지 선택해요.
- 선택한 키에 따라 sprite map 정보를 가져와요.
- SVG 리스트 데이터로 sprite SVG를 생성해요.
- 생성된 sprite SVG를 파일로 저장해요.
스크립트 사용 예시는 아래와 같아요:
$ yarn scripts sprite countryCode이 명령어를 실행하면 스크립트가 동작하여 countryCode.svg라는 sprite SVG 파일이 생성돼요. 이 파일 하나에 모든 국가 코드 아이콘이 포함되어 있죠!
(저는 270여개의 국가 이미지를 한 sprite svg를 이용해 불러올 수 있도록 하려고해요. )
1. Sprite SVG 선택하기
먼저, 어떤 sprite SVG를 만들지 정의하는 부분부터 시작했어요. SPRITE_MAP이라는 객체를 만들어서 여기에 모든 정보를 담았죠.
const SPRITE_MAP = {
countryCode: {
key: 'countryCode',
svgBaseUrl: '외부_이미지_경로',
list: COUNTRY_CODE_LIST,
},
} as const;
type SpriteMapKey = keyof typeof SPRITE_MAP;
type SpriteInfoValue = (typeof SPRITE_MAP)[SpriteMapKey];이 SPRITE_MAP에는 제가 만들 수 있는 모든 sprite SVG의 정보가 들어있어요. 예를 들어, countryCode는 국가 코드 아이콘을 위한 sprite SVG의 키예요.
TypeScript를 사용해서 타입 안정성도 확보했는데, 이게 나중에 오타 같은 실수를 많이 준것 같아요. 처음에는 좀 번거롭다고 생각했는데, 쓰다 보니 정말 편하더라고요. 😉
2. 스크립트 실행하기
그 다음으로 스크립트를 실행하는 run 함수를 만들었어요.
const run = async () => {
const spriteKey = process.argv[2] as SpriteMapKey;
if (!spriteKey) {
console.error(chalk.redBright(`❌ - Need to provide a sprite key`));
}
if (!Object.keys(SPRITE_MAP).includes(spriteKey)) {
console.error(chalk.redBright(`❌ - Invalid sprite key: ${spriteKey}`));
return;
}
const CURRENT = SPRITE_MAP[spriteKey];
try {
const svgFiles = await getSvgFiles(CURRENT);
const svgSprite = await getSpriteSvg(svgFiles);
spriteSaveFile(svgSprite, `${CURRENT.key}.svg`);
console.log(chalk.greenBright(`COMPLETE 🎉`));
} catch (error) {
console.error(error);
}
};
run(); // 스크립트 실행이 함수는 명령줄에서 받은 spriteKey를 확인하고, 그에 따라 sprite SVG를 생성해요.
chalk 라이브러리를 사용해서 콘솔 메시지에 색을 입혔는데, 이런 작은 디테일이 개발 경험을 훨씬 좋게 만들어주더라고요. 에러는 빨간색, 성공은 초록색으로 보이니까 쉽게 구분이 가더라구요.
3. SVG 파일 가져오기와 Sprite SVG 생성하기
getSvgFiles와 getSpriteSvg 함수는 이전 글에서 설명한 것과 동일해요. 이 부분을 자동화하니까 작업 속도가 엄청 빨라졌어요!
4. Sprite SVG 저장하기
마지막으로, 생성된 sprite SVG를 파일로 저장하는 함수를 만들었어요.
const spriteSaveFile = (svgSprite: string, fileName: string) => {
const dir = path.resolve(__dirname, '../public/assets/sprite');
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, { recursive: true });
}
fs.writeFileSync(path.join(dir, fileName), svgSprite);
};이 함수는 생성된 sprite SVG를 지정된 디렉토리에 저장해요.
마치며
이렇게 스크립트를 만들어서 sprite SVG를 자동으로 생성해보니, 정말 편하더라고요. 수동으로 SVG 파일을 합치는 번거로운 작업을 안 해도 되니까 시간도 많이 절약되고, 실수할 가능성도 줄어들었어요.
특히 이 스크립트의 장점은 확장성 이라고 생각해요. 새로운 아이콘 세트가 필요하다면 SPRITE_MAP에 새로운 키와 정보만 추가하면 돼요. 예를 들어, 결제 방법 아이콘을 추가하고 싶다면 이렇게 할 수 있죠:
const SPRITE_MAP = {
countryCode: {
// ... 기존 코드
},
paymentMethods: {
key: 'paymentMethods',
svgBaseUrl: '외부_이미지_경로',
list: PAYMENT_METHODS_LIST,
},
} as const;그러면 yarn scripts sprite paymentMethods 명령어로 결제 방법 아이콘 sprite를 생성할 수 있어요.
이런 자동화 스크립트를 만드는 데 시간을 투자하니까, 장기적으로 봤을 때 정말 많은 시간과 노력을 아낄 수 있겠더라구요.
앞으로도 이렇게 자동화, 성능을 최적화해서 서비스를 개선할 방법을 계속 찾아보려구요!
다음에는 sprite svg를 좀 더 작은 용량으로 만들 수 있는, svg 최적화를 다뤄볼게요 👍
