📌 JS 간단 소개! 👀

지금까지 HTML과 CSS에서 놓치기 쉬운 개념들을 공부했습니다. 그 두개만 해도 꽤 많은 양을 학습했고 진짜로 웹사이트 구조를 직접 만들면서 활용해보는 것만 남았네요. 직접 새로운 웹사이트를 만드는 것도 좋지만, 이미 잘 만들어져 있는 사이트를 클론 코딩하는 것도 HTML, CSS를 이해하는데 아주 좋은 방법이라고 생각합니다.

그러기 위해선 JS도 기본적인 내용은 알고 있어야 하기 때문에 살짝 정리해보려 합니다.
JS는 웹 프론트 개발자라면 누구나 접하는 프로그래밍 언어이고 표준 개발자 언어이기 때문에 많은 참고 자료들이 있습니다. 저는 JS를 많이 접해보지는 않았지만 코딩테스트를 대비하기 위해 조금 공부를 했었습니다. JS를 보고 느낀점은 싱글 쓰레드인 점, 파이썬과 비교하면 조금 복잡하게 코드가 쓰인다는 점을 느꼈습니다.

확실히 개발영역에 들어선 기분이었고 난이도가 확 올라갔습니다(HTML, CSS가 좋았지...). 앞으로 계속 마주칠 JS와 친해지기 위해 고군분투할 것을 생각하니 참 좋습니다.. 하하

그럼.. let's get started

표기법

• dash-case(kebab-case) → 하나의 단어로 인식, 띄어쓰기 느낌

  • HTML
  • CSS

• snake_case

  • HTML
  • CSS

• camelCase

  • JS

• PascalCase → 단어 첫 문자 대문자
  - JS

  (파이썬에서는 snake 케이스를 많이 썼었는데 JS는 camel을 쓰는군요!)

자료형

• String(문자 데이터)

  • 따옴표를 사용함

• Number(숫자 데이터)

  • 정수 및 부동소수점 숫자를 나타냄

• Boolena(불린 데이터)

  • true, false 두 가지 값밖에 없는 논리 데이터

• Undefined

  • 값이 할당되지 않은 상태를 나타냄

• Null

  • 어떤 값이 의도적으로 비어있음을 의미

• Object(객체 데이터)

  • 여러 데이터를 Key:Value 형태로 저장 → {}

• Array(배열 데이터)

  • 여러 데이터를 순차적으로 저장 → []

자료형은다른 프로그래밍 언어와 크게 다르지 않습니다.
다만, Null과 Undefined의 구분이 헷갈릴 수 있는데,

• Null -> 의도적
• Undifined -> 의도X
  라고 기억하면 되겠습니다!

변수

• 데이터를 저장하고 참조(사용)하는 데이터의 이름 → let, const, (var)

  • let - 재할당 가능
  • const - 재할당 불가

• 예약어(Reserved Word) - 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

  • this, if, break ...

역시 변수는 중요하고 파이썬과 다르게 JS는 앞에 let, const를 붙여서 변수의 변화가 자유로운지 상수로 고정해야하는지 미리 알려주어야 합니다!

함수

• 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) → function

  • 함수(a, b) → a, b는 매개변수(Parametets) → 데이터를 받아주는 매개체

  • 함수 호출(a,b) → a, b는 인수(Arguments) → 입력할 데이터

  • 속성 부분에 함수가 표현되어 있으면 메소드(Method)

    

매개변수와 인수의 차이는 많이 헷갈리는 개념인데 확실히 짚고 넘어가야합니다! 🤔

DOM API

• Document Object Model, Application Programming Interface

  • DOM은 웹사이트의 요소

  • API는 웹사이트가 동작하기 위해서 입력하는 프로그래밍 명령

  • 하나의 html 요소 검색/찾기

    • const boxEl = document.querySelector(’.boc’)
    • boxEl.addEventListener()
    • boxEl.addEventListener(1, 2)
    • boxEl.addEventListener(’click’, 2)
    • boxEl.addEventListener(’click’, function() {
      console.log(’Click~!’)
      })
    • boxEl.classList.add(’active’)
      let isContains = boxEl.classList.contains(’active’)
    • boxEl.classList.remove(’active’)
      isContains = boxEl.classList.contains(’active’)
      console.log(isContains)

• html 요소 모두 검색/찾기

  • const boxEls = document.querySelectorAll(’.box’)

  • boxEls은 배열 데이터가 됨

  • boxEls.forEach(function () {})

    • 첫 번째 매개변수(boxEl): 반복 중인 요소

    • 두 번째 매개변수(index): 반복 중인 번호

    • boxEls.ForEach(function (boxEl, index) {
      boxEl.classList.add(order-${index+1})
      console.log(index, boxEl)

  • Getter, 값을 얻는 용도

    • console.log(boxEl.textContent)

  • Setter, 값을 지정하는 용도

    • boxEl.textContent = "zerone"

JS로 HTML/CSS를 컨트롤 할 때 앞으로 자주 사용할 API입니다. 요소를 가져와 JS로 기능을 추가하는데 많이쓰입니다. 예를 들면 "버튼을 마우스로 클릭했을 때 사진이 나타나라 " 와 같은 기능들을 DOM, API로 제어할 수 있습니다! cool~ 😮

오늘은 JS를 간단하게 살펴봤습니다. JS에서 공부해야할 것은 엄청 많지만 기본적인 것만 숙지하고 클론 코딩을 실습해보도록 하겠습니다.

To be continued...! 🫠