사이드 프로젝트 진행중에 나를 너무 괴롭히는 react-native-vector-icons에 대해 고찰한 부분을 정리한 글이다.
발단. 카메라 아이콘을 넣자.
프로젝트의 상품등록 파트를 구성하기로 한 나는 와이어프레임을 열심히 뜯어봤다.
상단에 작은 카메라 아이콘 하나 들어가는 이미지 로드 컴포넌트를 구성해야 했고,
리액트 네이티브 아이콘 패키지를 사용해볼 기회가 생겼다.
사실 이미 IOS에서 개발하시는 팀원께서 react-native-vector-icons 패키지를 설치해놨다.
그냥 가져다 쓰기만 하면 됬다.
아니 그랬어야 했다.
전개. react-native-vector-icons 사용하자
1. react-native-vector-icons 패키지 설치하기
npm install react-native-vector-icons
npm install -D @types/react-native-vector-icons아래줄은 타입스크립트용이다.
2. 폰트파일 이동하기
node_modules/react-native-vector-icons/Fonts의 폰트파일을
android/app/src/main/assets/fonts을 만들어서 이동시킨다.
3. 원하는 아이콘 선택하기
아이콘디렉토리
여기서 원하는 아이콘을 선택하여 이름을 알아둔다.
4. 코드 사용하기
import Icons from 'react-native-vector-icons/MaterialCommunityIcons';
export defalut App(){
...
return(
...
<Icons name="camera-outline" size={20} color="#4F8EF7" />
)
} 그런데 이 이상한 이미지는 뭐지?
나의 camera-outline은 어디간거지
위기. 이미지가 다르다.
이제부터가 본격적으로 나를 괴롭히던 문제에 대한 이야기이다.
왜 다를까? 구글 도와줘..
의심1. 안드로이드용 설정?
구글에 검색하니 안드로이드용은 따로 설정해 줄 부분이 있다고 한다.
android/app/bundle.gradle 파일에 코드 추가하기
project.ext.react = [ enableHermes: false, // clean and rebuild if changing ] apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
역시 이유 없이 안 될리 없지 생각하고 리빌드했지만,
... 호락호락하지 않다.
의심2. 폴더이름 설정?
다른 원인으로 .ttf를 옮긴 폴더명의 오류가 있나 살펴보게 된다.
//create-icon-set.js
const fontBasename = fontFile
? fontFile.replace(/\.(otf|ttf)$/, '')
: fontFamily;
const fontReference = Platform.select({
windows: `/Assets/${fontFile}#${fontFamily}`,
android: fontBasename,
web: fontBasename,
default: fontFamily,
});create-icon-set.js 파일에 의하면 windows에서 Assets경로를 받아오니 폴더명을 대문자로 바꿔봤다.
변화가 없다.
의심3. 별도의 설정이 필요한 것은 아닌가?
열심히 구글링한 결과로 나와 비슷한 현상이 있다는 이슈를 찾았다.
https://github.com/oblador/react-native-vector-icons/issues/1294
그러나 사용하는 장치의 문제로 내가 사용하는 에뮬레이터와 전혀 상관이 없었다.
절정. 왜 오류나는지 전혀 모르겠다.
안 넣지 뭐 라는 반 포기의 심정으로 다른 컴포넌트를 구성하였다.
그러나 아이콘을 너무 넣고 싶은,
저 둘의 사랑을 보고싶지 않은 이 마음이 해소되지 않는다.
포기란 없다. react-native 강의 수강신청
그래서 이제 전문가의 직접적인 도움을 받고자 react-native 강의를 찾아봤다.
배달앱 클론코딩
조현영 강사님의 배달앱 클론코딩이다.
그래도 혹시 아이콘이 없으면 무용지물이니 먼저 질문을 한다.
압도적 감사😭😭😭 바로 강의를 구매한다.
강의수강
강의 자체는 스무스하게 진행되며 UX/UI를 고려한 코딩으로 실제 개발코드에도 적용할만큼 섬세한 부분이 많아서 좋았다.
좋아서 순간 강의를 수강한 목적을 잃었다.
순서대로 수강하고 있으면 아이콘은 언제고치는데?!!
react-native-vector-icons 강의 수강
빛과 소금같은 강의를 수강한다.
오..
그런데..
나 이거 다 해본거잖아?
다시 살짝 좌절하고 고민에 빠진다.
- 강사님 도와주세요. 저의 camera아이콘이 이렇게 이상한 gays가 나와요.
- 도와주세요... 근데 그 전에 한 번 만 더 찾아볼게요.
쉽게 가자 다짐했는데 잘 안된다.
한 번 더 고생하러 간다.
의심4. 값을 전달하는 과정에서 발생한 것은 아닌가?
사실 패키지를 가져다 쓰면서 사용법 외에 내부코드를 상세하게 보지 않았지만,
필요하니까 열심히 찾아봤다.
render() {
const { name, size, color, style, children, ...props } = this.props;
let glyph = name ? glyphMap[name] || '?' : '';
if (typeof glyph === 'number') {
glyph = String.fromCodePoint(glyph);
}
...
return (
<Text selectable={false} {...props}>
{glyph}
{children}
</Text>
);
}랜더링 시 glyph에 name파라미터 값을 토대로 glyphMap에서 number타입의 값을 반환받아서 glyph에 값을 할당하는 형태였다.
그래서 내가 전달하는 camera-outline이 있는지 확인하기 위해 glyphMap을 찾아봤다.
https://unpkg.com/browse/react-native-vector-icons@10.0.3/glyphmaps/MaterialCommunityIcons.json
"camera-outline": 986461,
있다.
그리고 실제로 콘솔창에 glyphMap[name]값과 name을 출력하니 잘 받아오고 있었다.
의심5. String.fromCodePoint(glyph)?
String.fromCodePoint()
JavaScript String fromCodePoint()는 주어진 코드 포인트 값(ASCII 값) 시퀀스에 대한 문자열이나 요소를 반환하는 데 사용되는 JavaScript의 내장 메서드입니다.
https://en.wikipedia.org/wiki/List_of_Unicode_characters
반환되는 코드 포인트 목록은 위의 링크에 나와있다.
보니까 거의 유니코드를 반환한다.
그럼 glyph에 number값을 넣어서 각 코드포인트에서 반환값을 가져온다는 것 같은데,
실제로 가져오는지 보고싶었지만 콘솔에 찍히지 않는다.
여기서 맨 왼쪽 값(네모박스 안에 /모양)이 String.fromCodePoint(glyph)값이다.
그래서 ttf파일의 형식으로 코드포인트를 구성해서 glyph로 인덱싱을 하나 생각하게 된다.
여기까지 도달했지만 ttf파일의 인코딩타입을 뜯어 볼 엄두가 나지 않았다.
고민. 결국 전문가에게 지원요청?
1. 강사님 도와주세요. 저의 camera아이콘이 이렇게 이상한 gays가 나와요.
2. 도와주세요... 근데 그 전에 한 번 만 더 찾아볼게요.
1번의 선택지를 선택하는 기로에 섰다.
강사님께 질문에 대한 과정을 정리하기 위해 폴더명을 다시 바꾸려고 했다.
의심2.에서 했던 Assets폴더명이 대문자인게 거슬려서 수정하려니 오류가 났다.
일단 삭제하자.
그런데...
...
...
...
너 고생했지? 살려줄게
...
...!!
와
왜지 fonts 폴더를 삭제하니
아이콘이 뜬다.
결말. 문제해결, 아이콘이 정상적으로 뜬다.
개발자들이 항상 하는 고민
이게 왜 되지?
그러게 이게 왜 될까.
fonts 폴더를 main에서 지우니 경로를 알아서 찾아간다.
이유는 모르겠습니다. 알게 되면 공유하겠습니다.
혹시 모를 react-native-vector-icons incorrect icon issue를 해결하고 싶은 분들
main 안에 복사했던 assets/fonts 폴더를 삭제해보세요.
나의 일주일을 괴롭히던 gays bye~
0415) 추가내용. fonts 폴더 재 생성 후에도 잘 찾아감. 원인이 이게 아닌듯
