TIL #10 JavaScript_4

채록·2020년 12월 12일

JavaScript TIL

HTML & CSS + JS

목록 보기

9/14

들어가는 말

어려워

객체 (Object)

객체의 수단 : 정리정돈! (이를 위해 함수, 변수 등 여러가지 활용)
배열 : 정보를 담는 그릇 and 정보가 순서대로 저장된다. <---> 순서 없이 정보를 저장하는 것 (그렇다고 무질서한것은 아님. 이름이 있는 정리정돈 상자의 개념) = 객체!

맛보기 #1 준비작업-함수 : 중복 제거

1단계 : 중복되는 코드 확인 if조건과 else 조건에서 하이퍼링크의 색을 지정하는 코드가 중복된다!

결과 : 독립된 함수로 설정

setColor라는 독립된 함수에 중복된 코드를 붙여넣고, 색 부분은 color로 지정
if조건과 else 조건에서 지정시킨 색으로 하이퍼링크가 변화하게 설정

setColor("pink / powderblue")

출력 모습 확인

맛보기 #2 준비작업-함수 : 함수로 로직에 이름 부여하기

코드가 여러줄 이거나 / 한줄이여도 의미가 불명확 or 시간이 지나면 파악하기 어려울때 = 함수를 통해 그 로직에 이름을 부여한다!

준비 단계 : 여러줄(1억개라 가정)의 코드가 있다고 가정
위의 if조건에서 글씨가 흰색으로 되는 코드가 1억개라면...? => 함수화 하자!

1단계 : 함수로 정해주기
여기서 주의!!!!! 7번째 줄에 이미 setColor라는 함수를 사용했으므로 또다시 사용하면 위의 것의 효과가 없어진다. (원하고자 하는 형태로 출력 못함) 지금은 한눈에 들어와서 다행이지만, 코드가 많이 길어져 어떤 함수를 사용했는지 한번에 파악이 어려울때 이런 실수가 발생하면 매우 치명적이다. (충돌!!!!!) 따라서 이름은 명확하게 짓는다. 또한 지금 상태에선

function BodySetColor(color){
      target.style.color = color;
    }

의 값이 잘못됨 -> target이 BodySetColor(color)안에 소속되어 있지만 이는 nightDayHandler 안의

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

이다. 따라서
으로 입력해준다.

결과 : 동작은 그대로! 코드는 간결화! 중복 제거!

+) 추가작업 : backgroundColor도 함수화 해주기

.
.
.
BodySetBackgroundColor 처럼 이름을 지어도 되지만 이러한 경우에도 사용가능한 '객체' 라는 개념이 있다!
-> 서로 연관된 함수와 서로 연관된 변수들을 grouping하여 정리정돈 하기 위한 수납상자 = 객체

맛보기 #3 : 객체활용

객체를 이용하여 정리하기 (실제로 작동하는 코드는 아님)
Body / Links 라는 객체에 set~~ 함수를 정리!!
~~위의 코드 작동 안함! 제대로 지정을 해주지 않았다. 아직 객체에 대해서 제대로 배운것 아니고 그냥 예시용으로 보여진 것이다.~~
.
.
위의 사실을 통해 알 수 있는것! 이제껏 사용했던

document.querySelector('body')

라는 것은 document라는 객체에 들어있는 querySelector라는 함수이다!

메소드

객체에 속해있는 함수 = 메소드 (method)

+) 방금 위해서 말한 document 객체 속에 있는 querySelector도 메소드 이다.

객체 생성하기 {}; / 객체 data 가져오기 / 객체에 data 추가하기

객체 생성하기 {};

배열은 대괄호, 객체는 {};를 사용한다.

실습예제

객체 만들고, 만들어진 객체에서 데이터 가져오기

    <script>
      var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
      };
    </script>

coworkers라는 객체 안에 정보를 담았다.

이미 객체가 만들어진 후에 정보를 추가하고 싶을 때

coworkers.

입력 후 메소드 입력하면 된다.
+) 함수에서 이름에는 공백을 쓸 수 없다! 띄어쓰기 안됨
-> 대괄호로 묶어주기

coworkers.data scientist

가 아닌

coworkers["data scientist"]

