개인 자료란 (JE)

  서버 커뮤니티

Profile lukekeum 대표칭호 없음
Profile

JavaScript

[ JavaScript 기초강좌 ] 0강 프로젝트 세팅하기

2020.03.31 조회 수 2129 추천 수 1

프로젝트 세팅하기


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

개발환경 구축하기

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

7059fa6564b676ce8582cd87de4d82a7.PNG

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


4b0f2b52daa0ed7624ad5e564795ffec.PNG


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


76bd64c15530c8ea7b1a205970109dd6.png


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


153a49cdbea8bb9d979d926c66b73a2e.gif


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

console.log("HelloWorld");

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

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


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

Warning
댓글이 없습니다.

새로운 댓글을 등록해 주세요!

뉴스 및 창작물
/files/thumbnails/483/916/003/262x150.crop.jpg?20241127115329

레드스톤

[노트블럭 커버] 뉴진스 - ETA 2

노트블럭전문가

2024-11-27

0

/files/thumbnails/150/925/003/262x150.crop.jpg?20241123005717

건축

응답하라 1988 ?

팀뉴일리시

2024-11-23

4

/files/thumbnails/761/908/003/262x150.crop.jpg?20241025153749

건축

서울 숭례문(崇禮門) 6

KHC

2024-10-25

2

/files/thumbnails/578/899/003/262x150.crop.jpg?20241010142350

건축

경주 월정교 1

KHC

2024-10-10

2

/files/thumbnails/219/899/003/262x150.crop.jpg?20241009200950

건축

송전탑+도시 2

dbasd12

2024-10-09

2