FrontEnd/React.js37 [React.js] SWR(stale-while-revalidate)에 대하여 SWR이란 무엇인가? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. 왜 사용하는 가? 최상위 레벨 컴포넌트에서 useEffect를 사용해 데이터를 가져오고, props를 이용해 자식 컴포넌트에 전달하는 방법으로 서버의 데이터를 로컬 상태변수로 사용이 가능하다. // 페이지 컴포넌트 function Page() { const [user, setUser] = useState(null) // 데이터 가져오기 useEffect(() => { fetch('/api.. 2022. 2. 16. Virtual DOM, 가상 돔 이란? DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. DOM의 문제점 DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한, 최근 모던 웹은 SPA(Single Page Applicat.. 2022. 1. 14. [React.js]Recoil selector 비동기 처리 에러 Error: App suspended while rendering, but no fallback UI was specified. Add a component higher in the tree to provide a loading indicator or placeholder to display. const [data, setData] = useRecoilState(exRecoilSelecter); 위와 같이 미리 선언된 selector를 사용하기 위해서 useRecoilValue를 통해 접근할 시, 해당 에러가 발생한다. 비동기 처리 시(loading, 랜더링할 데이터가 도착하기 이전) 보여줄 fallback UI가 없다는 에러메시지이다. 해결 방법은 아래와 같다. 1. i18n.js 구성 변경(react.. 2022. 1. 13. [React.js] 빌드 시스템 정리 Babel, 바벨 크롬, 사파리, 파이어 폭스와 같은 에버그림 브라우저(Evergreen browser, 사용자의 업데이트 없이도 최신 버전으로 자동 업데이트를 수행하는 모던 브라우저)는 거의 대부분이 ES6 사양을 구현하고 있다. 하지만 인터넷 익스플로어(IE) 11의 ES6 지원 비율은 약 11%로 현저히 낮다. 또한, 매년 새롭게 도입되는 ES6 이상의 버전은 브라우저에 따라 지원이 제각각이다. 따라서 ES6+ 사양을 이용해 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발환경을 구축하는 것이 필요하다. 특히, 모듈의 경우 모듈 로더가 필요하다. Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하.. 2022. 1. 5. [React.js] React checkbox 에러 Warning Message Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. Warning Message가 발생하는 이유 onClick 핸들러와 checked 속성을 설정하는 코드에서 위와 같은 에러 메시지가 발생한다. 해결방법 1. onClick 핸들러 대신에 onChange 핸들러를 사용한다. 2. onClick 매서드와 함께 readonly 키워드를 사용.. 2021. 12. 6. [React Native] React Native란? 리액트 네이티브에 앞서 기본 모바일 앱이란? 기본 모바일 앱은 운영체제(Android 또는 iOS) 용으로 제작된 앱이다. iOS에서 네이티브 앱을 빌드할 때는 보통 Objective-C/Swift 개발 언어를 사용하고, Android에서는 Java/Kotlin을 사용한다. 규모가 큰 회사에서는 Android 개발자와 iOS 개발자 그리고 웹 개발자를 구분하여 두는 것이 큰 부담이 되지는 않을 것이다. 하지만 신생 스타트업이나 규모가 크지 않은 프로젝트를 진행하는 회사라면? 리액트 네이티브는 JavaScript 언어로 앱 개발을 시작할 수 있다. 리액트 네이티브란? Native UI Element를 사용하여 Android 및 iOS 앱을 개발할 수 있는 크로스 플랫폼 앱 개발 프레임워크이다. JavaSc.. 2021. 12. 2. 이전 1 2 3 4 5 6 7 다음 반응형
