탄막슈팅 시리즈 - 1.1

작업 환경 갖추기

IDE ( VS Code ) 설치 링크는 https://code.visualstudio.com/docs/?dv=win64user 입니다.
* 구글에 검색하면 바로 나옵니다

 

보통 repositry 를 git 을 사용하므로 git 까지는 자동 설치하는 것을 권장합니다.

* 탄막 슈팅 시리즈 내용은 github 에 같이 반영합니다

 

git 그리고 vs code 는 읽어 보시면 좋지만.. default 로 체크된 항목은 그대로 따라가면 됩니다.
중간에 git 에서 editor 설정은 vs code based 로 바꾸면 편합니다.
* 터미널에서 자동으로 git bash 가 나옵니다

---

 

VS Code 는 javascript 친화적이므로 ( 개발 자체가 web 기반 ) 별도의 plug-in 을 설치할 필요는 없습니다.

다만, 내가 typescript 를 사용하거나 lint 같은 도구 또는 babel 같은 도구를 사용하고 싶은 경우는 extension 에서 검색해서 손쉽게 설치할 수 있습니다.

 

여기서는 생짜 아무것도 설치하고 진행합니다.

 

---

 

새롭게 신설한 github repositry anywhere 에서는 commit 별로 내용을 확인할 수 있습니다 :)

 

gtihub 연결은 로컬 폴더에서 "git clone ..." ( 대게 https 로 연결 ) 하면 자동으로 repository 가 생성됩니다.

 

이제 로컬에서 가장 먼저 진행할 내용은 html 파일과 js 파일인데..

html 파일은 나중에 자동 생성으로 진행할 수 있지만 편하게 다루기 위해 대문짝에다 파일을 생성합니다.

 

기본이 되는 내용은 MDN docs 를 참고하여 적절한 canvas 까지 그려봅니다.

 

"index.html" 내용은 최대한 비워두는 것이 좋습니다.

결국 main.js 에서 config 를 담아 여럿 설정 ( mobile 에 맞춘 화면 사이즈 ) 등등 ... 을 담아 동적으로 element 를 넣는 것이 좋으므로 이렇게 진행합니다.

 

사실 html 자체도 server rendering 으로 간다면 로컬에 생성할 필요도 없고.. script 내용도 파일 계층 구조를 따라야 하기에 relative path 를 작성하지도 않겠지만.. 우선 이렇게 두고 넘어갑니다.

 

config 내용을 담은 구조 ( object ) 는 나중에 넣는 셈 치고, 기본적인 init func 부터 작성합니다.

 

가장 간단하게 잡아뒀지만.. 위 내용은 TODO 가 많습니다.

간단하게 설명하자면 "document" page 의 root element 로 부터 객체를 얻었습니다.

이후, canvas 라는 element 를 생성하고 사이즈를 결정한 뒤 body 에 추가했습니다.

 

loop 를 만든 다음에 render 에서 글자를 출력했습니다.

 

canvas 에서는 context 로 api 를 다루는데 "2d" 를 사용하면 불필요한 내용을 사용하지 않아도 됩니다..

다만, 이후에 우리들은 open gl api 를 사용할 것이므로 "2d" 가 아닌 "3d" 로 변경할 것 입니다.

 

작성하다보니.. 할 일이 태산이네요. 먼저 render 부터 다루기 위해 OpenGL ( ES ) 를 진행하겠습니다.