이렇게 만들면 아래와 같이 함수가 실행되게 되는데 약간의 오류처럼 함수가 제대로 실행되지 않는걸 알 수있다. 이게 아주 좋은 방법은 아니다. 우리가 위에서 만든 var coworkers라는 객체에서 coworkers라는 이름이 함수에 그대로 써져있기 때문. 이때 객체의 이름이 바뀌게 되면 실행도 제대로 안될 것이다.
showAll이라는 함수 안에서 이 함수를 가르키는 this를 사용해주면 된다
이렇게 아래처럼 함수에서 coworkers 부분을 this로 수정해준다. 하지만 이렇게하면 이 showAll이라는 함수조차도 corwkers 안에 들어있는 값 중 하나가 되기 때문에 그대로 화면에 출력될 것이다. if문으로 show를 제어할 수있다. 하지만 거기까진 안 배울 것
객체에 소속된 함수를 메소드, 객체에 소속된 변수는 프로퍼티(property)라고 부른다.
#Application of Objects
객체를 활용해 우리가 저번에 만들었던 nightDayhandler 의 함수를 객체화시켜보자.
body라는 변수를 만들어서 객체를 담아보자.
객체안에 여러가지 함수를 넣을때는 콤마(,)로 연결해줘야 한다는걸 잊지말자.
var body = {
Setcolor : function(color){
document.querySelector('body').style.color = color;
},
SetBackgroundColor : function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
<a>태그에 붙었던 함수도 객체화 시키면 이렇게 넣어줄 수 있다.
var links = {
SetColor : function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i+1;
}
}
}
이렇게 많아지는 변수와 함수를 정리할 수 있는게 object였는데 이런 object도 많아지게 되면 얘도 정리하는 수단이 있다.
#Organizing code into files
가장 큰 정리정돈의 도구는 파일이라고 할 수 있다. 연관된 객체와 함수를 파일로 묶어서 그루핑 할 수 있다. 그럼 웹페이지가 아무리 많아도 우린 그 애들을 감당할 수 있게 된다.
우리가 앞서서 만든 웹브라우저 각각의 페이지에 모두 nightDay 전환 버튼을 붙이고 싶다고 해보자. 물론 일일히 자바스크립트의 함수내용까지 다 복사를 해서 가져와서 html파일에 붙여줄 수 있긴하다. 하지만 이렇게 붙여야 하는 웹페이지가 1억개라면? 그리고 우리가 태그안에 붙였던 색을 바꾸고싶다면? 그럼 1억개의 페이지를 일일히 수정해야된다는 소리가 되겠지. 이런상황에서 우리를 구해줄 수 있는건 file로 정리를 하는 것
우리가 만들었던 자바스크립트 코드를 <script></script> 이 태그안에 있는 코드만 가져와서 colors.js라는 파일을 만들고 그 안에 이 코드를 다 넣어준다. 그리고 원래 html파일에 있던 <script>부분에 연결시켜준다.
<script src="colors.js"></script>
그리고 개발자도구에서 Network부분에 들어가서 연결된 링크들을 클릭해봤을때 컴퓨터가 다른 파일들을 로드해주는걸 볼 수 있다. 이제 만든 js파일도 들고 들어온다.
이제 우리는 모든 페이지의 코드를 바꿀 필요없이 colors.js 파일에서만 수정을 해주면 되는것. 유지보수가 엄청 쉬워졌다.
또 각각의 페이지에 <script src="colors.js"></script>태그를 보면 이 페이지들이 모두 colors.js파일을 불러오고 있다는걸 알 수 있기 때문에 코드의 가독성도 높아진다.
하지만 ㅍ이렇게 되면 웹페이지를 접속할때 2개의 파일을 더 열게 되기때문에 캐시가 더 발생한다. 그럼에도 불구하고 이런식의 구조가 서버입장에서는 더 효율적이다. 왜냐하면 한번 접속하게 되면 이후에 접속할때는 기존에 접속되었던 파일을 저장해놓고 바로 열수 있기때문에 더 적은 접속이 발생한다. 네트워크를 통하지않고 파일을 열수 있다는 의미이기 때문에 서버입장에서는 훨씬 더 비용을 절감할 수 있게 되는 것이다. 사용자 입장에서도 네트워크 트래픽을 절감하고 훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있게된다. 그래서 이렇게 파일로 쪼개는 것이 더 효율적인 방법이 된다.
#Libraries and Frameworks.
둘은 다른사람의 도움을 받아서 소프트웨어를 만들 수 있다는 점에서는 동일하다.
library : 내가 만들고자 하는 프로그램에 대한 부품이 되는 코드를 재사용하기 쉽도록 정리되어 있는 애
내가 만들고 있는 프로그램의 부품을 가져오는 느낌
framework : 우리가 만들고자 하는 것이 있을 때, 예를들어 게임, 채팅 등 , 만들고자하는 것이 무엇이냐에 따라서 그것을 만드려고 할때 언제나 필요한 공통적인 부분과 기획의도에 따라 달라지는 부분이 있을 것이다. 여기서 공통적인 부분은 framework가 만들어놓고 기획의도부분은 우리가 살짝씩 만들어 넣음으로써 작동하는것. 약간 살짝 만들어놓은 반제품같은 느낌?
js 라이브러리 중 가장 유명한건 jQuery
jquery를 검색해서 나오는 프로그램을 설치해도 되고 [jquery cdn]으로 검색해서 나오는 <script>링크를 html 파일에 넣어줘도 된다. 구글용 제이쿼리 링크를 찾아서 넣어주면 됨.
그럼 이제 jquery를 이용해서 우리가 길게 만들었던 자바스크립트 코드를 굉장히 간단하게 바꿀 수 있게 된다.
var links = {
SetColor : function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i+1;
}
}
}
//지금 함수를 제이쿼리를 쓰면 간단하게 바꿀 수 있다//
var links = {
SetColor : function(color){
$('a').css('color',color);
}
}
//a태그를 전체적으로 불러와서 css 선택인자를 통해 'color'를 color 라는 파라미터로 들여와서 넣어줌//
제이쿼리는 새로운 언어가 아니라 js를 통해서 좀 더 직관적으로 함수를 이용할 수 있도록 해주는 애다.
웹페이지에 버튼이 있다고 생각해보자. 그 버튼은 사용자가 시스템을 제어하기 위해서 사용하는 UI
그럼 우리가 만든 버튼의 코드를 생각해보자. 버튼을 눌렀더니 경고창이 뜬다면 그 창은 우리가 만든걸까?
우리가 만들기도하고 아니기도 하다. 우리의 의도가 반영되서 창이뜬건 맞지만 그 경고창의 기능이나 모양은 웹브라우저를 만드는 사람들이 우리를 대신해서 경고창 기능을 미리 만들어놨다가 우리가 alert이라는 함수를 실행하면 경고창을 띄어주겠다고 자바스크립트의 사용설명서를 통해서 약속한 내용이다. 우리는 그 약속을 믿고 alert이라는 함수를 사용하는 것.
하지만 이 조작 장치는 일반인은 사용하지 않는다. 웹브라우저가 가진 alert의 기능을 자바스크립트의 문법에 따라서 사용하고 있는것. 웹브라우저를 만들때 사용하고 있는 것을 Application Programming Interface 라고 부른다
모든 프로그래밍 언어는 API를 기반으로 움직이게 된다. 모든 프로그램은 순서대로 api를 사용해서 움직이게 된다.
댓글