티스토리

내 맘대로 정리정리

검색하기

블로그 홈

내 맘대로 정리정리

ssongs.tistory.com/m

song 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Browser, reflow/repaint 브라우저 기본 구조 User Interface: 주소 표시줄, 뒤로가기, 앞으로가기, 북마크 등 page를 제외한 browser의 모든 부분 Browser Engine: User Interface와 Rendering engine 사이의 동작을 제어 Rendering Engine: 요청한 contents를 화면에 표시하는 기능을 담당 (HTML, CSS 등을 파싱하여 표시) Networking: HTTP 요청 등의 network 통신 기능을 담당 Javascript Interpreter: js code 파싱 및 실행을 담당 UI Backend: checkbox, button 등 기본 element의 UI를 담당. OS의 UI method에 의존한다. (windows, max 버튼 다름) Data Stora.. 공감수 0 댓글수 0 2022. 7. 27.
Event bubbling & capturing Event propagation Element를 click하거나 하는 방법으로 event가 생성된다. 이때 이 event는 단순히 생성한 요소(target)에서 생성되는 것이 아니라 capturing, bubbling 단계를 통해 전파된다. DOM 이벤트의 흐름엔 다음과 같은 세 가지 단계가 존재한다. capturing phase: event가 하위 요소로 전파되는 단계 target phase: event가 실제 target 요소에 전달되는 단계 bubbling phase: event가 상위 요소로 전파되는 단계 예를 들어 라는 element에서 event가 발생하면 생성된 event는 최상위 element인 window에서부터 하위 element로 전파되어 target까지 도달한 뒤에, 다시 상우 el.. 공감수 0 댓글수 0 2021. 9. 8.
Web socket ws://www.google.com wss://www.google.com Web socket Web socket은 HTTP와 같은 일종의 protocol이다. web socket이 나오기 이전엔 언제나 사용자(browser)의 요청에 의한 응답으로 데이터를 갱신해야 했다. 하지만 이를 위해 사람이 뭔가를 누른다거나 일정 시간 주기로 요청을 보내는 것은 불필요한 자원낭비가 될 수 있다. 예를 들어 어떤 상태를 모니터링하는 페이지가 있을 경우, client의 요청 없이 server로부터 데이터만 받아와도 전혀 문제가 되지 않는다. 이런 문제를 해결하기 위해 web socket이 탄생했다. Web socket은 서버와 브라우저 사이의 양방향 소통이 가능하다. 브라우저는 서버가 보내는 데이터를 수신할 수 있고 .. 공감수 0 댓글수 0 2021. 8. 10.
HTTP HTTP: Hyper Text Transfer Protocol HTTP는 TCP/IP를 기반으로하는 web messenger이며 image, videios, document 등을 전달할 수 있다. 초기에는 오직 html document를 위해서 만들어 졌으나 현재는 매우 대중적이고 편리하고 빠른 data 전송 방법이다. Important feature client, server가 읽을 수 있는 모든 종류의 data를 지원한다. 매 request & response 마다 새로운 tcp/ip connection이 생성된다. (real world에서는 효율성을 이유로 재사용함) stateless: client와 server는 request 내용으로만 서로 정보를 교류한다. 공감수 0 댓글수 0 2021. 8. 10.
Local storage, Session storage, Cookie Local storage client의 computer에 저장한다. key/value pair로 저장하며 value는 string만 가능하다(object도 serialization 해야함). expiration date가 없으며 삭제될 때 까지 계속 유지된다. JS와 HTML로부터 접근할 수 있고, user도 조작할 수 있다. No expiration date 5MB data is never transffered to the server plaintext, not secure only string data, need to be serialized can only be read on client-side Session storage 동일한 site에 접속하더라도 각각의 tab마다 생성되는 저장소이다. se.. 공감수 0 댓글수 0 2021. 7. 27.
Javascript 동작 원리 Call stack function first() { second(); console.log('first'); } function second() { third(); console.log('second'); } function third() { console.log('third'); } first(); third second first jacascript에서 일반적인 함수의 (depth가 있는)호출은 stack구조로 실행되며 함수의 execution context가 stack에 쌓인다. (동일 depth에 first, second, third가 있다면 first push, first pop, second push, second pop, third push, third pop 순으로 동작) 콜백 처리 (C.. 공감수 0 댓글수 0 2021. 7. 13.
HTTPS HTTP: 인터넷 상으로 전달(요청)되는 data의 형식 (통신 규약) HTTPs: HTTP Secure 뭐가 좋은가? 1. 인터넷을 타고 정보를 보낼 때 이 정보를 알 수 없게 암호화해서 보낸다. (ex password) 2. 안전한 site임이 보장된다. (기관으로부터 인증된 site만 https 사용 가능) 대칭키, 비대칭키 https의 동작 전에 대칭키와 비대칭키(공개키)의 동작 방식을 알아야한다. 둘은 공통적으로 네트워크 상에서 데이터를 주고 받을 때 제 3자로 부터 데이터를 지키기위한 암/복호화 방식이다. 대칭키 방식은 client와 server가 동일한 key를 공유하고 해당 key로 암호화 및 복호화를 할 수 있다. 문제는 이 key만 알면 누구나 복호화가 가능한 점이다. 맨 처음 key를.. 공감수 0 댓글수 0 2021. 7. 12.
Cookie, Session Session Server가 들고 있는 data이다. client로부터 요청이 오면 session id를 발급하고 cookie에 저장하지 못하는 민감한 정보를 session id와 매핑해 저장하고 있는다. session id는 client에게 전달되고 client를 이 id를 cookie에 넣어 저장한 뒤 server에 접근할 때마다 들고 온다. (client 식별 용) Cookie 내가(browser) 들고 있는 data이다. 변경이 쉽고 보안에 취약하기때문에 민감하지 않은 정보를 저장하는데 쓰인다(session id, 로그인 id 자동완성, 오늘 하루 안보기 등). cookie를 날렸을 때 page에서 login이 해제되는 것은 login에 대한 정보가 날라가는 것이 아니라(이 정보는 session이.. 공감수 0 댓글수 0 2021. 7. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.