Copy Coding

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 -

몇년 전에 VisualSVN 4.x 버전에 대해 설치 방법을 알아보았는데 변경된 기능이 있는지 확인하기위해 설치 및 간단한 사용법을 알아봅니다.

한가지 주의사항은 컴퓨터 이름이 영문이어야 설치가 가능합니다.  한글인 경우 설치가 중단됩니다.

먼저 프로그램을 다운로드 받습니다.

https://www.visualsvn.com/downloads/

사이트에 접속하면 다양한 제품이 있는데 SVN을 찾아봅니다.

2개의 버전이 보이는데 [VisualSVN Server 5.3.1 (x64-bit)]를 클릭하고 저장할 폴더를 선택해서 VisualSVN-Server-5.3.1-x64.exe 파일을 다운로드 합니다.

다운로드가 완료되면 프로그램을 실행합니다.

제품에 Apache HTTP Server와 Apache Subversion이 포함되어 있다는 안내 글이 보입니다.

[Next] 버튼을 클릭합니다.

저작권 관련 내용으로 [I accept the terms in the License Agreement] 앞에 있는 체크박스를 클릭해야 [Next] 버튼이 활성화됩니다. [Next] 버튼을 클릭합니다.

컴포넌트 선택 화면인데 기본값으로 하고 [Next] 버튼을 클릭합니다.

설치 위치와 접속 방법 등에 대한 선택 화면입니다.

repositories 위치를 변경 하려면  [Browse...] 버튼을 클릭 하고

폴더를 선택해주면 됩니다.

Repositories 위치를 변경을 해보았습니다.

서버 접속 Port도 변경하려면 수정을 하고 [Next] 버튼을 클릭합니다.

설치 후 툴에서 full-text 검색이 가능하게 해준다는데 개발 툴에서 검색하면 될것 같아 [Next] 버튼을 클릭합니다.

사용자 인증 관리를 Subversion에서 하는 것으로 놓고 [Next] 버튼을 클릭합니다.

사용자 추가와 그룹관리는 아래에서 설명합니다.

설정이 완료되었습니다.  만약 수정이 필요하면 [Back] 버튼을 클릭하여 수정을 하고 설치를 진행하려면 [Install] 버튼을 클릭합니다.

설치가 진행됩니다.

설치하다가 컴퓨터 이름이 한글인 경우 설치가 중단됩니다. 

꼭 영문으로 컴퓨터 이름을 변경하세요.

설치가 완료되었습니다.  VisualSVN Server를 실행하도록 하고 [Finish] 버튼을 클릭 합니다.

VisualSVN Server의 모습입니다.

Repository를 하나 생성하도록 하겠습니다.

좌측 트리 메뉴에서 Repositories에 마우스를 놓고 우측 클릭을 하여 팝업 메뉴를 띄웁니다.

여기서 [Create New Repository]를 클릭합니다.

Regular FSFS(Fast Secure File System)으로 기본적인 저장 방법과

Distributed VDFS(VisualSVN Distributed File System)으로 master와 slave로 분리되어 이중으로 저장하는 방법이 있습니다.

그냥 기본으로 두고 [Next] 버튼을 클릭합니다.

새로 생성하는 Repository 이름을 마음대로 결정합니다.  저는 TestRepository로 했습니다.

Empty는 빈공간을 만들고 여기에 여러 개의 프로젝트를 추가하도록 하는 방법과 Single-project로 처음부터 하나의 프로젝트만 관리하도록 생성하는 방법이 있습니다.

기본으로 놔두고 [Next] 버튼을 클릭합니다.

모든 사용자가 읽기 쓰기 가능하도록 두고 [Next] 버튼을 클릭합니다.

앞에서 설정할때 Search Index를 체크한 경우 필요한 기능입니다.

[Create] 버튼을 클릭하여 저장소를 생성합니다.

저장소에 접근할 수 있는 방법으로 URL을 알려주고 있습니다.

Eclipse, Intellij등에서 형상관리를 위해 접속하는데 사용하면 됩니다.

잘 복사해 놓습니다.

이제 사용자와 그룹을 만들어서 관리해보도록 하겠습니다.

좌측 메뉴에서 Users에 마우스를 대고 우클릭을 합니다.

[Create User...] 메뉴를 클릭 합니다.

