프로젝트 세팅하기

안녕하세요? 이번에 자바스크립트 기초 강좌를 하게 된 마식입니다. 옛날에는 자바스크립트는 그냥 웹 전용 언어라는 이미지가 많았는데, 요즈음은 그렇지 않습니다. 요즈음 자바스크립트는 Native를 이용하여 안드로이드와 애플 앱을 동시에 개발할 수 있고, 또한, Electron.js라는 라이브러리를 사용하여 컴퓨터 프로그램까지도 만들 수 있습니다. 이와같이 요즈음 자바스크립트는 유용하게 사용할수 있는데요! 그래서 그런지, 2020년 자바스크립트를 배우고 싶은 사람이 많아졌고, 모든 언어 중에서 돈을 잘 벌 수 있는 언어 TOP 5위 안에 들어가는 언어이기도 합니다. 그래서, 이번에 저는 여러분들께 자바스크립트 기초를 알려드리겠습니다. 그럼 먼저 프로젝트 세팅부터 해볼까요?

개발환경 구축하기

자바스크립트를 사용할 수 있는 환경을 여러가지가 있는데요, 그 중 하나가 지금 여러분들이 사용하시고 있는 인터넷입니다. 인터넷 콘솔창에서도 할 수 있는데, 우리는 조금 더 고급진 환경에서 개발을 해 보도록 해보겠습니다. 먼저, 우리가 쓸 IDE(이하 통합개발환경)은 CodeSandbox.io입니다. 코드 센드박스는 별도의 설치 없이 우리가 편하게 개발을 할 수 있는데요! 먼저 사이트에 접속을 해줄게요. 그럼 아래와 같은 화면이 뜰껍니다.

이후, 화살표가 가르키는 버튼을 눌러주세요. 그러면, 어떤 팝업창이 뜨는걸 확인하실 수 있는데요, 여기서   Create Sandbox 라는 것을 눌러주세요. 그럼 아래와 같은 화면이 되는 것을 확인하실 수 있습니다. 

이후, Vanilla라는 것을 선택해 주세요. Vanilla는 아무 라이브러리 없이 그냥 일반적인 노멀한 자바스크립트만을 사용하겠다는 것입니다. 일단 그것을 클릭하시고, 나면 우리가 개발할 수 있는 화면이 뜨는데요. 아래와 같을 것입니다.

이런 화면이 나온다면, 여러분들은 이제 드디어 개발을 할 수 있게 된 것입니다. 하지만, 몇가지만 좀 더 세팅을 해줄게요. 아래와 같이 세팅을 해주시면 되겠습니다. 화질 안좋은건 죄송합니다..

자, 그러면 이제 실행이 잘 되는지 확인해 볼까요? 우리가 이번에 해 볼것은 어떤 프로그래밍이든 꼭 한다는 콘솔창에 HelloWorld 띄우기 입니다. 자, 그럼 저기 코드 편집기의 코드를 모두 지우고, 아래와 같이 써 봅시다

console.log("HelloWorld");

이렇게 하고 오른쪽의 콘솔 화면을 보시면, 정상적으로 HelloWorld라는 것이 나왔다는 것을 확인 할 수 있습니다. 자 그럼 오늘은 개발환경 세팅과 콘솔창에 HelloWorld 띄우기를 해 보았습니다. 그럼 다음 강의에서 봅시다.

TIP
만약에해당 프로젝트를 저장하고 싶다면, 코드샌드박스에 로그인한 이후, 상단의 FORK를 눌러주시면 됩니당

https://discord.gg/2gxSqWu - 마인크래프트 개발자 디스코드