아무것도 모르는 채로 항해99에 합류한지 벌써 20일이 지났다.
늘 그랬지만 항해에서의 시간은 유독 빠르게 지나간다.
아침부터 밤 늦게까지 쉴 틈을 주지않는 커리큘럼에
뭐를 어떻게 했는지도 모를 정도로 시간이 지나가고 있다.
(사실 항해에서 직접 몰아부치는건 아니지만.. 주어진 과제를 보면 거의 그런 셈이다.)
그 덕분인지 어쨌든 코딩 공부는 확실히 되고 있는 것 같다.
여전히 매일 아침 처음 보는 개념들을 공부하고
여전히 공부한 만큼의 새로운 것들이 두 배, 세 배 씩 늘어나는 느낌이지만
문제가 생기면 스스로 찾아보고, 어떤 기능에 어떤 코드가 필요할지 고민하게 된다.
또 코드가 원하는대로 작동할 때 기분이 좋은걸 보면 나름 즐기고 있는 듯 하다.
이번주엔 처음으로 리액트를 배우고 리액트로 간단한 웹페이지를 만들었다.
리액트를 잘 다루는 베테랑들은 레고라는 비유를 좋아하시는 것 같은데
아직까지 나는 레고라는 재밌는 단어로 리액트를 표현하지는 못할 것 같다.
리액트를 배우면서 처음 접한 컴포넌트, 라이프 사이클, 렌더링같은 개념이나
각종 훅들을 익혀서 쓰는게 쉽지 않다.
게다가 이런 상황에서 과제까지 주어져 지난 한 주도 허겁지겁 보내게 됐다.
그럼에도 알고리즘으로 머리가 아팠던 지난주와 비교해보면 꽤 즐거운 일주일이었다.
만드는 과정은 어렵고 힘들었지만 직접 만든 페이지는 뭔가 정이 간다.
스스로 뭔가를 만들 수 있다는 장점은 나에게 큰 힘을 주는 것 같다.
이제 온전히 배우기만 할 수 있는 기간은 딱 2주 남았다.
그 2주를 정말 좋은 컨디션에서 알차게 보내보고 싶다.
문서객체 모델: DOM(document object model)은 무엇일까?
HTML의 구조
<html lang='en'>
<head>
<title>hello</title>
</head>
<body>
<div>
<h1>my name is ji-coding
</div>
</body>
</html>
돔은 HTML 문서의 프로그래밍 인터페이스이다. 지난 번에 배우길 인터페이스는 서로 다른 무엇인가가 상호작용할 수 있도록 돕는 역할을 한다고 했다. 그렇다면 돔은 무엇과 무엇을 돕는걸까? 내가 받아들이기로 돔은 웹페이지와 프로그래밍 언어가 연결될 수 있도록 한다. 돔은 HTML 문서를 프로그래밍 언어가 이해할 수 있도록 일정한 규칙과 구조를 가지고 작성한 표현방법이다. 자바스크립트가 돔을 통해 HTML문서를 읽고 뷰포트로 렌더링할 부분을 결정하며, 뷰포트를 통해 화면에 웹페이지로 구현된다.
HTML문서는 트리 형태의 구조를 가지고 있다.
예를 들어 <body>에는 <div>가 있고, <div>가 또 다른 노드를 자식노드로 가지고 있는 구조를 말한다.
여기서 노드란 : 요소, 텍스트, 속성 등 HTML문서를 이루고 있는 각각의 작은 지점들이다.
돔이 이렇게 트리 구조를 가진 HTML 요소에 자바스크립트가 접근할 때 주소의 역할을 한다.
그래서 돔은 HTML문서의 API라고 할 수 있다.
돔이 HTML을 기반으로 만들어지긴 하지만, 돔은 HTML보다 더 엄격한 구조를 가지고 있다.
HTML문서에서 누락이 되는 요소가 있더라도, 돔에서는 제대로 된 구조를 만들어 HTML문서를 받아들인다.
또한 자바스크립트에서 돔요소를 수정하더라도 HTML에 내용이 반영되지 않는데, 돔=HTML이 아니기 때문이다.
자바스크립트에서 돔을 다룰 때 가장 많이 사용되는 API는 document.getElementBy(속성)가 있다.
window. 또한 많이 사용되는데, document는 문서 전체의 최상위 객채 즉 document자체를 말하는 반면
window는 브라우저의 최상위 객체를 말한다.
참고:
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://wit.nts-corp.com/2019/02/14/5522
서버리스란?
과거에는 웹사이트나 프로그램을 개발할 때 서버용 컴퓨터를 반드시 마련하고 개발했다고 한다. 하지만 AWS와 같이 서버를 빌려주는 클라우드 서버가 등장하면서 비용만 지불하면 서버를 직접 관리할 필요가 없어졌다.
서버리스는 크게 두 종류 BaaS(Backend as a Service)와 FaaS(Function as a service) 로 나눠진다.
BaaS는 데이터 베이스나 소셜 로그인, 파일 시스템 등 백엔드라고 생각하는 기능들을 API로 제공한다.
FaaS는 말 그대로 함수를 클라우드서버에 저장하고 필요할 때 함수가 호출되는 방식이다. 비용 또한 함수단위로 과금되기 때문에 상대적으로 저렴할 수 있다.
하지만 한 번 인프라를 구축하는데 비용과 시간이 많이 들어가기 때문에 한 번 Faas를 구축하는 경우 변경하는게 쉽지 않으며, 함수를 호출하는데도 지연시간이 있는 단점이 있다.
참고: https://www.redhat.com/ko/topics/cloud-native-apps/what-is-serverless