계박사의 코딩교실

간단히 설명을 하자면 HTML, CSS, JS, Image 파일 등을 자동으로 받아주는 프로그램입니다.

해당 URL에서 프리웨어로 다운로드 받아 설치합니다.

1. 프로그램 실행 시 화면입니다. 다음을 눌러줍니다.

2. 저장할 프로젝트(폴더명) 을 입력해줍니다. 폴더 위치는 기본 설치시 C:\My Web Sites 입니다.

3. 다운로드 할 웹사이트 URL을 입력합니다. 1개 이상도 가능합니다.

4. 몇가지 추가 옵션이 있으며 특별하게 옵션을 줄 것이 아니면 마침을 눌러줍니다.

5. 자동으로 스캔하여 해당 URL에서 이동할 수 있는 부분을 자동으로 인식하여 파일을 받습니다.

6. 모두 받으면 마침을 누릅니다.

7. 다운로드 받은 폴더에 가면 URL의 모든 이미지와 아이콘 등 파일을 받은 것을 확인 할 수 있습니다.

이클립스에 SVN을 연동해서 사용하는 것처럼 깃을 연결해서 사용 할 수 있습니다.

https://github.com/jwgye/project.git 

이러한 주소와 같이 개인 깃허브 주소가 있으면 가능합니다.

깃허브 주소가 없을 경우 이전에 작성한 포스트에서 만드시면 됩니다.

2016/01/01 - [Develop/Tool] - [Github 연동] Github(깃허브) 가입하기

STS 의 경우 Git 이 설치되어있기 때문에 별도로 설치할 필요는 없으며 없을 경우 Egit을 마켓에서 설치하시기 바랍니다.

Perspective 에서 Git 을 선택합니다.

Git 에 들어가시면 3개의 항목이 있습니다. 이중에 Clone a Git repository 를 선택합니다.

2개의 메뉴 중 Clone URI 를 선택합니다.

개인의 깃허브 URI 와 아이디 패스워드를 입력해줍니다. port는 입력하지 않아도 됩니다.

기본 Branch인 master를 선택합니다. 

깃이 연동될 디렉토리를 선택해줍니다.

보통 SVN과는 다르게 Local의 파일에 commit을 한 뒤에 git 에 push하여 다시 한번 update를 하게됩니다.

local 의 저장소 지정하신다고 보시면 될 것같습니다.

깃이 정상적으로 연결이 되면 아래처럼 세팅이 됩니다.

깃세팅이 끝났으니 이제 개발된 소스 또는 개발 시작하려는 소스를 업로드하면됩니다.

업로드 하려는 프로젝트에 오른쪽 클릭을 하여 Team -> Share Project 를 선택합니다.

Local 저장소를 선택하시고 단순히 Finish를 누르면 Local의 저장소와 함께 동기화가 됩니다.

실제로 깃에 올라간 것은 아니며 깃에 올리기 전 Local 의 저장소에 Commit을 한 뒤에 Update가 가능합니다.

프로젝트에 Add to Index 를 선택하면 프로젝트 파일에 있던 물음표가 사라지는 것을 확인 할 수 있을 것이다.

그런 후 Commit 을 해준다.

Commit 을 실행하면 commit 할 대상과 함께 메세지를 남길 수 있다. 

Commit 을 누르면 Local 저장소와 싱크만 맞추며 Commit and Push를 선택하면 Github에 소스가 업로드가 된다.

github에 push 할 때 정보를 확인 한 후 OK 버튼을 누르면 실제 github에 올라가게된다.

깃허브 사이트에서 올라간 소스를 확인 할 수 있다.

프로젝트를 진행하면서 계속해서 SVN만 사용을 해왔었습니다.

이번에 공부를 위하여 개인 프로젝트를 진행하면서 새로운 소스 공유 방법을 찾다가 유명한 Github (깃허브) 를 사용해 보기로 했습니다.

우선 이클립스에서 연동하기 전에 Github에 가입을 먼저 해보겠습니다.

가입은 일반 사이트에서 회원가입하는 것과 비슷합니다.

https://github.com/

해당 URL에 들어가면 바로 가입이 가능합니다.

사용자 이름과 이메일 그리고 비밀번호를 입력하면 가입이 가능합니다.

입력 한 뒤에 Sign up 버튼을 누르시면 아래와 같은 화면이 나옵니다.

저희는 개인이 사용할 것이므로 기본 선택이 되어있는 Free로 가입을 합니다.

Finish 버튼을 눌러주면 가입할 때 입력했었던 이메일로 가입 확인 이메일이 오게됩니다.

그 메일 안에 있는 버튼을 클릭하여 승인만 해주면 최종 가입이 끝납니다.

이메일 승인까지 마친 뒤에 이제 새로운 repository 를 등록해야 합니다.

오른쪽 아래의 New repository 를 클릭합니다.

SVN 과 같이 새로운 저장소 경로를 지정합니다..

원하시는 Respository 이름을 입력하시고 Public 으로 선택하여 [Create repository] 버튼을 클릭하여 최종 등록해주면됩니다.

Private 로 하면 좋지만 유료이기때문에 기본 오픈으로 만드시면됩니다.

라이센스 부분은 MIT 나 Apache 등 오픈 소스에 대한 라이센스 도 선택가능합니다.

아래와 같이 완성된 repository 입니다.

https 경로로 된 URL 주소로 이클립스와 연동하여 사용할 수 있습니다.

Github 가입하여 생성하였으며 다음 포스팅에 이클립스 연동을 하겠습니다.

Web 을 개발하다보면 웹페이지 Loading 이 느린 경우가 있습니다.

특히 무거운 Plugin 이 있다거나 로직이 복잡한 부분에서 프로세스가 오래 걸리는 경우가 있는죠.

HttpWatch 프로그램으로 어느 부분에서 지연이 되는지 확인이 가능합니다.

https://www.httpwatch.com/

사이트에서 Basic Edition (Free) 버전을 받아서 설치하면 간단하게 Http 모니터링은 준비 끝.

설치가 끝났으면 Internet Explorer 를 실행해 봅니다.

그리고 [ 도구 ] 메뉴에 들어가면 HttpWatch Basic 이라고 메뉴가 추가된 것을 실행합니다.

실행하면 F12 키를 눌렀을 때 나오는 개발자 도구와 같은 창이 뜹니다.

이 화면에서 웹페이지가 로딩될 때 걸리는 시간과 함께 요청된 http url 주소가 표시가 됩니다.

Record 버튼을 눌러서 웹페이지를 이동하거나 F5 키를 눌러주면 아래와 같은 화면을 볼 수 있을 것입니다.