JSX는 HTML 문법과 자바스크립트 문법이 결합된 문법이라고 볼 수 있다. JSX는 다음과 같은 특징을 가진다. React 엘리먼트(element) 생성 JavaScript를 확장한 문법 JSX는 React.createElement의 syntactic sugar이다. {isNew ? 'Nice to Meet you' : 'Hello'} 위의 JSX 코드를 babel로 실행하면 다음과 같이 변한다. // babel 실행 결과 React.createElement("div", { className: "greeting", color: getColor() }, isNew ? 'Nice to Meet you' : 'Hello'); } JSX에서 중괄호를 열면 자바스크립트의 표현식을 사용할 수 있다. 여기서 중요한..
리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다. React ..
Custom DOM Library DOM API를 통해 요소 노드를 불러오는 것은 꽤나 번거로운 일이다. 이를 해결하기 위해 Lv.1-1 자동차 경주 미션에서 jQuery 스타일로 코드를 작성하는 방법을 배웠다. 그리고 강의 시간에 준이 이보다 더 개선된 형태의 custom DOM library를 만들어봐도 좋을 것 같다는 이야기를 해주었다. 페어였던 카일이 주도하여 custom DOM library를 만들었고 이후 좀 더 코드를 개선하였다. (Thanks to 카일) export const $ = (() => { const constructor = function (selector) { if (!selector) { return; } this.targets = document.querySelectorA..
이벤트를 바인딩한 DOM 요소가 삭제되는 경우, 바인딩 된 이벤트는 어떻게 되는지에 대해 알아보도록 하자. 우선, 이 글은 정확한 정보 전달을 위한 글이 아님을 밝힌다. 정보보다는 초짜 개발자가 어떻게 궁금증을 해소하기 위해 고군분투 했는지에 대해 쓴 글이므로 넓은 마음과 아량으로 글을 읽어주면 좋을 것 같다 😂 이 글은 Garbage Collection에 대한 기본적인 내용을 알고 있어야 이해하기 수월하므로 만약 Garbage Collection에 대한 이해가 부족하다면 아래의 글을 읽어보길 추천한다 👍👍👍 자바스크립트의 메모리관리 - JavaScript | MDN 자바스크립트의 메모리관리 C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트..
안녕하세요 :) 이번에는 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 알아보도록 하겠습니다. 먼저, HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블입니다. 따라서 둘 다 length 프로퍼티를 가지므로 객체를 배열처럼 접근할 수 있고 반복문을 돌 수 있습니다. 그러나 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드는 사용할 수 없습니다. (ex. map, forEach, reduce 등등) 다음으로는 HTMLCollection과 NodeList에 대해 하나씩 살펴보도록 하겠습니다. HTMLCollec..
이번 주제는 우리가 작성한 코드 혹은 서버에 요청한 코드가 어떻게 화면에 표시되는지에 대해 알아보겠습니다. 사용자가 볼 수 있는 화면을 구성하기 위해 브라우저는 HTML, CSS, Javascript로 작성된 텍스트 문서를 파싱하여 브라우저에 렌더링을 합니다. 벌써부터 낯선 단어가 두 개나 등장했습니다. 하나씩 차근차근 알아보도록 할게요. 먼저, 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리를 생성하는 일련의 과정을 말합니다. 여기서 토큰은 문법적인 의미를 가지며, 문법적으로 나눌 수 없는 코드의 기본 요소를 의미합니다. 쉽게 설명해서 파싱은..
1. DOM은 왜 필요할까? 웹 사이트는 크게 세가지의 요소로 구성됩니다. 먼저, HTML은 웹 페이지의 제목, 이미지, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담당하고 있습니다. 두번째로, CSS는 HTML이 실제 표시되는 방법 (색상, 레이아웃, 크기, 폰트 등)을 지정하여 콘텐츠를 꾸미는 정적 언어이며 웹의 시각적인 표현을 담당합니다. 마지막으로 Javascript는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어로 웹 문서를 더욱 동적으로 처리할 수 있도록 도와줍니다. 여기까지는 웹을 조금이라도 공부하셨던 분이라면 대부분 알고 있는 내용이라고 생각됩니다. 그러나 혹시 이런 생각을 해보신 적 있나요? 자바스크립트에서 어떻게 확장자가 다른 HTM..
- Total
- Today
- Yesterday
- 백준
- 리액트 리덕스
- 인사이트
- 댓글 모듈
- props를 변경하지 못하는 이유
- 리덕스 썽크
- mkcert
- 리액트 리스트 key
- Browser Router
- 파이썬
- contentEditable focus
- localhost https
- 리액트 리스트 키
- props를 변경하지 않는 이유
- 프론트
- 1463
- Hash Router
- 우테코
- 리액트 props
- Redux Thunk
- 우아한테크코스
- 리액트 키
- 리액트 동작원리
- 프론트엔드
- 리액트 jsx
- Python
- 다라쓰
- 브라우저 라우터
- 해쉬 라우터
- React key
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |