- Today
- Total
CODE CAVE
자바스크립트로 배우는 프로그래밍 #1.1 준비 본문
안녕하세요~
자바스크립트의 기본에 대해 정리를 한번 해보려고 합니다.
저는 포스팅 하면서 자바스크립트에 대해 리마인드가 되는 효과가 있고 이제 막 자바스크립트를 시작한 분 들에겐 한 눈에 기본을 쭉 볼 수 있는 기회가 되었으면 좋겠습니다.
자바스크립트를 공부하기 앞서 가장 먼저 해야할 일은 실습 환경 구성 일 것입니다.
저는 개인적으로 어떤 새 언어를 공부할 때 실습환경 구성할 때가 가장 설렙니다 ㅎㅎ 공부할 것에 대해 설레고 그 것을 준비하는 과정이 즐겁더라고요. 마치 내가 원하는 집으로 이사 갈 때 이사짐 싸는 것 처럼 설렙니다!
아무튼 본론에 들어가서, 자바스크립트만 공부한다는 가정을 두고 실습환경을 말씀드리자면 서브라임텍스트와 크롬브라우저. 이 2가지면 실습 준비 끝입니다.
다른 언어는 별도의 컴파일러가 필요한 경우가 많지만 자바스크립트는 브라우저에서 해석하는 스크립트 언어이기 때문에 별도의 컴파일러가 필요하지 않습니다. 그래서 시작 장벽이 매우 낮죠. 파이썬이나 타 언어들은 이것 저것 뭔가 초보자가 하기엔 힘든 점이 있습니다.
실제로 대학교에서 편입하거나 잘 못하는 학생들 보면 실습 환경 구성도 못하더라구요.. 한 학생이 저에게 과외를 해달라고 했던 적이 있는데 어디서 부터 알려줄까 하고 물어봤더니 한학기가 거의 다 지나가도록 실습환경을 제대로 구성하지 못한 탓에 고생하고 있더라구요, 교수님께 여쭤보니 이런 것도 못하냐고 욕만 먹었다고...ㅠㅠ
아무튼 자바스크립트 실습은 매우 간단해서 초보자도 쉽게 진입 가능합니다.
그저 .html로 파일을 저장하고 브라우저로 켜기만 하면 바로 실행결과를 확인할 수 있습니다.
이렇게 실습이 편하다는 점에서 프로그래밍 공부 첫 진입할 언어로서의 선택도 나쁘지 않다고 생각되네요.
그래서 처음 언어를 배우시는 분들에게 자바스크립트를 추천하고 싶네요!
일단 에디터 부터 설치를 합니다. 에디터를 쓰는 이유는 제일 중요한 이유로 소스코드를 이쁘게 볼 수 있는 것입니다.
노트패드에다가 할 수 있지만 어떤 명령을 적어도 전부 다 검정 글씨인데다가 들여쓰기도 일일이 다 해줘야 해서 효율성, 가독성 모두 떨어진다고 볼 수 있습니다.
효율성과 가독성이 떨어진다는 건 작업 시간이 늘어나는 것을 의미하며, 그에 따른 버그도 분명히 많이 생길 것이라고 생각됩니다.
에디터는 어떤 언어를 하시던 필수 입니다.
아무튼 웹 언어인 자바스크립트의 에디터는 무엇이 좋을까요?
매우 유명한 에디터가 있습니다. 바로 서브라임 텍스트 입니다.
용량도 매우 작고, 있을건 다 있고 플러그인 형식으로 나중에 필요한 기능들을 설치 하실 수 있습니다.
먼저 서브라임텍스트는 구글에서 검색하시면 바로 설치하실 수 있습니다.
강력하지만 가벼운 에디터 입니다. 소스코드도 되게 이쁘게 나오구요!
서브라임텍스트의 장점 중 하나는 플러그인을 설치할 수 있다는 것입니다.
용량이 작아서 처음엔 라이트하게 다운받아서 쓰게 되지만 어떤 언어를 쓰냐에 따라서 그 언어를 쓰기 편하게 하는 플러그인을 설치하면 좋을 때가 있습니다. 하지만 자바스크립트는 딱히 뭐가 필요하진 않습니다.
그리고 본 포스팅은 자바스크립트에 대한 포스팅이니까 서브라임텍스트 툴에 대한 얘기는 안하겠습니다.
어차피 그냥 프로젝트 폴더 열고 파일 내용 수정하고 저장하고.. 이게 다입니다. 노트패드 쓰듯이 쓰시면 되요~
이제 에디터를 설치하셨다면 본격적으로 실전에 들어가볼까요.
구체적으로 알려드리기에 앞서 자바스크립트가 시작되었다는 느낌을 주기위해 저희도 Hello World를 찍어보도록 하겠습니다.
먼저 프로젝트 폴더를 아래와 같이 만듭니다.
참고로 저는 Intellij 라는 IDE(통합개발툴)을 씁니다. 그래서 스크린샷이 여러분이 쓰시는 서브라임 텍스트와 달라보일 거예요~
web 폴더 > 자바스크립트 폴더를 만드셨으면 서브라임텍스트에서 File > Open 으로 폴더를 엽니다.
그럼 왼쪽에 프로젝트 폴더들이 쭉 나올거예요~
javascript 폴더 오른쪽 클릭 > 파일 만들기로 해당 폴더 안에 1_hello.html 과 common.js 파일을 생성합니다.
이렇게 html과 스크립트 파일 두개를 만든 이유는 모듈화를 위해서 입니다.
html 파일안에서 <script>스크립트 내용</script>으로 작성할 수도 있지만 모듈화의 습관을 위해 애초 실습 부터 js(javascript)파일을 따로 만들고 html에서 불러올 것 입니다.
모듈화는 프로그래밍을 계속 하다보면 아시겠지만 소스코드가 길어질 경우 가독성이 매우 중요해지는데요.
html 파일이면 왠만하면 html 코드만 있는게 좋습니다.
자바스크립트는 따로 파일을 만들어서 html 파일에 불러오는게 좋죠.
예를 들어 자바스크립트 소스가 1000줄인데 그것을 html파일에다가 그대로 적었다면 나중에 태그 하나 바꾸려고 html 파일 열었는데 엄청나게 길면 찾기 힘들겠죠? 하지만 js 파일을 따로 빼게 되면 자바스크립트 파일을 포함시키는 명령어 1줄이면 끝납니다.
html에서 js를 불러오는 방법은 아래와 같습니다.
<html>
<head>
<script src="common.js"></script>
</head>
<body>
</body>
</html>
html 의 head 태그에서 <script>의 src 속성을 이용하여 js 파일을 불러옵니다.
이렇게 되면 common.js 에서 작성한 스크립트가 이 html 페이지에서 먹히게 됩니다.
위에서 말씀 드린 모듈화를 한 것입니다.
일반적인 자바스크립트를 넣을 것이기에 이름을 common이라고 지었고 실제로 저 이름을 쓰는 실무자들이 많습니다.
이건 일반 적인 스크립트가 들어가는 모듈이고 나중에 특정 기능을 위한 자바스크립트를 파일로 따로 빼고 싶다 하시면 이런 식으로 js 파일 하나 만들어서 불러오는 식으로 모듈화 할 수 있습니다.
모듈화는 자바스크립트를 기능별로 나눈겁니다. 마치 부품 처럼요!
모듈이라는 부품을 만들고 그것을 본체에 끼워 넣는 느낌 입니다.
그럼 이제 여느 프로그래밍 입문 시작 처럼 저희도 Hello world를 찍어볼까요?
common.js에서 Hello world 라는 메시지를 출력해주기 위한 소스를 작성해보죠.
alert("Hello world");
메시지를 출력하는 것은 이게 다 입니다.
이렇게 코드를 작성후 1_hello.html을 실행해보시게 되면 아래와 같은 메시지가 뜹니다.
html 이 화면에 뿌려진 후 메시지를 띄우는 "동작"은 자바스크립트가 수행합니다.
자바스크립트는 이런 동적인 것을 가능하게 합니다. 즉 메시지를 띄우는 "동작"은 자바스크립트가 수행하는 것이죠.
이 메시지를 띄우는 것을 어떤 "버튼" 이 사용자에 의해 눌렸을 때 뜨도록 만들 수도 있습니다.
HTML의 버튼 태그를 가져와서 그 버튼에 클릭리스너(클릭을 감지하는 것)을 자바스크립트로 만들어 두면 클릭 했을 때 어떠한 이벤트를 수행할 수 있습니다.
이미 HTML 문서는 로딩이 되어 브라우저에 표현되있는 상태고, 여기서 사용자의 "동작"에 의해서 어떠한 처리를 할때는 꼭 자바스크립트를 써야만 합니다.
CSS도 동적인 언어는 아닙니다. (미디어쿼리는 동적이라고 할 수도 있겠군요.. 혼잣말 무시해주세요 ㅎㅎ;)
HTML은 단순히 웹 문서의 구조만 나타낼 뿐이고 CSS가 이 구조에 스타일을 입히는 것이지 동작에 관한 것은 어떠한 것도 수행하지 않습니다.
예전 사이트 같은 경우 자바스크립트가 중요하지는 않았지만 요새 사이트들 트렌드를 보면 사용자의 편의성을 위해 동적인 기능들이 많이 있습니다. 요새라기 보다 꾀 오래되었죠. 자바스크립트를 활용한 동적인 사이트들이요.
아무튼 사이트를 구축하시기 위해 자바스크립트는 이제 필수라고 볼 수 있습니다.
이 외에도 활용할 곳은 많습니다.
서버에서도 쓸 수 있는 node.js도 있고 하이브리드 앱 제작을 위한 프레임워크도 많이 있습니다.
이게 모두 자바스크립트라는 언어로 동작합니다.
이제 자바스크립트 하나만으로 다양한 프로그램을 만들 수 있게 되었으니 중요도가 높은 프로그래밍 언어라고 볼 수 있죠.
이번 시간에 실행환경, 자바스크립트의 사용 확인을 해봤으니 다음 포스팅에서 본격적으로 해부에 들어가보도록 할게요!
모두들 열공! 화이팅!
공감이 되셨다면 아래 공감 버튼을 눌러주세요~
▼▼▼▼▼▼
'Programming' 카테고리의 다른 글
| 자바스크립트로 배우는 프로그래밍 #2 조건문(if) (0) | 2016.08.19 |
|---|---|
| 자바스크립트로 배우는 프로그래밍 #1.3 비교 연산자 (0) | 2016.08.16 |
| 자바스크립트로 배우는 프로그래밍 #1.2 변수 (0) | 2016.08.16 |
| [C언어] 대문자<->소문자 바꾸는 방법 (1) | 2016.06.12 |
| [C언어] 문자열 개념 및 문자열끼리 비교하기 - strcmp (2) | 2016.06.07 |
