[생활코딩]WEB2-JavaScript (5)(2020.12.9)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

링크:opentutorials.org/course/3085/18888

수업을 마치며 - 생활코딩

 

1. 강의 내용

Object (객체)

함수가 많아지면, 이들 또한 정리할 필요가 있다. 수많은 파일들을 디렉터리로 정리할 수 있듯, 이 함수들과 변수를 그룹핑해서 정리 정돈하기 위한 도구는 바로 Object(객체)이다. 함수들을 객체로 정리하기 이전에, 항상 기억할 수칙이 있다. 함수를 만들 때 이름이 충돌되지 않도록  염두해야 한다. 

 

 

document.querySelector

 

 

지금 까지 자주 써온 저 위의 명령어는 객체와 함수의 대표적인 예이다. document는 객체이고 qeurySelector는 이 객체에 포함된 메소드이다. 객체에 포함된 함수는 메소드라고 칭한다.

 

객체 쓰기와 읽기

객체를 쓰는 법은 배열과 비슷하다. 다만, 대괄호 대신 중괄호를 사용한다. 아래의 예시를 보자.

 

 

<script>
      var home = {
        "Mypet":"greedysiru",
        "I":"jaemin"
      };
</script>

 

 

home라는 객체에 Mypet이라는 키에는 greedysiru가, I라는 키에는 jaemin이 들어간다.

객체를 추가하는 것은 아래처럼 한다.

 

 

home.siru = "ugly";
home["siru eat"]="churu";

 

 

두 번째 줄의 문법은 키에 공백이 들어갈 때이다. 이제 이것들을 출력해보면,

 

 

<script>

	document.write("Mypet : "+home.Mypet+"<br>");
    document.wirte("I : "+home.I+"<br>");
    document.write("siru : "+home.siru+"<br>");
    document.write("siru eat : "+home["siru eat"]);
    
</script>

 

 

출력

객체와 반복문

객체의 배열 전부를 다 가져와서 리스트를 만들어보자. 그러기 위해선, 반복문을 사용하여 모든 객체의 키값을 불러와야 하는데 여기서는 for문을 사용한다.

 

 

<script>
      for(var key in home) {
        document.write(home[key]+'<br>');
      }
</script>

 

 

for문에는 while처럼 변수를 넣을 필요가 없다. home이라는 객체의 key를 가져온다는 var key in home만 써주면 된다.

 

반복문 출력

 

객체 프로퍼티와 메소드

앞서, 객체에는 함수를 담을 수 있다고 하였다. 각자 키의 값을 프로퍼티라고 한다. 이번에는 키와 프로퍼티를 동시에 출력한다.

 

 

<script>
	home.showAll = function(){
    for(var key in home){
    	document.write(key+':'+home[key]+'<br>');
    	}
    }
</script>

 

 

home.showAll = function(){}은 객체의 함수 정의이다. 이제 이 객체에는 ShowAll이라는 메소드가 포함되고 아래의 for문으로 인해서, 모든 키와 프로퍼티가 동시에 나온다.

객체와 프로퍼티

마지막에 showAll이 출력되는 이유는 객체에 모든 것을 출력하라는 명령을 for문에 썼는데, 함수 자체도 객체에 포함되기 때문이다.

객체의 활용

앞서, 웹 페이지의 버튼 기능을 만들 때 많은 함수들을 사용했었다. 이 함수들을 객체로 정리하여 효율적으로 관리할 수 있다.

 

 

var Links={
	SetColor:function(color){
    	var alist=document.querySelectorAll('a');
    	var i=0;
    	while(i<alist.length){
    		console.log(alist[i]);
        	alist[i].style.color=color;
        	i=i+1
        }
    }
}

var Body={
	SetColor:function(color){
    	document.querySelector('body').style.color=color;
    },
    setBackgroundColor:function(color){
    	document.querySelector('body').style.backgroundColor=color;
    }
}

 

 

파일 쪼개서 정돈하기

이제, 모든 페이지에 버튼 기능을 배포한다. head에 정리한 객체와 함수들을 복사하여 각 페이지에 붙여 넣기 하면 정상적으로 작동한다. 하지만, 이것은 효율적이라고 할 수없다. 사용자가 페이지를 들어갈 때마다 스크립트를 불러와야 하고 유지, 보수의 측면에서 기능의 효과의 변경을 할 때 하나하나 설정을 변경해야 하기 때문이다. 앞서, CSS에서 웹 페이지의 스타일을. css라는 확장자의 파일에 저장하여 링크를 웹 페이지들에 걸어 효율적으로 관리할 수 있듯이 JavaScript 또한. js라는 확장자로 링크를 배포할 수 있다.

 

 

이렇게 만든 js파일을

 

 

 

<script src-"color.js"></script>

 

 

각 페이지에 링크해주면 된다.

 

라이브러리와 프레임워크

소프트웨어는 혼자서 만들지 않는다. 공장에서 완제품을 만들 때 사람들과의 협력을 통해서 만들듯이 프로그래밍도 자기 혼자서 만들기보다는 다른 사람이 잘 만든 부품을 조립해서 만드는 것이 낫다. 이러한 부품들의 좋은 예시는 라이브러리와 프레임워크이다.

라이브러리는 만들고자 하는 프로그램에 필요한 부품들을 정리 정돈한 소프트웨어이다. 대표적으로 JavaScript의 라이브러리인 jQuery가 있다. jQuery는 만들어진 지 오래되었고 현시점 시장에서 압도적인 사용 비율을 차지하고 있다.

프레임워크는 반제품이라고 할 수 있다. 만들어져 있는 뼈대에서 각자 원하는 방향대로 변경하고 설정하면 된다.

 

UI vs API

UI(User interface)는 사용자들이 볼 수 있는 화면이다. 당장 지금 보고 있는 화면이 바로 UI이다. 

API(Application Programming Interface)는 애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치를 말한다.

 

 

2. 느낀 점

JS를 공부하면서 내내 궁금했던 document.querySelector가 무슨 의미를 가지는지 드디어 알 수 있었다. 훨씬 와 닿게 이해가 잘 되었다. 작성했던 버튼 기능을 객체로 옮기는 과정에서 오타와 중괄호 등의 기호들을 빠뜨려서 곤혹에 빠졌었다. 철자는 철저하게 확인하며 코딩하고 중괄호와 기호들은 짝을 맞추어 입력해 놓는 습관을 가져야겠다. 

라이브러리와 프레임워크라는 단어들은 내가 공부를 준비하면서도 많이 볼 수 있던 단어였는데 드디어 그 개념들을 알 수 있었다. JS의 라이브러리인 jQuery를 잠깐 맛보기식으로 사용해봤는데 확실히 직관적이고 사용하기 매우 편했다. 더 많은 것을 공부하고 더 많은 라이브러리와 프레임워크를 알게 되어서 내가 원하는 프로젝트들을 빨리 진행해 보고 싶다.

 

3. 명령어

var home={

"key":"property" , "key2":"property2"

};

객체에 키와 프로퍼티 입력

 

home.siru="ugly";

home["siru eat"]="churu"

객체에 키와 프로퍼티 추가, 아래는 공백이 있는 경우

 

for(){ }

for반복문

 

home.ShowAll=function(){}

객체에서의 함수 정의