D.JOUNG

리액트의 가장 유명한 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 점이다. 이번 장에서는 가상 DOM이 무엇인지, 그리고 실제 DOM에 비해 어떤 이점이 있는 지 살펴보고 가상 DOM 사용 시의 유의점에 대해서도 알아본다.DOM과 브라우저 렌더링 과정가상 DOM을 공부하기 앞서 DOM(Document Object Model)이 무엇인지부터 살펴본다.DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.브라우저가 웹사이트에 접근 요청을 받으면 다음과 같은 과정을 거친다.브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드한다.브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구성된 트리(DOM)를 만든다.2번..

JSX란?보통 React를 통해 JSX를 많이 배우기 때문에, JSX가 리액트의 전유물이라고 오해하는 경우가 종종 있다. 물론 리액트가 등장하며 페이스북(현 메타)에서 소개한 새로운 구문이지만, 꼭 리액트에서만 쓰라는 법은 없다.JSX는 XML과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법으로 보는 것이 옳다.자바스크립트 표준의 일부가 아니며, V8이나 Deno와 같은 JS 엔진이나 브라우저에 의해 실행되거나 표현되도록 만들어진 구문이 아니다.따라서 JSX 코드를 바로 실행하면 오류가 발생한다. 반드시 트랜스파일러를 거쳐야 한다. JSX의 설계 목적은 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ES로 변환하는 데 초점을 두고 있다.JSX의 정의JSX는 기본적으로 ..

왜 리액트인가?React는 2011년 페이스북의 뉴스피드 페이지에서 처음 선보였다.전자정부 표준 프레임워크의 프런트엔드 개발 도구로 채택된 바 있다. 정부에서 담당하는 프로젝트는 항상 안정성과 유지보수성을 최우선으로 살피기 때문에, React가 그만큼 안정성이 확보됐으며 많은 이들이 널리 쓰고 있음을 시사한다.egovframe-template-simple-reactStackoverflow Tag Trends 에서는 stackoverflow에서 키워드 별 등록된 질문들의 통계를 확인할 수 있다. 아래는 2025년 기준 FE 라이브러리 관련 질문 통계다.https://survey.stackoverflow.co/2024/technology#most-popular-technologies-webframe 에서도 ..

개요최근 렌더링 최적화를 공부하면서 리플로우와 리페인팅 방지에 각별히 신경을 쓰게 됐다. 리팩토링하는 코드 내에서 getBoundingClientRect() 메소드를 자주 호출하는 부가 있는데, getBoundingClientRect()는 아래 포스팅에 정리되어있는 리플로우 유발 메소드 중 하나다.https://gist.github.com/paulirish/5d52fb081b3570c81e3a What forces layout/reflow. The comprehensive list.What forces layout/reflow. The comprehensive list. - what-forces-layout.mdgist.github.com 그런데 성능탭을 열어 타임라인을 살펴봐도 성능에 문제가 될 정도로..

개요 시작 화면에서 마우스 경로를 따라 움직이는 커스텀 마우스를 그리기 위해 태그를 사용하였다. Canvas API의 OffScreenCanvas 인터페이스는 화면에 노출되지 않는 캔버스를 제공하여 Canvas API의 성능 최적화를 돕는다.DOM 작업을 다른 스레드에게 분업하여 병렬 처리를 하면 좋겠지만, 기본적으로 멀티 스레드는 HTML 요소 객체를 참조하거나 수정하는 게 불가능하다. DOM Tree와 CSSOM을 생성하고, Render Tree를 만들고, Render Tree 기반으로 화면을 그리는 일련의 과정은 동기적으로 작동하는 부분이 있기 때문에, 여기에 멀티 스레드가 관여했다가는 순서가 이상하게 꼬일 수 있기 때문이다. 하지만 HTMLCanvasElement( 태그)는 특별히 transfe..

