Feature/11/icon component #25
Conversation
src/assets/svgs/index.ts
Outdated
| import ic_back from "./ic_back.svg?react"; | ||
|
|
||
| export { ic_back }; |
There was a problem hiding this comment.
여기에 아이콘을 선언해두고 사용하는 방식이군요!!
궁금한 점이 여기서 import하면 첫 로딩시에 이미지를 서버에서 가져오기 시작하나요?
아니면 아이콘이 써질때 마다 가져와 지는건가요??
제가 슬랙에 캐싱에 대해서 여쭈어 본 이유가 아이콘이 써질 때마다 가져오는거라면 뒤로가기 이미지 같은 경우는 계속 쓰여 조금 비효율적이니, 해당 부분에 캐싱 코드를 적용한다면 최적화 면에서 좋지 않을까? 했던 생각 때문이었습니다.
이 내용은 후순위인것 같아 나중에 최적화 작업할 때 진행해봐도 좋을 것 같습니다!!
There was a problem hiding this comment.
제가 알기론 해당 방식으로 svg파일을 import 했을 때는 빌드 시점에 번들링 되고, React Component로 변환되어 사용 됩니다. 그래서 매번 웹서버에서 이미지를 가져오는 방식은 아니라고 알고 있습니다.
만약에 public 폴더에서 svg 파일을 url로 참조 하는 경우에는 이미지가 로드 될 때 마다 매번 웹서버에서 해당 파일을 가져오는 방식으로 알고 있습니다. 그래서 이 경우에는 캐싱이 필요한 경우라고 생각합니다.
그리고 svg 파일을 최적화 시키는 방법 중에 sprite 기법을 사용하는 방법도 있는데, 이는 추후에 디자인 확정된 후에 시도해보면 재밌을 것 같습니다:)
There was a problem hiding this comment.
다름이 아니라, 조금의 건의사항입니다! 🙋🏻♂️
아마 저희 서비스에서 .svg 파일들을 많이 사용할 것 같은데, 아이콘 파일을 index.ts 랑 같은 계층에 두기보다 아이콘 파일 별로 폴더를 만들어 구조화시키면 어떨까요?! 프로젝트를 진행하면서 아이콘 파일들이나, 이미지 파일들을 폴더 별로 정리를 하지 않으면 나중에는 찾기가 엄청 힘들다는 단점이 있더라구요 🫨
There was a problem hiding this comment.
좋은 의견 감사합니다~!!
리뷰 바탕으로 svg폴더 구조를 관심사 별로 나눌 수 있도록 바꿨습니다:)
src/component/common/Icon/Icon.tsx
Outdated
|
|
||
| const DEFAULT_ICON_COLOR = "#000000"; | ||
|
|
||
| function icon({ icon, color = DEFAULT_ICON_COLOR, size = "0.2rem", onClick }: Props) { |
There was a problem hiding this comment.
저희 컴포넌트는 파스칼로 작성하기로 했는데 확인 부탁드립니다 !!
| <Icon icon="ic_back" color="red" size={5} onClick={() => console.log("클릭")} /> | ||
| <Icon icon="ic_back" color={"rgba(0,0,0,0.6)"} size={2} /> | ||
| <Icon icon="ic_back" color="#00ff00" size={4} /> |
src/assets/svgs/index.ts
Outdated
| import ic_back from "./ic_back.svg?react"; | ||
|
|
||
| export { ic_back }; |
There was a problem hiding this comment.
다름이 아니라, 조금의 건의사항입니다! 🙋🏻♂️
아마 저희 서비스에서 .svg 파일들을 많이 사용할 것 같은데, 아이콘 파일을 index.ts 랑 같은 계층에 두기보다 아이콘 파일 별로 폴더를 만들어 구조화시키면 어떨까요?! 프로젝트를 진행하면서 아이콘 파일들이나, 이미지 파일들을 폴더 별로 정리를 하지 않으면 나중에는 찾기가 엄청 힘들다는 단점이 있더라구요 🫨
🏄🏼♂️ Summary (요약)
🫨 Describe your Change (변경사항)
🧐 Issue number and link (참고)
📚 Reference (참조)