본문 바로가기

분류 전체보기321

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.
디자인 패턴 - 어댑터 패턴 다른 곳에서 개발했다거나 수정할 수 없어서 클래스를 바로 사용할 수 없는 경우, 중간에서 변환 역할을 해주는 클래스가 필요하며 그걸 어댑터 패턴이라고 한다. 호환되지 않은 인터페이스를 사용하는 클라이언트 그대로 사용이 가능하며 향후 인터페이스가 변하더라도 변경 내역은 어댑터에 캡슐화 되므로 클라이언트가 바뀔 필요가 없다. 2023. 3. 5.

티스토리툴바