React Component 깜빡임을 없애보라.

React를 사용하여 웹페이지를 만들면서 익숙해지기 시작하면 가장 먼저 만나는 문제가 Rerendering 문제입니다. 기능이 동작하는 것 같으나 느낌상, 또는 실제로 화면이 깜빡이는 느낌이 오는 건 나만의 문제는 아닐 겁니다.깜빡이는 하위 컴포넌트버튼 이벤트를 사용해서 State를 업데이트할 수 있는 컴포넌트입니다.import React, { useState } from 'react';const ChildComponent = ({ text }) => { console.log('ChildComponent rendered'); return {text};};const ParentComponent = () => { const [count, setCount] = useState(0); return ( ..

• format_list_bulleted Frontend
• · 2024. 7. 21.

Conditional Rendering Component (조건부 렌더링)을 위한 컴포넌트

React 개발을 하다 보면, 특정 조건에 따라 다른 컴포넌트를 렌더링해야 할 경우가 자주 발생합니다. 이런 상황을 효율적으로 처리하기 위해, 여러분이 직접 조건부 렌더링을 수행하는 ConditionalComponent를 만드는 방법을 알아보겠습니다. 특히, TypeScript를 사용하여 타입 안정성을 유지하면서도 사용하기 쉽고 직관적인 구조를 제공하는 방법에 초점을 맞추겠습니다. 기존의 조건부 렌더링(Conditional Rendering) 방식 React에서는 보통 && 연산자 또는 삼항 연산자를 사용하여 조건부 렌더링을 수행합니다. && 연산자를 사용하는 경우, 조건이 참일 때만 컴포넌트를 렌더링합니다. 예: condition && 삼항 연산자를 사용하는 경우, 조건에 따라 두 개의 다른 컴포넌트 ..

• format_list_bulleted Frontend
• · 2024. 4. 7.

Cross-Domain 문제 바로 알기

자바스크립트 보안 정책 바로알기! Same Origin Policy웹 리퀘스트 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티만 읽을 수 있다. 출처 = 프로토콜 + 호스트 + 포트 Cross Domain전제조건 현재 웹페이지의 주소는 http://www.ryanjin.net 이다. http://www.ryanjin.com의 페이지에서 http://www.google.com의 Rest API 를 호출하여 데이터를 가져오려고 한다. 결 론서버의 도메인, 정확히 말하면 위에서 언급한 출처가 다를 경우 cross-domain 문제가 발생한다. 이러한 cross-domain은 서버 공격 및 보안 취약성을 갖게 되므로 서로 신뢰할 수 있는 경우에만 이를 허용하는 서비스를 구축하는 것이 일반적이다.Cros..

• format_list_bulleted Frontend
• · 2016. 1. 22.