문자열을 변수로 활용하기

문제

랭크 이미지를 핸들링할때, 이미지의 주소를 한 js 파일에 전부 임포트 후, 익스포트해 임포트시 해당 파일 하나만 임포트 해서 사용하도록 설정했다.

유저 정보에 티어 이름이 스트링 타입으로 담겨있으므로, 해당 값을 잘라내서 활용하는 방식으로 티어와 이미지를 매칭할 생각이었다.

하지만, 이미지의 실제 주소는 자바스크립트 파일을 임포트해 임포트해서 콜러로 사용해 연결되는 방식이기에 문자열을 그대로 넣으면 에러가 발생하는 상황이 생겼다.

해결

인수를 caller로 사용하는 eval() 가 존재하나, 보안 이슈와, 성능이슈(JS 인터프리터 사용) 겹쳐 현재는 사용되지 않는 방식이다.

그냥 상대주소를 넣어버릴까 생각도 했는데, 이렇게 하드코딩스러운 방식으로 해결하고 싶진 않았다.

그래서, 이미지 주소를 쉽게 꺼내 쓰려고 구조 분해 할당해 임포트한 이미지 주소를 export default 해 객체 형태로 임포트한 후 obj[(str type)] 같이 핸들링해 정상적으로 주소 값을 받아올 수 있었다.