React Elements 의 특징

1. immutable (불변성 ) 즉 Elements가 불변성의 특징을 가진다는 것은 Elements 생성후에는 chiledren이나 attributes를 바꿀 수 없다는 것을 의미한다. 붕어빵틀에 붕어빵속에 슈크림이 들어가던 팥이 들어가던 틀어 구워져서 만들어지기 전에는 다양한 붕어빵이 될 수 있지만 한번 슈크림이 들어가서 구워지면 그 속을 다시 팥으로 바꿀 수 없는 것과 마찬가지이다. 2. Root DOM Node 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다. 반면에 기존에 있던 웹사이트에 추가적으로 React를 연동하게되면 여러개의 분리된 수많은 Root DOM node를 가지게 될 수 도 있다. Root dvi에 실제로 React Elements를 랜더링 하기 위해서는 다..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

React - Rendering Elements와 React.createElements() 함수에 대해서

React Elements React의 official document를 참고하면 다음과 같은 내용을 볼 수 있다. Elements are the samllest building blocks of React apps. 즉 리액트 앱을 구성하는 가장 작은 블록을 Elements라고 한다. 아래의 사진과 같이 우리가 크롬에서 개발자 도구로 Elements 탭에서 보는 것들은 DOM Elements이다. 그렇다면 React Elements란 무엇일까? 너무나 심플하게도 Virtual DOM에 있는 Elements 를 React Elements라고 한다. 결국 React Elements는 DOM Elements의 가상표현이라고 볼 수 있다. 다만 DOM Elements는 React Elements에 비해서 많은..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

JSX의 개념과 장점

JSX(JavaScriptXML)란? A syntax extension to javaScript : 자바스크립트의 확장 문법 이라는 뜻으로 JavaScript에 XML을 추가하여 확장한 문법이다. 다음의 기초적인 JSX 코드 예시를 보자 const element = Hello, world! 뭔가 자바스크립트 코드같은데 대입연산자 옆에를 보면 HTML코드가 들어가 있다. 이와 같이 Javascript와 HTML코드를 일정한 문법규칙을 가지고 혼용해서 사용할 수 있는 문법이 JSX 문법이다. JSX는 이랙트로 프로젝트를 개발할 댸 사용되므로 공식적인 자바스크립트 문법은 아니다. 또한 브라우저에서 실행하기 전에 바벨이라는 것을 사용하여 일반 자바스크립트 형태의 코드로 변환되기 때문에 우리가 JSX코드로 작성한..

• format_list_bulleted React
• · 2022. 8. 28.
• textsms

SPA(SinglePageApplication) 와 React에 대해서

SPA 규모가 큰 웹사이트의 경우 수백개의 웹페이지가 존재하는데 이것을 각 페이지마다 HTML로 만드는 것은 상당히 비효율적이고 관리하기 힘들다. 그래서 하나의 HTML에다가 사용자가 특정 페이지를 호출할 때 그 HTML에다가 내용을 채워서 보내주는 것이 SPA이다. 이러한 SinglePageApplication을 만드는데 가장 많이 쓰이는 javascript 라이브러리 중 하나가 바로 React이다. React의 장점 1. 빠른 업데이트와 렌더링 속도 React에서는 빠른 업데이트를 위해서 Virtual DOM이라는 것을 사용하는데 말 그대로 가상의 DOM인데 React JS는 메모리에 Virtural DOM를 보관하고 유저가 보고 있는 Real DOM 동기화한다. 기존의 방식은 DOM을 직접 수정하는..

• format_list_bulleted React
• · 2022. 8. 27.
• textsms

Springboot + react 조합의 프로젝트 생성하기

개발환경 - IDLE : IntelliJ - Java : OracleJDK 17 - node.js : 16.17 version - gradle 프로젝트 - mariaDB 1. 생성한 Springboot 프로젝트 의 src/main 디렉토리에 React Project생성 (Spring boot 프로젝트 생성방법은 구글링하면 Spring.io에서 제공하는 initializr 사용법이 있다.) npx create-react-app 프로젝트명 이때 프로젝트명에는 대문자를 사용할 수 없다. react project 가 잘생성되었다면 아래와 같이 생성한 디렉토리가 보일 것이다. 2. 생성한 React Project의 Proxy 설정 로컬 개발 환경에서 본인이 별도의 설정을 따로하지 않았다면 React 프로젝트는 3..

• format_list_bulleted Spring
• · 2022. 8. 27.
• textsms

WebSocket vs WEBRTC 개념정리

WebSocket 보통 실시간으로 데이터를 전송해야하는 기능( ex :스트리밍서비스, 채팅 서비스)을 구현하기 위해서는 WebSocket을 통해서 기능을 구현한다. 그런데 이러한 WebSocket은 서버의 성능이 중요하다는 문제점이 존재한다. 특히 WebSocket에서는 서버의 메모리 성능이 매우 중요해지는데 모든 통신을 추적하기 때문이다. 서비스를 사용하는 유저가 많으면 많을 수록 더욱더 높은 메모리를 요구하게 되고 메시지를 받으면 다른 유저에게도 해당 메시지를 리얼타임으로 포워딩해야하기 때문에 서버에 수많은 커넥션이 오고 있다면 딜레이가 발생할 수 있다. 이러한 문제점을 해결하기 위해서 등장한 개념이 바로 WEBRTC이다. WEBRTC WEBRTC(WebRealTimeCommunication)는 브라..

• format_list_bulleted 네트워크
• · 2022. 8. 27.
• textsms