멋쟁이 사자처럼 in cau

후롱트 3주차 세션 회고

zza.___.lng 2023. 4. 11. 20:48

자바스크립트?

한 줄 요약

  • 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어

 

변수

결과값은 메모리 어딘가에 저장되는데, 해당 메모리의 주소 값을 모른다면 결과 값을 사용할 수 없다. 따라서 값을 사용하기 위해서는 값이 저장된 위치인 메모리 주소를 알고 접근해야한다.

값이 저장된 위치를 가리키는 상징적인 이름을 선언한 것이 변수

  • 변수를 사용하는 것 === 참조
  • 어떤 값을 구별하여 식별해낼 수 있는 고유한 이름(변수 이름) === 식별자

 

변수 선언 키워드와 스코프

변수 선언 키워드

  • var: 변수 중복선언 허용(에러가 발생하지 않음),
  • let: 변수 중복선언 금지, 재할당 가능
  • const: 선언과 동시에 초기화, 재할당 불가

스코프

  • 식별자에 유효하게 접근 가능한 범위
  • 식별자를 참조할 수 있는 범위

변수의 선언 위치로 스코프 결정

  • 전역 스코프: 어디서든 참조 가능한 전역 변수로 사용 가능
  • 지역 스코프: 특정 지역 안에서 선언한 변수는 지역 밖에서는 유효하지 않음
  • 동일한 스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 동일한 이름의 식별자 사용 가능
  • 블록 스코프: for, if같이 블록으로 감싸있는 함수를 뜻함
let global = "global";

function jay() {
  let local = "local";
  console.log(global); // 전역 스코프라 함수 내에서도 참조 가능
  console.log(local); // 지역 스코프라 지역 내에서 참조 가능
}

jay();

console.log(global);
console.log(local); // 지역 스코프라 지역 밖에서는 유효하지 않음

위 코드 결과

  • 위와 같이 global은 전역 스코프기 때문에 함수 내에서나 밖에서나 참조가 가능하지만, local은 지역 스코프기 때문에 지역 내에서만 참조가 가능하고 밖에서는 유효하지 않는다.
  • 실제로 지역 밖에서 참조한 지역 스코프는 not defined라는 결과가 나온다.

 

원시값과 객체값 (데이터타입)

값

  • 메모리 공간에 저장된 데이터

변수

  • 값에 접근하기 위해 그 위치를 알려주는 주소

원시값

  • 변경이 불가능한 값 → 한번 생성된 원시값은 읽기 전용이라 변경 불가

원시값 재할당

 

  • 값 재할당 → 마지막 console은 100, 200이 출력된다.
  • 똑같은 메모리 주소가 아니고 original과 copy는 독립적인 주소를 가지고 있는 것이다.
  • 변수는 재할당이 가능하지만 원시값은 재할당이 되지 않는다, 변수안에 할당된 원시값의 주소가 바뀌는거지 실제 값이 바뀌는 것은 아니다.

객체값 재할당

  • 객체값은 값을 재할당해도 동일한 메모리 주소를 가리키기 때문에 두 값이 같다.
  • 메모리 주소를 바꾼 것이 아닌, 값 만을 재할당 했기 때문에 두 객체가 모두 같다는 결과가 나온다.

원시값과 객체값에 대해 잘 설명해주시는 강의 영상이 있어서 공유합니당

https://www.youtube.com/watch?v=VXVIVblOBK4 

DOM

  • Document Object Model
  • HTML 문서의 태그들이 객체로 구성된 것을 의미
  • 태그와 상호작용하여 JS를 통해 동적인 페이지를 만들도록 하는 것이 DOM
  • DOM이 없다면 JS는 웹페이지나 XML 페이지에 대한 정보 획득 불가

Event

  • DOM에서 발생하는 이벤트를 생성, 추가, 삭제 가능
  • 사용자의 액션과 상호작용하여 이벤트를 발생 시킬 수 있음
  • Event 등록 방법

Event 등록 방법

addEventListner 방식

  • addEventListner(type, listener)
  • 동일한 이벤트에 대해 여러 이벤트 등록이 가능, 등록한 순서대로 이벤트 작동

 

사용법

const printLog = document.querySelector(".log-button"); printLog.addEventListener("click", () => { console.log("Jay"); } });

const printLog = document.querySelector(".log-button");

printLog.addEventListener("click", () => {
  console.log("Jay");
  }
});
  • querySelecor를 통해 요소를 반환하여 변수에 저장
  • 해당 변수에 addEventLisener를 이용해 click 이벤트를 등록
  • 클릭 시에 작동할 함수를 연결하여 이벤트 사용

 

Target

  • 정확하게 해당 이벤트가 시작된 객체에 대한 참조

currentTarget

  • 이벤트 핸들러를 호출하는 객체에 대한 참조

 

 

느낀점!

실습과 더불어 이번 세션에서 가장 중요하다고 생각하는 부분은 "원시값", "객체값", "스코프"라고 생각한다.

이 부분에 대한 개념을 제대로 이해하지 못해서 코드 짜는데 시간도 오래 걸리고, 실수로 인해 에러가 발생했던 적이 많았기 때문이다. 세션을 진행해준 멘토님께서 이론이라고 생각하고 넘어갔던 부분들을 제한된 시간 안에 이해하기 쉽게 설명해주셔서 세션을 준비하면서 많이 고민한 흔적이 보여 정말 만족도 높은 세션이었다.

 

+++

나중에 리액트를 하면서도 원시값 객체값 스코프에 대해 이해하지 못하면 문제가 발생하는 경우가 많다고 하니 꼭 제대로 공부하고 넘어가야겠다,,

 

+++

과제를 하면서 역시나 JS는 어렵다는 것을 다시 한 번 실감하게 되었고, 동아리에서 진행되는 스터디를 통해 완벽하게 마스터해야 좋은 프론트 개발자가 될 수 있겠다고 생각했다.

 

+++

객체값과 원시값에 대해 공부해서 정리하는 글을 꼭 추가하기!