멘토링 4번째

🌕 F-lab 멘토링 기록

멘토링 이후 부족한 부분을 채우기 위한 기록

JavaScript 프로토타입 체인

• 프로토타입: 자바스크립트의 기반이 되는 개념으로 각 함수의 상위 객체를 참조할 수 있는 프로퍼티
• 프로토타입 체인: 어떤 객체의 프로토타입 또한 프로토타입을 갖고 있으며 이를 통해 스코프 체인 처럼 상위 프로토타입을 참조하며 프로토타입이 갖고 있는 메서드를 활용할 수 있는 방법

JavaScript 클로저와 정보은닉

• 클로저: 어떤 함수의 변수를 참조하는 내부 함수가 외부로 전달될 때, 참조된 그 변수가 메모리에서 제거되지 않는 현상

function counterFactory() {
  var count = 0;
  this.count = ++count;
}
// 위와 같은 방식은 객체를 생성해도 count가 계속 0으로 초기화된다. 또한, 만들어진 객체의 외부에서 count값에 접근이 가능하며 변경 가능

function counterFactory() {
  var _count = 0;
  return function () {
    return ++_count;
  };
}
// 클로저를 이용하면 _count가 메모리에 계속 남아있기에 호출 시 계속 1이 더해지며, 외부에서 직접 _count에 접근할 수 없다.

JavaScript React 불변성

• 불변성: 객체가 최초로 생성되었을 때의 값이 변하지 않고 유지되는 것 -> 메모리 영역에서 값을 변경할 수 없다는 의미

원시형은 데이터를 할당할 때, 데이터를 메모리에 저장하고 그 주소를 변수에 할당 이후 같은 변수에 새로운 데이터를 재할당하게 되면, 그 새로운 데이터에 대한 메모리가 새롭게 생기고 그 주소를 변수에 할당한다. 즉, 데이터 자체가 바뀌는 것이 아니라 새로운 공간에 새로운 데이터를 넣고 그 주소를 할당하므로 이를 불변성이라고 하며 기존 데이터의 메모리는 가비지 콜렉터에 의해 제거된다. 그러나 객체의 경우, 그 객체 내부의 변수가 존재하고 그 변수가 데이터의 주소를 참조하기에 그 변수의 주소를 참조하는 객체는 프로퍼티의 값을 재할당해도 프로퍼티의 주소를 그대로 갖고 있으면서 값만 바뀌게 된다. 이를 가변성이라고 한다.

현대 모던 자바스크립트 불변성의 중요성

불변성이 중요한 이유는 단순하게 생각하면 전역변수를 지양하는 이유와 비슷하다.
코드의 길이와 복잡도가 증가할수록 특정 변수의 값을 바꾸게 될 수도 있고 이후 발생한 에러를 추적하기에도 버거워진다.
어떤 객체의 참조값을 여러 곳에서 공유하면 그 값이 계속 변경되어 의도치않은 상황이 일어날 수 있기에 객체의 불변성은 굉장히 중요하다.

또한 리액트에서 상태(state)의 불변성을 유지해야하는데

1. 리액트는 이전 상태와 비교해서 변경된 부분만 리렌더링해야하기에 이전 상태의 원본이 유지가 되어야한다.(그래야 비교가능)
2. state는 객체이기에 내부 프로퍼티값을 변경하면 이전과 이후의 값이 둘다 변경되어 변경되었음을 나타날 수 없고 그렇게 되면 상태가 변경되지 않은 것으로 판단하고 리랜더링되지 않는다.

HTML 시멘틱 마크업

• 의미를 갖는 마크업이라는 뜻
• 단순히 div를 활용한 마크업이 아닌, header, main, footer등과 같이 그 역할을 나타낼 수 있는 마크업을 지향해야한다.
  • 검색 엔진 최적화(SEO; Search Engine Optimization)
    • 태그의 의미(역할)을 부여함으로써 크롤링 시 더 유의미하고 효율적인 방법이 가능
  • 웹 접근성
    • 장애인, 고령자분들이 웹에 접근 시 음성 혹은 키보드만으로 접근할 수 있게 하는 서비스 등은 HTML 태그를 기반으로 작동한다.
  • 가독성
    • 개발 시 각각의 태그들에 대한 가독성이 더 좋아진다.(웹의 구조를 파악하기 용이하다.)

JavaScript 모듈

• 모듈: 단순히 생각하면 코드 조각, 점점 애플리케이션의 크기가 커지면서 파일을 여러 개로 분리하게 되는데, 이 때 분리된 각각이 모듈이다.

  점점 스크립트의 크기도 커지고 복잡해지면서 코드를 모듈 단위로 쪼개는 방법이 필요해졌다.

  • 모듈은 항상 use strict(엄격모드)로 실행된다.
  • 모듈은 자신만의 모듈 스코프가 존재한다.(스코프를 공유하기 위해 export, import 사용)
  • 동일한 모듈은 여러 곳에서 사용되더라도 최초 호출 시 단 한 번만 실행된다. 실행 후의 결과는 이 모듈을 가져가려는 모든 모듈에 반영된다.
  • 모듈 스크립트는 항상 지연 실행된다. 마치 defer 속성을 붙인 것처럼!