[TIL] 벨로그 & 자바스크립트 입문기

[ 뚜둥등장 ]

벨로그 드디어 시작 🤭 !

재활치료실에서 4년차로 일하던 내가 퇴사를 하고,
20대의 마지막에 프론트엔드 개발자가 되겠다는 목표를 향해 이제 달려가보려고 한다.

2~3주동안은 노마드코더 코코아톡 클론코딩 과정을 완강하면서
HTML과 CSS에 대한 기초 지식을 이제 어느 정도 갖출 수 있게 되었다.

완강을 하면 신청하려고 했던
멋쟁이 사자처럼🦁 프론트엔드 스쿨 1기의
1차 서류 전형을 떨리는 마음으로 제출하였고, 곧바로 메일로 2차 과제 제출 안내문이 날라왔다.
과제 질문에 답변하기 위해선 조코딩님의 유튜브 강의들을 수강해야 했다. (너무 유용했다!)
HTML과 CSS를 활용해서 구글 인덱스화면 클론코딩을 했다.(뚜굴) input은 직접 CSS를 수정하지 않고, 강의처럼 Semantic UI 사이트 (https://semantic-ui.com/elements/input.html)를 활용해보았다. 검색을 하면 실제 구글 검색화면으로 넘어가게 할 수 있다는 점이 신기했다.
그리고 JavaScript 기초와 활용 1,2강을 통해 자바스크립트를 처음으로 접할 수 있었다.

그래서 배운 내용을 정리하고 느낀 점을 벨로그에 적어보려고 한다! 😆

---

[ 요약정리 ]

HTML, CSS 추천 학습 사이트

1. codecademy (https://www.codecademy.com/)
2. 생활코딩 (https://opentutorials.org/course/1)

11월 안에 남는 시간 쪼개서 꼭 생활코딩 WEB2까지 다 들을 생각이다!

프레임워크란?

자주 쓰는 기능을 모아놓고 쉽게 활용 가능한 환경. 용도별/언어별로 다양한 프레임워크가 존재한다.

• Framework
• Library
• API(Application Programming Interface)
• SDK(Software Development Kit)

Chrome - 요소 검사(eliment inspection) 단축키

ctrl + shift + c

---

웹사이트 인터넷에 올리기

1. 내 컴퓨터를 서버로 만드는 방법 - 보안 취약
   🌟 2. 외부 서버(24시간 on)를 이용하는 방법

웹 호스팅(클라우드 서버) 활용해보기

AWS, netlify 등이 있다. netlify는 대부분 무료이며 편리한 부가기능이 많고, 직접 구현하기 복잡한 https가 적용된 사이트를 만들 수 있다.
구글에 "HTML free template"을 검색하면 (마치 PPT 템플릿 검색하듯이!) 다양한 활용 가능한 템플릿들이 나온다는 사실을 알게 되었다.

검색 엔진 등록하기

1. 검색 엔진에 내 사이트 등록 -> 네이버 웹 마스터 도구 혹은 구글 서치 콘솔
2. 내 사이트다! 인증 -> head에 meta태그 삽입하기 (HTML 수정)
3. 관련 문서 제출 -> robots.txt와 sitemap.xml
   robots.txt에는 크롤러(구글 - 구글봇, 네이버 - 예티 등)의 접근 허용 / 거부를 표시한다.
   sitemap.xml은 구글에 "create sitemap"을 검색해 간단하게 만들 수 있다.

user-agent: *Allow:/
sitemap: https://URL/sitemap.xml

4. SEO(Search Engine Optimization) 검색 엔진 최적화
   -> 네이버 웹 마스터 도구 - 검증 - 웹 마스터 최적화에서 체크된 항목이 많을 수록 검색이 잘 될 확률이 높아진다.

---

input 내용 구글 검색되게 하기

    <form
      action="https://www.google.co.kr/search"
      method="GET"
      class="search-bar"
    >
      <div class="search-bar__input input-group mb-3">
        <input
          name="q"
          type="text"
          class="form-control rounded-pill"
          placeholder="Doogle 검색 또는 URL 입력"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        />
      </div>
    </form>

form action="https://www.google.co.kr/search", method는 get 방식이고,
input name="q"로 지정해주면 된다.
실제 구글에 검색했을 때의 URL을 통해 왜 이렇게 해야 하는지 강의에 나와있어서 좋았다.

---

유용한 사이트들

1. https://getbootstrap.com/
2. https://materializecss.com/
3. https://codepen.io/
   🌟 4. https://jquery.com/

jQuery 사용하기

1) 직접 "다른 이름으로 링크저장"해서 다운받거나
2) CDN을 이용

• CDN: 인터넷에서 특정 파일을 효율적으로 불러올 수 있게 하는 것

jQuery CDN (https://code.jquery.com/)

jQuery라는 것을 말로만 들어봤는데 실제 어떤 식으로 사용하는지 알 수 있었다.
기본적인 것만 알면 부트스트랩, 코드펜 등에서 다양하고 멋진 소스를 활용할 수 있다는 것이 인상깊었다.

---

API(Application Programming Interface)

• open API: BE 주소와 사용 규칙을 공개한 것. 서버리스(Serverless) 라고도 함.

FE가 BE에 정보를 요청할 때는 규칙에 맞게 요청을 해야 하고, 그 사용 규칙을 제공하는 것이 API이다. BE 주소와 사용 규칙 API만 알면 FE만 만들어도 얼마든지 정보를 요청하고 데이터를 가져와서 사용할 수 있다. API를 아무런 제약없이 열어두게 되면 남용될 우려가 있으므로 API key를 발급받아야 접근 권한이 생긴다.

서버에 정보를 달라고 하는 것을 요청(request)
찾은 정보를 내 사이트가 받는 것을 응답(response)

API 가이드에 따라 형식을 맞춰서 써야 한다.

요청)

1. 주소: API 서버 주소
2. 전송방식: GET(주소창에 모든정보를 담아 전달) / POST(주소창x 내부적 정보 전달)
3. 보낼 것
   query 검색어(필수)
   sort 정렬 방식(선택)
   target 검색 대상(선택)
   , ...

응답)

1. 형식: JSON
   JavaScript Object Notation의 약자.
   중괄호와 중괄호 사이에 나열한 것.
   두 개 이상일 때 대괄호[]로 묶이며 이를 배열(array)라고 한다.
2. 응답 의미 설명

API의 요청과 응답을 다루기 위해 AJAX(Asynchronous Javascript And XML) 기술을 사용한다.

JSON 데이터 JavaScript 접근 방법 - "key": value

{
"이름": "홍길동",
"나이": 25,
"특기": ["농구", "도술"],
"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"}
}

data.이름 => 홍길동
data.특기[0] => 농구 ( Array배열의 특징은 0번째부터 시작함 )
data.가족관계.아버지 => 홍판서

Store as Global Variable (전역변수로 저장)

응답 받은 JSON을 console 창에서 다루기 위해 따로 저장해두는 것

API 제공하는 곳

Kakao Developers (https://developers.kakao.com/)

카카오, 네이버, 공공데이터포털, 페이스북, 유튜브, 구글 등
웬만한 기능은 만들지 않아도 API를 활용하면 된다.

※ 카카오 지도에서는 SDK 제공

• SDK(Software Development Kit): 개발에 필요한 꾸러미.
  자체적으로 AJAX 요청해주므로 코드 자체를 복사하기만 하면 됨.