<유튜버 - 생활코딩> WEB2 - JavaScript 34~ JS파일로 쪼개서 정리 하기

1. 파일로 만들어서 배포하기

style.css 처럼 하나의 파일을 <script>안에 넣어서 1억개가 넘어도 한 번에 적용시키는 방법을 이용해야 한다.

 

color.js 파일을 따로 만들고 

 

function nightDayHandler(self){

var target = document.querySelector('body');

if(self.value === 'night'){ 

  target.style.backgroundColor = 'black';

  target.style.color = 'white';

  self.value = 'day'

 } else {

  target.style.backgroundColor = 'pink';

  target.style.color = 'white';

  self.value = 'night';

 }

}

 

이것을 복붙한다.

 

그 후 공통된 코드를 지우고 <script> 태그의 src (source의 약자)

 

<script src="color.js"></scrupt> 라고 입력을 하면

 

똑같이 동작하지만 내부적으로는 완전히 다른 코드가 적용된 것이다.

 

개발자도구에서 Network를 살펴보면 이 웹페이지를 화면에 표시하기 위해서 로딩된 파일들이 보이는데,

웹브라우저가 color.js를  조용히 다운로드해서 원래 있었던 것 처럼 갖다놓고 해석하게 된다는 것을 알 수 있다.

 

이렇게 되면 유지보수하기가 매우 편리해지고 가독성이 좋아지고 효율성이 좋아진다. 코드의 의미를 파일의 이름으로 파악할 수 있다. 서로 연관된 코드를 여러가지로 쪼개서 웹페이지에 포함시키면 코드를 정리정돈하는 효과 또한 얻을 수 있다.

 

웹 서버 입장에서는 접속을 2번해야 x.html과 colorl.js을 다운로드 할 수 있는데 이렇게 되면 비용과 트래픽이 더 많이 들어서 나쁜 방법인 것 같지만 더욱 효율적이다. 바로, cache = 저장 덕분이다.

 

한 번 웹페이지(웹브라우저)에 다운로드된 이런 파일은 웹브라우저가 보통 컴퓨터에 저장해놓는다.

그리고 다음에 접속할 때 저장된 파일을 읽어서 네트워크를 통하지 않게 된다. 그럼 서버 입장에서는 훨씬 더 비용을 절약할 수 있고 사용자 입장에서도 네트워크 트래픽을 절감할 수 있고, 훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있다.

돈, 시간 ↓

2. 라이브러리(library)와 프레임워크(framework)

오늘날 소프트웨어를 만든다고 하면 혼자 만드는 경우는 없다. 우리는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 또 만들고 있는 것 such as 웹 브라우저

 

자기 혼자 만드는 것 보다는 다른 사람들이 이미 잘 만들어 놓은 것을 부품으로 해서 만들고자 하는 것을 빠르게 조립해서 만들어가는 것이 오늘날 소프트웨어를 만드는 기본이다.

 

라이브러리: 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈 해놓은 '것', 재사용하기 쉽도록 되어 있는 소프트웨어

소프트웨어를 만드는 내가 필요한 라이브러리를 찾아 와서 쓰는 느낌.

Ex) jQuery : 대표적인 라이브러리 - 생산성을 엄청 높여준다!

developers.google.com/speed/libraries#jquery

Hosted Libraries  |  Google Developers

프레임워크: 만들고자 하는 것이 있을 떄 그것이 무엇이냐에 따라서 공통적인 부분

만들고자 하는 것의 기능에 따라, 또는 개성에 따라 달라지는 부분만 조금씩 수정하는 것을 통해서 만들고자 하는것을 처음부터 끝까지 만들지 않도록 해주는거의 반제품 같은 것. 반복적으로 필요해지는 무언가를 미리 만들어 놓은 '곳'

프레임워크 안에 우리가 장소안에 들어가서 작업하는 느낌. 어쨋든 둘다 다른 사람과 협력하는 모델이다.

 

#CDN = Content Delivery Network

자기들의 서버에다가 파일을 보관해놓고 우리는 그것을 script src를 통해서 가져갈 수 있도록 하는 방식을 취하고 있다.

#Ctrl+/ 하면 주석이 만들어진다.

 

SCRIPT

https://shuchong.tistory.com/manage/newpost/%3Ca%20href=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js%3Ehttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js%3C/a%3E

