[React] 이미지 사용의 모든 것(feat. SVG, SVGO)

웹사이트를 제작하다보면 필수적으로 이미지 파일을 사용해 화면을 구성해야 하는 일이 생긴다. (안 생긴다면 그 사이트 제작은 지금 끝내라) Front-End 라이브러리로 React를 사용한다면 이미지를 사용하는 방식이 여러가지일 것이다. 어떤 상황에서 어떤 방식이 맞는지, 혹은 사용법이 정확한지 알기 힘들다. 그래서 이번 포스팅에서는 리엑트에서 이미지를 활용하는 법에 대해 정리하고자 한다. 1. Pubilc 폴더에 이미지 파일 위치시키고 활용 ❗️제일 간편하고 직관적인 방법이다. Create React App으로 프로젝트를 생성하면 Public 폴더에 index.html을 비롯한 정적 파일이 있다. 여기에 images 폴더를 만들고 이미지 파일을 넣어둔다. 그리고 실제 이미지를 활용할 소스 코드에서는 아래..

2022.01.14