Copy Coding

검색 엔진에 자신의 site를 등록 하는건 주소만 등록이 된 것 이고 root 하위에 있는 많은 파일들도 등록을 해야 하는데

이러한 사이트 내부의 파일들을 등록하는 단계를 sitemap 등록이라고 합니다.

사이트 맵은 xml 형태로 작성이 되는데 수작업으로 해도 되지만 자동으로 생성을 해주는 사이트가 있으니

편안하게 주소만 적어주고 기다리기만 하면 됩니다.

꼭 수작업으로 작성하고 싶으신 분들은 다음과 같은 형식으로 작성을 합니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- Generated by Web-Site-Map.com -->
<url><loc>http://copycoding.tistory.com/</loc><changefreq>daily</changefreq><priority>1.00</priority></url>
<url><loc>http://copycoding.tistory.com/category</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Android</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Android/Device</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/nodejs</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Angular</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/Setting</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/category/MFC</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/media</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/location</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/guestbook</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/26</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/Express</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/Project</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/%EA%B5%AC%EC%A1%B0</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/tag/%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/25?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/24?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/21?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/16?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/15?category=1019376</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/?page=2</loc><changefreq>daily</changefreq><priority>0.85</priority></url>
<url><loc>http://copycoding.tistory.com/?page=3</loc><changefreq>daily</changefreq><priority>0.85</priority></url>

1. sitemap  생성

자동으로 생성 하실 분들은 인터넷에서 sitemap 생성 등으로 검색을 하면 여러 개의 검색 결과를

얻으실 수 있고 그 중에 하나를 선택 하여 사이트 맵을 작성하면 됩니다.

여기서는 아래 주소 사이트를 이용 합니다.

http://www.web-site-map.com

그리고 하단의 노란색 [Get Free XML Sitemap] 버튼을 클릭 합니다.

그러면 다음 페이지로 이동을 하고 상세 설정을 진행 합니다.

1번에서 사이트 주소가 정확한지 확인해 주고

2번에서 그림에 있는 글씨를 적어주고

나머지는 그냥 두어도 됩니다.

아래로 쭉 내려오면 하단에 역시 노란색 [Create free XML Sitemap] 버튼을 선택 합니다.

한참을 Status에서 진행을 합니다.

그리고 sitemap이 완성이 되면 3번과 같이 다운로드를 받으라고 합니다.

download your sitemap을 클릭하면 화면이 이동되고 파일에 대한 간략한 정보가 나옵니다.

download를 클릭하여 파일을 다운받습니다.

이제 다운로드 받은 sitemap.xml 파일을 검색 사이트에 등록하는 방법은 두가지가 있습니다.

하나는 sitemap.xml 파일을 본인의 홈페이지에 ftp등으로 업로드 하고 그 주소를 가지고 등록하는 방법이있고

여기서는 게시글에 첨부파일로 업로드 하여 참조하는 방식으로 등록 합니다.

두가지 방법 중 편한방법을 이용 하시면 됩니다.

2. 붙여 넣기 용 Sitemap.xml 주소 만들기

먼저 내용이 없으니 비공개로 글쓰기를 합니다.

다른 사람에게 파일만 공개하려면 공개로 하셔도 무방합니다.

첨부가 되었군요.  우측 HTML 체크박스를 체크 합니다.

sitemap.xml 파일에 대해 어떤 값으로 참조되는지 알 수 있습니다.

대충 이런식으로 나옵니다. 일부분을 ‘x’로 처리 했습니다.

<p>sitemap.xml</p>

<p><br /></p>

그럼 이중에 일부분을 떼어서 다음처럼 url을 만듭니다.

http://copycoding.tistory.com/attachment/cfilex.xx@99XXXXXXXXXXXXXXXX5AB.xml|filename=sitemap.xml

이게 붙여넣기를 해야 하는 최종 모습 입니다.

3. google search console에 등록

먼저 구글에 등록을 해보겠습니다.

로그인을 하고 google search console에 가면 좌측에 sitemap 메뉴가 있습니다.

준비 해놓은 주소를 복사하고 [submit] 버튼을 클릭 합니다.

주소나 파일에 이상이 없으면 하단에 success 로 표시됩니다.

그럼 끝.

4. Naver 웹마스터 도구

이번에는 Naver 웹마스터 도구에 sitemap을 등록 하겠습니다.

여기서도 로그인을 하고 좌측 메뉴에서 사이트맵 제출을 선택 합니다.

그리고 주소를 복사하고 [확인]버튼을 클릭 합니다.

네이버도 오류가 없으면 하단에 리스트로 나타납니다.

이제 완료가 되었습니다.

- copy coding -

예전에 블로그가 한창 일때는 포털 사이트마다 성격이 다른 블로그를 개설해서 5개가 넘어가니

통제도 안되고 당연히 글쓰는 것도 힘들고 블로그 방문자 수에 집중 하다보면 블로그 노예가 되어 버려 주말이고 명절이고 블로그만 하게 되어 모두 접었는데.

