TIL 2021.09.28 - 2주차 ✏️

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  
  

  오늘 배운 내용 💪

  • Javascript 기초 문법 공부하기
  • 제이쿼리 사용 방법 공부하기
    

<오늘 복습할 내용>
1. 제이쿼리

제이쿼리

제이쿼리의 존재에 대해서 들어는봤는데 이제는 사용하지 않는 추세이기 때문에 공부할 필요가 없다는 이야기를 많이들어서, 크게 공부하지 않고 지내왔는데 제이쿼리가 뭔지 늘 궁금했다! 오늘 공부해보자.

제이쿼리는 뭘까?

먼저, 제이쿼리가 뭔지에 대해서 알아보자.

• JQuery란?
  = 자바스크립트의 라이브러리 라고 할 수 있다. 라이브러리라고 하면 다른사람들이 만들어 놓은 코드의 모음으로, 라이브러리를 사용하면 내가 필요한 부분만 가져다가 쓸 수 있다.

왜 제이쿼리를 이제는 사용하지 않는걸까?

• 과거에는 공통적인 웹 표준이 잘 정립되어있지 않았기 때문에, 브라우저마다 동작하는 웹 사이트를 만들기 위해서 각각의 브라우저에서 작동하는 코드를 짜야 했다. 그 과정에서 제이쿼리를 사용하면 각각의 브라우저마다 코드를 다 짜야하는 번거로움을 덜 수 있었다. 하지만 이제는 웹 표준이 잘 정립되어 있기 때문에, 바닐라 자바스크립트로와 Web API로 모든 브라우저가 작동하도록 만들수 있기 때문이다.

그럼에도 제이쿼리를 왜 공부하는지?

• 물론 지금 제이쿼리를 점점 사용하지 않는 추세여서, 바닐라 자바스크립트가 더 중요한것은 맞지만, 아직 제이쿼리가 사용되는 곳도 있고, 레거시 코드를 다시 짜야할때 읽고 해석할 필요가 있기에 공부를 한다.

제이쿼리 기본 문법

$(selector).action()

//예시를 들어보자!
//h1 태그를 클릭하면 h1 태그의 background-color 바꾸기
$('h1').click(function(){
  $(this).css("background-color", "red")
})

= 이와같이 사용하면 되고, action에도 여러가지가 있어서 응용해서 사용하면 된다!

+오늘 공부하면서 느낀점🙌
처음 접해보는 제이쿼리! 확실히 사용 방법이 용이하다. 그래도 우선순위는 바닐라 자바스크립트이기 때문에 제이쿼리를 보면서 바닐라 자바스크립트로 어떻게 코드를 짜면 좋을지 생각해보는것도 좋을것 같다!