Day books

사이트만 만든다고 사람들이 들어오긴 힘들다

→ 검색 엔진을 만들어야 함

1. 검색 엔진에 내 사이트 등록하기

 - 네이버 웹마스터 도구에 등록함

2. 내 사이트 인증하기

 - HTML 태그에 특정 문구 등록 - 메타 태그

 * 수정 후 deploy 다시 진행

3. 관련문서 제출하기

 1) robots.txt 간단 생성하기 (NAVER에 툴이 있음)

   - 모든 로봇 허용하기가 좋음

   - robots 는 폴더의 최 상단에 있어야함.

 2) sitemap 생성하기

   - 구글에서 Create Sitemap 검색

   - www.xml-sitemaps.com접속

   - url 입력 후 제출 (Start) → View sitemap detail → download

   - 폴더에 사이트맵 파일 추가

   - robots.txt에 사이트맵 주소 추가 (아래 문구)

     Sitemap: https:// 개인 url /sitemap.xml

 * 전체 수정 후 deploy 다시 진행

4. SEO (검색 엔진 최적화) - 검색 시 상단에 노출시키기 위함

  - 웹 페이지 최적화 활용

   . 체크가 되어있으면 잘 되어있는 것이고, X 되어 있는 것은 좋지 않음

   . 사이트명이나 내용은 적절하게 재설정 해주어야 좋음

* 기타

 검색 엔진의 원리

 - 검색 엔진은 크롤러라는 로봇이 정보를 모아 사이트에 다시 등록해 줌

 - 크롤러는 웹사이트에 있는 robots.txt 라는 파일을 제일 먼저 읽고 

   허용 / 불 허용에 따라 정보를 가져갈 지 말 지 결정한다.

 - sitemmap.xml 은 검색 엔진이 잘 찾을 수 있도록 해준다.

1. 내가 만든 사이트 인터넷에 공개하기

 1) 내 컴퓨터를 서버로 만드는 법

    . 내 컴퓨터 (Back-End, Server)  → Front-End

   - 보안에 취약하며, 24시간 켜져 있어야 해서 전기세가 많이 나감

 2) 외부 서버를 이용하는 방법

   - 외부 서버에 HTML을 올려 일부를 사용 (기업에서 관리를 해줌)

   - 개인 PC를 이용하는 것보다 안전함.

   - 웹 호스팅 (클라우드 서버)

      ; 아마존 웹 서비스 (업계 1위이지만 요금이 비쌈)

        netlify (무료, 편리 / 다양한 부가기능 / 초보자도 사용하기 용이함.)

   - HTML TEMPLATES 받기 (구글에 검색)

   - index.html 파일을 열어서 편집

   - Netlify 홈페이지에 가입하여 Deploy 하면 웹에 등록 됨

   - Site Setting을 통하여 주소 변경

      (자동으로 https 방식으로 인증 - 무료임)

HTML : 웹의 Front-End

 (HyperText Markup Language)

 - 예전에는 문서를 연결해주는 역할의 언어였음

 - 테트리스처럼 블럭을 쌓아 웹을 구성

1. 태그 이해하기

- 우리가 사용하는 컴퓨터는 Front-End

- NAVER는 Back-End

  * 네이버 검색어 순위 바꾸기는 내 컴퓨터로 들어온 HTML을 바꾸는 것으로 Server가 바뀌지 않아 내 것에서만 바뀜

 추천 사이트 

 1) 코드카데미

    . 다양한 카탈로그가 있으며 HTML과 CSS를 들으면 좋음, 4시간 정도 걸림

    . 영어로 되어 있지만 크롬 번역을 이용하면 쉽게 배울 수 있음

 2) 생활코딩

    . 이고잉이 만듬

    . 다양한 강좌가 있으며 모두가 무료로 수강할 수 있음

1. 브라우저 설치하기

  - 크롬 설치 (전 세계 점유율 62%)

    . 구글에서 크롬 다운로드

