맨땅에 헤딩

스택과 큐는 컴퓨터의 메모리, 자바스크립트의 런타임원리등 공부할 때 자주 등장한 개념이다. 어느정도 익숙한 개념이지만 정확하게 이해하기 위해서 공부해보았다. 스택과 큐는 자료구조를 이해하기 위한 기반이 되며, 이를 통해서 다양한 알고리즘의 구현과 데이터 저장, 관리를 할 수 있다. 따라서 매우 중요한 개념이고 이를 잘 알고 있는 것 또한 중요할 것이다. 스택과 큐의 개념을 정확하게 이해하기 위해서는 먼저 ADT와 DS의 정의에 대한 이해가 필요하다. 그래서 ADT와 DS에 대해서 먼저 알아보고, 스택과 큐에 대해서 알아보는 방식으로 공부하였다. 🧷선행학습 💡 ADT와 DS구분하기 우선 ADT는 abstract data type의 줄임말로, 말 그대로 자료형을 추상적인 개념으로만 나타내는 것이다. 따라서 ..

자바스크립트나 리액트로 코드를 짜다보면 e.target.value와 같이 event를 사용하는 경우가 많다. 이때 사용하는 e의 이벤트는 무엇이며, 어떤 역할을 하는지, 어떻게 활용할 수 있는지를 중점으로 공부하였다. 🧷선행학습 Web Event는 Web API중의 일부이며, 자바스크립트 언어의 일부는 아니다. Web Event를 정확하게 이해하기 위해서는 Web API가 무엇인지 알아야한다. 이전에 Web API에 대해 공부하고 정리하여 포스팅한 적이 있다. window.location ( Web API란? / pathname, search, hash ... ) Web APIs에는 종류가 정말 많은데 오늘은 그 중 window.locaion에 대해 공부했다. 우선 window.location을 이해하기..

1. 렌더링 정의 렌더링이란? 사용자 화면에 뷰를 보여주는것 2. 렌더링 엔진 & 목표 - 웹브라우저마다 다른 렌더링 엔진 - 렌더링 엔진의 목표 사용자 동작으로 인해서 입력발생, 스크롤발생, 애니메이션 동작, 비동기요청으로 인한 데이터로딩등의 상황 3. 렌더링 과정 렌더링엔진은 크게 다음의 과정을 거치는데 이를 Critical Rendrering Path라고 한다. DOM Tree생성 먼저 브라우저에서 사용자가 요청한 웹페이지에 문서를 불러오고 파싱을 한다 1️⃣ 코드는 어휘분석을 통해서 HTML5에 표준으로 지정된 고유한 토큰으로 변환된다 예를 들어 StartTag html이라는 태그는 html이 열렸다라는 의미를 가지고, Endtag body는 body태그가 닫혔다는 의미를 가진다. 2️⃣ 그리고 ..

✔️ 로컬스토리지란? - web storage 객체 중 하나 (나머지하나는 sessionStorage) - 브라우저에 key-value를 저장 - 탭, 창 전체에서 공유됨 - 브라우저를 껐다 켜도 남아있음 - key, vlaue는 반드시 문자열!! 1. sessionStorage와의 비교 로컬스토리지는 web Storage의 일종이다. 브라우저에 저장하는 기능을 한다는 공통점이 있지만 차이점도 존재한다. webStorage에는 sessionStorage도 있는데, 둘의 가장 큰 차이점은 1️⃣저장범위와 2️⃣저장기간이다. 2. 사용이유 1️⃣ 서버로 전송되는 쿠키보다 더 많은 양의 자료 보관 (web Storage 객체는 네트워크 요청시 서버로 전송되지 않는다.) 2️⃣ 페이지 새로고침, 브라우저 다시 ..

Ajax란? (Asynchronous JavaScript and XML) 자바스크립트를 사용하여 ① 브라우저가 ② 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 장점: 웹페이지의 변경에 필요한 데이터만 서버로부터 비동기 방식으로 전송받음 ➡️ Ajax는 기술, 프레임워크, 라이브러리가 아니다. Ajax는 그저 자바스크립트와 (XMLHttpRequest 객체를 사용해서/ Fetch / Axiox) 클라이언트와 서버가 비동기 방식으로 통신하는것을 말한다. 🤔 동작원리 Ajax는 브라우저에서 제공하는 호스트 객체 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위..

자바스크립트의 객체문법을 사용하는 데이터 포맷(저장) 형식 목적: 데이터를 전송하기 위한 수단 / 설정파일 (ex> Vs code extension) 형식: 1️⃣ key, value값으로 이루어짐 2️⃣ {} , [] 괄호를 이용해서 각각의 데이터를 묶음 XML의 단점을 해결하기 우해 고안된 데이터 형식 자바스크립트의 객체 속성과 동일 { "Influencers" : [ { "name" : "Jaxon", "age" : 42, "Works At" : "Tech News" } { "name" : "Miller", "age" : 35 "Works At" : "IT Day" } ] } 서버가 주고 받는 데이터는 한줄로 쭉 되어있다. 이러한 한줄로 쭉 이어진 텍스트들을 구조화하여 나타낼 수 있어야한다. 데이터..