리액트에서의 html <img> 코드

wecode에서의 첫주 처음으로 리액트를 사용하며 겪었던 것과 여전히 겪고 있는 것들에 대해 기록해보려한다.

html 코드를 .js(javascript)에서 작성하는 것은 이번이 처음이었다. html에서 작성했을 때와는 크게 다른 부분은 없으나 사소하게 달라지는 부분이 있다는 것을 알게됐다.

• 모든 class 선택자를 className으로 적어야하는 것

이건 리액트 파일 예제를 처음 주셨을 때 적혀있던 부분이라 상관이 없었다...

일단 원하는 결과물은 아래의 사진과 같았다

일단 html 코드로 구조를 짜는 것 까지는 html과 거의 동일하게 진행되었는데 문제가 발발한다.

<img src="" alt=""> 오류

images라는 이름의 파일을 js와 css가 있는 곳에 만들고 그 안에 이미지 파일을 저장 후, html에서 사용했던 그대로 상대경로를 이용해서 img파일을 첨부했더니

<img src="images/Logo.png" alt="위코드의 로고" />
<img src="images/logo_wecode.png" alt="위코드의 한글 로고" />

이미지 불러오기에 실패한다. 파일 경로를 잘못 적은 건지 보고 또 보고, 오류가 났는지 vscode 오류창을 이리보고 저리봐도 해결되지 않았다

1. 문제점

• html의 < img > 기능 안함

2. 해결방법

이미지 파일첨부를 해결하기 위해 참조한 기술블로그

https://velog.io/@ingdol2/React-image-경로-설정하기

public file에 이미지를 직접 저장한 후 public파일을 기준으로 상대경로(수정)를 이용해 이미지 태그에 연결했다.

<img className="mainLogo" src={'/Logo.png'} alt="위코드의 로고" />
<img className="textLogo" src={'/logo_wecode.png'} alt="위코드의 한글 로고" />

• ""로 불러오지 못하기 때문에 { }를 사용하기

블로그에서 기술하는 방법은 3가지가 있는데 굳이 이 방법을 선택했던 것은 개발이 끝난 후 src파일은 압축하지만 public 파일은 보존된다는 부분에서 이 방식을 채택했다.

서버에 배포할 경우 추가적으로 사용되는 코드

process.env.PUBLIC_URL +

2-1 최종코드

<img className="mainLogo" src={process.env.PUBLIC_URL + '/Logo.png'} alt="위코드의 로고" />
img className="textLogo" src={process.env.PUBLIC_URL + '/logo_wecode.png'} alt="위코드의 한글 로고" />

2-2 최종결과

결과적으로 깔끔하게 이미지가 나온다!

3. 돌아볼 점

1. 일단 public폴더가 html에서 html으로 시작하는 절대경로와 유사한 방식으로 작동한다고 이해했는데 맞는지 모르겠다. (수정-> 상대경로가 맞았다...) 추가적으로 관련 정보 찾아보고 제대로 숙지하기.

2. 방법이 3가지라고 기술됐는데 아직 다른 방식은 어떤식으로 구동되는지 제대로 안봤다...이것도 찾아보고 확실히 이해하고 넘어가기.