ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • JS 편 - 9, 10일차
      개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 17. 09:00
      반응형



       

      9, 10일차

       

       

       

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

      • 오늘날 우리가 소프트웨어를 만든다고 하면 혼자서 만드는 경우는 없다. 그 이유는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 만들고 있는 것이기 때문이다. 그뿐만 아니라 우리가 소프트웨어를 만들 때 혼자 만드는 것보다는 다른 사람이 이미 잘 만든 것을 부품으로 삼아 내가 만들고자 하는 것을 빠르게 조립해서 만드는 것이 오늘날 소프트웨어를 만드는 아주 중요한 기본 중의 기본이라 할 수 있다.
      • 지금까지는 생산자가 되는 방법을 살펴봤고, 이제부터는 다른 사람이 만든 소프트웨어를 부품으로 삼아 내가 만들고 있는 소프트웨어의 생산자가 되는 방법을 살펴보자.
      • 이 때 알아두면 좋은 키워드는 라이브러리와 프레임워크이다. 이 두가지는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다.
      • 라이브러리는 무엇인가 정리 정돈되어 있는 곳이다. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리 정돈해 놓은, 재사용하기 쉽게 되어 있는 소프트웨어를 라이브러리라고 한다.
      • 프레임워크는 우리가 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라 언제나 필요한 공통적인 것이 있고, 기획 의도에 따라 달라지는 부분이 있다. 그 중에서 공통적인 부분은 프레임워크라는 것으로 만들어 놓고, 만들고자 하는 기능이나 특성에 따라 달라지는 부분만 살짝 수정하는 방법으로 우리가 만들고자 하는 것을 처음부터 끝까지 만들지 않게 해주는 거의 반제품과 같은 것이다.
      • 라이브러리는 소프트웨어를 만드는 내가 라이브러리를 가져와서 쓰는 것이라면 프레임워크란 것은 프레임워크 안에 우리가 들어가서 작업한다는 느낌이다.
      • 자바스크립트 라이브러리 중에서 가장 유명한 것은 jQuery라는 라이브러리이다. jQuery는 상당히 오래되었고, 아주 안정적인 라이브러리이다. 이 라이브러리를 이용하면 이것을 사용하지 않고 직접 코드를 작성하는 것보다 생산성이 훨씬 더 높아진다.
      • 아래는 jQuery 사이트이다.
      • https://jquery.com/
       

      jQuery

      What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

      jquery.com

       

      • jQuery를 사용하는 방법 두 가지가 있다.
      • 하나는 위 페이지에서 [Download] 버튼을 누르고 링크를 누르면 jQuery 라이브러리를 내려받을 수 있고, 내려받은 파일을 프로젝트 디렉터리로 옮긴다.
      • 또 하나는 편리한 방법으로 CDN(Content Delivery Network)을 사용하는 것이 있다. 위의 방법으로 하면 프로젝트에 포함시키고 업로드해서 서비스해야 하기 때문에 비용이 들어서 많은 라이브러리들이 CDN을 통해 자신들의 서버에 파일을 보관해 놓고, 사용자가 <script> 태그의 src 속성을 통해 가져가는 방식을 취하고 있다.
      • jQuery 사이트에 CDN 서비스 가운데 Google CDN이 있다. 이곳에 구글에서 제공하는 jQuery의 최신 버전을 이용할 수 있다. 3.x snippet 아래에 있는 코드를 복사한다.
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      • jQuery를 이용하여 기존 코드를 수정해보자.
      • html 파일에 위 코드를 아래처럼 추가한다.
      <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="colors.js"></script>
