본문 바로가기

Programming39

[Web] HTTP와 HTTPS의 개념 및 차이점 HTTP와 HTTPS의 차이점에 대해 제대로 알고싶어서 검색하다가 굉장히 좋은 글이 있어서 출처를 남기고 가져왔습니다. 1. HTTP란? [ HTTP(Hyper Text Transfer Protocol)란? ] HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다. HTTP는 1989년 팀 버너스 리(Tim Berners Lee)에 의해 처음 설계되었으며, WWW(World-Wide-Web) 기반에서 세계적인 정보를 .. 2022. 3. 31.
[JavaScript] 이벤트 버블링, 이벤트 캡쳐, 이벤트 위임, event.stopPropagation() 이벤트 버블링 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. const divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); } div 태그 한개만 클릭했을 뿐인데도 3개의 이벤트가 발생하는걸 결과로 알 수 있다. 그 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 일어났을 때 이벤트를 최상위에 있는 화면 요소까지 전파 시.. 2022. 3. 31.
[JavaScript] apply, call, bind 함수 호출 자바스크립트에서 함수를 호출하는 방법에는 먼저, 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다. 뭘 사용해도 다 같은 결과가 출력되는데 그렇다면 call apply bind의 차이점에는 무엇이 있는지 알아보자. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 1. Function.prototype.call() func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg: func 호출에 제공되는 thi.. 2022. 3. 29.
[JavaScript] this 바인딩 this 라는 개념이 애매하고 헷갈려서 제대로 정리를 해보려고 한다. https://nykim.work/71 [JS] 자바스크립트에서의 this this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 th nykim.work 위 게시글을 통해 this 의 역할에 대해서 알아봤는데 보면서 이해가 안된 부분만 정리해보았다. this 1. 단독으로 쓴 this 2. 함수 안에서 쓴 this 3. 메소드 안에서 쓴 this 4. 이벤트 핸들러 안에서 쓴 this 5. 생성자 안에서 쓴 this 6. 명시적 바인딩을 한 this 7. 화살표 함수로 쓴 this .. 2022. 3. 29.
[JavaScript] Array.from 클로저에 관해 공부를 하다가 예제에서 Array.from 이라는 코드를 알게되었다. 공부도 하고 복습도 하고 정리도 할겸 포스팅을 해보려고한다. Array.from( {length : 20}, () => Array(10).fill(0) ); 대충 20x10 짜리 2차원 배열을 리턴하겠구나 정도는 파악 할 수 있었지만 생소한 표현법이라 어떻게 동작하는지 한번 알아보자 Array.from 은 유사 배열 객체를 배열로 바꾸는 데 자주 사용했었다. MDN에서 나와있는 예시로는 다음과 같다. 1. Array.from('Tei'); // ['T','e','i'] 2. Array.from([1,2,3], x => x + x ); // [2,4,6] 1번의 예시는 눈에 익는 예시이다. 문자열을 인자로 받아 이를 배열로.. 2022. 3. 25.
[JavaScript] 클로저 정리 ※ 본 게시글은 모던자바스크립트 deep dive를 보고 정리한 내용입니다. 틀린 내용이 있다면 댓글로 적어주시면 감사드리겠습니다 (__) 클로저에 대해 공부하고 클로저에 대해 간단히 설명을 해보자면 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션 내부함수로부터 외부함수의 접근 권한을 줌 함수 생성 시점에 언제나 생김 작성한 글을 쭉 읽어보면 무슨 말을 하고 싶은 건지 대강 이해가 될것이다. 렉시컬 스코프 함수를 어디에 정의했는지에 따라 상위 스코프를 결정 -> 렉시컬(정적) 스코프 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조' 에 저장할 참고값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다. 이것이 바로 렉시컬 스코프이다. 함수 객체의 .. 2022. 3. 25.