2. 코드 에디터 설치하기

  - 메모장 + 추가 기능

    . 메모장에서도 코딩은 가능하지만 틀린 것을 알려주지 않음

    . Sublime Text, Visual Studio Code, ATOM 등이 있음

  - VS CODE 설치하기

   . 구글에서 VS CODE 다운로드

1. 코딩 : Code + ing (코드를 작성한다.)

   - 컴퓨터에 명령한다.

2. 프로그래밍 언어 : 컴퓨터에 명령하는 언어

  - 컴퓨터 인식할 수 있는 것은 0과 1밖에 없음. : 기계어 →(가공) 프로그래밍 언어

  - 기계어에 가까울수록 저급어, 사람 언어에 가까울수록 고급어.

    . 저급어 : 실행 속도가 빠르고 세부적으로 조절이 가능하다.

    . 고급어 : 사용이 편리하지만, 실행 속도가 느리고 세부적으로 조절이 불가능하다.

 기계어 (2진수)   →    저급 언어(어셈블리어)    →    고급 언어(파이썬, 루비)    →     사람의 언어

3. 프레임 워크 : 코딩을 쉽게 할 수 있도록 도와주는 도구 모음

                      자주 쓰는 기능을 모아놓는 것 (환경 조성)

    EX) 프레임 워크, 라이브러리, API, SDK

조코딩 JoCoding 님 유튜브 영상으로 공부하고 있습니다.

1.  프로그래밍 언어 공부부터 시작하는 것은 어려울 수 있음

2. 웹(Web)으로 시작할 것

  웹 : 브라우저를 통해 접속할 수 있는 모든 사이트

    장점

     1) 익숙함

     2) 난이도가 낮음

     3) 개발에 필요한 도구가 많음

     4) 다양한 기기에서 동작함

 Front-End      vs.     Back-End

3. Front-End 부터 배우는 게 쉽다. (직관적임)

  - API(미리 만들어 놓은 가져다 쓸 수 있는 기능) 를 가져다가 쓰면 좋은 서비스를 만들 수 있다.

   . Front-End 배우기 위한 언어 : HTML, CSS, JS

      1) HTML : 밑그림 그림 (연필 역할), 뼈대를 만드는 역할

      2) CSS : 물감과 같음, 화려하게 만드는 역할

      3) JS : 그림을 움직이게 만드는 플립북 같은 것임

  공부 순서 : HTML, CSS 배우고 JS로 활용할 것

 4. Back-End 공부하기 (프로그램 언어가 본격적으로 쓰임)

   - 쉬운 언어를 먼저 시작하는 게 좋다.

    . 쉬운 언어들 : Javascript, Ruby, Python

      + 변수(~는 ~다), 조건문(만약 ~라면), 반복문(~을 n번 반복해라), 함수(a를 넣으면 b가 나옴)

        같이 기본적인 것을 먼저 배운다.

         (나중에 필요한 것을 찾아서 공부하면 됨)

   - 웹 프레임워크를 통해서 Back-End 공부가 쉬워졌다.

     . Java - Spring

     . Python - Django

     . Ruby - Rails (초보자 추천 - 적게 배우고도 많은 것을 빠르게 구현할 수 있음)

 * 나중에 앱을 만들겠지만, 먼저 웹으로 프론트 엔드를 공부하고 앱을 만들면 공부하기 더 쉬움.

조코딩 JoCoding 님 유튜브 영상으로 공부하고 있습니다.

1. 코딩이 쉬워졌다.

2. 아이디어만 있다면 큰 돈을 벌 수 있다.

3. 실생활에 도움이 된다.

4. 취업에 도움이 된다.

 ※ 오늘부터 코딩을 배우기로 하였는데, 유튜브로 공부를 하면서 여기에 기록을 남기기로 합니다.

   - 조코딩 JoCoding 님 영상을 기록으로 남기고 있습니다.