jfmam 개발 블로그

과정 웹 브라우저에서 URL 해독 및 HTTP 생성 OS를 통해 메시지 송신 이 때 OS에는 수신처의 IP주소가 필요하여 도메인을 통해 IP주소를 조사하여야 한다. 도메인 주소란? 네트워크 상에서 컴퓨터를 식별하는 호스트명을 가리킨다 IP 주소란? 서브넷이란? 작은 네트워크에 라우터를 연결한 형태, 허브에 몇대의 pc가 접속된 것과 같다 IP 주소란? 라우터를 통해 연결된 서브넷에 IP주소를 할당한다 ex ) 211.116.83.112/24 넷마스크 /뒤에 숫자를 의미하며 해당 수를 8비트의 수로 바꾸었을 때 1인분이 네트워크 번호가 된다. 네트워크 번호 넷마스크가 1인부분 호스트번호 넷마스크가 0인부분 호스트번호가 0인경우 서브넷 자체를 나타낸다. 호스트번호가 255인경우 브로드캐스트를 의미한다. 브로..

URL 구조 프로토콜://(유저:패스워드)@도메인:(포트번호)/파일경로명 도메인과 파일경로명을 이용하여 액세스 파일명은 생략 가능하며 index.html 또는 default.html이 대신한다. HTTP 기본개념 클라이언트와 서버가 주고 받는 메세지의 내용이나 순서를 정한 것이다. 주요 메소드 메소드 의미 GET 리소스 조회 POST 요청 데이터 처리, 주로 데이터 등록에 사용 PUT 리소스를 대체, 해당 리소스가 없으면 생성 DELETE 리소스 삭제 PATCH 리소스를 일부만 변경 기타메소드 메소드 의미 HEAD HTTP 헤더만 반송하고 데이터의 내용을 생략한다. 보통 서버의 정상작동 여부를 알고 싶을 때 사용한다 OPTIONS 서버의 옵션들을 확인하기 위해 사용한다. 서버에 어떤 메소드를 지원하는지 ..

preventDefault 태그의 기본동작을 하지 않게 막아준다. a 태그를 사용할 경우 새창으로 이동하는 것을 막고 form태그를 사용할 경우 창이 새로고침 되는 것을 막는다. stopPropagation 이벤트 버블링이 되지않게 막는다. stopImmediatePropagation 이벤트버블링을 막는다. + 다른 이벤트도 막는다. 여기서 말하는 다른이벤트를 예시를 들자면 여러개의 클릭이벤트를 동시에 연결 했을 경우 여러개의 클릭이벤트도 같이 막게 된다. stopPropagation의 경우 다른 클릭이벤트를 막지는 않는다. 이벤트 캡처링과 버블링 버블링 이벤트 버블링은 자식의 이벤트가 부모에게도 전파되는 것을 말한다. stopPropagation을 통해 전파를 막을 수 있다. 캡처링 버블링과 반대의 개..

세션 스토리지 vs 로컬 스토리지 HTML 5에 추가 된 저장소로 간단한 키와 값을 저장 할 수 있다.(key-value storage) 차이점으로는 영구성을 들 수 있다. 로컬스토리지의 경우 사용자가 직접 제거하려 하지 않는 이상 유지된다. (자동 로그인) 세션스토리지의 경우 브라우저 탭이 종료될 때 제거 (일회성 로그인) 주의 사항으로는 브라우저에 저장되는 값이기 때문에 비밀번호 같은 보안 이슈가 있는 정보는 절대 저장하지 않는다. 쿠키 쿠키도 브라우저의 저장소 역할을 한다. 쿠키는 만료기간이 존재하는 저장소로 생각한다. document.cookie를 통해 쿠키 정보에 접근이 가능하다. cookie의 경우 http 요청을 누가 보냈는지 구분을 해주며 클라이언트와 서버간의 지속적인 데이터 교환을 위해 ..

개념 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상을 말한다. 원리 개념만 놓고 보았을 때 이해가 잘 가지 않음으로 예제를 이용해 설명해 보도록 하겠다. const A = function () { let a = 1; const B = function () { return ++a; } return B; }; const copyA = A(); for (let i = 0; i < 3; i++) { console.log(copyA()); // 2 3 4 } 이전에 실행컨텍스트에 의하면 한번 호출했던 함수의 경우 해당 함수가 종료되면 관련 된 변수들도 같이 GC(가비지 콜렉터)에 의해 소거가 되었었다. 하지만 다음..

var es6이전에는 변수를 선언할 때 var를 이용하여 변수를 선언하였다. var의 경우엔 function 단위의 scope를 가진다. 이는 함수안에서만 선언 될 경우에 scope를 가지는 것을 의미한다. if나 for문안에서 var를 선언할 경우 해당 변수는 scope를 if나 for가 아닌 상위의 함수(없으면 전역)를 scope로 가지게 된다. function func() { var a = 1; // func scope } console.log(a) // error for(var i =0; i

WHY? 자바스크립트를 공부하다 보면 여러 개념에 대해서 배우게 된다. 호이스팅, this 등의 개념을 배우게 되는데 해당 개념들에 대해서 왜 이렇게 동작을 할까? 라는 생각이 든다. 이러한 생각을 정리 해주는 것이 실행컨텍스트에 대한 개념을 공부하면서 해결해 보도록하자. 실행컨텍스트란? 실행컨텍스트는 실행할 코드의 정보들을 모아놓은 객체이다. 실행컨텍스트는 스택의 구조로 이루어져 있다. 그리고 실행할 코드의 정보들을 모아 놓았기 때문에 스택에 쌓이는 데이터는 함수를 호출하는 시점부터 쌓이게 된다. 예제 var a = 1; function outer() { function inner() { console.log(a); // undefiend var a = 2; } inner(); console.log(a..

오늘 알아볼 자바스크립트 개념은 this이다. 일반적으로 this를 사용할 때는 인스턴스를 일반적으로 생각하지만 자바스크립트의 경우 상황에 따라 this가 달라지기 때문에 제대로 원리를 이해하지 못하면 생각대로 코드가 작동하지 않는 경우가 발생한다. 최근에 코드를 작성 했을 때 this가 계속 undefined로 동작했던 경험이 있어 왜 동작이 안되냐고 화를 낸적이 기억이 난다. 상황에 따라 달라지는 this에 대해 공부해보도록 한다. 상황에 따라 달라지는 this 최근 코어자바스크립트의 책을 읽으면서 this는 상황에 따라 달라짐을 알 수 있었다. 정확히 언제 달라지느냐를 설명하자면 실행컨택스트에의해 this가 변하게 되는데 실행컨택스트의 경우 함수를 호출 할 때 결정된다. 즉, 함수를 어떻게 호출하는..