자바스크립트의 시작 : Javascript 활용 (jQuery, API 등)

5. Javascript 활용

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

 

var Body = {
   setColor:function(color){
      document.querySelector('body').style.color = color;
   }, //객체의 프로퍼티와 프로퍼티를 구분하는데 콤마가 필요함
   SetBackgroundColor:function(color){
   document.querySelector('body').style.backgroundColor = color;
}

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;
      }
   }
}


function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   Body.SetBackgroundColor('black');
   Bod.SetColor('white');
   self.value = 'day';
   
   Links.SetColor('powderblue');
  } else {
    Bod.ySetBackgroundColor('white');
    Body.SetColor('black');
    self.value = 'night';
    
   Links.SetColor('blue');
  } 
}

 

전 강의에서 작성한 이 코드는 원래 <script> 태그 사이에 위치한다.

하지만 필요할때마다 파일에 코드를 붙여넣기 한다면 코드의 크기가 커지고 복잡해질 것이다.

그래서 위 코드를 color.js 라는 파일로 저장한 후 스크립트 태그에 링크하는 방법이 있다.

 

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

 

스크립트 태그에 위와 같이 파일을 연결해주면 된다.

 

 

웹페이지 도구에서 Network를 확인해보면 color.js를 다운받아와 쓰고 있는 걸 확인할 수 있다.

 

💡 파일로 쪼개서 만들었을 때의 장점 

 - 모든 웹페이지에 코드를 입력할 필요가 없음 → 가독성이 좋아짐

 - 파일 하나만 수정해도 모든 웹에 반영됨 → 유지보수가 쉽다

 - 웹서버 입장에서는 연결이 적은게 좋지만 한 번 다운한 후 캐시로 저장되기 때문에 시간/돈이 적게 들고 효율적임

 

---

라이브러리와 프레임워크

 

 

다른 사람과 협력하는 모델 

- 라이브러리

- 프레임워크

 

라이브러리 중 가장 유명한 것은 jQuery

제이쿼리를 이용하면 코드를 더 효율적으로 작성할 수 있다.

 

https://jquery.com/download/

Download jQuery | jQuery

직접 제이쿼리를 다운해도 되고 CDN(Content Delivery Network)을 이용하는 방법도 있다. CDN은 스크립트 코드를 붙여넣는 것만으로 제이쿼리를 사용할 수 있다. 위 사이트에서 crtl+F로 CDN을 찾아보자.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

구글에서 제공하는 제이쿼리의 최신 버전 코드이다. 이걸 코드의 헤드 부분에 붙여넣기만 하면 제이쿼리를 사용할 수 있다.

 

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;
      }
   }
}

 

* crtl + / : 에디터에서 주석처리 하는 단축키

 

jQuery를 쓰면 반복문을 쓸 필요가 없다.

 

$('a').css('color', color);

 

$('a') 는 웹페이지의 모든 a태그를 jquery로 제어하겠다는 의미이다.

.css()를 붙이면 제이쿼리에서 css를 사용할 수 있다. 위 코드는 매개변수로 color 값을 받아 모든 링크에 색을 적용하는 것인데 반복문을 쓸 필요 없이 훨씬 간결한 코드가 되었다.

 

 

제이쿼리를 적용해 만든 코드

var Body = {
   setColor:function(color){
      //document.querySelector('body').style.color = color;
      $('body').css('color',color);
   }, 
   SetBackgroundColor:function(color){
      //document.querySelector('body').style.backgroundColor = color;
      $('body').css('backgroundColor',color);
}

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;
   // }
   $('a').css('color', color);
   }
}


function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   Body.SetBackgroundColor('black');
   Bod.SetColor('white');
   self.value = 'day';
   
   Links.SetColor('powderblue');
  } else {
    Bod.ySetBackgroundColor('white');
    Body.SetColor('black');
    self.value = 'night';
    
   Links.SetColor('blue');
  } 
}

---

UI vs API

 

UI는 User Interface의 약자이고 API는 Application Programming Interface의 약자이다.

 

 

• 클릭 버튼 : 사용자가 시스템을 제어하기 위해서 사용하는 조작장치 = 유저 인터페이스 (UI)

• alert() : 웹페이지를 만든 사람들이 정해놓은 것. 애플리케이션을 만들기 위해 프로그래밍을 할 때 사용하는 조작장치 = API

🚩 프로그래머가 된다는 것 = 평생 UI만 사용해오다가 API도 사용하게 된다는 것

 

 

---

자신의 프로젝트 진행해보기 

• 프로젝트를 할 때 모든 개념을 총동원하기 보다는 최소한의 도구로 문제를 해결해보자

• 그러다가 한계에 부딪히면 그 때가 다시 공부를 시작할 때이다

웹 개발과 관련된 검색어

• document 객체를 자세히 살펴보세요. 필요한 메서드가 그 안에 있을 것입니다. 

• 그래도 없다면 DOM 객체를 살펴보세요. (document 객체는 DOM의 일부)

• 웹페이지가 아니라 웹브라우저 자체를 제어해야한다면 window 객체를 살펴보세요. (웹페이지 주소를 알아 낸다거나, 새로운 창을 열거나)

• 웹페이지를 새로고침 하지 않고도 정보를 변경하고 싶다면 ajax를 사용해보세요

• 웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면 cookie를 배우세요 (사용자를 위한 개인화된 서비를 제공하는 것이 가능해짐)

• 인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶다면 offline web application 

• 화상통신 웹앱을 만들고 싶다면 webRTC

• 음성을 인식하고 음성으로 정보를 전달하고 싶다면 speech 라는 API

• 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면 webGL

• 가상현실에 관심이 많다면 webVR

※ 이 글은 edwith의 [부스트코스] 자바스크립트의 시작 강의를 듣고 작성되었습니다.