[JavaScript] 생활코딩 34 ~ 37 _ JS파일, Library, Framework, UI, API

안녕하세요~ 보라해바라기입니다.

 

주말이 되면 귀차니즘이 증가하는 이유는 무엇일까요..?!

 

오늘도 침대에서 겨우 몸을 일으켜 책상에 앉았네요 ㅎㅎ

 

긴 말 필요없이 바로 렛츠기릿!

 

 

 

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

 

앞서 구현해본 주/야간모드는 JS언어로 작성하였죠?!

 

어떻게 보면 각 파일에 상당히 긴 코드가 중복되어있다는 것을 알 수 있어요.

 

이럴 때, js 파일을 따로 만들면 유지 보수하기도 편리하고 더 효율적인 코딩이 가능하답니다!

 

colors.js 파일에

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; 
  } 
} 
function nightDayHandler(self) { 
  var target = document.querySelector('body'); 
  if(self.value === 'night'){ 
    Body.setBackgroundColor('black'); 
    Body.setColor('ivory'); 
    self.value = 'day'; 

    Links.setColor('violet'); 
      } else { 
    Body.setBackgroundColor('ivory'); 
    Body.setColor('black'); 
    self.value = 'night'; 

    Links.setColor('purple'); 
  } 
}

코드를 넣어주고

 

colors.js 안 코드를 필요로 하는 파일에 

<script src="colors.js"> </script>

이 코드를 넣어주면 그 전과 같은 기능을 구현하면서 코드는 훨씬 효율적으로 바뀝니다!

 

 

2. 라이브러리와 프레임워크

 

라이브러리와 프레임워크는 협력하는 모델이라는 점에서 비슷하지만 약간의 차이가 있답니다~

 

라이브러리는 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은,

 

재사용하기 쉽도록 되어있는 소프트웨어랍니다. 

 

우리가 어떤 것을 만들 때, 여러 종류를 아우르는 공통적인 것들도 있고 기획의도에 따라 달라지는 것도 있어요.

 

프레임워크는 그 중 공통적인 부분을 만들 때 기여한답니다!

 

즉, 프레임워크 안에 들어가서 우리가 직접 작업하는 느낌이죠 ㅎㅎ

 

지금 다루고 있는 JavaScript의 Library 중 가장 대표적인 것은 jQuery 인데요?!

 

이를 활용하면 생산성이 높은 코드를 생성할 수 있어요!

 

우리의 예시에 적용해본다면, 

var Links = { 
  setColor:function (color){ 
    $('a').css('color',color);
  } 
} 
var Body = { 
  setColor:function (color){ 
    $('body').css('color',color); 
  }, 
  setBackgroundColor:function (color){ 
    $('body').css('backgroundColor',color); 
  } 
}

이처럼 반복문을 사용했던 것을 한 줄의 코드로 정리할 수 있답니다.

 

또한  $('a').css('color',color); 는 "이 웹페이지의 모든 a태그를 jQuery로 제어하겠다. "는 의미랍니다~

 

 

3. UI vs API

UI는 User Interface의 약자로, 사용자가 시스템을 제어하기위해서 사용하는 조작장치입니다.

 

API는 Application Programming Interface의 약자로, 

 

애플리케이션을 만들기 위해서 프로그래밍을 할 때 사용하는 조작장치인데요.

 

저번 예시에서 우리가 input 태그 안에 사용한 이벤트 alert가 이에 해당합니다 ㅎㅎ

 

---

오늘부로 JS의 강의도 끝이 났답니다!

 

저는 이 강의의 끝이 JS에 접근하는 또 다른 시작을 만들 것이라고 생각해요.

 

이 강의만 들었다고 해서 JS를 다 아는 건 전혀 아니니깐요!

 

앞으로도 계속 노력해보려고 합니다 ㅎㅎ