로 입력해주기 대괄호 속에 문자를 입력하면 띄어쓰기가 가능하다.

<script>
coworkers["data scientist"] = "jello";
document.write("data scientist : "+coworkers["data scientist"]+'<br>');
</script>

생성된 객체에 들어있는 data 가져오기 (객체의 data를 순회(Iterate)하는 방법)

어떤 data가 들어있는지 모두 가져와야 하는 경우가 있다... 이럴때 이전에는 배열의 반복문을 사용하여 확인했다 ex) console창을 사용해 모든 a 링크들 확인

객체에서는 검색을 통해 data를 확인한다.
for (let key in yourobject) {
  console.log(key, yourobject[key]);
}
해석 : for를 쓰면 coworkers라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문 / coworkers에 있는 key를 하나하나 꺼내서 중괄호에 있는 코드를 실행해 주는 명령문인 for

(key 값 : 위 예시에서 "programmer", "designer", "bookkeeper" ["data scientist"] 를 나타낸다)
(배열에서 index 와 비슷한 느낌~?)

key값은 위에서 말했듯이 index같은거!
coworkers[key]는 그럼 위에서 입력했던 coworker에 있는 특정한 데이터를 가져오게 한다.

객체 property와 method

함수 만들기_1-1

기존에 생성된 변수인 객체 coworkers에 showAll 이라는 함수를 추가하기 (function 지정!)

// coworkers 객체에 showAll 함수(기능) 추가하기
<script>
	coworkers.showAll = function() {
 }
</script>   
// 위 코드는 아래의 코드와 같은 의미이다
<script>
	function showAll() {
 }   
</script>    
// 또한 함수를 정의할 때 아래와 같이 정의하는 것도 가능하다
<script>
var showAll = function() {

}
function showAll() {

}
</script>

함수 만들기_1-2

coworkers 객체 안에 있는 모든 key값 + key값의 내용 (key : 사람이름)이 출력되게 하는 기능 추가

<script>
    coworkers.showAll = function() {
    document.write(key+' : '+coworkers[key]+'<br>');
}
coworkers.showAll();    
</script>

함수만들기_this 사용하기

코드들 중 28~35번째 코드들 중 coworkers 주목

  <script>
      coworkers.showAll = function(){
        for(var key in coworkers) {
        document.write(key+' : '+coworkers[key]+'<br>');
        }
      }
      coworkers.showAll();
    </script>

여기서 객체 corworkers의 이름이 바뀐다면 위 코드는 제대로 출력되지 않는다.
showAll 이라는 함수 안에서 이 함수가 소속되어 있는 객체(coworkers)를 가리키는 약속된 기호인 this를 사용한다!

  <script>
      coworkers.showAll = function(){
        for(var key in this) {
        document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll();
</script>

이렇게 되면 var coworkers에서 coworkers의 이름이 바뀌어도 this는 자기 자신을 가리키기 때문에 영향을 받지 않는다.

+) showAll도 coworkers에 소속된 data이기 때문에 이에 대한 값도 출력되는 것이다. 이를 제거하기 위해서 if문을 이용해 값을 제거하면 되지만... ~~이건 나중에 내가 해보자!!!~~

Property와 Method의 정의

객체 (여기선 coworker)에 소속된 변수(showAll)의 값으로 함수를 지정할 수 있다. (function 추가해 모든 값 출력되게 했던 것)

이로써 객체에 소속된 함수를 만들 수 있다! 이를 Method라고 부르며, 객체에 소속된 변수(showAll, programmer, designer, bookkeeper 등)을 Property라고 부른다.!!

객체 문 닫기

+) 객체의 Property끼리 구분할 때에는 ,를 찍어주어야 한다.

객체화 시키기 : var 객체이름 = { ... }

<script>
    function LinksSetColor(color){
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = color;
        i = i + 1;
      }
    }
</script>

// 위 코드들을 LinksSetColor를 객체화 시켜 포현하기

<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;
</script>
        }
      }
    }
    
//동작은 똑같다!

여러 파일로 쪼개서 관리하는 JS

