next.js에서는 img 대신에 next.js에서 제공하는 image를 통해서 이미지를 올리게한다
이를 통해, 배치될 시 생기는 많은 버그들을 사전에 막아준다.
Image를 사용하다보면 width값 위주로 가고, height값에 영향을 받지 않았다.
우선 순위가 width라고 생각하였고, height 값을 적당히 맞쳐주었다.
그러다 콘솔로그를 확인했는데..
age with src "/icon/finger.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
이런 경고가 뜨는 것이었다.
오류는 아니지만 경고도 상당히 거슬린다. 왜냐하면 내가 잘못한 것이 있으니까 뜨는 것이고,
콘솔로그에 내가 예상한 것 외에 다른 것이 뜨는 것을 좋아하는 개발자는 없을 것이다.
stackOverflow와 chatgpt 이곳저곳을 찾아보다가, 우연히 해결하게 되었다.
여러 곳을 찾아봐도 잘해결되지 않았는데, 사이즈를 맞추어주면, 되지않을까? 했는데.. 잘해결 되었다.
자동으로 사이즈를 맞추어주는 방법으로 고민하였는데, 수기로 해결한 것이 좀 허무했다.
이거이거.. 이거지!
깔끔한 콘솔창 보는 건 즐거운 일이다.
앞으로 이미지를 넣어줄 때마다 더 세심하게 체크해야겠다.
