본문 바로가기

Web Study124

SOAPLE 처음 만난 리액트 - Rendering Elements 리액트의 Elements 리액트를 구성하는 가장 작은 블록들을 의미 DOM 요소의 가상 표현이 리액트 요소라는 것을 알 수 있다. 실제 DOM 요소는 리액트 요소보다 더 많은 정보를 가지고 있으므로 크다. 상대적으로 리액트 요소는 화면에서 보이는 것들을 기술하는 것이므로 작다. React의 요소는 자바스크립트 객체 형태로 존재(불변성)한다. 한번 생성된 요소는 children이나 속성을 변경할 수 없다. ReactDOM.render(리액트Element, HTMLElement) 즉 위 함수는 리액트 요소를 HTML 요소(DOM 요소)로 렌더링하는 것임 import React from 'react'; function Clock(props) { return ( 안녕 리액트 현재 시간 : {new Date()... 2023. 3. 6.
SOAPLE 처음 만난 리액트 JSX JSX 란? JavaScript eXtension -> JS + XML/HTML const el = Hello, world!; 기본적인 React로 요소 만들기 React.createElement( type, // 요소나 리액틑 컴포넌트 [props], // 속성 [...children] // 요소가 포함하고 있는 자식 요소들 ) JSX 의 역할 // JSX를 사용하지 않은 코드 class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, { toWhat: `World.. 2023. 3. 5.
SOAPLE 처음 만난 리액트 (1 ~ 5, 6 ~ 7, 8 ~ 9) SPA (Single Page Application) 모던 웹의 패러다임, 단일 페이지로 기존 서버 사이트 렌더링과 비교하여 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있다. 웹 앱에 필요한 모든 정적 리소스를 한번에 다운로드하여 페이지 간 이동 시 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있다. 전체 페이지가 아닌 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브앱과 유사한 UX를 제공할 수 있으므로 모바일 웹에 최적화 된 방식이기도 하다. 하지만 필요한 모든 정적 리소스를 최초에 1번만 다운로드하기 때문에 초기 구동속도가 느린 편이며 SEO(검색엔진 최적화) 문제가 존재한다. SPA은 서버 렌더링 방식이 아닌.. 2023. 3. 5.
바닐라 JS 크롬 앱 만들기 (6~8) Math.random() 과 Math.floor() 를 사용하여 랜덤 명언과 랜덤 배경화면을 구현 배열에서 난수로 가져오는 것은 동일 했음. const quotes = [ { quote: "명언1", author: "저자1", }, { quote: "명언2", author: "저자2", }, { quote: "명언3", author: "저자3", }, { quote: "명언4", author: "저자4", }, { quote: "명언5", author: "저자5", }, ] const quote = document.querySelector('#quote span:first-child'); const authors = document.querySelector('#quote span:last-child');.. 2023. 2. 27.

티스토리툴바