brunch

매거진 그림으로 배우는 자바스크립트

라이킷 26 댓글 10

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 기발자 May 11. 2016

#2. About JavaScript

자바스크립트, 누구냐 넌?

자바스크립트는 동적인 웹페이지를 만들기 위해 사용되는 프로그래밍 언어입니다. 여기서 얘기하는 동적인 웹페이지란 움직임이 들어가는 웹페이지를 의미합니다. 백문이 불여일견, 자바스크립트는 다음 예시 사이트처럼 다양한 기능을 만들 때 사용됩니다.

http://keepearthquakesweird.com/

http://mypersonalbest.com

이렇듯 자바스크립트는 정적인 웹페이지에 동적인 생명력을 불어넣기 위해 사용되는 프로그래밍 언어입니다. 최근에는 웹 뿐만 아니라 모바일 앱, 서버, IoT 등 다양한 분야에 사용이 가능한 인기있는 프로그래밍 언어로 각광받고 있습니다.

자바와 자바스크립트를 같은 언어로 이해하고 있는 사람이 있는데, 이름만 비슷할 뿐 자바와 자바스크립트는 직접적인 연관성은 없다.

프로그래밍에서 Syntax (구문) 란?

개발 공부를 하다보면 Syntax 라는 얘기를 많이 듣게 됩니다. Syntax 는 컴퓨터에서 사용되는 기본 문법을 의미합니다. 외국어로 비유하자면 영어, 프랑스어, 중국어 등 국가별로 고유의 단어나 문장을 갖고 있는데, 이는 프로그래밍 언어 또한 마찬가지입니다.

예를 들어 대부분의 프로그래밍 언어에서는 어떤 데이터를 저장하기 위해서 변수라는 것을 선언하는데 자바스크립트에서 변수를 선언하기 위해서는 var 라는 키워드를 꼭 입력해야 합니다. 하지만 다른 개발 언어인 파이썬에서는 var 를 생략하고 변수를 선언합니다.

자바스크립트 변수 선언 : var 변수명
파이썬 변수 선언 : 변수명

즉, 어떤 프로그래밍 언어를 공부한다는 것은 그 언어의 문장 구조나 표현 방식을 배우는 것과 같다고 할 수 있습니다.

변수에 대한 설명은 다음 시간에 자세하게 살펴보도록 하겠습니다.

자바스크립트 공부를 위한 환경 세팅

에디터 설치

Atom, Sublime Text, WebStorm, Visual Studio 등 프로그래밍을 위한 개발 도구는 굉장히 많다. 필자의 경우 처음에는 Sublime Text 를 사용하다가 지인의 추천으로 WebStorm 으로 옮겼습니다. 개발자 선호에 따라 사용하는 에디터가 다르기 때문에 각각의 특징을 잘 살펴본 후에 본인에게 적합한 에디터를 사용하면 됩니다.

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

Sublime Text: The text editor you'll fall in love with

Use Multiple Selections to rename variables quickly. Here Ctrl+D⌘D is used to select the next occurrence of the current word. Make batch edits with Multiple Selections. Here Ctrl+Shift+L⇧⌘L is used to split a selection into lines, and each line is then edited simultaneously. The Command Palette gives fast access to functionality. Here Ctrl+Shift+P⇧⌘P is used to show the Command Palette, "sspy" (short for Set Syntax: Python) is used set the syntax of the current file to Python. Use Goto Anything to quickly navigate between files, even in the largest projects. Ctrl+P⌘P shows Goto Anything, and typing then filters on file and directory names. Goto Anything can also be used to show a function, line or word within a file. Type @ after a file name to filter on symbols. More... Find and Replace with regular expressions. Here unwanted whitespace is removed by using the regex " +" to find groups of spaces, which are then selected simultaneously with the Find All...

www.sublimetext.com

WebStorm: The Smartest JavaScript IDE

WebStorm is a lightweight yet powerful JavaScript IDE, perfectly equipped for client-side development and server-side development with Node.js.

www.jetbrains.com

Visual Studio - Microsoft 개발자 도구

고객 사례 jet Microsoft 클라우드를 사용해 최고의 자리에 우뚝 선 전자 상거래 분야 도전 기업의 사례를 확인해 보세요. 사례 읽기 > Shell Visual Studio Team Services로 마이그레이션하여 비용을 줄이는 동시에 개발 팀의 생산성을 향상한 Shell의 사례를 확인해 보세요. 비디오 보기 > Gojo Team Services를 Agile 프로세스의 핵심으로 삼아 환자 구명 IoT 시스템을 더욱 빠르게 구축한 GOJO SMARTLINK 엔지니어링 팀의 사례를 확인해 보세요. 비디오 보기 >

www.visualstudio.com

구글 크롬 설치

자바스크립트 개발을 위해 여러 개발 툴을 사용할 수 있지만 브라우저에서 확인을 해야 하는 경우도 발생합니다. 크롬은 브라우저에서 본인이 작성한 코딩에 대한 결과를 직접 확인할 수 있으며, 크롬 개발자 도구에서 간단한 코드도 만들어 볼 수 있습니다.

Chrome 브라우저

Windows용 Chrome 다운로드 Windows 10/8.1/8/7 32-bit용 Windows XP와 Windows Vista가 더 이상 지원되지 않으므로 이 컴퓨터에서 Chrome 업데이트를 받을 수 없게 됩니다. Windows 10/8.1/8/7 32-bit용 Windows 10/8.1/8/7 64-bit용 Mac용 Chrome 다운로드 Mac OS X 10.9 이상용 Mac OS X 10.6, 10.7, 10.8이 더 이상 지원되지 않아 이 컴퓨터에서 Chrome 업데이트를 받을 수 없게 됩니다. Linux용 Chrome 다운로드 Debian/Ubuntu/Fedora/openSUSE 인쇄용 버전 참고: Chrome을 설치하면 Google 저장소가 추가되어 Chrome이 자동으로 업데이트됩니다. Google 저장소를 설치하지 않으려면 패키지를 설치하기 전에 'sudo touch /etc/default/google-chrome'을 수행하세요.

www.google.co.kr

설치를 완료했으면 브라우저를 실행한 후 오른쪽 버튼을 누르면 검사 탭을 클릭, 그러면 무슨 말인지 이해할 수 없는 외계어( HTML, CSS )들이 등장하기 시작합니다. 상단 탭에 Console 을 클릭을 하면 무언가 입력할 수 있는 창이 나타나는데 거기에서 자바스크립트 코드를 입력할 수 있습니다.