고정폭 글꼴이란?고정폭 글꼴이란 말 그대로 글자의 가로 길이가 일정한 글꼴을 뜻한다. 모노스페이스(mono-space) 글꼴이라고도 부른다. 구글 폰트(Google Fonts)에서 필터링으로 모노 스페이스 글꼴만 검색할 수도 있다. 필터 기능의 Classification 항목을 들여다보면 'Monospace' 버튼이 바로 보일 것이다. 고정폭 글꼴은 결과값을 콘솔에서 출력하는 프로그램을 실행시킬 때 출력 결과의 가독성을 높이는데 많은 도움을 준다. ansi-code와 고정폭 글꼴을 함께 사용하면 눈이 아주 편안한 포멧팅이 가능할 것이다. VS Code 에서 터미널 글꼴 설정그럼 이제 개발자들이 많이들 사용하는 VS Code IDE에서 고정폭 글꼴을 적용해보자. VS Code를 실행한 후 아래 경로로 들어..

작년 말 쯤 공부를 시작했다. 취업을 준비중인 입장이기에 공부할 시간은 널널한 편이었지만, 몇년 전 공부해보려다가 작심삼일 났던 적이 있어 이떻게하면 그 꼴을 피할 수 있을지부터 고민했던 것 같다.   1. 필기 시험 준비 시험을 위한 공부를 한 적이 까마득한 옛날이었기에 '공부하는 법' 조차 가물가물했던 상황. 일단 정석대로 교재부터 골라보기로 했다.  인터넷에 검색해보니 당시 많은 추천을 받던 교재는 주로 수제비의 문제집들이었다. 하지만 이론서를 구입해 정독하기에는 너무 시간이 오래 걸릴 것 같았고, 다시한번 작심삼일의 길을 갈 것이 뻔해보였다. 그러던 중 내 눈에 들어온 책이 이기적 출판사의 '정보처리기사 필기 핵심이론+문제집' 책이었다.  사실상 내 필기&실기 통틀어 내 합격에 가장 큰 공헌을 해..

동적 타입 언어와 정적 타입 언어의 차이는 다른 코딩 일기 포스팅에서 몇 번 언급한 적이 있다. 하지만 이 둘의 차이를 좀 더 구체적으로 알고싶어 챗지피티의 힘을 빌렸다. 정적 타입 언어인지 동적 타입 언어인지는  변수의 타입이 어느 시점에 결정되느냐에 따라 결정된다. 컴파일 타임(파일 수준)에 결정되면 정적 타입 언어, 런타임(앱 실행)에 결정되면 동적 타입 언어이다.  애초에 프로그래밍에서 정적, 동적 이라는 단어를 사용했을 때의 의미는 대부분 위의 의미와 일맥상통한다.  정적 타입 언어 (Statically Typed Languages) 는 앱 실행 전 모든 변수의 타입이 미리 설정되고, 컴파일러가 타입 체크를 수행해 오류를 미리 잡아낼 수 있어 매우 안정적이다. 하지만 동적 타입 언어에 비해 유연..

즉시 실행 함수란 함수를 정의하고 바로 실행하는 패턴이다. 익명함수를 정의한 후 바로 실행된다. 구조는 다음과 같다. (function (BoardStatus) { ... })(...); (function (BoardStatus) { ... }) 부분에 함수가 정의되고, (...) 부분에서 실행된다. 익명함수이기 때문에 해당 함수는 다시 재활용할 수 없다. 타입스크립트에서는 자료형(타입)을 지정하는 방식으로 enum 자료형을 지원하고 있다.  enum 자료형은 타입 스크립트가 자바 스크립트로 컴파일 될 때 즉시 실행함수 형태로 변환된다. //타입스크립트 표현식export enum BoardStatus { PUBLIC = 'PUBLIC', PRIVATE = 'PRIVATE',}//javascript 컴..

자바스크립트와 파이썬은 C++나 JAVA와 달리 변수 타입이 동적으로 설정된다. 변수 타입이 런타임에서 결정된다는 뜻이다. 때문에 파일 수준이나 멤버 수준에서 정적으로 타입을 지정하는 C++나 JAVA와 달리 함수에서 동적으로 클래스의 멤버를 수정하거나 추가하는게 가능하다. 예를 들면 다음의 예시다.  #동적으로 클래스의 멤버 변수를 추가하는 경우class MyClass: passobj = MyClass()obj.new_attr = "New Attribute"print(obj.new_attr) # 출력: New Attribute#클래스를 함수 안에서 정의하는 경우def create_class(): class InnerClass: def __init__(self, value): ..