최신 글
-
리액트 컴포넌트 패턴: 프레젠테이션 vs 컨테이너
리액트 애플리케이션을 개발할 때, 컴포넌트를 어떻게 구성하고 관리할지에 대한 선택은 중요합니다. 이 글에서는 리액트 컴포넌트의 두 가지 주요 패턴인 "프레젠테이션 컴포넌트"와 "컨테이너 컴포넌트"에 대해 알아보겠습니다. 프레젠테이션 컴포넌트 프레젠테이션 컴포넌트는 주로 UI를 렌더링하는 데에 집중합니다. 이러한 컴포넌트는 데이터나 상태 관리보다는 UI 요소의 표현에 관심이 있습니다. 주로 함수형 컴포넌트로 작성되며, props를 통해 데이터를 받아들이고 UI를 렌더링합니다. import UserItem from './UserItem' import './UsersList.css' const UsersList = (props) => { if (props.items.length =..
2024.02.19
-
React Router v5에서 v6로의 업그레이드: API 단순화와 새로운 기능 소개
react-router-dom v5 → v6 react-router-dom v5 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'; Switch: Switch 컴포넌트는 그 안에 포함된 Route 중에서 첫 번째로 매칭되는 경로만 렌더링합니다. 여러 Route 중에서 하나만 렌더링하고자 할 때 사용합니다. 일반적으로 정확한 경로 매칭을 위해 사용됩니다. Route: Route 컴포넌트는 URL 경로와 컴포넌트를 매핑합니다. 특정 URL 경로가 요청되었을 때 해당 경로에 매칭되는 컴포넌트를 렌더링합니다. path prop을 통해 URL 경로를 지정하고, component 또는 render prop을 통해 렌더링할 컴포넌트를 ..
2024.02.15
-
useState() 리액트 상태 관리 마스터하기
1. useState 사용하지 않을때는? const App = () => { // 배열선언 const courseGoals = [ { id: 'cg1', text: 'Finish the Course' }, { id: 'cg2', text: 'Learn all about the Course Main Topic' }, { id: 'cg3', text: 'Help other students in the Course Q&A' } ]; // 배열안에 값 추가하는 이벤트 선언 const addNewGoalHandler = newGoal => { courseGoals.push(newGoal); console.log(courseGoals); }; return ( Course Goals ); }; NewGoal 컴포넌트..
2024.02.13
-
React 동작 과정
React 동작 설명 1. React 대화형 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리로 사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 방법을 제공합니다. 1-1. 라이브러리 이란? React가 UI를 구축하는데 유용한 기능(API)을 제공하지만 애플리케이션에서 이러한 기능을 사용할 위치는 개발자에게 맡긴다는 의미를 나타낸다 2. 사용자 인터페이스 UI 렌더링 사용자가 웹페이지를 방문하면 서버는 다음과 같이 HTML 파일을 브라우저에 반환한다. 브라우저는 HTML 을 읽고 DOM(문서 개체 모델)을 구성한다 2-1. DOM 이란? DOM 은 HTML 요소의 객체 표현이다. 코드와 사용자 인터페이스 사이의 브리지 역할을 하며 상위 및 하위 관계가 있는 트리와 같은구조를 갖는다 ..
2024.01.08
-
React18 변경한 부분
React18 변경점 1. useTransition 블로킹 렌더링 문제 한번 렌더링 연산이 시작되면 멈출수 없음 대형 화면 업데이트의 경우 렌더링 되는 동안 페이지 지연이 발생 Blocking useTransition: useTransition 이전과 다르게 끊김없이 응답하는것이 보여진다. useTransition: isPending isPending 사용해서 Pending 상태를 나타낼수 있다. debounce debounce 상태면 사용자 입력후에 일정시간뒤에 화면이 업데이트 된다. 만약 사용자 입력이 길어진다면? 사용자 업데이트는 계속 지연되게 된다. throttle throttle 이용해서 3초주기로 화면을 그리게 된다면? 그런데 3초동안 계속입력하지 않고 뛰엄뛰엄 입력을 하게 된다면? 의미없이 ..
2023.12.01
-
Web_components with Lit
Web Components 와 Lit 개념과 사용법 이제는 웹 개발에서 코드 재사용이 얼마나 중요한지를 모두가 알고 있습니다. 그러나 사용자 정의 UI 컨트롤을 만들거나 웹 페이지의 구조를 복잡하게 만들지 않고 코드를 재사용하는 것은 전통적으로 어려웠습니다. 사용자 정의 마크업 구조를 렌더링하려면 복잡한 HTML, 스타일 및 스크립트를 작성해야 했으며, 이를 여러 번 사용하면 페이지가 혼란스럽게 엉망이 될 수 있었습니다. 하지만 여기에 해결책이 있습니다 - Web Components입니다. Web Components는 코드 충돌을 걱정하지 않고 재사용 가능한 UI 컴포넌트를 만들 수 있도록 도와주는 기술 집합으로, 세 가지 핵심 기술로 구성됩니다. 1. Custom Elements (사용자 정의 요소):..
2023.11.08
-
Three.js 렌더링 성능 최적화: 웹 3D 그래픽의 성능을 향상시키는 전략
소개 Three.js를 사용한 웹 3D 그래픽은 멋진 시각적 효과를 제공하지만, 렌더링 성능을 최적화하지 않으면 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 이 블로그 글에서는 웹 3D 그래픽 프로젝트에서 렌더링 성능을 향상시키기 위한 다양한 전략과 최적화 기술을 살펴봅니다. 1. 모델 최적화: 모델의 복잡성은 FPS에 가장 직접적인 영향을 미치는 요소 중 하나입니다. 모델이 더 복잡하면 렌더링 및 계산에 더 많은 시간이 소요될 수 있습니다. 따라서 모델의 복잡성을 최적화하고 필요하지 않는 세부 정보를 제거하는 것이 중요합니다. 또한 LOD를 사용하여 렌더링 중에 더 낮은 해상도 또는 단순화된 모델을 사용합니다. 이는 원격 물체 또는 화면에서 멀리 있는 물체의 경우에 성능을 향상시킬 수 있습니다. ..
2023.11.02
-
threejs scaling-performance
threejs scaling-perfomance WebGL을 실행하는 것은 장치의 성능에 따라 상당히 비쌀 수 있다. 이를 완화하려면, 특히 약한 옵션을 포함하여 다양한 장치에서 애플리케이션을 사용할 수 있도록 하려면 성능 최적화를 살펴봐야 한다. 1. 주문형 렌더링 three.js 앱은 일반적으로 초당 60번 실행되는 게임 루프에서 실행된다. 이는 일반적으로 배터리를 가장 많이 소모하고 팬이 회전하게 만드는 원인이다.그러나 장면의 움직이는 부분이 정지되도록 허용되면 렌더링을 계속하는 것은 낭비가 된다 이러한 경우 필요할 때만 렌더링되는 주문형 렌더링을 선택할 수 있다 이렇게 하면 배터리가 절약되고 시끄러운 팬을 억제할 수 있다. 컬러 그레이딩 demand 옵션은 구성 요소 트리 전체에서 소품 변경이 감..
2023.10.23
-
JavaScript 와 ECMAScript 의 탄생
JavaScript 와 ECMAScript 의 탄생 1. JavaScript 의 등장 1993. MOSAIC 최초로 널리 인기를 얻은 브라우저 1994. Netscape Navigator 마크 앤드리슨 Netscape Navigator 공개 마크 앤드리슨은 동적인 웹사이트 위한 스크립트 언어가 필요하다고 생각했다. 브랜든 아이크를 고용 1995. JS 탄생 브랜든 아이크는 여러가지 언어에서 아이디어를 얻어 시제품 완성 (JS) 약 10일 소요가 됐다. 2. 브라우저 전쟁과 ECMAScript 의 등장 1995~2001. 1차 브라우저 전쟁 1996년 3월 Netscape Navigator → JavaScript 공개 1996년 8월 IE → JScript 공개 적당히 JavaScript 호환되는 JScr..
2023.10.21
-
프론트엔드 성능 측정 및 최적화
프론트엔드 성능 측정 1. 프론트엔드에서의 성능이란? 웹 화면을 구현하고 서버로부터 데이터를 받아오는 과정에서 리소스들을 사용자들에게 빠르게 보여줄수 있는것 성능 == 속도 그러면 왜 프론트 엔드에서 성능은 중요할까? 성능이 중요한 이유 사용자 유지 사용자 경험 전환율 향상 비용 절감 결국 웹사이트의 성능이 좋지않으면 사용자가 떠나게된다. 페이지 로드시간이 길 경우 페이지 로드 시간 1~3초 는 이타율이 32% 증가 페이지 로드시간이 개선될 경우 핀터레스트는 대기시간 40% 줄였을때 엔진 트래픽 가입수 15% 증가 Vodafone 은 LCP를 31% 개선하여 8% 더 많은 판매를 달성 야후! 은 CLS를 수정하여 불량 페이지가 98% 감소하고 세션당 페이지 조회수가 15% 증가 AliExpress는 CL..
2023.10.14