신규 사용자와 비밀번호를 입력해서 유저를 생성합니다.

비밀번호는 기억하거나 어딘가에 적어놓도록 합니다.

비밀번호가 너무 간단하다고 하는데 위에 있는 Proceed ...라고 적힌 상단 글씨를 클릭하면 그냥 생성됩니다.

User가 생성되었습니다.

그룹도 동일한 방법으로 Groups에 마우스를 놓고 우클릭을 합니다.

[Create Group...] 메뉴를 클릭 합니다.

그룹 이름을 적당히 입력하고 그룹에 멤버를 추가하기 위해 하단의 [Add...] 버튼을 클릭해 봅니다.

조금 전 생성한 User가 보입니다. 

선택하고 [OK] 버튼을 클릭합니다.

together 그룹에 추가되었습니다.

추가할 사용자가 더 없으니 그냥 [OK] 버튼을 클릭합니다.

그룹이 멤버를 포함하면서 생성이 되었습니다.

이제 생성한 Repository를 사용할 수 있는 사용자 또는 그룹을 연결하는 작업을 시작해 봅니다.

생성한 TestRepository에 마우스를 놓고 우클릭하여 [Properties...]를 클릭합니다.

Everyone이라는 그룹이 기본으로 포함되어 있습니다. 

조금전에 생성한 그룹을 포함하기 위해 [Add...] 버튼을 클릭합니다.

조금전에 생성한 together 그룹이 보입니다. 선택하고 [OK] 버튼을 클릭합니다.

물론 아래에 있는 user를 한명, 한명 추가하려면 하단에 있는 Users에서 선택을 해도 되지만 그럼 사용자가 많은 경우 관리가 어렵게 됩니다.

기본으로 추가된 Everyone은 아무나 접속 가능한 설정이므로 접속을 차단해야 합니다.

Everyone을 선택하고 하단에 있는 No Access 라디오 버튼을 선택한 후 [OK] 버튼을 클릭하면 접속권한이 취소됩니다.

이런식으로 사용자와 그룹을 관리하면 됩니다.

다음번에는 Repository에 Project를 Share하고 commit 해보도록 하겠습니다.

- copy coding -

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

https://code.visualstudio.com/

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

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

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

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

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

다음 버튼을 클릭 합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

- 파일 아이콘

- 폴더 아이콘

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

- copy coding -

여러 명이 동시에 프로젝트를 진행 하거나 이동하면서 개발을 해야 하는 경우 SVN이나 Git로 소스 관리를 하면 무척 편합니다.  물론 가끔 작업 순서를 지키지 않아 충돌이 발생하는 일이 있지만 이런 툴 없이 작업 하는건 불가능에 가깝습니다.  개인적으로 개발을 하는 경우에도 소스 관리가 참 쉬워서 잘 사용하고 있습니다.

1. VisualSVN Server 설치

사용자와 소스를 관리하는 서버용 프로그램 중 사용법이 쉬운 VisualSVN Server를 다운 받습니다. 

https://www.visualsvn.com/

사이트에 접속하고

download를 클릭 합니다.

자신의 운영체제에 맞는 bit를 선택 하여 다운로드를 받습니다.  다운받은 파일을 실행하여 설치를 진행 합니다.  설정에 별 문제가 없다면 Next 버튼을 누르기만 하면 됩니다.

간단한 소개 화면 입니다.  Next 버튼을 클릭 합니다.

저작권 확인으로 I accept the terms in the License Agreement를 체크하고 Next 버튼을 클릭 합니다.

Next 버튼을 클릭 합니다.

설치 위치와 Port번호 입니다. 변경하지 않는다면 그냥 Next 버튼을 클릭 합니다.  저는 443 Port를 사용하는 프로그램이 있어서 설치 완료 후 변경하는 방법을 간단히 소개 합니다.  여기서 변경해도 되고 완료 후 변경해도 됩니다.

사용자 인증은 Subversion을 사용하는 것으로 하고 Next 버튼을 클릭 합니다.

설정이 완료 되었습니다.  이제 설치를 위하여 Install 버튼을 클릭 합니다.

설치가 진행되고

잠시 후 설치가 완료 되었습니다.  Finish 버튼을 클릭하여 종료 합니다.

설치가 잘 되었으면 볼 수 있는 관리 화면 입니다.

