일하면서 기록하기

• 호이스팅(Hoisting)의 개념
  1. 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것
  2. 인터프리터가 변수와 함수의 메모리 공간으 선언 전에 미리 할당하는 것
  3. 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는게 아니라
     코드를 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상
  4. var을 통해 정의된 변수의 선언문을 유효범위의 최상단으로 끌어올리는 행위 = '선언과 할당의 분리'
  5. var로 선언한 표현식이나 function 선언문 등을 실행단계에서 해당 Scope의 맨 위로 올리는 것

• 호이스팅을 하는 이유
  변수생성과 초기화(선언과 할당)가 분리되어 진행되기 때문이다.

• var와 함수 선언식만 호이스팅의 대상이 된다.
  let, const, 함수 표현식으로 선언한 함수는 호이스팅이 적용되지 않는다.

출처

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting

https://simplejs.gitbook.io/olaf/09.-hoisting

https://tibetsandfox.tistory.com/23

HTML에서 커스텀 데이터라고 데이터를 저장하는 방법이 있다.
data-작명="값"  이런 방식으로 넣으면 된다.

데이터 속성은 순 HTML이기 때문에 CSS에서도 접근이 가능하다.

자바스크립트에서 커스텀 데이터에 접근하려면
document.getElementByClassName('tab-button').dataset.id; 이렇게 하면 접근할 수 있다.

커스텀 데이터 말고도 제이쿼리로도 데이터를 강제로 입력할 수 있다.

$('.list).data('작명', '값'); 이렇게 하고

console.log( $('.list).data('작명') ); 찍어보면

이렇게 데이터를 저장하고 불러올 수 있다.

제이쿼리나 언더스코어 같은 라이브러리를 사용할려면

1. 홈페이지에서 라이브러리를 다운받아서 프로젝트에 복사하고 경로를 선언해주거나
2. CDN을 선언해야한다.

CDN
cdn은 content delivery nerwork의 약자로
html, css, js 및 이미지파일과 같은 정적 및 동적 웹 컨텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹서비스이다.
웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 해준다.

전세계 각지에 캐시서버를 엄청 많이 설치한다.
그리고 한국에서 접속하면 한국에서 가까운 캐시 서버가 정보를 보내고
미국에서 접속하면 미국에서 가까운 캐시 서버가 정보를 보낸다.
이걸 CDN이 자체적으로 해줘서 가장 가까운 곳에 있는 서버에서 보낼 수 있도록 정보를 찾아준다.

https://lascrea.tistory.com/167

_.groupBy 는 리턴값이 같은것 끼리 array로 묶는다.

data = [
{ registrationDate: "20211201", birthday: "19920102", name:"김동현" }
,{ registrationDate: "20211210", birthday: "19920202", name:"이동현" }
,{ registrationDate: "20211225", birthday: "19920302", name:"박동현" }
,{ registrationDate: "20220102", birthday: "19930102", name:"김동수" }
,{ registrationDate: "20220112", birthday: "19930202", name:"박동수" }
,{ registrationDate: "20220122", birthday: "19930302", name:"이동수" }
,{ registrationDate: "20220122", birthday: "19930302", name:"최동수" }
]

var filterData = _.groupBy(data, function(row){ return (row.birthday.substr(0,3});

filterData = { 1992: Array(3), 1993:(4) };

ul은 점

ol은 숫자가 생긴다.

<ul>       <li>항목1</li>       <li>항목2</li>  </ul>  <ol>       <li>ordered number? 라고</li>       <li>자동으로 숫자를 써준다</li>       <li>이렇게</li>  </ol>

위에꺼가 ul, 아래꺼가 ol

$('.class or #id').click(function(e){
     e.target;                   //지금 실제로 클릭한 요소
     e.currentTatget;          //지금 이벤트리스너가 달린곳
     $(this);                     //지금 이벤트리스너가 달린곳
     e.preventDefault;        //기본동작막기
     e.stopPropagation();    //선택한 곳의 상위요소로의 이벤트 버블링을 중단할때 사용
});

$('.black-background').click(function(){     
     if ( e.target == e.currentTarget ){
          $('.black-background').hide() }
});

위에서 처럼 if문 쓸때 e.target == $("#id") 이렇게 조건을 주면 안먹힌다.

e.target는 쌩 자바스크립트고 $("#id")는 제이쿼리기 때문에 서로 인식을 못한다.

서로 비교할려면 자바스크립트끼리 하거나 제이쿼리 끼리 해야한다.

https://tutorialpost.apptilus.com/code/posts/jquery/jq-event-handling/

http://daplus.net/javascript-javascript-jquery%EC%97%90%EC%84%9C-e%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%9D%98%EB%AF%B8%ED%95%A9%EB%8B%88%EA%B9%8C/

절대경로

최조의 시작점으로 경유한 경로를 전부 기입하는 방식,
컴퓨터는 절대경로로만 파일을 읽을 수 있다.
예 ) C:\Users\test\Desktop\File\직박구리/문서.txt

상대경로

예 ) ../문서.txt
      ../직박구리/문서.txt

'현재 위치한 곳을 기준'으로 해서 '그곳의 위치'
상대적인 경로, 현재 위치에 따라 주소?가 달라진다.
컴퓨터는 절대경로로만 파일을 찾을 수 있는데 상대경로로도 파일을 찾을 수 있는 이유는
저걸 절대경로로 변환해서 컴퓨터에게 알려주기 때문이다. 

https://mommoo.tistory.com/82

https://blog.naver.com/tipsware/221275416466

https://webclub.tistory.com/455