create-react-app으로 react app을 만들었을 때 한글 깨짐 현상 해결

1. 문제

• create-react-app으로 react app을 만들었을 때 index.html은 한글을 입력해도 한글이 깨지지 않는데 App.js에 한글을 입력하면 깨지는 문제가 발생했다.

// App.js
function App() {
    return <div className="App">안녕</div>;
}

export default App;

위 App.js를 가지고 react app을 실행한 결과

2. 해결

• 구글링한 결과 iwantadmin.tistory.com/121에서 다룬 인코딩 문제일 수도 있겠다고 생각했고, App.js를 '다른 이름으로 저장하기' -> '저장' 버튼의 삼각형 -> '인코딩하여 저장'을 통해 인코딩 방식을 UTF-8로 바꿔줬다.

본인의 경우 한국어(조합)으로 인코딩이 되어 있었는데 이를 유니코드(서명 있는 UTF-8)로 바꿔줬다.

• 인코딩을 유니코드 UTF-8로 바꾼 결과 다음과 같이 정상적으로 한글이 출력되는 것을 볼 수 있었다.

• 한국어로 인코딩되어 있는데 한국어가 안 나오다니... 왜 그런지는 모르겠지만 아무튼 인코딩은 UTF-8로 하는 게 가장 안전한 것 같다.