본문 바로가기

IT 인터넷/javascript

(28)
[javascript 언어공부]문서보기 앞서 UI와 API에 대해서 알아봤다. 프로그래머는 결국 환경을 제어하기 위해서는 API를 통해 그 소프트웨어를 제어하는 것이다. 이렇기 떄문에 우리가 제어하고자 하는 환경에는 어떤 API가 있고, 그 각각 API는 어떤 특성이 있고 어떻게사용하는가에 대한 지식이 필요하다. 하지만 이 지식을 머릿속에 항상 가지고 있을 수 없기 때문에이것을 잘 찾을 수 있는 것이 중요하다. 보통 2가지를 제공하는데, 첫번째는 레퍼런스고 두번째는 튜토리얼(안내서) 이다. 먼저 튜토리얼을 통해서 환경이 어떤 기능을 제공하는가를 알 수 있고, 환경에 대해 충분히 이해하게 되면이 지식을 기반으로 그 환경이 제공하는 명령들을 찾아야 하는데,레퍼런스라는 카테고리에 있는 정보들이 그 역할을 한다. 우리가 보고 있는 수업(생활코딩수업 ..
[javascript 언어공부]UI와 API 이번시간에는 UI/API에 대해서 알아보자. UI는 USER INTERFACE의 약자이며 API는 APPLICATION PROGRAMMING INTERFACE의 약자이다. UI와 API의 공통점은 INTERFACE이며 차이점은 USER / APPLICATION PROGRAMMING 이다. 우선 UI에 대해서 알아보자.컴퓨터가 한대 있다고 생각해보자.우리가 컴퓨터를 제어하기 위한 방법은, 1. 버튼을 누르거나2. 터치패드를 움직이거나3. 노트북 뚜껑 열었다 닫았다하는 것을 통해서 노트북이라는 컴퓨터를 제어할 수 있게 된다.동시에 컴퓨터의 상태 - 컴퓨터를 통해서 계산된 것 들은 DISPLAY에서 보여지거나스피커를 통해 시스템의 상태를 알려준다. 컴퓨터 시스템과 / 컴퓨터 사용하는 사람 사이의 접점에 위치하..
[javascript 언어공부] 모듈(2) 이번에는 라이브러리의 개념에 대해서 설명하면서 모듈의 개념을 마무리 해보겠다. 라이브러리와 모듈은 비슷한 개념인데 모듈은 프로그램을 구성하는 작은 부품이라는 의미라면라이브러리는 자주 사용되는 로직을 재사용되기 편하도록 잘 정리한 일련의 코드들의 집합이다. 프로그래밍에서는 아주 많은 라이브러리가 존재한다.또 프로그래머의 아주 독특한 문화인 오픈소스가 있다. 직접 코드를 짜는 것도 좋은 방법이지만, 이것이 만들고자 하는 것의 경쟁력의 원천이 아닌이상누가 이미 만들어놓은 것이 있는지 찾아보는 것이 순서이다. 라이브러리라는것은 그것을 만들기 위한 목적을 가진 사람들이 모여 만들며, 많은시간-자본-노하우가 투여돼어있기 때문에단지 사용하기위한 도구를 필요로 하는 것이면 이것보다 더 좋은 라이브러리를 만들기는 어렵고..
[javascript 언어공부] 모듈(1) 이번에는 모듈 이라는 주제에 대해서 알아보자. 모듈이라는 것에 대해 알아보기 전에, 우리는 부품이라는 단어의 의미에 대해 생각보아야 한다. 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다.그리고 크고 복잡한 프로그램에서는 유지보수의 용이성, 재활용 성이 꼭 필요하다. 어떤 프로그램을 구성하고 있는 수 많은 로직들을재사용 될 수 있는 단위로 조각조각 나누고 구획화 시켜서별도에 모듈이라는 형태로 떼어내고 이것을 또 다른 프로그램에 부품으로 사용하는 기법그리고 그 부품들을 모듈이라 하고, 이러한 기법을 모듈화 라고 한다. 즉, 잘 만들어진 모듈은 아주많은 프로젝트에서 사용될 수 있는 아주 좋은 부품이 되는 것이다. 다시 말하면 모듈화는 어떤 프로그램이 동작하는 방식에 따라서 여러개의 파일로 분리하는..
[javascript 언어공부] 객체(3) 이번에는 객체라는 값에 담길 수 있는 값이 무엇인가에 대해 살펴보자. 객체를 먼저 만들어보자. 객체 안의 list 라는 key 값을 만든다. 그리고 그 안에 들어가는 value는 다시 객체가 될 수 있다. var grades = {'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}} 그리고 grade라는 객체에 list라는 객체에 estelar라는 키 값을 가진 값을 가져오려면grades['list']['estelar']다음과 같이 호출할 수 있다. 또 value값 안에는 함수도 들어갈 수 있다.var grades = {'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}'show': function (){alert('h..
[javascript 언어공부] 객체(2) 다음으로 객체를 다루는 방법에 대해서 알아보자. 특히 반복문을 이용해서 객체를 다루는 방법을 알아보자. 배열에서var arr = ['a','b','c'] 라는 배열을 다룰 때 반복문을 통해 for (var i=0;i
[javascript 언어공부] 객체(1) 이번시간에는 객체라는 주제에 대해서 알아보자.객체는 영어로 object라고 하고, object 라는 객체가 자바스크립트에서 하는 역할은,배열이라고 하는 것과 유사한 역할을 한다.배열은 연관돼있는 데이터들을 담기 위한 그릇이며,객체도 서로 연관돼있는 데이터들을 담기 위한 그릇이라는 점에서는배열과 객체가 매우 유사하다. 배열과 객체의 차이점은,배열은 그릇이 있고, 그 그릇에 값을 추가하면 그에 따른 index가 추가되고, a b c 0 1 2 객체는 index의 값으로 문자나, 원하는 데이터를 지정할 수 있다는 것이 배열과 객체의 가시적인 차이점이다. a b c 'first' 'second' 'third' 다른 언어에서는 연관배열, 맵, 딕셔너리 라는 데이터 타입이 객체에 해당된다. 객체라는 것은, 나중에 ..
[javascript 언어공부] 배열(3) 이번에는 배열을 제어하는 방법에 대해서 알아보자. 우리는 배열에 담겨있는 데이터를 추가,삭제하거나 어딘가에 낑겨 넣거나 하는 작업을 할 필요가 있다. 먼저 추가에 대해서 알아보자. var li = ['a', 'b', 'c', 'd', 'e']; 다음과 같은 배열이 있다. 이 배열에 .push('f'); 라는 명령을 해보면li.push('f'); 배열을 호출했을 때 alert(li); var li = ['a', 'b', 'c', 'd', 'e','f'];기존에 볼 수 없었던 'f'라는 원소가 배열 뒤에 추가되었음을 알 수 있다. push라는 함수가 있다. 이 함수는 자바스크립트가 기본적으로 제공하는 내장함수이다.이 함수를 호출할 때 첫번째 인자로 'f'라는 값을 전달했더니, f라는 값을 push라는 함수가..
[javascript 언어공부] 배열(2) 이번에는 배열을 사용하는 좀 더 구체적인 방법에 대해서 살펴보자. 배열에 대해 어떤 값을 가져올 때, index값을 기억하고 있는 것은 불가능하다.따라서 배열이라는 것은, 배열에 담겨 있는 값들을 하나하나 꺼내서, 꺼내진 값들을 가공하는 것이 배열을 사용하는 것의 핵심이다. '하나하나 꺼내온다'는 것은 앞서 배운 것 중 '반복문'과 연관된다. 배열은 반복문과 함께 사용했을 때 비로소 그 가치가 발휘된다. 하단의 코드를 보자. function get_members(){ return ['estelar', 'yesri', 'hongjoo'];} var members = get_members(); get_members()라는 함수를 정의하고, 그 함수를 호출한 결과를 members 라는 변수에 담는다. 과연 이..
[javascript 언어공부] 배열(1) 이번시간에는 배열에 대해서 배워보자. 배열(array)은 연관돼있는 데이터들을 모아서 통으로 관리하기 위해 사용하는 데이터 타입(형식)이다.다시말해서 배열은 데이터를 담는 그릇이다. 이전에 배운 데이터를 담는 그릇은 변수이며, a라는 변수에는 1이라는 값이 들어갈 수도, 2라는 값이 들어갈 수도 있으나변수 안에 들어가는 것은 하나의 값이었다. 배열은 데이터를 담는 여러개의 붙어있는 그릇이며, 하나의 데이터에 여러개의 데이터를 저장할 수 있고 꺼내올수도 있다. 먼저 배열을 만들어보자.배열은 대괄호로 시작해 대괄호로 끝나야 하며, 그 안에 서로 연관돼있는 데이터를 넣는다. 만약 회사에 3명에 직원이 있고, 그 구성원들을 이름을 배열에 담는다고 생각해보자. var member = ['estelar','yesr..
[javascript 언어공부] 함수(2) 이번시간에는 함수의 입력과 출력에 대해서 알아보자. 프로그래밍에서의 함수는 어떻게 입력을 받고, 어떻게 출력을 받을까? 먼저 출력에 대해서 알아보자. 출력은 return이라는 키워드를 사용한다.하단의 예제 코드르 보자. function get_member1(){ return 'estelar';} function get_member2(){ return 'hongjoo';} alert(get_member1());alert(get_member2()); 하나는 get_member1이라는 함수이고, 하나는 get_member2라는 함수이다.그리고 함수 내부에는return이란는 키워드가 있다. 함수 내부를 읽던 컴퓨터는 return을 읽으면 함수를 종료시킨다.그리고 return 뒤에 있는 값을 함수 바깥쪽으로 뱉어..
[javascript 언어공부] 함수(1) 이번시간에는 함수에 대해서 배워보자.함수는 영어로 function이다. 프로그래밍에서의 함수는 수학에서의 함수와 똑같은 개념이다.하지만 수학에서의 함수와 프로그래밍에서의 함수는 개념은 같지만 중요시 여기는 부분은 다르다. 프로그래밍에서 함수의 가장 중요한 역할은,하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다는 것이다. 재사용성이란 자신이 작성한 코드를 여러 맥락에서 다시 사용할 수 있도록 하는 것이다. 하나의 코드를 여기 저기서 사용할 수 있게 된다는 것의 이점은코드를 작성하는 시간이 줄어드는 것이고, 코어 코드가 개선되면, 이것을 사용하는 모든 코드가 개선된다는 좋은 점이 있다. 따라서 함수를 공부하며 가장 주목할 것은 재사용성이며,이 재사용성이 어떻게 달성되는가에 대해서 ..
[javascript 언어공부] 반복문(3) 이번에는 반복문의 효용에 대해서 알아보자. 어떤 것을 공부할때, 공부만 하는 것은 재미 없을 수 있다.'이게 없다면 얼마나 불편할까?' 라고 생각해 보는 것도 중요하다. 이것이 없었던 시절에 살았던 사람이라고 상상해보고 그 기능이 없었을 때 얼마나 불행했을까,그리고 그 기능이 처음 개발했을 때 사람들이 얼마나 기뻐했을까라는 것에 대해 공감해보면 좋을 것이다. 다음과 같은 코드를 작성 후 실행해보면 document.write('coding everybody'); 브라우저엔 coding everybody가 출력될 것이다. 누군가가 이것을 10줄 출력하라고 한다면, document.write('coding everybody ');document.write('coding everybody ');document...
[javascript 언어공부] 반복문(2) - for문 이번시간에는 while문과 함께, 아주 잘 사용되는 또다른 문법에 대해서 살펴보겠다. 우선 저번시간에 배운 while에 대해 다시 한번 분석해보자. while 문은 크게 3가지 부분으로 구성돼있는데, ① i라는 변수, 즉 언제까지 반복할 것이냐에 대한 기준점을 초기화 하는 부분,② 그리고 반복적으로 실행할 때 마다 i값을 갱신해주는 부분,③ 그리고 반복을 계속 진행할 것이냐 하는 것을 조건화 해놓은 부분이다. 실제로 코딩을 하다보면 이 3가지를 언제나 사용하게 되고, 따라서 3가지를 하나의 문법적 요소로 결합해놓는다면, 오류가 줄어들고 더 보기 좋은 것임을 알 수 있다. 아래 코드를 살펴보자. var i = 0 while(i < 10){ document.write('hello world '); i = i..
[javascript 언어공부] 반복문(1) - while문 이번에는 프로그래밍적으로 반복적인 방법을 실행하는 방법인 반복문에 대해서 알아보자. 이렇게 반복적인 작업을 영어로는 loop 또는 iterate라고 부른다.영어로된 용어를 이야기하는 이유는, 프로그래밍 하면서 여러가지 문제점에 봉착하게 되는데, 그럴 때 가장 중요한게 검색이며, 국내 자료는 많지 않기 때문에 영어로 자료를 검색해야 하는 경우가 많다. 따라서 이런 키워드들은 알아두면 좋다. 본격적으로 반복문에 대해서 배워보도록 하자. 인간은 반복적인 작업을 잘 하지 못한다. 실수하고 지루해한다.컴퓨터는 인간의 이러한 결점을 대신해주기 위한 도구이며, 컴퓨터는 반복적인 작업을 아주 잘한다. 그럼 우리는 어떻게 컴퓨터에게 반복적인 작업을 시킬 수 있을까? 반복문은 조건문과 함께 프로그래밍 부분을 지탱하는 가장..
[javascript 언어공부] boolean의 대체제 이번에는 조건문과 관련된 부가적인것, 자바스크립트의 특수한 것들에 대해서 좀 더 찾아보자. 조건문에서 if 의 괄호 안에 꼭 boolean만 올 필요는 없다. if(0){alert(1)} //실행이 되지 않는다. if(1){alert(2)} //실행이 된다. 왜냐면 숫자 1는 true로 간주되기 때문이다. 하지만 이런 코드는 쓰지 않는 것이 좋다. 그리고 자바스크립트에서는 false로 간주되는 데이터 형도 있다. if(' '){alert('빈 문자열')} 이것은 실행되지 않는데, 빈 문자열은 자바스크립트에서 false로 간주하기 때문이다. if('estelar'){alert('undefined')} 따라서 if 괄호 안에 문자열을 줄 때에 비로소 alert문이 실행된다. if(undefined){aler..