바닐라 JS로 그림 앱 만들기
노마드코더의 무료 강의를 들은 후기와 공부한 내용
어쩌다 강의를 듣게 되었는가?
자바스크립트에 대해 한번도 배운 적이 없다. 웹이 어떻게 동작하는지 궁금했다.
그런데 얼마전, 지인이 노마드코더에 재밌는 무료 강의가 많다고 알려주었다.
바로 “이거다!!”했고, 한 번 들어봤다.
내가 들은 건[바닐라 JS로 그림 앱 만들기]였다. 생각보다 길지 않아서 시간 날 때마다 짬짬이 들으면 금방 들을 수 있었다. 
프로젝트 결과물
이게 내가 만든 결과물이다. 지금은 저기서 뒤로가기 버튼이랑, text size 조절하는 input bar를 추가한 상태이다.
간단한 코드로도 그럴싸한 결과물을 낼 수 있어 재미있었다. 역시 존재하는 API를 잘 가져다가 쓰기만 해도 awesome한 걸 만들 수 있을 것 같다.
해당 코드를 더 디벨롭해서 실제로 배포까지 해보고 싶어졌다.
코드는 여기에 있다.
https://github.com/yulimmm/Canvas-Project
공부한 내용
바닐라 JS
일단 바닐라 JS(Vanilla JavaScript)가 무엇인지 궁금했다. 그냥 자바스크립트와는 어떻게 다른 것일까?
바닐라JS 의미: 아무런 프레임워크나 라이브러리를 사용하지 않은 순수한 자바스크립트
바닐라JS를 검색했을 때 나온 결과이다. 바닐라 아이스크림이 가장 기본적이고 순수한 맛인 것처럼, 바닐라 JS도 React, jQuery 등 외부 도구 없이 브라우저에 내장된 JS 기능만을 사용한 코드라고 한다.
DOM
이번 프로젝트에서 Canvas API를 사용했다. Canvas API를 사용하면 이건 도대체 어디서 제공하는 API인가 궁금했고, DOM의 존재를 알았다.
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 출처: mdn web docs
브라우저마다 DOM을 갖고 있고, 브라우저가 HTML을 해석할 때 자동으로 생성한다고 한다.
웹 동작 방식
사실 나는 로컬로 동작시키는 것밖에 안 해봤지만, 궁금해서 한번 찾아봤다.
- 사용자가 도메인 주소 검색
- DNS가 해당 주소의 IP를 요청하고 받아옴.
- IP주소 사용해서 HTTP 요청 -> 웹 서버 -> HTML, CSS, JS 응답
- 브라우저: 렌더링 엔진 -> HTML → DOM, CSS → 스타일 계산, JS → 동작 처리
- 웹페이지 화면 표시
만약 내가 이번에 만든 웹을 배포하고 싶다면 (1)내 서버 IP를 준비하고, (2)도메인(DNS)에 그 IP를 연결하면, 다른 사람이 도메인.com을 연결했을 때 내 웹사이트로 접근할 수 있다고 한다.
1️⃣ 웹 서버 (IP)를 준비
- 클라우드 호스팅 => GitHub Pages, Netlify, Vercel, AWS S3, Firebase Hosting 등 이용
- 내 컴퓨터를 서버로 만듦 (직접 IP 할당) => 고정 IP 주소 필요, 포트포워딩, 방화벽, DDNS 설정 등 필요
2️⃣ 도메인 주소를 구입하고 DNS 설정
도메인은 도메인 등록 기관, Namecheap, 가비아 등에서 구입할 수 있음.
집에 굴러다니는 라즈베리파이가 있어서 언젠가 웹 페이지를 배포해 봐야겠다고 생각했는데, 도메인 주소를 사야하는지는 몰랐다… 1년에 12000원 정도 하네. 검색창에서 찾는 게 아니라면, 굳이 도메인 주소를 사지 않고 링크(IP)를 전달하는 식으로 배포를 할 순 있을 것 같다.. 공유기 뒤에 있으면 NAT 보호로 조금 더 안전하다고 한다 ㅋㅋ + 불필요한 포트 닫기. 이러면 지인들한테 배포 정돈 해봐도 될듯하다!
Canvas API
Canvas API에 대한 공식문서는 다음과 같다. Canvas Tutorial
마무리
이번에 바닐라 JS로 만든 페이지를 조금 더 디벨롭하여 지인들한테 배포해 보는 것이 다음 목표이다! 캔버스API로 뭘 할 수 있을지 기획도 하고, 디자인도 해서 구현해 봐야겠따!!