파일로 분리해 정리, 라이브러리, 프레임워크, jQuery, UI vs API, +@
파일로 분리해 정리
- 서로 연관된
코드를 파일로 묶어 그룹핑하는 것
코드를 파일로 묶어 그룹핑하는 것color와 관련된 자바스크립트를 colors.js파일로 묶은 뒤
<script src="colors.js">
</script>html 파일엔 위의 코드만 넣어주면 됨
캐시(cache): 저장한다는 뜻으로, 한 번웹 브라우저에 다운로드된 파일들은컴퓨터에 저장되어 다음에 다시 접속할 때 그 파일을 읽어오면 되므로네트워크를 통할 필요가 없음
→ 서버는 비용 절감, 사용자는 네트워크 트래픽 절감 및 사이트 속도 향상
라이브러리 (library)
- 내가 만들고자 하는
프로그램에 필요한 부품이 되는 소프트웨어를 재사용하기 쉽도록 잘 정리정돈 해놓은 소프트웨어
라이브러리를 프로그래머가 직접 다운 받아 프로젝트에 포함시키고 서비스를 제공하려면 복잡하고 비용도 드므로 대부분의 라이브러리는 CDN:Content Delivery Network을 제공함
→ 라이브러리 제공자의 서버에 파일을 보관해두고 프로그래머들은 script src를 통해 가져갈 수 있도록 하는 것
jQuery
- 자바스크립트의 가장 유명한
라이브러리
- 오래됐으며 안정적임
코드 복사해 <head> 태그의 <script> 태그 안에 붙여넣기- 장점: 처리해야 할
태그가 여러 개일 경우 반복문 사용할 필요 ❌
$로 코드가 시작함- 새로운
언어가 아닌 JavaScript를 이용해 jQuery가 새로운 함수를 만든 것
var alist=document.querySelectorAll('a');
var i = 0;
while ( i < alist.length ) {
alist[i].style.color = color;
i = i+1;
}
프로그램에 필요한 부품이 되는 소프트웨어를 재사용하기 쉽도록 잘 정리정돈 해놓은 소프트웨어라이브러리를 프로그래머가 직접 다운 받아 프로젝트에 포함시키고 서비스를 제공하려면 복잡하고 비용도 드므로 대부분의 라이브러리는 CDN:Content Delivery Network을 제공함→
라이브러리 제공자의 서버에 파일을 보관해두고 프로그래머들은 script src를 통해 가져갈 수 있도록 하는 것라이브러리코드 복사해 <head> 태그의 <script> 태그 안에 붙여넣기태그가 여러 개일 경우 반복문 사용할 필요 ❌$로 코드가 시작함언어가 아닌 JavaScript를 이용해 jQuery가 새로운 함수를 만든 것var alist=document.querySelectorAll('a');
var i = 0;
while ( i < alist.length ) {
alist[i].style.color = color;
i = i+1;
}를
$('a').css('color', color);로 쓸 수 있음!
✅ 모든 a 태그를 선택해 css 함수를 이용해 color를 인수 color로 바꾸겠다는 의미
📌 uncompressed : 원본 파일 (확장자 : .js)
📌 minified : 원본을 압축한 파일 (확장자 : .min.js)
📌 slim : 해당 버전에서 필요없다고 생각하는 라이브러리를 제거한 파일 (.slim.js)
📌 slim minified : slim 파일을 압축한 파일(.slim.min.js)
🌙 어떤 라이브러리가 있고, 새로 생기고 있는지 알아두기!
프레임워크 (framework)
- 내가 만들고자 하는 것이 무엇이느냐에 따라 (게임, 웹, 채팅…) 그것을 만들 때 항상 필요한
공통적인 것을 미리 만들어두는 것
UI (User Interface)
사용자가 시스템을 제어하기 위해 사용하는 조작 장치
<input type="button" valuse="CLICK" onclick="alert('눌렸습니다!')">
공통적인 것을 미리 만들어두는 것사용자가 시스템을제어하기 위해 사용하는 조작 장치
<input type="button" valuse="CLICK" onclick="alert('눌렸습니다!')">위 코드에서 버튼 그 자체를 말함
API (Application Programming Interface)
애플리케이션을 만들기 위해 프로그래밍을 할 때 프로그래머가 사용하는 조작 장치
<input type="button" valuse="CLICK" onclick="alert('눌렸습니다!')">
애플리케이션을 만들기 위해 프로그래밍을 할 때 프로그래머가 사용하는 조작 장치<input type="button" valuse="CLICK" onclick="alert('눌렸습니다!')">위 코드에서 alert를 말함
🌙 UI와 API는 모든 프로그래밍 언어에 공통적으로 적용됨! 모든 애플리케이션은 API를 순서대로 실행하는 것을 통해 만들어짐
+@
웹 페이지의 특정한 태그를 삭제하고 싶거나, 특정한 태그에 자식 태그를 추가 하고 싶다면 document 객체 공부!document 객체에서도 찾을 수 없다면 DOM(Document Object Model 객체 공부!
웹 페이지의 특정한 태그를 삭제하고 싶거나, 특정한 태그에 자식 태그를 추가 하고 싶다면 document 객체 공부!document 객체에서도 찾을 수 없다면 DOM(Document Object Model 객체 공부!📌 document 객체는 DOM 객체의 일부
-
웹 페이지가 아닌웹 브라우저자체를 조작하려면 windown 객체 공부!
ex) 현재 열려있는웹 페이지의 주소 알아내고자 할 때,새 창열고자 할 때,웹 브라우저의 화면 크기를JavaScript를 통해 알아내고자 할 때 -
웹 페이지를 리로드하지 않고 정보를 변경하려면 ajax 객체 공부!
→ 현대적인웹 앱을 만들기 위해 필수적 -
웹 페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie 공부!
→ 사용자를 위한개인화된 서비스제공 가능 -
인터넷이 끊겨도 동작하는
웹 페이지만드려면 offline web application 공부! -
화상 통신
웹 앱만드려면 webRTC 공부! -
사용자의
음성인식하고음성으로 정보 전달하고 싶다면 speech로 시작하는 API 공부! -
3차원 그래픽 게임만드려면 webGL 공부! -
가상 현실만드려면 webGL 공부!
Author And Source
이 문제에 관하여(파일로 분리해 정리, 라이브러리, 프레임워크, jQuery, UI vs API, +@), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@whdbqls424/파일로-분리해-정리-라이브러리-프레임워크-jQuery-UI-vs-API저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
