본문 바로가기
Hanghae99

221201 TIL 주특기 언어 스터디 3회차

박로셀 2022. 12. 2. 20:18

1. 이벤트 리스너에서 변수에 접근할수 없는 경우에는 어떤것이 있으며, 이벤트 리스너를 외부로 빼내주는 경우는 왜 필요할까?

  • 코드의 규모가 커지면 즉, 코드가 복잡해지거나 길어지면 가독성과 정렬을 위해 이벤트 리스너를 외부로 분리해주는 경우가 많습니다. 
  • 여기서 "외부로 분리해준다"는 것은 기존에는 매개변수로 콜백함수를 지정해두었던 것을 따로 변수로 빼내서 선언해준것을 말한다.
<script>
	// 기존에 매개변수였던 콜백함수를 변수로 외부에서 선언해주었다.
    // 이것을 "이벤트 리스너가 외부로 분리되었다."라고 표현하고 있다.
	const listener = (event) => {
		const length = textarea.value.length
        h1.textContent = `글자 수: ${length}`
    }
    
    document.addEventListner('DOMContentLoaded', () => {
    	const textarea = document.querySelector('textarea')
        const h1 = document.querySelector('h1)
        // 변수 lisner 끌어와 매개변수로 넣어 주었다.
        textarea.addEventListener('keyup', listener)
    })
</script>
  • 이러한 경우에는 외부로 분리된 이벤트 리스너 내부에서 변수에 접근할 수 없는 경우가 발생한다. 왜냐하면 외부로 분리되면서 선언되지 않은 변수의 접근성이 결여되기 때문이다.
  • 이렇게 이벤트 리스너를 외부로 분리하는 경우는 대부분 가독성과 활용도를 높이기 위한것 같다. 외부로 분리하면서 길어지는 코드를 정리할 수 있고 선언된 변수를 가져와 다양한 곳에 활용할 수 있기 때문이다.

►더 알아보기

  • 이벤트 리스너란 무엇일까?
    • 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다.
    • 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행된다.
    • 이벤트 리스너는 표준 이벤트 모델, 고전 이벤트 모델, 인라인 이벤트 모델로 구성될 수 있다.
    • 종류는 다음과 같은 것들이 있다.
      • onblur(객체가 focus를 잃었을 때)
      • onchange(객체의 내용이 바뀌고 focus를 잃었을 때)
      • onclick(객체를 클릭했을 때)
      • ondblclick(더블클릭할 때)
      • onerror(에러가 발생했을 때)
      • onfocus(객체에 focus가 되었을 때)
      • onkeydown(키를 눌렀을 때)
      • onkeypress(키를 누르고 있을 때)
      • onkeyup(키를 눌렀다 뗐을 때)
      • onload(문서나 객체가 로딩되었을 때)
      • onmouseover(마우스가 객체 위에 올라왔을 때)
      • onmouseout(마우스가 객체 바깥으로 나갔을 때)
      • onreset(Reset 버튼을 눌렀을 때)
      • onresize(객체의 크기가 바뀌었을 때)
      • onscroll(스크롤바를 조작할 때)
      • onsubmit(폼이 전송될 때)
      • addEventListener(여러 이벤트를 등록할 때)
      • removeEventListener(특정 이벤트를 제거할 때)

 

2-1. script 위치와 브라우저 렌더링과는 어떤 연관 관계가 있을까?

  •  웹브라우저는 파싱중에 <script>를 만나면 파싱을 중단한 후 javascript 파일을 로드하고 javascript코드를 파싱합니다. 이것은 관례적으로 이어져왔다.
  • 그렇기 때문에 <script> 태그의 위치에 따라 화면이 로딩되는 속도와 중단되는 시점에 따른 사용자 경험과 밀접한 관련이 있다.
  • script 태그가 가벼운 경우(코드가 길지 않은 경우)에는 상관이 없을 수 있지만, 무거운 경우 (코드가 길고 복잡한 경우)에는 중단 시간이 길어지고 사용자는 화면에 아무것도 뜨지 않은 하얀색 화면을 마주해야 하는 시간이 불필요하게 길어질 수 있다.

파싱중 script 태그를 만난 경우

2-2. script를 배치하기에 최적의 위치는 무엇이며 그 이유는 무엇일까?

  • 기본적으로 script 태그는 <html></html> 내부 어느 곳에 위치하여도 로드하는데는 아무런 문제가 없다.
  • 그러나 앞서 말했듯이 script 코드가 무거워지는 경우에는 HTML paring이 중단되는 시간이 불필요하게 길어질 수 있고 이는 사용자 경험과 밀접한 관계가 있다.
  • 그래서 script code가 위치 할수 있는 곳은 크게 3군데로 볼수 있다.
    1. <head></head> 사이
      • 이곳은 html 문서의 초반이기 때문에 렌더링에 큰 영향을 준다.
      • 그렇기 때문에 script code가 긴 경우에는 이곳에 위치하지 않는 것이 좋다.
      • 그러나 두가지 경우에는 이곳을 사용한다.
        1. <body>요소 내부에서 함수를 호출 해야할 때 <head>에 기술하여 미리 로드하도록 한다.
        2. 스크립트내부에서 스타일 시트를 조작할 때 본문 출력 이전에 미리 로드하도록 한다.
    2. <body></body> 의 내부
      • 가장 비추천하는 공간이다.
      • 왜냐하면 코드의 혼란을 줄수 있고 유지 보수를 어렵게 하기 때문이다.
    3. </body> 태그의 바로 앞
      • script 태그를 배치하기에 가장 최적의 위치이다.
      • 왜냐하면 모든 화면이 렌더링되고 나서 스크립트가 실행되므로 실제로 화면을 빠르게 볼 수 있기 때문이다.
      • 또한 <head>태그에 삽입했을 때 일어나는 window.onload 관련 오류나 기타 처리가 필요 없기에 주로 이부분에 <script>태그 삽입을 하게된다.
      • 그리고 script가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우에 스크립트가 파싱되지 않은 상태라면 스크립트는 문제를 야기하게 되는데 이러한 경우도 피할수 있게 된다.

2-3. async와 defer가 무엇이며 그 차이는 무엇일까?

     1. async

<script async src="script.js">
  • 위와 같이 asnyc 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래와 같이 작동한다.

  • HTML parsing이 script와 만나도 HTML parsing 이  중단되지 않는다. script 로드가 끝나면 script가 실행되는 시점에 HTML parsing이 중단된다.
  • 그렇기 때문에 비교적 화면 로딩의 공백이 적다.

   2. defer

<script defer src="script.js">
  • 위와 같이 defer 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래와 같이 작동한다.

  • script 태그를 만나도 script 로드의 시작부터 끝까지 html parsing이 중단되지 않으며 html parsing이 끝나고 난 뒤에야 script가 실행된다.

   3. DOMContentLoaded 와 onload

  • DOMContentLoaded와 onload를 활용하면 javascript 자체에서 로딩 순서를 제어할 수도 있습니다.
  • DOMContentLoaded 내부의 코드는 DOM 생성이 끝난 후에 실행
  • onload 내부의 코드는 문서에 포함된 모든 콘텐츠(images, script, css, ...)가 전부 로드된 후에 실행됩니다.
  • script 코드 -> DOMContentLoaded 안의 코드 -> window.onload 안의 코드 순으로 출력됩니다.

3. local storage와 session storage와 cookie의 차이

 

 1. Local storage 와 Session storage

  • html5에서 제공하는 Web storage로는 local storage와 session storage가 있다.
  • 둘다 웹의 데이터를 클라이언트에 저장할수 있는 저장소의 역할을 한다.
  • 그러나 가장 큰 차이점은 지속성이다.
Local storage Session storage
1. 도메인마다 별로도 저장소가 생성된다. 따라서 도메인만 같으면 브라우저가 달라도 저장된 데이터가 공유된다.
2. 시간 제한이 없고, 심지어 브라우저가 꺼져도 데이터가 남아있음.
3. 값을 지우기 위해서는 직접 지워야 한다.		 1. 세션(브라우저)이 종료되면 저장된 데이터가 사라진다.
2. 도메인이 같아도 다른 브라우저를 실행하면 각각의 저장소가 생성된다.

   2. 쿠키(Cookie) 와 Web storage

  • 로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠키 그리고 로컬스토리지 다
  • 각강의 특징이 다르기 때문에 사용 목적에 따라 맞는 것을 사용하면 된다.
Web storage Cookie
1. 자바스크립트 객체 자체를 넣는 것이 가능하다.
2. 개발자가 데이터를 선별해서 넘기면 되므로 http통신에 부하를 줄일 수 있다.
3. 시간제한 설정이 불가능하다.
4. 도메인이 같더라도 탭이나 브라우저가 다르면 저장공간이 분리된다.
5. 자신의 변화를 이벤트로 감지할 수 있다.
6. 브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 도입된 것이 Session storage 이다.		 1. 문자열만 저장 가능하다.
2. 모든 쿠키를 전송해야 한다. http 통신에 부하가 많을 수 있다.
3. 시간제한 설정 기능이 있다. 즉 광고 7일동안 보지 않기 와 같은 기능구현이 가능하다.
4. 도메인별로 데이터가 분리되지만 같은 브라우저라면 데이터를 공유한다.
5. 자신의 변화를 감지할 이벤트와 같은 것이 없다.
6. 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 API가 존재한다.

'Hanghae99' 카테고리의 다른 글

221205 TIL React 숙련주차 1  (0) 2022.12.05
221203 WIL 항해99 3주차  (0) 2022.12.02
221201 TIL Visual Studio Code에서 github 연결하기  (0) 2022.12.02
221201 TIL 07 문서 객체 모델 (Document Object Model) 2  (0) 2022.12.01
221129 TIL 07 문서 객체 모델 1  (0) 2022.12.01

'Hanghae99' Related Articles

티스토리툴바