로그인 화면 구현에서 아이디 중복확인이라던가 유효성 검사 (아이디, 비번, 이메일 양식을 제대로 입력했는가) 를 검사할 때 어느 순간에 해당 함수를 일으킬 것인가에 대한 이벤트가 필요하다 중복 아이디를 검사할 때 해당 아이디의 input태그를 focusout하는 순간에 중복확인을 검사했는데 다른 개발자가 blur 이벤트를 사용하는 것을 보고 차이점이 궁금했다 둘의 차이는 "버블링 여부"이다. focusout은 버블링이 일어나고 blur는 버블링이 일어나지 않는다. 즉 focusout은 상위 요소에 까지 이벤트가 전달이 되고 blur가 발생하는 요소는 상위 요소(부모 요소)에 이벤트가 전달되는 일이 발생하지 않는 것이다. focusin은 focusout과 마찬가지이고 focus는 blur와 마찬가지이다. ..
HTTP (Hypertest Transfer Protocol) www상에서 웹 서버와 브라우저가 하이퍼텍스트 데이터를 주고받기 위한 통신 프로토콜 기본 TCP/IP포트로 80포트 사용 데이터를 단순 텍스트 형태로 주고받기 때문에 네트워크에서 전송 신호를 가로채는 경우 원치 않는 데이터 유출이 발생할 수 있다 HTTPS (Hypertext Transfer Protocol Secure) HTTP의 보안이 광화된 버전. SSL이나 TLS프로토콜을 통해 세션 데이터 암호화한다. HTTP에서 주고받는 데이터가 암호화되지 않아 쉽게 도난당하는 문제가 있었다. 보안 문제를 해결하기 위해 SSL 도입 (= 현 TLS) 공개키를 공개하여 클라이언트 측에서 암호화된 데이터를 서버로 보내면 서버가 비밀키로 복호화한다. TL..
HTTP HTTP (Hypertext Transfer Protocal)은 인터넷 상에서 데이터를 주고 받기 위한 클라이언트/서버 모델을 따르는 프로토콜 WWW (world wide web)에서 하이퍼텍스트 문서를 교환하기 위해 사용되는 통신규약 TCP/IP 프로토콜 위에서 동작한다. 포트 80번을 사용하여 통신한다 HTML 문서, 이미지, 동영상, 오디오, 텍스트 문서 등 의 모든 종류의 데이터를 전송한다 하이퍼텍스트 기반으로 데이터 전송 = 링크 기반으로 데이터에 접속하겠다 첫 표준은 HTTP/1.1이며 이후로 HTTP/2, HTTP/3이 등장했다. 클라이언트/서버 모델 클라이언트 클라이언트 소프트웨어(ie,crome같은 브라우저)가 설치된 컴퓨터를 이용해서 서버에 요청한다. URI를 통해 서버에 접속..
자바스크립트는 단일 스레드 언어이다. 단일 스레드는 동시에 하나의 작업만 처리할 수 있다. 하지만 실제 자바스크립트는 여러 개의 HTTP 요청을 날리기도 하고, 마우스 클릭과 같은 이벤트, 애니메이션 효과 등 여러 개의 작업을 동시에 한다. 이렇게 동시성과 비동기를 처리할 수 있는 이유는 브라우저나 Node.js 처럼 자바스크립트 엔진을 구동하는 환경 덕분이다. ECMAScript에는 이벤트 루프에 대한 내용이 없다 (참고: meetup.toast.com/posts/89) V8 과 같은 자바스크립트 엔진은 단일 호출 스택 (콜스택)을 사용하며 해당 요청을 순차적으로 스택에 넣어 처리한다. 아래 그림에서 js안에 콜스택이라고 써진 부분이다. 일반 함수 처리는 여기서 처리한다. 출처: https://blog..
async와 defer의 차이점을 까먹어서 다시 공부해서 정리해야겠다고 생각했는데 마침 유튜브에서 보는 개발자분이 설명한 영상이 있어서 참고했다. 동영상: www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2 여기에 잘 설명된 글이 있어서 해당 글을 참고했다. blog.asamaru.net/2017/05/04/script-async-defer/ 브라우저가 파일을 파싱하는 순서 1. html 파일 파싱 2. css 파일 파싱 3. 중간에 javascript파일 만나면 javascript 파싱 모르는 개념이라면 아래글을 참고 2020/09/17 - [FE면접준비] - 브라우저 렌더링 과정 웹 브라우저는 파일을 파..
브라우저 주소창에 주소를 입력한다 (ex. www.naver.com) DNS가 해당 서버가 어디있는 지 찾아 연결해준다. (https가 있다면 https방식으로 통신한다) 서버에서 index.html 파일을 클라이언트로 전송한다 렌더링 엔진의 html 파서와 css 파서가 각각 html,css 파일을 파싱하여 DOM, CSSOM 트리로 변환한다. html파서가 중간에 link태그를 만나면 css를 파싱하며 css 파싱이 끝나면 다시 html파싱을 하여 DOM 트리를 만든다. (css 정보 없음) DOM 트리와 CSSOM트리를 합쳐 render tree를 만든다. (여기서는 스타일 정보가 들어간다) html 파서는 script 태그를 만나면 javascript 엔진으로 제어권한을 넘기고 자바스크립트를 파싱..