Visual Studio Code로 파일을 불러왔는데 한글이 깨지면서 아래처럼 모두 물음표로 나오는 경우가 있습니다.

 

    //id �� �� ����

    $("#input_id").val("set input Value by id");

    //class �� �� ����

    $(".input_class").val("set input Value by class");

    //name���� �� ����

    $('input[name="input_name"]').val("set input Value by name");

 

Visual Studio Code 프로그램의 언어 설정은 프로그램 하단 우측을 보면 확인하면 알 수 있습니다.

 

 

그림에서 보이는 것처럼 현재 VS Code의 언어 설정은 UTF-8로 되어있지만 한글이 깨지는 경우입니다.

이런 경우 불러온 파일의 생성을 UTF-8가 아닌 다른 언어로 설정하여 작업했기 때문에 한글이 깨지는 상황입니다.

 

원래의 한글 인코딩을 찾기 위해서는 하단에 있는 인코딩 상태 값의 [UTF-8]을 클릭하면 상단 가운데에 다음처럼 [Reopen with Encoding] 메뉴를 볼 수 있습니다.

 

 

 

[Reopen width Encoding]을 클릭하면 문서의 인코딩을 변경할 수 있는 character set 값들이 나오는데

 

 

 

가능하면 한글 인코딩 설정을 먼저 선택해 보고 안되면 가능성 있는 인코딩 값을 선택합니다.

목록에서 [Korean (EUC-KR)을 찾아서 선택해 보았습니다.

 

    //id 설정

    $("#input_id").val("set input Value by id");

    //class 설정

    $(".input_class").val("set input Value by class");

    //name으로 설정

    $('input[name="input_name"]').val("set input Value by name");

 

이제 한글이 제대로 보이는군요.

 

- copy coding -


Script형 프로그램을 편집하기 좋은 Visual Studio Code 설치 방법입니다방법이라고 할것도 없고 그냥 다음 버튼만 클릭 하면 설치가 완료 됩니다다운로드는 아래 주소에 들어 가면 됩니다.

 

https://code.visualstudio.com/



Visual Studio Code install


좌측 Download for Windows를 클릭 하면 바로 윈도우즈용 설치 파일을 다운로드 받을 수 있습니다우측 Download 버튼을 클릭 하면 OS 별로 다운로드 받을 수 있는 페이지로 이동 합니다.


Visual Studio Code install


여기에서 자신의 운영체제에 맞는 버전을 찾아 다운로드하고 아래와 같은 순서로 설치를 진행 하면 됩니다. 다운받은 VSCodeUserSetup-x64-1.41.0.exe 파일을 클릭 하여 설치를 진행 합니다.


Visual Studio Code install


계약에 동의함을 선택하고 다음 버튼을 클릭 합니다.


Visual Studio Code install


설치위치를 변경하려면 [찾아보기] 버튼을 클릭 합니다. 아니면 그냥 다음 버튼을 클릭 합니다.


Visual Studio Code install


설치 폴더 명을 선택 하거나 그냥 다음 버튼을 클릭 합니다.


Visual Studio Code install


다음 버튼을 클릭 합니다.


Visual Studio Code install


여기까지 설치를 위한 설정 값 선택을 하였습니다이제 설치를 위해 설치 버튼을 클릭 합니다.


Visual Studio Code install


설정 값대로 설치가 진행 됩니다.


Visual Studio Code install


설치가 완료 되었습니다시작에 체크한 채로 마침을 버튼을 클릭 합니다.


Visual Studio Code install


Visual Studio Code(VSCode)가 실행된 모습 입니다이제 VSCode에서 사용할 폴더와 파일의 아이콘을 설치 하면 됩니다아이콘이 없으면 정말 밋밋하고 코딩이 재미 없을겁니다.


Visual Studio Code install


상단 검색창 에 ext install vscode-icons 아니면 vscode-icons 를 입력하고 enter를 클릭 합니다.


Visual Studio Code install


vscode-icons를 찾았습니다설치(Install) 버튼을 클릭 합니다.


Visual Studio Code install


vscode-icons가 설치 되었고 반영을 하기 위해 VSC를 재시작 해 봅니다.


Visual Studio Code install


머 별로 변한게 없는것 같습니다기존에 작성된 프로젝트를 하나 열어 볼까요?

open Folder를 선택해서 프로젝트를 열어 봅니다.


Visual Studio Code install


Angular로 하나 만든 프로젝트를 선택했습니다.


Visual Studio Code install


파일 옆에 아이콘들이 보이는 군요대충 이렇게 사용 됩니다이제 좌측에서 파일을 하나씩 선택 해서 코딩을 시작 하면 됩니다.

 

VSCode Icon에 대해 이미지만 좀 보겠습니다아래 주소에서 가져온 이미지 입니다.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

 

- 파일 아이콘


Visual Studio Code install


- 폴더 아이콘


Visual Studio Code install


이걸 쓰다가 다시 이클립스로 돌아갈지 모르겠지만 당분간 적응을 해봐야 겠습니다.


Visual Studio Code install



- copy coding -


1

+ Recent posts