Visual Studio에서 React.js를 사용하는 웹 앱이 깨집니다.

Visual Studio의 React.js에서 깨짐이 발생한 경위와 그 대응책에 대해.

환경

Visual Studio Community 2017 ver 15.7.1
.NET Framework ver 4.7.03056
npm ver 5.6.0

편지가 발생한 경위

Visula Studio를 시작하고 파일 - 새로 만들기 - 프로젝트에서 ASP.NET Core 웹 응용 프로그램을 만듭니다.
템플릿에서 React.js를 선택합니다.


빌드를 거치면 아래와 같은 에러가 나왔다.Message "Cannot find module './wwwroot/dist/vendor-manifest.json'\r\nError（以下略）
이 대응책은 이쪽.
Visual Studio에서 React를 즐겨보세요.
ASP.NET Core application won't run
프로젝트 폴더의 node_modules가있는 곳에서 다음 명령을 실행하는 것이 좋습니다.

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js

빌드가 지나 사이트가 디버깅할 수 있게 되었다.


드디어 본제.
components.NavMenu.tsx의 일부를 일본어로 다시 작성해 봅니다.

                    <Link className='navbar-brand' to={ '/' }>リアクトWebシステム</Link>
                </div>
                <div className='clearfix'></div>
                <div className='navbar-collapse collapse'>
                    <ul className='nav navbar-nav'>
                        <li>
                            <NavLink to={ '/' } exact activeClassName='active'>
                                <span className='glyphicon glyphicon-home'></span> ホーム
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to={ '/counter' } activeClassName='active'>
                                <span className='glyphicon glyphicon-education'></span> カウンター

사이트를 열면 깨져버린다.

조사 및 대응책

문제가 발생한 부분을 좁히고 싶기 때문에 Views.Shared._Layout.cshtml의 일부에도 일본어를 써 보자.

    <title>@ViewData["Title"] - Webサイト</title>

이쪽은 글자 깨지지 않는다. (브라우저 탭에 표시되는 '웹사이트' 부분.)


라는 것은 NavMenu.tsx에만 문제가 있을 것 같고, 이 파일의 문자 코드를 수정해 주면 좋을 것 같다.
Visual Studio 외부에서 텍스트 편집기에서 NavMenu.tsx를 엽니다 (아래 예제에서 편집기는 Mery 사용).


Mery는 윈도우 하단의 상태 표시 줄에 문자 코드를 표시합니다.
파일은 시프트 JIS로 저장되어 있는 것이 판명. 웹 사이트는 UTF-8로 표시하고 싶기 때문에, 문자 코드의 변경을 한다.


「다른 이름으로 저장」에서 「인코드」의 선택을 「UTF-8(BOM 없음)」로 변경해 저장해, 파일을 갱신한다.


사이트를 다시 열면 일본어가 올바르게 표시되었습니다.


파일의 문자 코드는 한번 갱신하면 보관 유지되므로, 에디터로 이 작업을 반복하거나, Visual Studio상에서 특별한 일을 할 필요는 없다.