[React] assets image 폴더 리팩토링

 

 

 

안녕하세요. 제니입니다!

요즘 초기 셋팅부터 작업을 쭉 하다보니 

코드 리팩토링까지 자율적으로 할 수 있는 기회가 많아서

동료분의 조언을 받아 진행 된 image 폴더 리팩토링을 정리해보려고 하는데요!

 

 

 

폴더 구조

 

 

 

그 동안은 이렇게 assets안에 페이지나 컴포넌트별 폴더를 만들어서

이미지를 보관하고 있었는데요!

나름 생각하면서 정리하고 있었는데 재사용성이나 import 할 때의 이슈가 있었어요.

 

 

 

기존 import

 

 

 

같은 폴더안에 넣어두어도 import의 문제가 있었고

나중에 다른 페이지에 추가될 때 재사용성에도 다시 찾아야하는 번거로움이 있었습니다!

 

 

 

1-1. image 폴더 내 index.ts 파일 추가

예시

 

 

 

이렇게 image로 사용하는 폴더 내 index.ts 파일을 만들어두고

위 사진처럼 export를 모두 해줄 건데요

 

 

 

export { default as checkActiveImg } from '@/assets/confirm/check_active.svg';

 

 

 

위 코드처럼 작성해주시면 됩니다!

저는 정리하는 걸 좋아해서, 폴더별로 주석을 달아줬어요

 

 

 

 

 

 

이렇게 하게 되면, import할 때도 깔끔하게 정리가 돼서 보기에도 좋고

재사용하기에도 번거로움이 없습니다.

 

 

 

1-2. 이미지 name 통일하기

예시;

 

 

 

제가 제일 우려한 건 너무 많아지는 export 였는데요.

카멜케이스로 명명할거라 컴포너트와 헷갈리진 않았지만, 그래도 한번 더 생각해야 하는 과정이 번거로워서

모든 image의 네임 뒤에 Img를 붙여서 통일했습니다!

 

 

 

조금 더 좋은 코드를 알려주신 동료분께 감사를 ㅎㅎ 

오늘의 기록 끝 --