구글에서 제공하는 jQuery라이브러리의 주소인데 이것만 있으면 jQuery라이브러리 이용 가능하다.

처리해야 될 태그들이 여러 가지가 있을 때 반복문을 통해서 처리를 해야했다면,

 jQuery를 이용하면 한 줄 짜리 코드가 반복문을 대신 할 수 있다.

 

$('a')

jQuery는 $로 시작 as $라는 이름의 함수. ('a')는 웹페이지의 모든 a태그를 jQuery로 제어하겠다는 뜻이다.

jQuery를 이용해서 우리가 css를 어떤 element, 어떤 태그의 css를 바꾸고 싶을 떄는 .css

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

 

jQuery는 새로운 언어가 아니고 js를 이용해서 우리 대신에 CSS라는 함수를 jQuery 만들어 둔 것이다.우리는 저 css를 사용하면 저 함수가 내부적으로 이런 작업을 대신 처리해주고 있는 것이다.

 

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

}

이 웹페이지에 있는 모든 body 태그에 대해서 css color 값을 parameter color로 한다.

이 웹페이지에 있는 모든 body 태그에 대해서 css backgroundColor값을 parameter color로 한다.

 

Q: API랑 라이브러리 차이점은 뭐에요??ㅠㅠ

비슷한거를 부르는 서로 다른 표현이랍니다. 조작방법이라는 의미가 강한 것이 api, 사용하기 쉽게 잘 정리되어 있다는 점을 강조한 것이 라이브리러가 아닐까 합니다.

 

Q:

영상 : https://youtu.be/AERY1ZGoYc8?t=147 다른 영상에서 봤는데 예를들어 집을 만든다고 하면, 라이브러리는 자재랑 가구등 집에 필요한 재료이고 프레임워크는 이미 집의 수도나 뼈대같은 기본적인 구조들이 있어서, 입맛대로 꾸미기만 하면 되는거라고 설명해주셨어요. 개인적으로 이해가 확 와닿아서 댓글써요

 

3. UI vs API

인터페이스 : 두 시스템간의 상호작용 형식

<input type="button" value="Click me" onclick="alert('hellow world')">로 버튼을 만들었을 때

타이밍이나 텍스트는 우리가 넣은 의도가 있지만 기능, 모양, 설명은 자동으로 넣어져있다.

웹브라우저를 만드는 사람이 우리대신 경고창 기능 모양 설명을 JS 문법을 통해 약속한 것이다.

UI: User Interface 

사용자가 시스템을 제어하기 위해 사용하는 화면에 보이는 조작 장치 함수

유저 인터페이스, 사용자와 컴퓨터와의 상호작용 형식 .

API: Application Programming Interface 

UI가 UI로서 동작하기 위해서, 어떤 프로그램이 그 프로그램으로서 동작하기 위해서 만들어지는데 이용된 부품,기능,프로그램 이다.  ex) alert - 경고창을 실행하기 위한 조작장치

응용프로그램 인터페이스, 응용프로그램과 컴퓨터, 운영체제와의 상호작용 형식

 

모든 어플리에이션은 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어진다.

단어와 문법 , 부품과 부품의 결합 관계 처럼.

4. THE END

공부보다는 실습. 우리들의 프로젝트를 시작하라

모든 개념을 총동원 하지말고 최소한의 지식, 도구로 해보아라. 순서에 따라서 실행되어야 하는 명령들이 실행되도록 해라. 충분히 혁명적이다. 언젠가 그것만으로 해결할 수 없을 때, 반복문, 조건문, 함수(FUNCTION), 객체(OBJECT)를 신중하게 도입하면서 각각의 관계에 익숙해지다보면 유창하게 활용할 수 있을 것이다. 또다시 한계가 오면 그 떄가 다시 공부할 때 이다.

 

document - 웹페이지에 있는 어떤 태그를 삭제하고 싶거나 자식태그를 추가하고 싶을 때

DOM - 더 자세한  객체

window -  웹 브라우저 객체 

ajax - 웹페이지 리로드 없이 정보변경

cookie - 웹페이지가 리로드 되어도 현재 상태를 유지하고 싶을 떄  사용자를 위한 개인화된 서비스 제공 가능

offline web application - 인터넷에 끊겨도 동작하는 웹 페이지

webRTC - 화상통신

speech api - 사용자의 음성을 인식하고 음성으로 정보 전달 

webVR - 가상현실