React 사이트 로고 및 이름 변경하기

React를 이용해서 코드를 짜고, npm start 와 같은 명령어로 테스트를 한다고 합시다.

이때 보통 페이지의 상단을 보면 이렇게 나타납니다.

요거를 내가 원하는 로고와 이름으로 변경하는 방법을 알아보겠습니다.

변경하는 방법

먼저 로고를 변경합시다.

프로젝트 폴더 내부에 있는 public 디렉토리를 봅시다.

여기에 index.html 이 존재할 겁니다.

				
					 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
				
			

내부를 보면 다음과 같이 icon 의 위치를 favicon.ico 로 잡고 있는 것을 볼 수 있습니다.

대충 아무런 로고를 public 위치에 올려볼까요?

보면 ps.ico 추가가 되었습니다.

이제 index.html 에 있는 icon 부분의 href 를 변경하겠습니다.

				
					 <link rel="icon" href="%PUBLIC_URL%/ps.ico" />
				
			

위와 같이 변경을 하면…

이렇게 나타나게 됩니다.

그럼 이제 저 React APP의 이름을 변경하겠습니다.

마찬가지로 index.html 내에서 수정이 가능합니다.

				
					<title></title>
				
			

으로 감싸진 부분을 찾아주세요.

이렇게 감싸진 부분 내에 처음에는 React APP 이라고 적혀 있을 겁니다.

이걸 원하는 이름으로 바꿔줍시다.

				
					<title>Customized Site</title>
				
			

이렇게 바꿨다고 할까요?


그럼 이렇게 나타납니다.


마치며...

이제 본인이 원하는 icon 과 문구를 이용하여 사이트를 꾸밀 수 있게 됐습니다.