Home
Youngho's Devlog
Cancel

[React] Virtual DOM

virutal dom 을 알아보기에 앞서 dom이란 무엇인가? Document Object Model 의 약자 객체로 문서 구조를 표현하는 방법(html 파일로부터 브라우저 화면을 표현하는 방법) 트리 형태로 구성되며 javascript로 특정 노드의 CRUD 작업이 가능 DOM 자체는 빠르더라도, 요소의 개수가 수 백개, 수천 개로 ...

세미콜론 자동 삽입 ASI

ASIAutomatic Semicolon Insertion(자동 세미콜론 삽입) 이란? 자바스크립트 코드에서 ;(세미콜론) 이 필요한 곳인데도 불구하고, 단 하나의 ;이 누락되면 자바스크립트 프로그램은 돌아가지 않는다. ASI는 자바스크립트 프로그램의 세미콜론(;)이 누락된 곳에 엔진이 자동으로 ;을 삽입하는 것을 말한다. ASI는 새 줄(행바꿈Li...

[Javascript] 웹 스토리지(localStorage, sessionStorage)

자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생긴다. 보통 이럴 때 데이터베이스(DB)서버나 클라우드(Cloud)플랫폼에 데이터를 저장하는 경우가 많을 것이다. 하지만 저장해야할 데이터가 별로 중요하지 않거나,유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있다. 이때...

[Javascript] 가독성 좋은 코드를 위한 function에 주석달기

JavaScript는 type이 불명확하므로 문서화를 통해 그 상세정보를 남겨야 한다. 그러나 소스코드와 분리된 문서는 사실상 그 활용가치가 매우 떨어진다. 소스코드와 일원화된 방식으로 문서화가 되려면 주석 을 사용해야 한다. 아래는 어떤 클래스의 특정함수에 대한 주석을 통한 문서화에 대한 간단한 예시이다. /** * todo 항목을 추가한다. ...

[Javascript] var let const 차이

ES6는 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다. var let const 를 아래와 같은 세 가지 기준으로 비교할 수 있다. 1)변수 값의 변환 2)변수의 유효범위 3)호이스팅 1) 변수 값의 변환 var를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고 있...

[Javascript] innerText와 innerHTML 차이점

innerText와 innerHTML은 단순한 텍스트만 다룰 경우에는 차이가 없어 보인다. 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 차이가 난다. 값 가져오기 (innerText vs innerHTML) element.innerText; element 안의 text 값들만을 가져옵니다. elemen...

[HTML] 인라인요소와 블록요소 구분하기

HTML 태그는 크게 블록 요소(block element)와 인라인 요소(inline-element)로 나누어 진다. 이 부분을 명확히 이해하고 있어야 CSS 를 사용하는데 어려움이 없다. 각 두 요소 모두 적용되는 CSS가 별도로 존재한다. 예를 들어, 인라인 요소는 height 가 적용되지 않는다. 인라인 요소는 width 가 적용되...

[Frontend] jekyll블로그에 codepen 삽입하기

See the Pen hello by jeonyoungho (@jeonyoungho) on CodePen. 출처 https://0xd00d00.github.io/2021/07/06/embedCodepen.html

[개발자 블로그] 5.33 이벤트

2. 이벤트 루프(Event Loop)와 동시성(Concurrency) 브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다. 단일 쓰레드는 쓰레드가 하나뿐이라는 의미이며 이말은 곧 하나의 작업(task)만을 처리할 수 있다는 것을 의미한다. 하지만 실제로 동작하는 웹 애플리케이셩ㄴ은 많은 ...

[개발자 블로그] 5.32 동기식 처리 모델 vs 비동기식 처리 모델

출처 https://poiemaweb.com/js-async