Tistory에서 구글 서치 콘솔에 사이트 맵을 올리기 위해 대부분 sitemap.xml을 만들어 주는 사이트에 들어가서 본인의 티스토리 주소를 입력 하고 몇 십분 또는 몇 시간씩 기다렸다가 사이트 맵 파일잉 만들어 지면 파일을 다시 등록하고 google search console에 들어가서 위치를 입력하여야 하는 작업들을 하는 경우가 많은데 티스토리에는 자체적으로 구글 서치 콘솔로 사이트 맵을 등록할 수 있는 플러그인이 있습니다


tistory sitemap google search console


이미 아시는 분들은 잘 사용을 하고 있겠지만 모르는 분들이 있다면 얼마나 쉬운지 한번 보세요.

먼저 Tistory에 로그인을 하고 관리 페이지에서 좌측 메뉴에서 [플러그인]을 클릭 하면 


tistory sitemap google search console


우측에서 [Google Search Console] 을 찾을 수 있습니다클릭 해야겠죠.


tistory sitemap google search console


팝업창이 나타나면 Google에 로그인 하기 위한 [계정 연결하기] 버튼을 클릭 합니다


tistory sitemap google search console


본인의 계정을 선택 하고 로그인을 진행 합니다.


tistory sitemap google search console


Tistory에서 Google에 접속을 요청하게 되고 [허용] 버튼 클릭하면 사이트가 연결이 됩니다.


tistory sitemap google search console


 연결이 성공 했다는 팝업을 볼 수 있습니다.


tistory sitemap google search console


티스토리와 구글 서치 곤솔을 연결 하였으니 [적용] 버튼 클릭해서 계속 사용할 수 있도록 해 줍니다이것으로 연결 작업이 완료 되었습니다.


그럼 Tistory 에서 제출한 SitemapSitemap을 생성하는 사이트에서 만들어준 Sitemap을 제출한 경우는 어떤 차이가 있을 까요?


tistory sitemap google search console


상단이 Tistory에서 제출한 Sitemap URL 수 이고 하단이 사이트를 이용해서 생성한 Sitemap을 제출한 경우의 URL 수 입니다. 티스토리에서는 필요한 링크만 제출을 하고 사이트에서 만든 sitemap에는 자동으로 추출하다 보니 불필요한 폴더 정보등이 다수 들어 있어서 차이가 납니다물론 어느 것을 사용 할지는 본인들의 선택 사항이겠지만 참고 삼아 비교해 보았습니다.


- copy coding -


데이터를 생성 하고 웹과 앱에서 동시에 사용하기 좋은 장소로 cloud가 딱인것 같아 한번 구성을 해보았습니다.  Firebase 뿐만 아니라 google에서 제공하는 cloud 관련 서비스를 사용 하려면 구글 계정이 있어야 합니다.




https://firebase.google.com/


firebase project create delete


처음부터 크롬 브라우저 우측 상단의 로그인을 클릭 하던가 아니면 그림 속 [시작하기] 버튼을 클릭 하면 구글 로그인 페이지로 이동하니 로그인을 합니다그리고 다시 파이어베이스 페이지로 돌아와 시작하기 버튼을 클릭 하여 Firebase에 들어오면 아무것도 없습니다.

 

Firebase 프로젝트 생성


firebase project create delete


[프로젝트 만들기] 버튼을 클릭해서 새로운 프로젝트를 생성해서 사용하면 되는데 프로젝트는 여러개 생성 가능 합니다그럼 프로젝트 생성을 시작해 봅니다.


firebase project create delete


적당한 프로젝트 이름을 입력해 줍니다. 그리고 [계속하다] 버튼을 클릭 합니다.


firebase project create delete


로그 분석 설정입니다필요 없으면 하단의 설정을 취소하고 [계속하다] 버튼을 클릭 합니다.


firebase project create delete


계정을 설정 하거나 신규로 생성 합니다. 신규로 생성하는 경우


firebase project create delete


체크박스를 모두 선택 해야 프로젝트 만들기 버튼이 활성화 됩니다계정을 선택 또는 만들기를 하고 최종적으로 [프로젝트 만들기] 버튼을 클릭 합니다.


firebase project create delete


프로젝트가 생성중입니다.


firebase project create delete


