안드로이드 프로젝트를 보면 소스코드, 생성파일, 리소스를 트리 형태로 정리해 주는 것을 알 수 있습니다.
가장 큰 틀은 src, gen, res, AndroidManifest.xml 입니다.
src는 자바를 다룰때 이미 익숙한 소스코드가 들어있는 폴더입니다. 자바와 행동양식이 같습니다.
gen은 ADT(Android Development Tool)에서 자동 생성한 소스코드가 들어있는 폴더입니다. 대표적인 예로, R.java가 들어가게 되는데, 이를 수정하면 정상적으로 돌아가지 않습니다. 전혀 터치하실게 없을 폴더입니다.
res는 말 그대로 리소스입니다. 레이아웃, strings 등이 정의된 xml 파일로 정리되어 있습니다.
AndriodManifest.xml파일은 어플리케이션을 구성하는 모든 정보가 정리되어있는 파일입니다. 권한, 보안 권한 등을 설정하게 되며, 액티비티의 허용여부도 여기서 정하게 됩니다. 액티비티 작업중 가장 흔한 에러의 원인이 매니페스트에 액티비티를 선언하지 않아 생기게 됩니다.
하나의 텍스트뷰와 버튼을 가지는 버티컬 레이아웃 예제 입니다. res>layout>activity_main.xml파일을 수정하면 다음과 같은 Test 실행 결과를 볼 수 있습니다. (보는 방법은 Hello world와 같습니다.)
XML 파일은 HTML 파일과 비슷하게 레이아웃을 텍스트로 구성하여 사람이 읽을 수 있도록 제공합니다. 또한, 아래 Graphical Layout tab을 통해 직접 드래그앤드롭으로 UI를 생성하거나 조작하면 코드가 이에 맞추어 변하는 기능도 제공합니다.
XML 파일의 엘리먼트 이름은 각각 Java 클래스에 묶여 <TextView>는 텍스트뷰를, <LinearLayout>은 LinearLayout 뷰를 생성합니다.
XML 파일은 <?xmlversion="1.0"encoding = "utf-8"?> 로 시작합니다. 그리고 첫 번째 태그에 xmlns:android="http://schemas.android.com/apk/res/android" 네임태그가 들어가야 정상적으로 동작합니다.
layout_width와 layout_height은 뷰의 각각 너비와 높이를 지정하는 역할을 합니다. 이때 들어갈 수 있는 값으로 fill_parent, wrap_content가 있는데, 전자는 컨테이너 전체의 크기를 받고, 후자는 필요한 크기만을 받습니다. px,dp,mm 등의 절대치도 넣을 수 있습니다.
또한, id를 배정할 수 있는데, 이는 프로그램이 뷰를 찾아올 수 있도록 하는 역할을 합니다. 자세한 것은 예제를 통해 보시면 좋을 듯 합니다.
예제 - 간단한 화면 전환 어플리케이션
위에서 설명한 내용을 바탕으로 화면 전환 어플리케이션을 제작해 보도록 하겠습니다.
우선, 먼저 할 것은 res>values>strings.xml 파일에 다음의 주석을 추가하는 일입니다. 이렇게 strings.xml에 저장해 놓은 값은 외부에서도 꺼내쓸 수 있습니다. 반복되는 문장이나, 일일이 하드코딩으로 치지 않아도 된다는 점이 강점입니다.
이렇게 설정을 해 놓고 저장한 후, sb.xml파일(StartButton)을 만들어 보도록 하겠습니다. xml파일이므로, res>layout 에서 생성하시면 되고, layout의 파일명은 소문자이여야 합니다.
이렇게 코딩을 하시고 저장을 하시면, Start와 Info 버튼이 생성된 것을 보실 수 있습니다. 텍스트뷰에 아까 strings.xml에 저장해 놓은 test를 이용하였고, 각각의 Button에 @+id/ 태그를 이용하여 아이디를 생성하였습니다. 이는 후에 자바파일에서 사용하게 될 것입니다.
sb.xml과 같은 위치에 bb.xml(BackButton)을 생성하도록 하겠습니다. 기본 구조는 sb.xml과 같으므로, 쉽게 따라하실 수 있으리라 생각합니다.
이제 UI부분을 마쳤으니 src>com.example.test에 ForBlogger.java 파일을 생성해보도록 하겠습니다.(새로 생성하려면 이것 저것 설정해야 하니 기존에 있는 파일을 복사, 붙여넣기 하는 것이 편리합니다.)
이것 저것 수정하여 아래와 같이 코딩을 진행합니다. 진행중에, 대부분의 경고 혹은 에러가 뜨는 부분은 Ctrl+Shift+O를 누르면 자동으로 import를 하여 수정됩니다.
이 과정에는 Toast를 이용하여 잠시동안 Text가 뜨도록 설정하였고, Intent를 이용하여 액티비티 전환을 진행하게 됩니다. 앞으로 안드로이드에서 자주 인텐트를 이용하여 액티비티간에 데이터를 전달하거나 원하는 기능을 수행하게 할 겁니다.
마지막으로, 처음 시작할 액티비티를 지정하기 위하여 Manifest 파일을 건드려야 합니다. android:name ="" 부분이 처음 시작할 액티비티를 결정하는 것이며, 우리는 ForBlogger을 첫 액티비티로 지정하고 싶으므로 아래와 같이 설정한 후, 사용할 액티비티인 ForBlogger2또한 추가해 줍니다.
여기까지 진행한 후, Ctrl+F11을 눌러 가상머신에서 돌아가도록 해보면, 앱이 완성되었음을 확인하실 수 있습니다.
안드로이드 새로운 프로젝트를 시작할 것이므로, Android Application Project를 클릭합니다.
Application Name은 어플리케이션의 이름을, Project Name은 프로젝트 이름, Package Name은 안드로이드에 업로드 하게 될 때 사용되는 이름으로, 이미 기존 어플리케이션과 중복되면 안됩니다.
Minimum Required SDK는 앱이 지원할 최소사양을, Target SDK는 앱이 지원할 최대사양을 넣으시면 됩니다. 이 범위를 크게 잡게 되면 쓸데없이 용량이 커지게 되는 경우도 있습니다. Compile With는 Target SDK와 동일하게 잡아주시면 크게 문제 되지 않습니다. Theme은 어플리케이션에서 사용하게 되는 테마입니다.
Create custom launcher icon의 경우는 사용자 설정 icon을 생성해주는 기본 선택사항이므로 체크된 상태로 놓아두시면 됩니다. Create activity 역시 액티비티(안드로이드 구성 블록이라고 생각하시면 됩니다.)를 생성하는 기본 선택사항이므로 체크된 상태로 놓아두시면 됩니다.
Mark this project as a library는 프로젝트를 라이브러리로 사용할 것이 아니므로, 체크 해제 상태를 해 둡니다. Create Project in Workspace의 경우는 workspace의 경로를 지정합니다.
이 화면같은 경우는, 아이콘의 형태를 결정하는 화면입니다. 기본으로 안드로이드 로봇의 launcher.icon이 존재하고, 이를 기반으로 어플리케이션을 제작하면, 다음과 같은 아이콘을 VM(가상 머신)에서 확인할 수 있습니다.
액티비티 디자인을 담당하는 화면입니다. 자신의 어플리케이션에 맞는 테마를 선택하시면 됩니다.
이 화면에서 액티비티 이름, 레이아웃 등을 설정하고 Finish를 누르면 새로운 프로젝트를 생성할 수 있습니다.
블로그를 시작한 이후로 계속 언어를 바꿔서 조금씩 작업하고 다른 프로젝트로 넘어가고를 반복하고 있습니다. 그래서 GAE -> javascript -> 안드로이드로 넘어오게 되서 연재를 꾸준히 못하고 있는데, 안드로이드 부분만큼은 프로젝트가 끝나더라도 계속해서 연재 할 생각입니다. 안드로이드 SDK와 Eclipse를 시작합니다.
한 대의 컴퓨터로 이것 저것 설정을 바꾸다 보니(심지어 호환성 문제 때문에 32-bit, 64-bit도 왔다갔다 해야 했습니다.) 새로이 설정을 할 때마다 기존에 해놓았던 설정 때문에 에러가 발생하는 것을 종종 보게 됩니다. 이번에 안드로이드 SDK를 이용하기 위해 작업환경을 구축하는데도 여러가지 에러들이 발생해서 처리하는데 하루가 꼬박 걸렸습니다.
그래서 이번에는 java, eclipse, SDK를 모두 삭제한 후, 처음부터 시작을 해 보기로 하였습니다.
다운로드를 받으시면, adt-bundle-windows-x86-20131030 (2014/02/26 기준) 혹은 adt-bundle-windows-x86_64-20131030 의 이름을 가진 압축 파일이 운영체제에 따라 다운로드 받아질 것입니다. 이를 작업하고자 하는 디렉토리에 풀어 보시면, adt-bundle-windows-x86-20131030 파일 안에 eclipse, sdk, SDK Manager.exe 세 개가 보이신다면 정상입니다.
우선, SDK Manager.exe 파일을 클릭하면, 여러가지 개발에 필요한 패키지를 설치하실 수 있습니다. 저는 tool 전체, 상위 버전의 안드로이드에서는 SDK platform, Documentation for Android SDK, Google APIs, Sources for Android SDK 패키지를 선택하였고, 하위 버전의 안드로이드에 대해서는 SDK platform만을 설치하였습니다. 또한, Extras는 전체를 선택하였습니다.
이 화면에서 꽤 오랜 시간을 기다립니다. 번들을 받았을 때 가장 좋은 장점은 안드로이드 전용 Eclipse를 포함하고 있기 때문에 플러그인을 설치할 필요가 없다는 점이라고 생각합니다. 플러그인을 설치하게 되는 경우, 제 경우에는 가끔씩 발생하는 오류와 플러그인을 설치할 때 오래걸리기도 하였습니다.
이제 eclipse 폴더로 들어가서, eclipse.exe를 클릭합니다. 안드로이드 전용 eclipse는 화면도 이쁘네요.
이때, 자신이 원하는 workspace 디렉토리를 설정해 주도록 합니다.
이제 들어가게 되면 저는 이런 오류가 발생했습니다. 검색해 본 결과, 기본 설치 경로에서 벗어나면 종종 발생하는 오류라고 합니다.
'Could not find folder 'tools' inside SDK 'C:\Program Files (x86)\Android\android-sdk\'.'라는 오류가 발생하게 되는데, 이는 저 오류 창에 Open Preferences를 클릭하여, 방금 전에 압축을 푼 번들 폴더의 sdk를 경로로 잡아주면 해결됩니다.
Hello World!
Hello World를 띄우기 전에, Hello World를 띄울 가상 머신(Virtual machine)을 한글화 해보도록 하겠습니다. 우선, 가상 머신 설정을 건드리기 위해서는 환경 변수 설정을 하시는 편이 좋습니다. 번들의 경우, 압축을 푼 폴더의 sdk>platform_tools로 들어가 주소를 텍스트로 복사하여 path에 환경변수를 잡아줍니다.
그리고, 가상_머신_한글화.apk 파일을 다운로드 받아 원하는 위치에 이동합니다. 그리고, 그 디렉토리에서 shift + right 클릭을 통해 커맨드라인으로 이동합니다.
그 후, eclipse를 켜서 가상 머신을 활성화 시킵니다.
가장 먼저, 새로운 안드로이드 어플리케이션을 생성합니다.
여기서는 끝까지 next를 누르시면 됩니다. 그후, 가상 머신 실행을 위해 아이콘을 누르시고 새로운 가상 머신을 생성하시면 됩니다.
이 화면에서 기다리면, 이렇게 가상 머신이 동작하는 것을 보실 수 있습니다.
우리는 이 버전을 한글화 하려고 하므로, 이 상태에서 아까 켜 둔 커맨드 라인으로 돌아갑니다. 커맨드 라인에 adb install HangulKeyboard.apk 라고 입력하면, 다음과 화면과 함께, 설치가 완료 됩니다.
가상 머신으로 돌아가 menu>settings>Language>한국어를 선택하시면, 정상적으로 한국어 VM이 된 것을 보실 수 있습니다. 그 후, Language에서 Japanese IME를 선택 해제하신 후, 한자도 선택 해제하시고, 한글 접촉식 키보드를 선택하시면 모든 과정이 완료 됩니다.
google 등의 입력창에서 입력창을 왼클릭을 길게 하시면, 키보드 설정을 한국어로 바꾸실 수 있습니다.
그 후, Android application (저는 Test)를 package Explore에서 선택하신후, Run as android Application을 클릭하시면, 아래와 같은 화면을 볼 수 있습니다. (hello world는 내장되어 있습니다!)
자바스크립트와 같은 객체지향프로그래밍(Object-Oriented Programming)에서 객체(Object)는 클래스의 인스턴스로서 존재합니다. 인스턴스는 해당 클래스의 구조로 컴퓨터 저장공간에 실제로 저장되는 실체이며, 객체는 클래스와 인스턴스를 포함한 개념입니다.
여기서 객체가 클래스의 인스턴스이지만, 객체가 클래스와 인스턴스를 포함한 개념이라는 것에서 혼동이 올 수 있는데, 객체는 클래스로서 규정된 인스턴스라고 생각하면 됩니다.
컴퓨터 과학에서 말하는 객체는 가장 단순하게 말하면 저장공간에 할당된 공간입니다. 즉, 메모리 할당과 동시에 객체가 생성되며, 일반적으로 사용하는 객체 지향 프로그래밍(Object-Oriented Programming)에서의 객체는 클래스(Class)의 인스턴스(instance)로서 존재합니다. 일반적인 비유로, 집을 예로 들면 클래스는 템플릿 역할을 하여 집의 설계도에 해당하고 객체는 실제 존재하는 집에 해당합니다.
표현식은 특정한 규칙을 가진 문자열의 집합을 표현하고 사용하는 형식 언어입니다. Perl은 언어 자체의 강력한 정규 표현식을 구현하고 있기 때문에 많은 부분을 Perl을 바탕으로 한 자바스크립트 또한 비슷한 표현식을 가지고 있습니다.(사실 C, C++, Java 등의 언어는 비슷한 표현식을 가집니다.)
간단한 표현식의 예로는 리터럴과 변수가 있습니다. 리터럴은 그 자체로 값이 되며, 변수는 그 변수가 저장하거나(기본 타입) 참조하는(참조 타입) 값입니다. (<#4. 자바스크립트 변수> 참조) 또한 이러한 표현식의 조합도 표현식으로 인식됩니다.
연산자(Operator)
연산자는 어떤 요소에 작용해 그 요소를 다른 요소로 변형시키는 일종의 함수입니다.
산술 연산자
덧셈(+) 연산자는 숫자 타입 피연산자의 덧샘이나 문자열 타입 피연산자의 이어 붙이기에 사용됩니다.
뺄셈(-) 연산자는 2항 연산자로 쓰일 경우 첫 번째 피연산자에서 두 번째 피연산자를 빼는데 사용됩니다.
곱셈(*) 연산자는 두 피연산자를 곱하는데 사용됩니다.
나눗셈(/) 연산자는 첫 번째 피연산자를 두 번째 피 연산자로 나눕니다. 특이할 점은 자바스크립트는 모든 수를 실수로 다루기 때문에 (정수)/(정수)가 부동소수점을 가지는 경우 반올림 혹은 버림이 아닌 부동소수점을 가지는 실수로 결과값을 나타낸다는 것입니다. 또한, 0으로 나누는 연산은 양 혹은 음의 무한대가 되며, 0/0은 NaN이 됩니다.
나머지(%) 연산자는 첫 번째 피연산자에 대한 두 번째 피연산자의 나머지 연산을 수행합니다. 결과의 부호는 첫 번째 피연산자의 부호와 동일하며, 부동소수점 값에 대해서도 적용할 수 있습니다. (예: -4.3 % 2.1 = -0.1)
마이너스(-) 뺄셈 연산자가 단항 연산자로 피연산자 앞에 쓰이면 단항 부정을 수행합니다.
플러스(+) 덧셈 연산자가 단항 연산자로 피연산자 앞에 쓰이면 부호를 명시적으로 지정하는 역할을 합니다. 피연산자가 숫자가 아닌경우 변환을 시도하며 변환되지 않을 경우 NaN을 반환합니다.
증가(++) 연산자는 단항 피연산자에 대해 1을 더하는 증가 연산을 수행합니다. 피연산자 앞에 위치할 경우, 전치증가(pre-increment)를 수행하여 피연산자를 증가시킨 후 나머지 작업을 진행하며, 피연산자 뒤에 위치할 경우, 후치증가(post-increment)를 수행하여 나머지 작업을 진행한 다음 피연산자를 증가시킵니다. 제어문에서 주로 사용하게 됩니다.
감소(--) 연산자는 증가 연산자와 비슷한 기능을 수행하며 1을 빼는 연산을 수행합니다.
동등 연산자
동등(==) 연산자는 두 값이 같은지 확인하는데 쓰입니다. 피연산자의 타입을 고려하지 않고 주어진 피연사자들이 같으면 true를, 다르면 false를 반환합니다.
일치(===) 연산자도 역시 두 값이 같은지 확인하는데 쓰입니다. 피연산자의 타입을 고려하지 않는다는 점에서 동등 연산자와 동일하지만, 동등 (==) 연산자와는 다르게 타입까지 일치하여야 true를 반환합니다. 또한, NaN값은 어느 값과도 일치하지 않기 때문에 NaN이 피연산자 중 하나라도 포함된다면 언제나 false를 반환합니다.
여기서의 '같다'라는 말이 혼동을 줄 수 있는데, 문자열을 포함한 기본 타입에서는 값을 비교하며, 참조 타입의 변수의 비교는 같은 객체를 참조하는지를 비교합니다. (기본 타입과 참조 타입의 차이는 <#3. 자바스크립트 데이타 타입>에서 확인 할 수 있습니다.)
부등(!=) 연산자는 동등(==) 연산자의 반대 기능을 수행합니다.
불일치(!==) 연산자는 일치(===) 연산자와 반대 기능을 수행합니다.
관계 연산자
작다(<) 연산자는 첫 번째 피연산자가 두 번째 피연산자보다 작으면 true를 반환합니다.
크다(>) 연산자는 작다(<) 연산자와 반대의 기능을 수행합니다.
작거나 같다(<=) 연산자는 첫 번째 피연산자가 두번째 피연산자보다 작거나 같으면 true를 반환합니다.
크거나 같다(>=) 연산자는 작거나 같다(<=) 연산자와 반대의 기능을 수행합니다.
비교 연산 중, NaN이 나타나는 경우 무조건 false를 반환합니다. 또한 문자열의 비교에서는 대문자가 소문자보다 항상 작다는 것을 기억해 두시는 것이 좋습니다.
in 연산자는 좌변의 피연산자로 문자열을 받아 우변의 피연산자의 Property 이름에 해당할 경우 true를 반환합니다.
var point = {x:1, y:1}
var has_x_coord = "x" in point; // true
var has_y_coord = "y" in point; // true
var has_z_coord = "z" in point; // false
var ts = "toString" in point; // true
코드를 분석해 보면, 첫째 줄에서 객체를 정의하였고, 2,3,4 줄의 코드의 결과는 당연하게 보입니다. 5번째 줄의 결과값이 true가 나오는 이유는 point자체가 객체이고 자바스크립트에서는 변환이 자동으로 진행되기 때문에 객체에서 toString 프로퍼티를 갖고 있기때문에 true가 반환됩니다.
instanceof 연산자는 좌변의 피연산자로 객체로, 우변의 피연산자로 객체 클래스의 이름을 받아 좌변의 객체가 우변 클래스의 인스턴스일 경우 true를 반환합니다. 모든 객체는 Object의 인스턴스입니다..
var d = new Date();
d instanceof Date; // true
d instanceof Object; // true
d instanceof Number; // false
var a = [1, 2, 3];
a instanceof Array; // true;
a instanceof Object; // true;
a instanceof RegExp; // false;
좌변 피연산자가 객체가 아니거나 우변 피연산자가 생성자 함수에 포함되지 않은 객체라면 instanceof는 false를 반환하지만, 우변 피연산자가 아예 객체가 아닌 경우에는 런타임 에러를 발생시킵니다.
문자열 연산자
<,>=,>,>=, ==, != 연산자 등은 문자열에서 정상적으로 작동합니다. 그러나 + 연산자는 숫자 피연산자보다는 문자열 피연산자에 우선권을 부여한다는 점에 주의하면 됩니다.
논리 연산자
논리연산자는 Boolean을 다루게 되며, 제어문에서 조건을 위해 사용됩니다. &&(AND), ||(OR), !(NOT) 연산자가 있습니다.
비트 연산자
&, |, ^, ~ 의 비트연산자는 비트 단위에서 논리 연산자와 비슷한 역할을, <<,<,>,>> 연산자는 왼쪽 혹은 오른쪽으로 비트를 이동할때 사용합니다.
이 게시물은 자바스크립트 완벽가이드 6판의 예제를 중심으로 따라갑니다. 또한 자바스크립트 완벽가이드 6판을 참조하여 개인 공부용으로 작성한 압축판임을 알립니다. 예제 중심으로 보실 분은 Non Required를 건너뛰셔도 무방합니다. #1. 자바스크립트 소개 #2. 자바스크립트 문법(Non Required) #3. 자바스크립트 데이타 타입(Non Required) #4. 자바스크립트 변수 (Non Required)
변수의 타입
자바스크립트의 변수는 여타 다른 언어들과는 다르게 특정한 타입이 지정되지 않습니다. 따라서, <#3. 자바스크립트 데이타 타입>에서 다루었듯이 대부분의 데이타는 다른 데이타 타입으로 자동 변환됩니다. 이 특성은 자바스크립트를 더 단순한 언어로 만들어줍니다.(라고 책에 소개되지만, 오히려 자동 변환되는 특성을 가지는 언어일수록 신중하게 접근하여야 합니다.)
변수의 선언
자바스크립트의 변수 선언은 여타 다른 언어들과 다르지 않습니다. 다만, 자료형을 사용하는 대신 변수를 의미하는 var을 사용합니다.
var i;
var sum;
var i, sum;
위와 같이 선언을 해줄 경우는 초기화를 따로 진행하여야 합니다. 만약 초기화를 진행하지 않고 call을 진행하게 되면 존재하지 않는 값을 참조하게 되므로 undefined가 발생하게 됩니다. 만약 선언과 동시에 초기화를 하고 싶은 경우는 아래와 같이 진행할 수 있습니다.
var message = "hello";
var i = 0, j = 0, k = 0;
또한, 자바와 비슷하게, for문 등의 반복문 안에서 변수를 선언할 수 있습니다.
for(var i = 0; i <10; i++) {
document.write(i, "<br>");
}
만약 var을 통해서 선언되지 않은 변수에 값을 할당하려 하는 경우, 자바스크립트 내에서 그 변수를 임의로 전역 변수로(어디서나 접근 가능한) 선언하고 할당합니다. 따라서 var을 통해 먼저 선언하는 것이 좋은 프로그램의 시작이라고 말할 수 있습니다. (가능하면 전역 변수를 쓰지 않는 것이 관리 차원에서 좋습니다.)
전역(global) 변수와 지역(local) 변수
전역 변수는 자바스크립트로 작성한 코드를 통틀어 어디서나 접근 가능한 변수입니다. 그러나 지역 변수는 함수 등에서 정의되어 그 밖에서는 접근할 수 없는 변수입니다.(함수의 매개 변수는 대표적인 지역 변수의 하나입니다.)
지역 변수와 전역 변수는 유효 범위가 다른 만큼 같은 이름을 가질 수 있습니다. 전역 변수와 같은 이름을 가지는 지역 변수가 어떤 함수 내에 존재하는 경우, 지역 변수가 전역 변수에 비해 우선 순위를 갖습니다.
var scope = "global"
function checkscope() {
var scope = "local";
document.write(scope);
}
checkscope();
위의 코드의 경우, 첫 줄에 먼저 "global"인 문자열을 가지는 전역 변수 scope이 존재하고, checkscope의 경우 "local"인 문자열을 가지는 지역 변수 scope이 같은 이름으로 존재합니다. 그러나 마지막 줄에서 checkscope()로 function call을 진행하는 경우, 지역 변수가 우선순위를 가지므로, "local"이 출력됩니다.
함수의 중첩
함수는 중첩되어 유효 범위가 다를 수 있습니다. 아래 예제(이 포스트에서 다루는 모든 예제는 'javascript 완벽가이드'에서 따온 것입니다.)에서 함수의 중첩 및 유효 범위를 잘 설명하고 있습니다.
var scope = "global scope";
function checkscope() {
var scope = "local scope";
function nested() {
var scope = "nested scope";
document.write(scope);
}
nested();
}
checkscope();
여기서 scope는 각각의 유효 범위를 가집니다.
1. 전역적으로 접근 가능한 global 변수인 "global scope"의 scope,
2.checkscope() 안에서 접근 가능한 local 변수인 "local scope" scope,
3.nested() 안에서 접근 가능한 가장 좁은 유효 범위를 가지는 local 변수인 "nested scope"의 scope.
따라서 8번째 줄의 nested()의 function call이 이루어 졌을 때, 6번 째 줄의 document.write(scope)에 의해 document.write("nested scope")가 출력될 것이며, 10번 째 줄의 checkscope()의 function call이 이루어 졌을 때 역시 같은 결과가 나올 것이라는 것을 알 수 있습니다.
색다른 유효 범위를 가지는 자바스크립트
C, C++, Java와는 다르게 자바스크립트는 한 번 함수안에 정의된 변수는 블록에 상관없이 함수 전체에서 유효합니다. (이를 책에서는 '블록 단위의 유효 범위는 없다'라고 설명합니다.)
function test (o) {
var i = 0;
if (typeof o == "object") {
var j = 0;
for (var k = 0; k <10; k++) {
document.write(k);
}
document.write(k);
}
document.write(j);
}
위의 test function을 보게 되면, 지역 변수인 i가 test내에서 가장 먼저 선언되고 초기화 되었습니다. 그리고 그 뒤를 이어 조건문이 나오고 조건문 안에서 지역 변수인 j 와 k가 선언되었습니다. 특이한 점은 8번 째 줄의 document.write(k)에서 이루어 집니다.
우리가 그동안 익숙하게 사용해 왔던 언어에서는 8번 째 줄이 허용되지 않았겠지만, javascript 에서는 함수 내에 한 번 정의된 변수가 유지되기 때문에 k가 10으로 정의되고 초기화 되어 출력됩니다.
그러나 10번 째 줄의 경우는 j가 정의되어 있지만, 초기화 되지 않았을 경우에만 출력하기 때문에 undefined가 나타나게 됩니다.
하나의 재밌는 예시를 더 보겠습니다.
var scope = "global"
function f() {
alert(scope);
var scope = "local";
alert(scope);
}
f();
지금까지의 프로그래밍 지식으로는 당연히 출력값으로 각각 "global"과 "local"이 나올 것이라고 생각됩니다. 그러나 이 결과는 놀랍게도 undefined와 "local"이 출력됩니다. 그 이유는 Javascript가 인터프리터 언어이고, 자바스크립트의 특성상 함수 전체에서 지역 변수가 전역 변수를 감추는 역할을 하기 때문에, 위의 함수 f()는 다음과 같이 해석됩니다.
function f() {
var scope;
alert(scope);
var scope = "local";
alert(scope);
}
따라서, 함수의 시작 부분에 변수를 위치시키는 습관을 들이는 것이 좋습니다. (엄격한 문법 규칙을 가지고 있는 C나 C++과 같은 언어로 프로그래밍 언어 습관을 들여 놓는 것이 자동으로 배정해 주는 javascript와 같은 언어로 프로그래밍을 할 때 오류를 줄이는 것을 도와줍니다.)
기본 타입과 참조 타입, 그리고 문자열
#4를 시작할 때 자바스크립트의 변수는 타입을 가지지 않는다고 언급 하였습니다. 그러나 자바스크립트의 변수는 자료형을 가지지는 않지만 변수를 크게 기본 타입과 참조 타입으로 나눌 수 있습니다. <#3. 자바스크립트 데이타 타입> 에서 볼 수 있듯이, 숫자, Boolean, null, undefined 데이타 타입은 기본 타입, Object계열의 객체, 함수, Array 데이타 타입은 참조 타입에 속합니다.
기본 타입과 참조 타입의 가장 큰 차이점은 메모리에서 결정된다. 기본 타입은 고정된 크기의 메모리를 할당받아 이용하지만, 참조 타입은 할당받는 메모리의 크기가 고정되어 있지 않습니다. 즉, 변수에 (예컨데 8 비트의) 기본 타입은 얼마든지 저장이 가능하지만 참조 타입은 불가능 하기 때문에 대신 메모리 주소를 저장하여 그 위치를 '참조'합니다.
기본 타입과 참조 타입의 변수는 각각 다르게 동작합니다.
var a = 3.14;
var b = a;
a = 4;
alert(b);
기본 타입의 경우는, 변수 b가 기본 타입인 a를 저장하였으나 a가 바뀌어도 b의 값은 변하지 않습니다.
var a = [1, 2, 3];
var b = a;
a[0] = 99;
alert(b);
그러나 참조 타입의 경우는, 변수 b가 참조 타입인 a의 위치를 저장하였기 때문에 a의 내용물이 바뀌어도 그 위치의 변화는 없기 때문에 b의 값도 변화하는 것을 볼 수 있습니다. (C의 포인터 개념을 생각하시면 편하게 이해가 됩니다.)
문자열의 경우는 기본 타입과 참조 타입 둘 중 어느 곳에도 속하지 않는 예외적인 경우입니다. 문자열의 크기는 문자가 어떻게 조합되는가에 따라 유동적이기 때문에 고정된 크기의 메모리를 할당 할 수 없습니다. 이 면만 생각해 보면 문자열은 참조 타입의 변수로 지정해도 큰 문제가 없습니다. 그러나 많은 경우에 문자열은 기본 타입의 변수처럼 작동하기 때문에 예외적인 경우로 분리해 둡시다.
가비지 컬렉션
변수는 메모리를 잡아먹습니다. 기본 변수는 크게 문제 되지 않지만, 크기가 유동적인 참조 변수의 경우는 동적으로 메모리에 할당되어 해제되지 않는 경우 메모리에 영구적으로 붙게되어 메모리를 잡아먹게 됩니다. 이를 방지하여 메모리의 손실을 막기 위해서는 '가비지 컬렉션'을 통해 변수의 메모리 할당을 해제하는 작업이 필요합니다.
C와 C++의 경우는 수동으로 변수의 메모리 할당을 해제해야 하기 때문에 프로그래머가 일일이 프로그램에 의해 생성되는 객체의 메모리를 찾아 해제하는 작업을 해주어야 합니다.(물론, 소스 코드 내에서 진행하지만, 불편한 작업이라는 것은 분명합니다.)
자바스크립트에서는 이러한 귀찮은 작업을 줄이기 위하여(자바스크립트는 접근성을 용이하게 하기 위해 많은 이와 같은 귀찮은 작업들을 자동화 시킵니다.) 가비지 컬렉션을 이용합니다. 파이썬에서도 가비지 컬렉터를 이용하여 이러한 문제를 해결합니다.
가비지 컬렉션을 사용하는 것의 장단점은 다음과 같습니다. 일단 가비지 컬렉션을 사용하면 개발 속도가 빨라지고, 발생할 수 있는 오류의 가능성이 줄어듭니다. 그러나 수동으로 메모리를 따라가는 것이 프로그램의 효율성을 증대시켜 속도와 효율을 증가시킵니다. (ios는 C기반, Android는 java기반이라고 알고 있습니다. 이 둘의 차이는 이러한 면에서도 부각되는 면이 있을 것이라 생각합니다)
이 게시물은 자바스크립트 완벽가이드 6판의 예제를 중심으로 따라갑니다. 또한 자바스크립트 완벽가이드 6판을 참조하여 개인 공부용으로 작성한 압축판임을 알립니다. 예제 중심으로 보실 분은 Non Required를 건너뛰셔도 무방합니다. #1. 자바스크립트 소개 #2. 자바스크립트 문법(Non Required) #3. 자바스크립트 데이타 타입(Non Required) #4. 자바스크립트 변수 (Non Required)
데이타 타입(자료형) 이란?
데이타 타입은 한국어로 '자료형'으로 종종 번역되는 단어로, 프로그래밍 언어에서 실수치, 정수, Boolean 등의 다양한 데이타를 식별하는 분류로 사용됩니다. 프로그래밍 언어에서 자료형을 사용함으로 자료형 구조 내에서 데이타의 해석을 쉽게 할 수 있고, 신뢰도를 높이는 역할을 하게 됩니다.
자바스크립트의 데이타 타입
기본 데이타 타입 복합 데이타 타입
자바스크립트는 String(문자열), Boolean(진리값), 숫자의 세 가지 기본 데이타 타입이 있습니다. 또한, null, undefined의 두 가지 단순 데이타 타입을 가집니다.
복합 데이타 타입
자바스크립트는 Object(객체)라는 복합 데이타 타입을 지원합니다. Object의 타입 중 순서가 정해진 값들의 집합을 Array(배열)이라 부르며, 보통의 Object와 구분하여 생각하는 것이 일반적입니다. 또한, function(함수) 데이타 타입을 지원하는데, 이는 실행 가능한 코드를 담은 객체입니다. 일반적으로, 다른 특별한 객체, 배열, 함수를 서로 다른 객체라고 취급합니다. Date, RegExp, Error 클래스 등이 다른 객체의 예입니다.
숫자 데이타 타입
자바스크립트는 정수 값과 실수 값을 구별하지 않고 데이타를 처리합니다. C, JAVA 등에서는 이들을 나타내는 데이타 타입이 각각 구별되며, 자바스크립트는 이와는 다르게 모든 숫자 데이타를 64비트 실수로 처리합니다.
리터럴(literal)
리터럴이란 자바스크립트 프로그램 내에서 바로 숫자가 나타나는 것을 의미합니다(변수 혹은 상수에 저장되는 객체 그 자체). 컴퓨터 과학 분야에서 리터럴이라 하면, 보통 소스 코드의 고정된 값을 나타냅니다. 리터럴과 대조적인 의미를 변수라 생각하면 이해가 쉬울 듯 합니다.(일부 ECMAScript 등에서는 리터럴로 객체를 표현할 수 있습니다.) 자바스크립트에서는 리터럴 표기법을 이용하여 요소를 열거하는 것 만으로 객체를 만들 수 있습니다.
정수 리터럴
자바스크립트에서는 -2^53<= x <= 2^53의 정수가 표현 가능합니다. 그러나 비트 연산자 등이 -2^31 <= x <= 2^31 -1의 정수에서만 작동하므로, 이를 고려하는 것이 안전합니다.
부동소수점 리터럴
실수는 정수 부분과 소수점, 소수점 이하 부분으로 나뉘게 됩니다.
숫자 상수
Infinity: 무한대
NaN: 숫자가 아닌 특수값
Number.MAX_VALUE: 표현 가능한 가장 큰 수
Number.MIN_VALUE: 표현 가능한 가장 작은 수(NON_NEGATIVE)
Number.NaN: 숫자가 아닌 특수값
Number.POSITIVE_INFINITY: 양의 무한대
Number.NEGATIVE_INFINITY: 음의 무한대
String(문자열) 데이타 타입
문자열 리터럴
문자열이란 '' 혹은 ""로 둘러싸인 0개 이상의 문자들의 집합입니다. 자바스크립트나 HTML을 혼용하는 경우는 자바스크립트와 HTML에서 서로 다른 따옴표를 사용하는 것을 권장합니다.
이 게시물은 자바스크립트 완벽가이드 6판의 예제를 중심으로 따라갑니다. 또한 자바스크립트 완벽가이드 6판을 참조하여 개인 공부용으로 작성한 압축판임을 알립니다. 예제 중심으로 보실 분은 Non Required를 건너뛰셔도 무방합니다. #1. 자바스크립트 소개 #2. 자바스크립트 문법(Non Required) #3. 자바스크립트 데이타 타입(Non Required) #4. 자바스크립트 변수 (Non Required)
#2. 자바스크립트 문법
1. 자바스크립트에서는 대소문자가 구분된다!
자바스크립트는 문법에서 대소문자를 구분한다(대소문자를 구별하지 않았던 HTML과는 대조를 이룬다). 대표적인 예로, While, WHILE 등은 인식하지 못하며, online, Online, OnLine, ONLINE은 모두 별개의 변수이다.
2. 자바스크립트에서는 세미콜론을 생략할 수 있다!
그러나 프로그램밍적 편의성에서 보면 세미콜론을 생략하지 않고 쓰는 것이 좋다.
3. 자바스크립트는 C, C++스타일의 주석을 지원한다!
'//' 혹은 '/* */' 를 사용하여 주석을 만들 수 있다.
4. 자바스크립트 에서는 식별자로 사용할 수 없는 예약어들이 존재한다.
자바스크립트에서는 변수, 함수, 루프 레이블등의 식별자로 사용할 수 없는 예약어들이 존재한다. break, case, catch, continue, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with 이다. 이 키워드 들은 자바스크립트 내에서 각각의 의미와 역할을 수행하며 문법의 일부이다.
또한, 예약되어 식별자로 사용할 수 없지만 특별한 역할이나 의미가 존재하지 않는 추후 개발을 위한 예약어도 존재한다. abstract, boolean, byte, char, class, const, debugger, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile이 그것이다.
인터프리터는 컴파일러와 대비되는 컴퓨터 프로그램 환경입니. 명령어를 기계어로 번역하는 대신(컴파일러의 역할) 인터프리터는 보통 명령어를 한 줄씩 읽어 중간 형태로 번역한 후 변환한 것을 실행합니다. 적은 양의 코드를 다룰 때 전체를 컴파일 하는 것보다 인터프리터를 사용하면 대화식의 프로그래밍을 할 수 있기에 개발단계에서 선호됩니다.
이 게시물은 자바스크립트 완벽가이드 6판의 예제를 중심으로 따라갑니다. 또한 자바스크립트 완벽가이드 6판을 참조하여 개인 공부용으로 작성한 압축판임을 알립니다. 예제 중심으로 보실 분은 Non Required를 건너뛰셔도 무방합니다. #1. 자바스크립트 소개 #2. 자바스크립트 문법(Non Required) #3. 자바스크립트 데이타 타입(Non Required) #4. 자바스크립트 변수 (Non Required)
자바스크립트는 자바스크립트 언어의 핵심 부분인 코어 자바스크립트와 웹 브라우저에서 사용하기 위해 확장된 클라이언트 측 자바스크립트로 나뉜다(적어도 자바스크립트 완벽가이드 6판에서는 이렇게 소개한다.) 자바스크립트는 얼핏 보기에는 C, C++, Java등과 닮은 모양이지만, 변수의 타입을 하나하나 지정해주지 않아도 되는 인터프리터 방식의 프로그램언어입니다.
예제 1-1
자바스크립트가 가장 많이 쓰이는 분야는 웹 브라우저입니다. 코어 자바스크립트가 웹 브라우저에 내장되어 HTML의 스크립트를 실행합니다.
<html>
<head>
<title>Factorials</title>
</head>
<body>
<h2>Table of Factorials</h2>
<script>
var fact = 1;
for (i=1; i<10; i++) {
factfact = fact * i;
document.write(i + "! = " + fact + "<br>");
}
</script>
</body>
</html>
예제 1-2
예제 1-2는 자바스크립트가 HTML과 함께 쓰여서 동작 방식의 제어가 가능하다는 것을 보여주는 예제입니다. event handler(onclick)을 사용하여 alert를 진행합니다.
<html>
<head>
<title>Button</title>
</head>
<body>
<buttononclick ="alert('You clicked the button');">Click here</button>
</body>
</html>
예제 1-3
예제 1-3은 책의 정오표를 찾아보고 틀린부분을 수정하려고 해보아도 책의 코드 바탕으로는 작동되지 않았습니다. 인사이트 홈페이지에서 관련 코드를 받아 첨부합니다.(첨부파일 참조)
<!DOCTYPE html>
<html>
<head>
<title>JAVASCRIPT Loan Calculator</title>
<style>
/* 사용자에게 보여지는 영역을 꾸미는 CSS영역이다. 복잡한 프로그램에서는 CSS와 Javascript코드를 다른 파일에 분리하는 것이 좋다. */
