2021.07.19 JavaScript 공부

JavaScript를 공부했다. 사실 16일에 봤지만, (주말에 노느라) 사정상 오늘 포스팅했다.
사실 JavaScript라는 이름 덕에 Java와 유사하겠거니 생각했지만 거의 모든 부분 이 달랐다. 무엇이 달랐는지는 아래에 설명할 예정.

Java와 구문이 유사 해서 JavaScript라는 명명이 붙여졌다는데, 계속 사용을 해봐야 알 것 같다.
역시 생활코딩 을 따라가며 공부했다. 최고!

1. JavaScript 란?

이름 그대로 Script 언어에 해당하며, Java와 유사한 구문 덕에 JavaScript라는 이름을 갖게 되었다.
다음과 같은 몇 가지 특징을 가진다.

1. HTML과의 결합

• <script> </script> 안으로 활용할 수 있다. Java의 익명함수 와 비슷하다는 생각?
• <script type=”text/javaxcript” src=”~.js”></script> 로 .js 파일을 로드할 수 있다.
• .js 로 나누어 활용하면 로딩 시간의 단축, 코드의 간결함을 확보할 수 있다.

2. 객체 지향형, 동적 언어, 문법

• 어떤 변수든 var, const로 변수를 선언하면 된다.
• number 타입에서 0을 표현할 수 없다.
• String 선언 시 변경할 수 없다. -> 새로운 문자열을 할당한다.
• onClick 등 Android Studio에서도 쓰이는 함수들이 존재한다.
• equals 연산자가 === 이다. (신기하다)
• 변수 설정이 잘못되면 혼란스럽다.
• ex) for loop 시 인자를 String으로 두면 i = 1, 11, 111이 된다(…)

따라서 정적 타이핑을 위해 JavaScript의 Superset 인 TypeScript를 사용한다고 한다.

3. 명령형/함수형 언어

• C-Family 언어로, 세미콜론(;)으로 줄의 끝을 표시해야 한다.
• JavaScript의 class 는 C의 class 와는 다르게, 특수한 기능을 하는 “function의 연장선” 이다.
• 프로토타입 기반 언어로, class는 기존의 객체를 복사하여 새로운 객체를 생성한다.
• 동적 언어이기 때문에 function을 생성할 시 int, void 이런 것이 필요 없다.(!)
• 객체 안에서 .this 를 통해 해당 객체를 선택할 수 있다. Java와 유사하다고 생각.

…따라서 함수를 잘 구분하고, 잘 구현하는 것이 중요해 보인다.

2. 프로토타입 언어

class가 C, Java의 class와 다르다는 점과 프로토타입 기반 언어라는 것이 무엇인지 잘 이해되지 않았지만, 다음의 페이지를 참고했다. (MDN Web Docs)

JavaScript의 모든 객체는 Prototype이라는 속성을 가지고, 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입은 본인의 프로토타입을 가지고 있고, 이것이 반복된다. null을 프로토타입으로 가지는 오브젝트에서, 그 반복과정은 끝난다. 이를 프로토타입 체인이라고 부른다.

요약하자면, “프로토타입 체인의 길이는 성능에 큰 영향을 끼치고, hasOwnProperty 메소드로 적절히 관리해야 한다.” 정도인 듯하다.

3. 배열과 Query

1. 배열

JavaScript는 배열의 선언 마저 간단하다.

var num = [“1”, “2”];

위와 같이 선언해주면 된다. 동적 언어이기 때문에 int, double 이런 건 필요 없다.
또한, 위와 같은 array에는 .push 로 값을 추가해줄 수 있다. Java의 .append 와 같은 기능인 듯.

2. Query

• Query는 질문이라는 뜻으로, 웹 서버의 요청에 대한 처리 과정이다.
• 내가 JavaScript를 배우는 이유도 결국 동적 웹 호스팅을 위해서이므로, 매우 중요한 요소일 것이다.

Query는 JavaScript 내의 특정 Id를 찾는 용도로도 활용되지만, 일반적으로 Query는 URL 끝의 ? 다음 파라미터들을 의미한다. 해당 파라미터들은 Query String으로 불린다.

.querySelector(), .querySelectorAll()

• .querySelector(‘body’) 로 ‘body’ 선택자의 특정 요소를 선택할 수 있다.
• (.*)나 (.#)로 제한 시 해당 선택자의 첫 번째 요소를 선택할 수 있다.
• .querySelectorAll(‘body’) 로 ‘body’ 선택자의 모든 요소를 선택할 수 있다.

.getElementById()

• 해당 Id 속성을 갖는 요소에 접근할 수 있다. Id는 중복되지 않기 때문에, 관리하기 쉬울 듯하다.
  
  

4. Library와 Framework

1. Library

Library는 자주 사용되는 코드들을 모아놓은 것이다. Python의 Numpy, Tensorflow Library 와 같은 개념으로 이해했다.

Library를 활용해야 할 경우 <script src=” “> </script> 로 활용할 수 있다.

많이 쓰이는 Library로는 React.js, jQuery 등이 있다.

2. Framework

Framework는 어떤 소프트웨어를 개발할 때 기반이 되는 코드들을 의미한다. 이미 어느 정도 기능이 구현되어 있으므로, 특정 용도로의 개발 효율과 편의성이 높다.

많이 쓰이는 Framework로는 Angular, Vue.js, Node.js 등이 있다.

사실 Library와 Framework를 구분하는 것 보다, 내가 개발할 웹이나 소프트웨어가 어떤 역할을 할 것인지에 따라 Library와 Framework를 선택하는 것이 옳은 것 같다.

5. 배운 점

이건 포스팅을 하다 느낀 점인데, 영어와 한글이 뒤섞여있다. 추후 통일해서 수정해야 할 듯.

JavaScript는 Java와 비슷하면서 상당히 다른 언어였다. 문법적인 차이(Java : ==, JavaScript : === 등)도 있지만, 활용을 많이 해봐야 익숙해질 것 같다. 또한 JavaScript 그 자체도 중요하지만, 어떤 Library와 Framework를 선택하느냐에 따라 개발 과정이 매우 다를 것 같다.

따라서 기초를 탄탄히 해두어야, Library와 Framework를 활용할 때 혼란이 덜 올 것 같다. 다음은 가장 널리 쓰인다는 Node.js 를 배워볼 예정이다.