생각기록
생활 코딩 WEB2 - 라이브러리와 프레임워크, 제이쿼리 쓰는 법 본문
혼자 만드는 것보다는
다른사람이 잘 만들어논 것을 이용해 빠르게 조립하는 것이 소프트웨어를 만드는 것의 기본 중 기본이다.
생산자가 되는 방법을 앞에서 배워왓고
다른 사람이 만든 소프트웨어를 부품으로 해 내가 만든 소프트웨어의 생산자가 되는 법
library
도서관, 내가 만들고자 하는 프로그램에 필요한 부품들을 재사용, 정리정돈 되어 쓰기 쉽도록 되어있는 소프트웨어
(우리가 부품을 가져오기)
framework
만들고자 하는 것이 있을 때, 무엇이냐? 따라서 그것을 만드려고 할 때 언제나 필요한 공통적인것을
프레임워크가 만들어준다 = 즉 반 제품(우리가 들어가서 작업하는)
일단 둘 다 다른사람과 협력하는 것
library 의 대표적 예
jQuery 사용법
1. CDN, 다운로드 해서 프로젝트에 포함시키기
<script src = " CDN주소 " > </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;
}
}
}
$('a').css("color", color );
이모든 페이지의 'a'태그를 제어하겠다. css관련 컬러 속성을 컬러 인자값으로 받겠다.
응용해서
document.querySelector('body').style.backgroundColor = color;
= $('body').css('backgroundColor', color );
var Links = {
setColor: function(color){
$('a').css('color', color);
}
}
// 1.바디라는 변수에 객체를 담기 2. 프로퍼티를 샛컬러 지정
var Body = {
setColor:function (color){
$('body').css('color', color );
},
setBackgroundColor: function(color){
$('body').css('backgroundColor', color );
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if (self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
Links.setColor('powderblue');
self.value = 'day';
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
Links.setColor('blue');
self.value = 'night';
}
}
</script>
</head>
<body>
<input type="button" value="night" onclick="nightDayHandler(this)">
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</body>
세상에는 어떤 라이브러리가 있는가를 알 수록 우리는 많은 일들을 할 가능성이 생긴다.
파일로 로직으로 쪼갯을 때 파일들에 제이쿼리 SDN 삽입
역으로 다른사람들이 만들어 놓은 것들을 가져올 수 있다.
UI = User Interface
사용자가 시스템을 제어하기 위해 쓰는 조작장치를 ui라고 한다. (ex 버튼)
API = Application Programming Interface
어플리케이션을 만들기위해 프로그레밍 할때 사용하는 조작장치들
(ex alert, 자바뿐만 아니라 모든 프로그래밍 언어에 적용된다)
마지막으로
공부보다는 실습, 실습보다는 프로젝트를 시작해라
늦어질수록 공부가 많아질수록 머리가 복잡하고, 힘들어집니다.
모든 프로젝트를 시작할 때
모든 개념을 총동원 하려고 하지마라
필수불가결한 최소한의 도구만을 가지고 문제를 해결 하자
첫번째 기억할 것! - 프로그래밍은 순서에 따라 실행되어야 하는 명령들이 실행되도록 하도록!
두번째 현실의 문제를 해결하기위해서 조건문, 함수 등을 신중하게 도입해봐라
한계가 오면 공부를 다시 시작하자
document 객체 - 웹페이지 어떤 태그 삭제 추가하고 싶다면 찾아보라
DOM객체 (DOCUMENT객체가 여기 속해있다) - 그래도 힘들면, dom으로 수색범위 넓히기
Window객체 - 웹페이지가 아니라 웹브라우저 제어하기위할떄, 주소나 새창 화면크기 등을 알아야 한다면..
ajax - 웹페이지를 리로드하지 않고, 정보를 변경하고 싶다면 현대적 웹앱만드는데 필수적 테크닉
cookie - 리로드되도 현재상태를 유지하고싶다면 배워라, 사용자를 위한 개인화된 서비스
offline web application - 인터넷이 끊겨도 작동하고 싶다면?
webRTC - 화상통신 웹앱
speech - 사용자의 음성인식으로 정보전달 , 스피치로 시작하는 api들을 찾아봐라
webGL - 3차원같은 게임을 만들고 싶다면
webVR - 가상현실
순으로 알아보시길
생활코딩 감사합니다 ㅠㅠ
'강의 정리 > 생활 코딩 강의 정리' 카테고리의 다른 글
| 생활 코딩 WEB2 CSS (0) | 2022.11.14 |
|---|---|
| 생활 코딩 WEB2 파일 쪼개서 정리 정돈 (0) | 2022.11.12 |
| 생활 코딩 WEB2 JavaScript 5 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 4 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 3 (0) | 2022.11.09 |