사람 욕심이 그래도 블로그를 만들었는데 방문자가 없으면 좀 섭하죠.  단지 tistory는 등록을 해도 네이버에서 검색이 잘 안된다고 해서 얼마나 들어올지 모르겠습니다. (추가합니다 : 등록하고 1년이 지났지만 일 방문자 5명도 안되는군요.)

네이버에 블로그를 한번 등록해 보겠습니다. 상업 사이트라면 키워드 구매도 고려를 해야 하겠죠.

먼저 네이버 웹마스터 도구에 접속 합니다.

네이버 웹마스터 도구  https://webmastertool.naver.com/

접속하면 그냥 사이트 화면이 나오고 등록하는 페이지로 들어갈 수 없습니다.

로그인을 하면 사이트 추가 페이지로 들어갑니다.

사이트는 여러개 추가가 가능합니다.

사이트 주소를 적어주고 [추가] 버튼을 선택 합니다.

사이트를 추가하면 등록하려는 사람이 본인 소유인지 확인을 들어 갑니다.

1. HTML 파일 업로드

html 을 편집 할 수 없는 site 라면 ‘HTML 파일 업로드’를 선택 합니다.

1) 1번을 누르면 파일을 다운로드 받을 수 있습니다.

2) 다운 받은 파일을 ftp등을 이용하여 사이트 메인 디렉토리에 업로드 합니다.

3) 3번 주소를 클릭하여 메인 디렉토리에 업로드 되었는지 확인 합니다.

4) 마지막으로 하단에 있는 [확인] 버튼을 누르면 소유확인이 됩니다.

2. HTML 태그

파일 업로드가 귀찮고 HTML을 편집할 수 있다면 태그 방식을 선택 합니다.

1) [HTML 태그 ]를 선택하면 meta Tag를 주는데 이걸 드래그해서 복사 합니다.

이제 자신의 사이트로 가서 추가를 해줘야 겠지요.

2) html 편집

Tistory 를 이용하는 경우에는 관리 페이지에서 [스킨편집]을 선택 해서 [html 편집]으로 갑니다.

그리고 복사해온 메타태그를 <head>와</head> 사이에 추가해 줍니다.

다른 사이트들도 텍스트 편집기로 메인 페이지가 무엇인지 모르겠지만 index.html, index.jsp…

아니면 프레임으로 나뉘었으면 top.html, top.jsp 등등 을 수정 합니다.

수정 후 저장을 하고 다시 naver로 돌아 옵니다.

3) 이제는 마지막으로 하단에 있는 [확인]버튼을 클릭합니다.

3. 소유확인 없이 사이트 추가

소유확인을 하지 않아도 수집요청을 할 수 있습니다.

소유권 확인 완료되면 연동 사이트 목록에서 확인 가능 합니다.

목록에 있는 주소를 클릭해서 좀더 다양한 기능을 설정하고 사용할 수 있습니다.

- copy coding -

console mode에서 angular를 설치하고 간단한 project를 생성하고 테스트를 해보았는데요.

[angular] angular 간단한 프로젝트 console에서 테스트

이번에는 eclipse에서 angular plug-in을 설치하고 테스트를 해보도록 하겠습니다.

상단 메뉴에서

를 선택하면 창이 하나 뜨고 거기에 Angular가 있는지 확인 합니다.

없네요.

설치가 안되어 있나 봅니다.

그럼 설치를 해보겠습니다.

먼저 eclipse 상단 메뉴에서 Eclipse Marketplace를 선택 합니다.

Help > Eclipse Marketplace…

그러면 Eclipse Marketplace 팝업 창이 열립니다.

Find 입력창에 설치하려는 angular를 입력하고 검색을 합니다.

버전은 시간이 지나면서 변경이 되겠지만 검색된 Angular IDE 설치 합니다.

Angular IDE는 Angular 통합 개발환경으로 자세한 제품 및 기능 설명은

https://www.genuitec.com/products/angular-ide/

이곳을 참조하면 좋은 정보를 얻을 수 있습니다.

[Install] 버튼을 클릭해서 설치할 파일들을 다운받습니다.

추가로 설치할 솔루션이 있으면 선택을 하고 [Confirm] 버튼을 클릭 합니다.

라이선스에 동의를 하고 [Finish] 버튼을 선택 합니다.

eclipse에 Angular를 설치를 완료 하면 재시작 요청 팝업을 오픈 합니다.

[Restart Now] 버튼을 선택하여 eclipse를 재시작 합니다.

재 시작을 하면 eclipse 테마를 변경 시킬 수 있습니다..

[Next] 버튼을 선택 합니다.

이제 테마를 선택 하는 창이 나오는데 기호에 맞는 테마를 선택 합니다.

여기서는 Darkest Dark Theme를 선택 했습니다.

테마를 선택 했으면

[Next] 버튼을 선택 합니다.

추가적인 기능 설치 팝업이 나오는데 Angular IDE를 만든 CodeMix에서 제공하는 건데 모두 Next를 해줍니다.

설치가 끝났으면 이제 원래 하려던 Project를 하나 생성해 보겠습니다.

console mode에서 만들어 본 것 처럼 동일하게 만들겠습니다.

