[ Javascript ] #3

suzzang2·2024년 1월 22일

JavaScript

목록 보기

4/4

✣ 생활코딩 - WEB2 : Javascript ✣

17. 함수 예고

18. 함수

19. 함수의 활용

다른 언어에서의 '함수'와 유사한 맥락으로, javascript에서의 함수도 비슷하게 작성한다.

main 함수 내부에 있던 함수 및 코드를 외부로 옮기는 것처럼, html의 <body>태그 내에 있던 코드를 외부로 옮길 수 있다. 예시에서는 <head>태그의 안쪽으로 옮겼다.

현재 코드가 <body>태그 안에 작성되어 있는 것을 볼 수 있다.
만약 'night'라는 버튼을 여러 개 생성하여 운용하고 싶다면, 함수 없이는 저렇게 긴 길이의 코드를 다시 전체를 복사해서 붙여넣기 해야할 것이다.

하지만 함수를 사용한다면 함수 하나에만 본래 작동을 하는 코드를 작성하고, 이후부터는 함수를 간단하게 호출만 하여 기능을 불러올 수 있다.

이렇게 <head>태그 속 <script>태그를 작성해 그 안에 함수를 선언하고 구현할 수 있다.

그런데 이때 주의해야 할 점은, this를 사용하면 안 된다는 것이다.
this는 특정 함수나 블럭 내에서만 그 지역 고유의 것을 가리키는 것이기 때문에, 공통적으로 사용하는 함수 안에서 this를 사용하면 코드가 정상적으로 작동되지 않는다.
그렇기 때문에 위 코드에서 this 대신에 새로운 변수를 지정해주어야 한다.

이렇게 매개변수로 self라는 변수를 설정해서 this와 대치시켜주면 된다.
물론 함수의 호출부에서도 이 점을 반영하여 매개변수로 어떤 것이 들어갈지 전달해주어야 한다.

20. 객체 예고

함수만으로 refactoring을 하는 것이 부족한 상황이 발생한다.
이때 객체를 사용할 수 있다.

객체는 주로 함수 등이 이름이 겹쳐 중복되어 사용되는 것을 방지하기 위해, '폴더'의 개념으로 사용된다.

이전까지는 아무생각 없이 작성했던 document.querySelector()도, document가 객체이고 querySelector()가 그 객체에 속한 메소드임을 알 수 있다.

21. 객체

이렇게 coworkers라는 객체를 만들어 사용할 수 있다.

객체에 새로운 값을 할당하는 방법은, 다음과 같이 두 가지가 있다.

1) coworkers.bookkeeper = "duru";
2) coworkers["bookkeeper"] = "duru";

22. 객체 활용

이전에 작성했던 setColor와 setBackgroundColor를 위와 같이 Body라는 하나의 객체로 묶을 수 있다.

* 객체 안에서 함수 선언 방법
    (함수 이름):function (매개변수){ ... }

23. 파일로 쪼개서 정리 정돈하기

javascript에서도 C, C++등의 언어들 처럼 파일들을 여러 개로 나누어 효율적으로 운용할 수 있다. 소스파일/헤더파일을 나누는 것과 유사하다.

.js파일을 생성하여, 해당 파일을 포함하고 싶은 html파일에 <script>태그 안에 src로 넣어주면 된다.

[ 외부 javascript 소스 파일 사용법 ]
< script src = "(파일 이름).js">< /script >

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

✔︎ 라이브러리?
: 사용자가 필요한 편리한 기능들이 모여 있는 것

✔︎ 프레임워크?
: 기존에 뼈대가 정해져 있고, 사용자가 그것을 조금씩 수정해서 내가 구상한 완제품을 만드는 것

둘은 사용자가 다른 사람들과 협업하기 위해 사용텍스트한다는 점에서 유사하지만,
라이브러리는 사용자가 라이브러리를 불러오는 것이라면, 프레임워크는 사용자가 그 안에 들어가는 느낌이 더 강하다고 할 수 있다.

< JQuery >

라이브러리의 가장 대표적이고 대중적인 것으로는 'JQuery'가 있다.
홈페이지에서 직접 JQuery 파일을 다운받아서 디렉토리에 저장하여 사용할 수도 있고, 'CDN'으로 사용할 수도 있다.

[ CDN이란? ]

CDN은 'Content Delivery Network'의 약자로, 파일은 홈페이지 상에 보관되어 있는 상태에서 사용자가 src 기능으로 해당 파일을 끌어와 사용하는 것이다.

다음과 같이 <script> 태그 안에 주소를 작성해 사용할 수 있다.

그럼 JQuery를 이용해 기존에 작성했던 코드를 편리하게 refactoring 해보자.

JQuery 사용 방법?
: JQuery에 속한 코드를 사용하려면, 맨 앞에 달러 기호('$')를 넣는다.

라이브러리를 사용하면, 위와 같이 기존 코드와 동일하게 작동하면서 코드의 길이는 더 짧게 줄일 수 있다.

25. UI vs API

UI와 API 모두 "Interface"이다.
1) UI(User Interface)
2) API(Application Programming Interface)

UI는 웹 사이트의 이용자가 웹 사이트와 상호작용하는 인터페이스이고, API는 코드의 형태를 띄고 있는 개발자들의 인터페이스이다.
즉, 개발자들의 UI가 API라고 할 수 있다.

예를 들어서 개발자가 웹 사이트에서 경고창이 뜨도록 코드를 작성했을 때, 해당 경고창의 디자인과 작동 원리는 누가 설계했을까? 웹 브라우저를 운영하는 운영체제(ex. 마이크로소프트 윈도우)를 만든 개발자들이 미리 만들어둔 것이다. 그리고 그 기능들을 나와 같은 개발자들이 API를 이용해서 새로운 프로그램을 만드는 것이다.

위 사진에서의 각 층이 Interface에 해당하며, 개발자가 그것을 사용할 때 비로소 'API'라고 부르게 되는 것이다.
결국 '개발'이라는 과정은, Interface를 중첩적으로 사용하는 것의 연속이라고 할 수 있다. 특정 단계의 개발자가 만든 Interface를 다음 개발자가 API로 사용하고, 이것이 반복되어 하나의 최종적인 프로그램이 만들어지게 되는 것이다.