11일차 : 객체 활용, 정리정돈, 라이브러리와 프레임워크

11일차 : 객체 활용, 정리정돈, 라이브러리와 프레임워크

 

 

객체 활용

 

nightmode에 사용했던 페이지를 이용해서 객체를 만들고, 그 안에 함수를 넣어봅시다.

객체 안의 함수는 메소드라고 부르던 것 기억하시죠?

 

일단 Body라는 객체를 만들어서 그 안에 함수를 두개 만들어 보겠습니다.

 

 

각각 바디 안의 글씨 색과, 배경색을 설정하는 함수입니다.

이렇게 묶어서 정리하면, 나중에 사용할 때에도 Body.setColor 혹은 Body.setBackgroundColor 을 이용하면 편리하겠죠.

 

다음으로는 while문을 품고 있던 함수를 Links라는 객체를 만들어서 집어넣어 줄게요.

하이퍼링크의 색상을 모드마다 예쁘게 변경하는 함수였는데 기억나시나요?

 

 

이렇게 바꾸면 Links.setColor만 넣어주면 되니까 if문 안이 깔끔해집니다.

이렇게 객체를 만든 후에는, 기존의 코드를 바꿔주면 됩니다.

 

왼쪽이 기존의 코드, 오른쪽이 객체를 활용한 코드입니다.

코드 자체도 간편하고, 어떤 내용인지도 알기 쉽고, 수정하기도 편해졌네요.

 

한 가지 유의해야 하는 점은, 객체 안에 여러 프로퍼티를 넣고 싶으면, 프로퍼티들 사이에 콤마를 추가해야 합니다!

그리고 제가 실수했던 부분인데, Body.setBackgroundColor('color') 처럼 괄호 안에 '색깔' 을 넣어야지 예전 함수 그대로 = '색깔' 로 그냥 두시면 안됩니다!

 

 

파일로 쪼개서 정리 정돈하기

 

객체를 이용해서 정리 정돈을 하고는 있는데.. 그래도 점점 코드들이 쌓이죠?

그룹별로 묶은 코드들을 또 따로 정리하면 좋을 것 같은데.. 이런 경우에 여러 파일로 나눠서 정리하는 방법이 있습니다.

html과 css를 배울 때를 떠올려보면, 파일은 각각 만든 후에 두개를 연결시켜 줬습니다.

 

이렇게 자바스크립트만 따로 모아서 파일을 만들고, 각각 연결시켜준다면 훨씬 간결하게 정리되겠죠.

자바스크립트 파일은 .js로 만들면 됩니다.

colors.js 파일을 만들고, html에 있던 script 부분을 다 잘라서 붙여넣습니다.

이 때 주의할 건 script는 빼야해요!

 

 

그리고 원래 script 자리에는 script src="colors.js" 를 넣어줍니다.

 

 

엄청 간단하죠? css처럼 이렇게 넣어주기만 하면, 수정할 땐 자바스크립트 파일 하나만 수정하면 되고, 같은 내용을 여러 페이지에 붙여 넣는 것도 간편해집니다.

웹페이지 inspection 에서는 network 부분에서 어떤 페이지를 참고하고 있는지 확인이 가능합니다.

 

 

이렇게 페이지를 나누면, 서버 입장에서도, 사용자 입장에서도 훨씬 더 효율적으로 사용할 수 있습니다.

 

 

라이브러리와 프레임워크

 

소프트웨어를 오롯이 혼자서만 만들기는 어렵습니다. 일반적으로는 다른 사람이 만들어 놓은 것을 바탕으로 해서 이를 수정하기도 하고 처음부터 여러 사람과 함께 협력해서 만드는 경우가 대부분이겠죠.

다른 사람과 협력하는 모델에는 크게 두 가지가 있습니다. 바로 라이브러리와 프레임워크입니다.

 

라이브러리는 도서관이라는 뜻이죠. 도서관에 가면 책이 많이 있고, 그 안에서 필요한 책을 대여할 수 있습니다.

마찬가지로 프로그램을 만들 때, 필요한 부품들이 있으면 라이브러리에서 가져올 수 있습니다.

대표적인 라이브러리로는 jQuery가 있습니다.

 

프레임워크는 구조라는 뜻이죠. 뼈대가 있는 조립식 완제품을 떠올리면 편합니다.

만들고자 하는 것에 따라서, 공통적으로 필요한 부분을 미리 만들어 놓는 곳입니다.

우리는 그 안에 들어가서 작업을 하면 됩니다.

대표적인 프레임워크에는 Node.js와 Django 등이 있습니다.

 

정리하자면, 프레임워크가 집이라면 라이브러리는 가구가 되겠죠.

 

오늘은 간단히 jQuery를 활용해 봅시다.

jQuery를 검색하면 다운로드 가능한 사이트가 나오는데, 거기에서 content delivery network 의 약자인 cdn 을 검색해서 활용하면 훨씬 편하게 jQuery를 사용할 수 있습니다.

cdn을 사용하면 jQuery를 직접 다운로드하고 프로젝트에 포함시키고 업로드하고 돈을 내고 이런 과정들이 모두 생략됩니다. 라이브러리들이 cdn을 통해서 자기 서버에 파일을 보관해놓고, script src를 통해서 가져오는 방식입니다.

 

그럼 구글 cdn을 사용해봅시다! 3.x snippet을 복사한 후, html 파일에 추가해 주면 됩니다.

 

 

colors.js 앞에 붙여넣어주면 됩니다. 그리고 colors.js 로 이동한 후, jQuery를 이용해 봅시다.

jQuery에서는 처리해야하는 여러가지 태그들이 있을 때 반복문을 사용하지 않아도 됩니다! (신세계!!)

그리고 $라는 함수를 사용하면 됩니다.

일단 jquery에서 css를 어떻게 활용하는지 검색해봅시다.

 

 

function 안의 내용을 모두 주석처리 (ctrl+/) 한 후에 $('a').css('color',color)를 넣어줍니다.

반복문을 사용하지 않아도 되니 너무 편하죠..?

이렇게 코드를 바꿔도 결과물은 달라지지 않습니다.

나머지 코드도 바꿔볼까요?

 

 

너무 편하죠?

세상에는 이런 라이브러리가 정말 많다고 합니다.

갈수록 더 편한 라이브러리가 생기겠죠? 많은 라이브러리를 알수록, 많은 도구들을 활용할 수 있게 되는 겁니다.