👨‍💻 사건

• 팀프로젝트 중 이미지를 import 하여 사용을 하다가, 많은 이미지를 사용할 경우 코드가 import 로 도배되는 것을 보게되었다. 이를 해결하기 위해 하나의 jsx 파일을 따로 만들어 이에 전부 다 import 를 받고, export 해주는 형태로 사용하는 것을 생각했다.

✅ 해결

import ADVERTISING1_IMAGE from '../assets/images/advertising1-image.png';
import ADVERTISING2_IMAGE from '../assets/images/advertising2-image.png';
import ADVERTISING3_IMAGE from '../assets/images/advertising3-image.png';
import EMPTY_FEED_IMAGE from '../assets/images/empty-feed-image.png';
import EMPTY_POST_IMAGE from '../assets/images/empty-post-image.png';
import ERROR_IMAGE from '../assets/images/error-image.png';
import LOGO_IMAGE from '../assets/images/logo-image.png';
import LOGO_WHITE_IMAGE from '../assets/images/logo-white-image.png';
import LOGO_WINK_IMAGE from '../assets/images/logo-wink-image.png';
import MAIN_TITLE_IMAGE from '../assets/images/main-title-image.png';
import PROFILE1_IMAGE from '../assets/images/profile1-image.png';
import PROFILE2_IMAGE from '../assets/images/profile2-image.png';
import SUB_TITLE_IMAGE from '../assets/images/sub-title-image.png';
import WALK_ABLE_IMAGE from '../assets/images/walk-able-image.png';
import WALK_DISABLE_IMAGE from '../assets/images/walk-disable-image.png';

export {
  ADVERTISING1_IMAGE,
  ADVERTISING2_IMAGE,
  ADVERTISING3_IMAGE,
  EMPTY_FEED_IMAGE,
  EMPTY_POST_IMAGE,
  ERROR_IMAGE,
  LOGO_IMAGE,
  LOGO_WHITE_IMAGE,
  LOGO_WINK_IMAGE,
  MAIN_TITLE_IMAGE,
  PROFILE1_IMAGE,
  PROFILE2_IMAGE,
  SUB_TITLE_IMAGE,
  WALK_ABLE_IMAGE,
  WALK_DISABLE_IMAGE,
};		

• 위의 파일처럼, 하나로 묶어서 export 하는 형태로 진행하는 것이 어떤가 하고 팀원들과 소통을 통하여 채택되었다.

  import { WALK_ABLE_IMAGE, PROFILE2_IMAGE } from '../../styles/CommonImages';

💭 개선

타인이 코드를 보았을때를 생각하면서 코드를 작성하는 습관을 길러야한다.