</head>
      • 그리고 colors.js를 아래처럼 수정할 수 있다.
      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);
    }
}
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);
    }
}
      • 참고로 대부분의 에디터들이 Ctrl + /를 입력하면 주석을 만들어 준다.
      • 위 코드에서 $('a')는 이 웹 페이지에 있는 모든 <a>태그를 jQuery로 제어하겠다는 뜻이다.
      • 그리고 .css( )로 CSS를 수정할 수 있다.
      • jQuery 코드는 자바스크립트 코드보다 더 직관적이며 쉽다. 한 가지 기억해야 할 것은 jQuery는 새로운 언어가 아니고, 자바스크립트를 통해 우리 대신 css( )라는 함수를 jQuery가 만들어 둔 것이다.

       

      • 오늘날 자바스크립트는 가장 빠른 속도로 성장하는 언어 중 하나이며, 웹이 워낙 중요한 시스템이므로 수많은 라이브러리들이 쏟아져 나오고 있다.
      • 지금까지 자바스크립트 커뮤니티에서 가장 중요한 라이브러리 중 하나인 jQuery를 사용하는 방법을 살펴보았다.

       

       

       

       

      반응형

       

       

      36. UI vs. API

      <input type="button" value="Click me" onclick="alert('Hello world')" />
      • 위 코드로 된 버튼을 누르면 경고창이 나타난다. 이 버튼은 누가 사용하고 있나? 웹앱을 이용하는 사용자가 이런 버튼과 같은 조작장치를 이용해 웹애플리케이션을 사용하고 있는 것이다.
      • UI(User Interface)는 버튼과 같이 사용자가 시스템을 제어하기 위해 사용하는 조작장치이다.
      • API(Application Programming Interface)는 경고창을 띄우는 alert( )와 같은 것을 말한다. 즉, 개발자의 입장에서 우리가 애플리케이션을 만들기 위해 프로그래밍할 때 사용하는 조작장치를 말한다.
      • API는 자바스크립트에 국한된 이야기가 아니라 모든 프로그래밍 언어에 공통적으로 적용되는 이야기이다.

       

       

       

       

       

       

      37. 수업을 마치며

      • 이제 필요한 것은 공부보다는 실습이다. 그리고 실습보다는 자신의 프로젝트를 시작하는 것이다.
      • 공부에는 때가 없지만 프로젝트를 시작하는 것에는 떄가 있다. 지금 이 순간이 여러분의 프로젝트를 시작할 때이다.
      • 시작이 늦어질수록, 공부를 많이 할수록 자기가 짠 코드를 긍정하기 어렵고, 머리속이 복잡해진다.
      • 자신의 프로젝트를 시작할 떄 모든 개념을 총동원하려 하지 마라. 필수불가결한 최소한의 도구만으로 문제를 해결하려는 시도를 하라.

       

      • 아래는 부딪치게 될 몇 가지 한계들과 그 한계를 극복할 만한 검색어이다.
        • 어떤 웹 페이지의 태그를 삭제하고 싶거나 어떤 태그의 자식 태그를 추가하고 싶다면 'document' 객체를 살펴보아라. 이 객체에 필요한 메서드가 포함되어 있을 것이다.
        • 만약 document 객체로도 찾을 수 없다면 DOM 객체에서 찾아보아라. document 객체는 DOM의 일부이다.
        • 웹 페이지가 아니라 웹 브라우저 자체를 제어해야 한다면 'window' 객체를 살펴보라.
        • 웹 페이지를 리로드하지 않고도 정보를 변경하고 싶다면 'Ajax'가 필요하며, Ajax는 현대적인 웹 앱을 만드는 데 필수적인 테크닉이다.
        • 그리고 웹 페이지가 리로드 되어도 현재 상태를 유지하고 싶다면 'cookie'를 배워라. cookie와 함께라면 사용자를 위한 개인화된 서비스를 제공할 수 있다.
        • 인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다면 'offline web application'을 찾아보아라.
        • 화상 통신 웹 앱을 만들고 싶다면 webRTC를 찾아보아라.
        • 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면 'speech'로 시작하는 API를 살펴보아라.
        • 3차원 그래픽으로 게임을 만들고 싶다면 'WebGL'을 살펴보아라.
        • 가상현실에 관심이 많다면 'WebVR'이 있다.
      • 이제부터 혼자 가야한다... 행운을 빈다.

       

       

       

       

      해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

      JS 편 - 8일차  (2) 2025.05.16
      JS 편 - 7일차  (0) 2025.05.15
      JS 편 - 6일차  (1) 2025.05.14
      JS 편 - 5일차  (1) 2025.05.13
      JS 편 - 4일차  (1) 2025.05.12

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바