상단 메뉴에서 Angular Project를 찾기 위해 선택을 하면

File > New > Other…

이제는 Angular가 보이는 군요.

Angular Project를 선택 합니다.

생성할 프로젝트에 대한 설정을 하는 팝업 창이 나오네요.

프로젝트 명은 myNgProject로 했고 나머지는

선택할 수 있는 버전들이 있는데 잠시 어떤 버전들이 있는지 볼까요?

그냥 기본으로 설정 합니다.

[Finish] 버튼을 선택 합니다.

Anglar perspective를 보겠냐는데 함 보죠.

eclipse 우측에 머가 나오는 군요.

eclipse 좌측 Project Explorer를 보니 프로젝트가 생성이 되었는데 파일이 없습니다.

아직 다 생성이 된게 아닙니다.

시간이 지나면서 조금씩 파일이 나타납니다.

하단에 프로젝트 생성 진행 상황이 Terminal 창에 보여집니다.

한참 동안 뭔가를 만들다가 화면에 README.md가 나타나면 생성이 된 것 입니다.

README.md에 간단한 프로젝트에 대한 설명이 기술되어 있는데

실행은 ng serve로 하고 접속은 http://localhost:4200으로 하면 된다는 군요.

생성된 프로젝트 파일들도 보입니다.

프로젝트를 실행 합니다.

프로젝트 명에 마우스를 놓고 우측버튼을 클릭하고

Run As > Angular Web Application

선택하면 또 한참을 하단 Terminal 창에서 먼가를 표시하다가

짠 하고 결과가 나옵니다.

테마를 어떤걸 선택하느냐에 따라 화면 비교를 해보겠습니다.

위에서도 화면 캡처를 두가지 버전으로 해보았습니다.

Darkest Dark Theme

Fresh Light Theme

테마를 Light로 하니 단점이 있습니다.

원래 Angular IDE가 Dark를 기본으로 해서 그런지 일부 기호가 흰바탕 에서는 희미하게 보이는군요.

개인의 기호니까 가독성이 좋은것으로 선택을 하세요.

저는 노트북과 데스크톱을 달리 해서 좀더 써봐야 겠습니다.

- copy coding -

angular를 console 모드에서 설치하고 간단한 프로젝트를 만들어 보았는데

어떤식으로 작동이 되는지 디렉토리와 파일 구조들을 한번 보도록 하겠습니다.

angular가 설치된 디렉토리의 구조와 파일 모양은 아래와 같은데요.

Angular 실행을 담당하는 ng 파일을 좀 볼까요?

node  ….ng  “$@”  이런 형태군요.

ng 명령을 사용해도 결국 node를 이용하고 나머지 ng를 포함해서 파라미터로 넘기는 군요

이젠 프로젝트가 생성된 디렉토리를 구경해 볼까요?

먼저 angular.json 설정 파일 내용을 보겠습니다.

프로젝트와 관련된 모든 설정이 이곳에 정의되어 있는 것을 볼 수 있습니다.

잘은 모르겠지만 대충 살표보면

“sourceRoot”: “src”  - 프로젝트와 관련된 source는 src 디렉토리에 있고

“prefix”: “app”  - 시작을 app로 하며

“index”: “src/index.html”  -  초기 view 파일은 src 밑에 index.html 파일이고

“main”: “src/main.ts”  -  src 밑에 main.ts 라는 typescript 파일이 있군요.

그렇다면 src 디렉토리로 가서 첫 화면을 어떻게 불러 왔나 하나씩 풀어보겠습니다.

제일 먼저 index.html을 호출 한다고 했으니 열어보면

일반 html 형태의 파일인데 실제 화면 보여줄 <body>테그에는 내용이 없고

<app-root></app-root>

이게 눈에 띄는 군요.

그렇다면 <app-root></app-root> 이게 내용 이라는 건데 뭔가가 대체를 하겠다는것 같고.

그럼 main.ts는 뭐가 정의 되어 있을까요?

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

모듈과 환경설정이 어떤 파일인지를 포함하고 있습니다.

source가 app을 접두어로 사용한다고 했으니 app으로 가면 뭔가 있겠네요.

app.module.ts를 보겠습니다.

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

여기서는 라우팅과 컴포넌트를 정의하고 있습니다.

화면과 관련있는 소스는 component입니다.

app.component.ts를 보겠습니다.

몇 줄 안되는 곳에 많은 내용이 들어있네요.

index.html 파일 하단에서 본적이 있는

<app-root></app-root>

이거에 맵핑할 app.component.html 파일을 정의 하고 있습니다.

그리고 title도 정의가 되어 있군요.

그렇다면 ./app.component.html 파일을 열어보겠습니다.

보이시나요?

localhost:4200 했을 때 보여준 웹 화면이 이것 이었습니다.

index.html은 껍데기 이고 이 app.component.html 가 app-root에 맵핑되어서

보여진 것이지요.

title도 여기서 위치 잡고 있습니다.

대충 파일들의 구조를 그려보면 이런 식으로 연결 되어 있습니다.

다음에는 페이지를 추가해 보면서 구조를 좀더 살펴 보겠습니다.

- copy coding -