내 발자취

UI는 User Interface의 약자다. API는 Application Programming Interface의 약자다. 이 두개의 서로 다른듯 비슷하고 비슷한듯 다른 이 둘의 의미를 살펴보면서 우리가 하는 일이 무엇인가를 음미해보자. 여기에 버튼이 있다. 누르면 경고창이 뜬다. 이 버튼을 사용하는 주체는 우리의 웹 앱을 이용하려고 하는 사용자다. 사용자는 이 버튼과 같은 조작장치를 이용해서 우리의 웹 애플리케이션을 사용하고 있는 것이다. 사용자가 시스템을 제어하기 위해서 사용하는 조작장치를 User Interface. 줄여서 UI라고 부른다. 그럼 이번에는 웹 애플리케이션의 코드를 살펴보자. 이 경고창은 우리가 만든 것이기도, 만들지 않기도 했다. 생각해보면 경고창이 실행되는 타이밍이나 경고 창에 ..

우리는 소프트웨어를 만든다고해서 혼자서만 하는경우는 없다. 이미 누군가가 만든 소프트웨어 위에서 만드는 것이기도하고 다른 사람이 만든 부품을 활용해 만드는 것이 효율적이기 때문이다. 소프트웨어의 사회성 library VS framework 키워드 두가지. 이 두가지는 다른사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다. 라이브러리 =도서관 =무언가 정리정돈 되어 있는 곳? 즉, 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 재사용하기 쉽도록 잘 정리정돈 해놓은 소프트웨어를 library라고 한다. (내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌) 프레임워크는 만들고자 하는 것이 있을 때 만들고자 하는 것이 무엇인지(ex. 게임, 웹, 채팅 등)에 따라 그것을 만들려고 할..

이번시간에는 가장 큰 정리정돈의 도구!를 살펴볼 것이다. 객체로 정리하는 것까지 살펴봤는데 만약 그 객체마저도 많아져 정리해야한다면? 서로 연관된 코드들을 파일로 묶어 그룹핑하는 방법이 남아있다. 이 방법을 사용하면 웹페이지가 아무리 많아도 그 많은 웹페이지들을 감당할 수 있게 된다. 이제 만든 코드들을 다른 웹페이지에도 동일하게 적용을 해줘야하하는 시간이 왔다. 여기있는 인풋 태그 세줄을 다른 웹페이지 1.html 2.html의 같은 위치에 넣어줬다. 다른페이지에도 버튼이 생겼다 자바스크립트가 안따라갔으니까 동작은 안한다. script태그를 복사해서 모든 웹페이지에 배포하자. 그럼 잘 동작한다. 그럼 극단적인 생각도 해보자. 이런 웹페이지가 1억개라면? 일단 배포도 어렵지만 수정해야할 경우....흐ㅠㅠ..

body.setBackgroundColor('black'); 이런식으로 코딩을 하고 싶다면 어떻게 하면 될까? 이렇게 프로퍼티를 하나 더 만들어주고 실행했더니 작동이 안된다. 검사(F12)에서 확인해보니 19번 줄에 오류가 생겼다고 한다.(나중에 발견한건데 앞에 body가 빠져야 했다...;) 객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 콤마를 찍는다. 콤마가 빠져서 에러가 난 것이다. 콤마를 넣어주니 잘 동작한다. linksetColor도 객체화 시켜보자 이렇게 links 객체로 바꿔주고 아래 links.setColor로 잘 동작한다. (너무 신기해...ㅎ) 이렇게 객체가 무엇인지 알았다. document.write~~~이렇게 사용하던 document부분이 알고보니 객체였다는 사실 그리고 그 다음 부..

객체의 마지막 시간 여기있는 객체에는 어떤 데이터를 담을 수 있다. 위 상황에서는 "문자"를 담았지만 저기에는 배열을 담을 수도 있고 숫자를 담을 수도 있고 다 담을 수 있다. 그 중에 하나. 객체에는 함수도 담을 수 있다. 이미 객체 배우면서 만들어둔 coworkers를 활용한다. coworkers라는 저 객체에 showAll이라는 메소드를 추가하고 싶다면, showAll은 함수니까 function 위처럼 되는데 저부분이 함수가 되는 것이다.(우리가 함수 정의하던 것과는 다르지만) 위는 아래와 똑같은 표현이다. (위 showAll부터~) 이렇게 세개 다 같은 표현. (1번은 showAll부터~) 아무튼 함수를 정의할 때 저 세가지 표현 다 사용가능한거다. showAll을 하면 coworkers에 있는 ..

생성된 객체에 어떤 데이터가 있는지, 모조리 가져와야하는 경우가 있다. 그런경우 반복문을 써서 배열에서 반복문으로 데이터를 다 가져와야하지 않는가? 객체에서는 어떻게 하나!?....는 검색으로 javascript object iteration(반복적으로 가져온다는 뜻) 그러면 for ...in 문을 사용하라고 나온다. 선생님은 이해못해도 실망하지 말라고 하셨다.. for (var key in 객체이름(=coworkers)) 인것이다. 아무튼 그렇다! 어려우니까 이해 못해도 괜찮다고 하셨다 선생님은 객체가 어렵다고 하셨어 for을 쓰면 coworkers라는 변수가 가리키는 객체에 있는 key값들을 가져오는 반복문이 된다. for문의 key값이라고 하는 건, 드래그한 저 것들을 가리킨다. 즉, key는 우리..

ex10.html로 시작 콘솔에서 복습해보는 배열! 정보를 담는 그릇이면서 동시에 정보가 순서대로 저장된다는 특징이 있다. 순서가 있고 그 순서를 이용해 해당값을 가져올 수 있다. 그럼 순서없이 정보를 저장할 수 있는 것? 그것이 객체다. 이름이 있는 정리정돈 상자!(나중에 꺼내써야하니까 이름을 부여하는것) 새로운 파일에 변수를 만들고 그 안에 객체를 담을건데 배열은 [대괄호] 객체는{중괄호} 안에 정보를 담는다. 이렇게 하면, coworkers라는 객체에 egoing이라는 정보를 programmer라는 딱지를 붙여서 저장한 것이고 leezche라고 하는 정보를 designer라는 딱지를 붙여서 저장한 셈이 되는 것이다. 정보를 꺼내올 때는 document.write("programmer : "+cowo..

이번에 배울 도구는 객체라는 것이다. 영어로는 object 객체라는 도구는 중요하지만 어렵다. 프로그래밍에서 넘어야할 산... 함수와 객체.. 함수의 기반 위에서 객체가 존재하는 개념이기 때문에 함수의 심화과정으로 보면 된다. 객체의 특성, 존재이유, 기능을 이해하며 배워가면 된다. 객체는 정리정돈의 수단? 정리가 필요한 시점이 왔을때, 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹화해서 잘 정리정돈하기 위한 도구. 그것이 객체다.(그런데 한가지 면모만 보이는 것은 아니라고함) 지금 이 두개로 겹치는 부분을 새로 정리해줄것이다. setColor라고 하는 함수로 묶어주었다. 바뀌어야하는 매개변수는 color. 원래자리에는 각각 바뀌어야하는 색깔을 적어주면 정상작동한다. {중괄호} 갯수가 맞는지..