#230206 월
농장주님(늘 말하지만 not god)께서 FE강의를 들어오라고 하셔서 '프론트 엔드에.. 이 몸 등장!' 하고 틀었다가 자바스크립트로 냅다 진도 나가서 충격받음.. 나..이거 할 수 있을까? (자바스크립트 본 적도 없는 사람) 나 지금 약간 지락실 유진 vibe 됨.. 팀장님~ 저 괜찮겠죠?
(친애하는 유진씨, 당신은 제가 (인터넷에서) 본 세상에서 가장 아름다운 피사체 중 한 분이십니다. 발 캡쳐 죄송합니다.)
0. 자바스크립트의 특징과 기본 함수
우선 강의를 듣다보니 아무리 자스를 아무것도 모르고 시작한다지만 너무 아무것도 모르면 안 될 것 같아서 몇 가지만 찾아서 이해한 만큼만 정리해봤다.
1) 출력 함수
js : console.log('{a}')
c++ : cout << a;
2) var 변수 선언
js는 변수를 선언할 때 자료형을 선언하지 않아도 된다.
c++ 변수 선언 : int a=0; bool b=true;
js 변수 선언 : var a=0; var b=true;
3) 객체와 생성자 함수
js는 객체지향 프로그래밍 언어는 아니지만 객체가 존재한다. 객체지향 프로그래밍 언어들은 클래스라는 객체를 만들고 이를 캡슐화하지만, js는 클래스도 없고, 그냥 함수로 객체를 만든다. (며칠 전까지도 c++ 공부하던 나는 너무 당황스럽다 객체 지향 언어도 아니고 클래스도 없는데 묘하게 비슷하게 생기기만 한 객체가 있음.. 객체를 만들어주는 함수도 있음..)
하여튼 객체는 key(문자열)와 value(값)으로 되어있다. 객체를 만드는 생성자 함수를 constructor 라고 부른다. 생성자 함수를 이용해서 새로운 객체를 생성하고 싶다면 앞에 new를 붙여줘야한다. 다르게 말하면 new 없으면 undefined 된다.. 매번 new를 붙이는 게 귀찮아보일 수도 있지만, 대신 하나의 생성자 함수로 여러 객체를 형성할 수 있으니 좋은 친구이다.
function Cookie(name, price){
this.name = name;
this.price = price;
}
var Cookie1 = new Cookie(Saewookkang, 1300);
var Cookie2 = new Cookie(Cancho,1000);4) 콜백 함수
<node.js 교과서> 책 1장인가 2장에서 읽은 내용인데, 자바스크립트의 대표적인 실행기 중 하나인 노드 event-driven 방식으로 동작한다(아마 다른 실행기들도 비슷할 것이다). 그 동작 과정은 다음과 같다. :
그 동작 과정은 다음과 같다.
1 - 이벤트 리스너에 콜백 함수를 등록한다.
*콜백 함수 : 다른 함수의 인자로 이용되는 함수
2 - 시스템에서 이벤트가 발생하면 등록해둔 콜백 함수를 호출한다.
예를 들어, 클릭이라는 이벤트가 발생하면 호출할 콜백 함수는 이벤트 리스너에 미리 등록되어 있어야 한다.
콜백 함수는 한 마디로 이벤트가 발생하면 실행되는 함수를 의미한다. 다른 함수의 인자로 함수를 넘겨주는 형식이다.
그러면 아주아주아주아주아주 간단하게 js를 알아봤다(js가 사람이었다면 이놈은 고작 소개팅 2시간으로 나를 판단한다고 아주 욕했을 것이다). 그럼 다시 강의 내용으로 돌아가자.
1. Web API는 무엇인가?
어느날 정화는 학교에서 당일 치기로 여행을 갈 만한 곳을 알려주는 앱을 만들고 싶어졌다. 구글 지도에서 지도 데이터를 오픈해준다는 말을 듣고 지도 데이터를 다운받으러 갔다. 하지만 정화는 데이터 다루는 방법을 잘 모르기도 하고 지도 데어티가 워낙 방대한 탓에 활용할 수가 없게 되었다. 울고 있는 정화를 보고 동아리 회장님이 다가와 이렇게 말씀하셨다. '네이버는 지도 API를 공개했대. 그걸 쓰도록 하렴.'
위 지문에서 정화는 행복해졌을까? 정답은 그렇다!이다. 그 이유는 네이버가 API를 공개해주었기 때문이다. 정화가 쓰려고 했던 구글 지도 데이터는 '운영 체제 혹은 프로그래밍 언어로 구현된 어떤 기능'이다. 정화가 만들려고 했던 학교 여행 앱은 '응용 프로그램'이다. 선배님이 추천해주신 네이버 지도 'API'는 '운영체제 혹은 프로그래밍 언어로 구현된 기능(지도 데이터)'을 제어하여 '응용 프로그램(여행 앱)'에 사용할 수 있도록 해주는 인터페이스이다. 아주 짧게 줄여서 말하면 프로그램과 프로그램을 연결해주는 인터페이스가 api이다. api가 URL로 서버에 제공되면 정화 같은 사람도 쉽게 이해하고 사용할 수 있다.
*인터페이스란?
여러 소프트웨어 혹은 장치가 신호와 정보를 주고받는 상호작용을 할 수 있도록 연결해주는 모든 하드웨어, 소프트웨어, 규약, 조건 등을 말한다. 예를 들어 UI(user interface)는 사용자와 프로그램이 상호작용할 수 있도록 해주는 소프트웨어 인터페이스이다. 또 다른 예로 usb는 컴퓨터 내부 장치와 커넥터가 상호작용할 수 있도록 해주는 하드웨어 인터페이스이다. API는 운영체제/언어로 구현된 프로그램과 응용프로그램이 상호작용할 수 있도록 해주는 소프트웨어 인터페이스라고 (이해하기 쉽게 풀어) 말할 수 있을 것이다(아마도..)
그렇다면 원래 질문으로 들어가 웹 API는 는 무엇일까? 웹 서버나 브라우저 상에서 웹 애플리케이션 프로그램을 쉽게 개발할 수 있도록 해주는 api이다. 웹 API는 HTTPS 환경을 요구할 수 있다. HTTP는 웹 클라이언트와 서버가 어떻게 통신하는지 정해둔 통신 규약이다. HTTPS는 보안 처리가 잘 된 통신 환경이다.
2. window, dom, bom
우리가 웹 페이지를 브라우저에서 열었을 때, 그 창을 나타내는 객체가 window 객체이다. 실제로 창을 window라고 부르기도 한다. 하여튼 window 객체는 최상위 global object(전역 객체)로, 모든 javascript와 객체들을 포함하고 있다. window가 포함하고 있는 객체들은 크게 세 가지로 다음과 같이 나타낼 수 있다.
DOM은 브라우저가 웹 페이지의 document(html 문서 속 여러 정보들: 콘텐츠, 구조와 스타일 등..)를 이해할 수 있도록 API를 제공한다. DOM은 이런 구조와 정보 노드들을 트리 형태로 저장하고 있다고 한다.
BOM은 브라우저와 관련된 객체들의 집합으로 1.web api란? 에서 살펴본 web API와 관련된 객체들도 여기에 포함되어있다.
Javascript는 DOM의 노드들을 조작하는 가장 대표적인 프로그래밍 언어 중 하나이다.
3. 기초 실습!부터 Javascript로 직접 강의에 나오는 실습을 따라할 건데, 하다보니 Javascript의 역할 상 DOM의 데이터 타입들이 많이 등장하는 것을 볼 수 있었다. (사실 모르고 따라치다가 뭔지 모르겠어서 찾아보니 DOM의 데이터 타입들이라고 인터넷이 알려줬다. 땡큐 구글~) 그래서 그것들도 간단하게 정리해봤다. (출처: )
1) document
DOM의 document 오브젝트 그 자체
2) element
DOM 안에서 생성, 리턴된 기본적인 노드의 타입 중 하나이다.
3) nodeList
element의 배열이다. DOM의 변경사항이 실시간으로 반영되지 않아 Non-Live Collection 혹은 Static Collection의 특징을 갖고 있다고도 한다.
4) HTMLCollection
nodeList와 달리 DOM의 변경사항이 실시간으로 반영되는 Live-Collection이다.
실습을 하다보면
querySelector()라는 함수가 나온다. querySelector는 선택된 객체의 첫 번째 엘리먼트를 반환하는 함수이다. 엘리먼트를 반환하는 함수는 찾아보니 여러 종류가 있다.
1) querySelector(selector)
방금 말했듯 선택할 객체명의 첫 번째 엘리먼트를 반환한다.
2) getElementById(Id)
id명이 일치하는 엘리먼트를 반환한다.
3) getElementByClassName(class)
객체명이 일치하는 객체를 찾아 이 엘리먼트들의 HTMLCollection을 반환한다.
4) querySelectorAll(selector)
선택한 객체명의 엘리먼트들의 nodeList를 반환한다.
getElementby~와 querySelector~는 객체를 찾는 방법과 반환값 외에도 성능의 차이가 있다는데, 그런 건 잘 모르겠다. 자스를 많이 쓰다보면 뭐가 더 편한지 알게 되겠지,, 라고 믿어본다 ㅎ