기존에 입력되어있던 input tag(HTML 안에 적혀있다.) 이것들을 연결된 다른 페이지에 넣어도, button의 형태는 생길지언정 기능은 구현되지 않는다!! (JS는 이동되지 않았기 때문)이만큼 긴~ JS코드를 연결된 페이지들 하나하나에 다 붙여넣기 하면 구현되긴 한다.
---> 연결된 웹 페이지가 1억개라면...? 배포도 어렵고, 한 속성을 바꾸려면 1억번 모두 바꿔야 한다. OTL

이를 위해 JS파일을 쪼개서 관리한다!!

<script>
.
.
</script>

//이렇게 작성되어 있던 부분들 중 script 사이의 코드들을 모두 외부 파일로 저장!!
//파일 형태는 이름.js
//기존에 HTML 페이지에는

<script src="이름.js"></script>
를 입력해 링크 건다.

Library vs Framework

누군가가 만든 소프트웨어(웹 브라우저 같은) 위에서 우리의 소프트웨어를 만들고 있다.
-> 다른사람이 만든 소프트웨어를 소비해서 내가 만들고 있는 소프트웨어의 생산자가 되는 방법을 배워보자!

생산자로써의 소비자

간단 정의 (두개 모두 다른사람과 협력하는 것임은 맞다.)

Library : 도서관, 정리정돈 되있는 느낌 / 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어를 잘 정리해둔, 재사용 하기 쉽도록 된 소프트웨어

내가 만들고 있는 프로그램을 사용하는 부품을 가져오는 느낌 / 끌어쓰는 느낌

framework : 우리가 만들고자 하는 것이 있을 때 만들려는 것이 무엇이냐에 따라서(게임? 웹? 등,,) 그것을 만들려고 할때 공통적으로 사용되는 부분 -> 공통부분은 활용하고 나머지 다른 부분을 개인이 작업하기

framework 안에 들어가서 작업한다고 생각

Library (jQeury)

가장 대표적인것 : jQuery
jQuery는 새로운 언어가 아니다! JS를 이용해서 함수를 만들어 놓은 library일 뿐.

사용법
1. jQeury를 바로 다운로드 하여 그 파일을 프로젝트 폴더에 저장
2. CDN (content delivery network) 사용하기! 직접 라이브러리를 다운받고, 프로젝트에 넣고, 업로드, 서비스 비용 내고... 복잡해!! -> 많은 library들이 CDN을 통해서 자기들의 서버에 저장해놓고 유저들은 이를 script src를 통해 가져갈 수 있다. (사용료까지 대신 내줌!)

CDN으로 library 이용하기

google CDN 사용

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

이전에 작성한 colors.js 앞에 붙여넣었다. 끝!!

실습예제 (jQuery 사용하기)

color.js 파일에서 원래 기능하던 코드들을 주석처리하고, jQuery를 이용해보았다.

$('a') : 모든 a tag들을 가리킨다.
jQuery에서 css기능을 바꿀땐 .css 라고 입력한다.
('color', color) color값을 매개변수를 통해 들어온 ~~parameter?~~ color값으로 바꾼다. (첫번째 color는 6번째 줄 style.color의 color를 가리킴 / 두번째 color는 2번째 줄의 color를 가리킨다.)

Library 흐름

계속해서 새로운 library들이 생긴다. 흐름을 놓치지 말자!

UI & API

UI (User Interface)

사용자가 시스템을 제어하기 위해 사용하는 조작장치 (click me 버튼)

API (Application PRogramming Interface)

<input type="button" value="Click me" onclick="alert('User Interface')">

에서 alert를 의미 (웹 브라우저가 갖고있는 경고창 기능을 alert 이라는 js의 문법의 코드를 이용해 사용하는 것 - JS뿐만이 아니라 모든 언어에도 해당된다. / 애플리케이션을 만들기 위해서 프로그래밍을 할때 사용하는 조작장치)

모든 애플리케이션들은 API를 프로그래밍적으로(순서대로) 실행하는 것을 통해 만들어진다. API가 없다면 순서도 의미가 없다. 또한 순서가 없다면 API도 의미가 없다.

아직도 무궁무진하게 남아있는 개념들,,

window > DOM > document
.
.
끝없는 공부!

채록

🍎 🍊 🍋 🍏 🍇

이전 포스트

TIL #9 JavaScript_3

다음 포스트