중간에 설명한 대로 만약 443 Port가 사용 중 이라면 VisualSVN Server 메뉴 에서

동작(A) > Properties

를 선택 하고 

좌측 메뉴에서 Network를 선택 합니다.

우측 Server port를 클릭하면 8443이 있습니다.  이걸 선택 하면 됩니다.

2. 저장소 생성

설치가 완료 되었으니 소스를 저장할 공간을 만들어 봅니다.

Repositories를 클릭하면 우측에 아무것도 없습니다.  테스트용으로 하나 생성합니다.

Repositories에 마우스를 대로 우측 버튼을 클릭 하여 팝업 메뉴에서 Create New Repository를 선택 합니다.

Regular FSFS를 선택 하고 다음 버튼을 클릭 합니다.

테스트 용으로 만들어 보기로 했으니 TestRepository 라고 이름을 적어 보았습니다.

저장소 구조를 기본값은 Empty로 여러 프로젝트를 한곳에 관리하는 것인데 저는 하나의 저장소에 하나의 프로젝트만 관리하기 위해 Single-project를 선택했습니다.  다음 버튼을 클릭 합니다.

All Subversion users는 아무나 접근 가능하고, Customize는 그룹 또는 사용자를 만들어 권한이 부여된 경우에만 접근하도록 할 수 있습니다.   Cumtom… 버튼을 이용하여 바로 그룹과 사용자를 만들 수 있는데 일단 저장소만 만든 후 진행 합니다.  아무나 접근 가능 차단하는 방법도 잠시후 설명하기로 하고 여기서는 그냥 Create 버튼을 클릭 합니다.

생성하려는 Repository에 대한 요약 설명을 확인 하고 Finish 버튼을 클릭 합니다.

TestRepository의 이름으로 저장소가 생성 되었습니다.

3. 그룹, 사용자 생성

저장소를 만들었으니 사용할 사용자를 생성 합니다.

Users에 마우스를 대고 우측 버튼을 클릭 하여 Create User를 선택 합니다.

name과 password를 입력하고 OK 버튼을 누르면 사용자가 생성 됩니다.

여기서 잠시 생각을 해야 합니다.  사용자를 추가 하고 추가할 때마다 Repository 접근 권한을 설정 할지, 아니면 그룹을 만들고 그룹에 권한을 주고 사용자는 그냥 계속 그룹에 추가할지를 결정 합니다.  여기서는 귀찮지만 그룹을 만들고 그룹에 접근 권한을 부여 하고 사용자를 그룹에 추가하도록 하겠습니다.

그럼 그룹을 만들어 보겠습니다.

Groups에 마우스를 대고 우측 버튼을 클릭하고 Create Group을 선택 합니다.

그룹 명을 User로 하였습니다.  그룹에 사용자를 추가하기 위해 아래쪽에 Add 버튼을 클릭 합니다.

처음 생성한 사용자 will이 보입니다.  선택 하고 OK 버튼을 클릭 합니다.

User 그룹에 will 사용자가 추가 되었습니다.  OK 버튼을 클릭하여 반영 합니다.  이런식으로 추가되는 그룹과 사용자를 연결해 줍니다.

4. Repository 접근 권한 부여

생성된 그룹에 저장소 TestRepository를 사용할 수 있는 권한을 부여 합니다.

TestRepository에 마우스를 대고 우측 버튼을 클릭해서 Properties를 선택 합니다.

이미 Everyone 그룹이 읽기 쓰기 권한을 가지고 있습니다.  Repository 생성시 All Subversion을 선택해서 그런 것 입니다.  저장소를 사용할 그룹을 추가 하려면 중간에 있는 Add 버튼을 클릭 합니다.

Groups에 새로 생성한 User 그룹을 선택 하고 OK 버튼을 클릭 합니다.

이제 그룹 User가 TestRepository에 연결이 되었습니다.  User 그룹의 권한은 Read / Write 입니다.  적용 버튼을 클릭 합니다.

Everyone 그룹은 No Access를 선택하고 적용 버튼을 클릭 하면 아무나 접근할 수 없게 됩니다. 신규로 개발자가 아닌 그룹을 추가로 생성하게 되면 Read Only를 부여하면 됩니다.  적용 버튼을 클릭 하고 확인 버튼을 이용하여 창을 닫습니다.