코딩왕랄프👊🏻

Virtual DOM에 대해 알아보기 전에, DOM이 무엇인지 알아보자. DOM이란, Document Object Model 로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. 웹 브라우저는 DOM을 활용해 객체에 자바스크립트와 CSS를 적용한다. 이 DOM 자체는 빠르나, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하기 때문에 이 과정에서 시간이 허비가 된다. 이를 어떻게 해결할까? DOM을 최소한으로 조작해 작업을 처리하는 방법으로 개선할 수 있다. 따라서 리액트는 Virtual DOM 방식을 사용해 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화, 효율적으로 진행한다. 그러나, Virtu..

Rendering은 사용자 화면에 View를 보여주는 것을 의미한다. 리액트는 어떤 방식으로 View를 render하길래 데이터가 변할 때 마다 새롭게 렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할까? 이를 이해하기 위해서는 '초기 렌더링'과 '리렌더링'의 개념을 이해하고 있어야 한다. "초기 렌더링" 어떤 프레임워크를 사용하든, 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 렌더링을 해주는 함수로 render(){..}가 있는데, 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있으며, render는 그 내부에 있는 컴포넌트도 재귀적으로 렌더링하게 한다. 이 최상위 컴포넌트의 렌더링 작업이 끝나면 가지고 있는 정보를 사용..

다양한 자바스크립트 라이브러리가 등장하고 있으나, 요즘 특히 많이 쓰이는 것 중에는 React가 있다. React는 페이스북이 개발한 라이브러리이다. 이 React가 가진 특징과 기능에 대해 알아보자. 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용되나, 구조가 MVC나 MVW인 프레임워크와는 달리 "V(View) 만 신경 쓰는 라이브러리" 이다. 리액트에서 중요하게 다뤄지는 키워드가 있는데, 이는 "컴포넌트" 이다. "컴포넌트"란 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 의미한다. 이것은 재사용이 가능한 API로 수많은 기능들을 내장하고 있고, 각 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다. 또 중요한 키워드로는 "렌더링"이 있다. "렌더링..

파이썬으로 몫과 나머지의 값을 구하려면 어떻게 해야할까? 흔히 몫은 /, 나머지는%로 구할 수 있으나, 더 쉽게 구할 수 있는 방법이 있다. divmod라는 것을 사용하면 한번에 몫과 나머지를 구할 수 있다. 몫, 나머지 = divmod (나눠지는 수, 나누는 수) >>> divmod(11,3) (3, 2) >>> divmod(3,15) (0, 3)

HTML과 자바스크립트는 다른 언어 이므로, HTML에서 자바스크립트를 실행하려면 다음과 같은 적용 방법이 사용된다. 아주 간단하나, 필수적이므로 꼭 잘 기억해 두자. 1. Head 태그 안에서 외부 자바스크립트 파일을 Loading 하는 방식 => 현재 HTML이 브라우저에서 해석되기 전에 별도로 저장한 자바스크립트 파일을 먼저 읽어서 해석하는 방식 2. HTML 태그 안에 Inline 방식 => HTML 태그 안에 자바스크립트 코드가 들어가는 방식 3. Script 태그 안에 삽입 방식 => HTML 안에 자바스크립트 태그를 넣어 그 안에 자바스크립트 코드가 들어가는 방식 4. Body 태그 안에 외부 자바스크립트 파일 Loading 방식 => HTML이 해석되는 중간에 별도로 저장한 자바스크립트 파..

자바스크립트에서 흔희 쓰이는 Alert, Confirm, Prompt 창의 차이에 대해서 알아보자. Alert 창 : 가장 심플한 메시지 창으로, 주로 사용자에게 경고 메시지를 보여줄 때 사용 된다. Confirm 창 : 확인과 취소 버튼을 가진 창으로 확인을 누르게 되면 리턴 값으로 TRUE를, 취소를 누르게 되면 FALSE를 리턴한다. Prompt 창 : 입력 값을 받아서 처리할 때 사용 된다. 대화상자에 input 박스가 있어서 값을 넣고 확인을 누르게 되면 값이 전달된다. 출처 "웹 애플리케이션 개발을 위한 자바스크립트와 Jquery 기초 가이드"