프로젝트가 생성 되었습니다.  [계속하다] 버튼을 클릭하면 콘솔 화면으로 이동 합니다.


firebase project create delete


프로젝트는 여러개 생성이 가능 합니다.  Firebase 메인 페이지로 이동하면


firebase project create delete


다음과 같이 새로 생성된 프로젝트가 보이고 추가 버튼도 있습니다프로젝트 추가를 누르면 앞에서 했던 새로운 프로젝트 생성이 진행 됩니다.

 

 

Firebase 프로젝트 삭제

 

물건을 구매하고 단순 변심에 의한 환불은 안되지만 firebase로 생성한 프로젝트가 마음에 들지 않거나 필요 없는 경우에는 언제든지 삭제가 가능 합니다.


firebase project create delete


삭제 하려면 일단 삭제 하려는 프로젝트를 클릭 하여 firebase console로 이동 합니다


firebase project create delete


해당 파이어베이스 프로젝트 콘솔로 이동을 하고 나서 프로젝트 개요의 우측에 설정 아이콘을 클릭하면 팝업 메뉴가 나타납니다.  [프로젝트 설정] 메뉴를 선택 합니다.


firebase project create delete


설정 화면에서 [프로젝트 삭제]를 클릭 합니다.


firebase project create delete


경고 프로젝트 삭제 팝업 창에서 모든 체크박스를 선택하면 [프로젝트 삭제] 버튼이 빨간색으로 활성화 됩니다이제 [프로젝트 삭제] 버튼을 클릭하면 프로젝트가 삭제 됩니다.


- copy coding -


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

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

 

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';

 

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

sourceapp을 접두어로 사용한다고 했으니 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 했을 때 보여준 웹 화면이 이것 이었습니다.


angular project analysis


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

보여진 것이지요.


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


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



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


- copy coding -


angularjs가 버전이 높아지면서 기능 및 사용법이 많이 변경이 되었습니다.

초창기에는 그저 jQuery 비스무리 하구만 했는데 이제는 이걸 어떻게 배우지?”

할정도로 강력한 개발 도구가 되었습니다.

 


1. node.js 설치


angularnpm을 이용하여 설치 합니다.

그런데 npm node.js에 포함되어 있어 node.js를 설치할 때 같이 설치가 됩니다.

node.js가 설치되지 않았다면 먼저 node.js를 다운받아 설치 합니다.

 

https://nodejs.org/ko/



설치 방법은 다운받은 파일을 그냥 단순하게 next만 클릭 해주면 됩니다.


설치 참조 : node.js 다운로드 설치하기


설치된 디렉토리 구조를 볼까요?



잘 설치가 되었있군요.


 

2. angular-CLI 설치


이제 Angular CLI를 설치하겠습니다.

 

windows console창을 하나 열고 설치 명령어를 입력 합니다.

 

npm install -g @angular/cli

 

 

angular/cli@7.0.4 버전이 설치되었습니다.


설치가 잘 되었는지 확인해 봅니다.

angular를 설치하면 같이 설치되는 모듈들의 리스트도 있습니다.


ng –version



잘 설치 된 것 같습니다.

 

이렇게 하면 angular의 설치는 완료된 것 입니다.




3. angular 프로젝트 생성



이제 프로젝트를 생성하고 개발을 시작 하면 됩니다.


myNgProject 라는 이름으로 프로젝트를 생성 하겠습니다.


프로젝트 생성 명령어를 입력 합니다.

 

ng new myNgProject




angularrouting을 추가하는지와 css를 어떤것으로 할것인지 선택을 합니다.


키보드 위,아래 화살표 이동키로 움직이면 한칸씩 이동합니다.


저는 그냥 익숙한 CSSstyle을 작업하는 것으로 했습니다.



주르륵 프로젝트 관련 디렉토리와 파일들이 생성 됩니다.



파일 구조를 볼까요.



이제 생성된 프로젝트를 실행해 보겠습니다.

 

먼저 프로젝트 디렉토리로 이동을 합니다.

 

그리고 프로젝트를 실행 합니다.

 

ng serve



서버가 실행하면서 4200 port로 대기하고 있다는군요.


브라우저를 하나 열고 접속을 해봅니다.

 

http://localhost:4200


angular console test


기본적인 테스트는 잘 되는군요.


- copy coding -


12

+ Recent posts