만족

위와 같은 구조로 라우팅을 구성했다면, 가령 /test 같은 주소는 존재하지 않으므로 텅 빈 화면만이 표시된다. 이를 시각화해주는 것이 UX관점에서 좋기 때문에 추가해야 한다. 먼저 로 라우트 컴포넌트들을 감싸준다. Switch컴포넌트 내부에서는 반드시 하나의 Route컴포넌트만이 렌더링 된다. 가령 apple}/> banana}/> 이런 구조로 되어 있다면 apple 만이 렌더링된다. 그리고 를 추가한다. (NotFound 위치에는 렌더링할 컴포넌트를 넣어주면 된다.) 위의 Route패턴과 일치하는 path를 찾지 못했을 경우에 NotFound가 렌더링 된다. 잘 작동한다.

satisfactoryplace.tistory.com/154?category=829221 [React] MobX 개요 MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명 satisfactoryplace.tistory.com 위 포스트에서 이어지는 내용이다. 이번엔 MobX로 실제로 어떤 것을 해볼 수 있는지를 살펴보자. 우선 observerable state의 위치에 따른(내부/외부) state사용법에 대해 알아볼 것이다. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(th..

MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명은 공식 문서를 기준으로 설명한다. mobx.js.org/README.html About MobX · MobX mobx.js.org 빠르게 알아보자 import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPasse..

6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다. (육전칠기....) 합격을 받기까지 거친 과정을 소개해 보려고 한다. 1. 사이트 성능 최적화 satisfactoryplace.tistory.com/122?category=829221 [React] React.memo를 이용한 함수 컴포넌트 최적화 https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 요즘 클래스형 컴포넌트를 갖다 버리고, 거의 함수 컴포넌.. satisfactoryplace.tistory.com 2. JS 실행을 지원하지 않는 봇(크롤러..

서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.html의 head 태그 내부에 다음 태그를 추가한다. 위 메타 태그는 메신저/검색엔진 등에서 사이트 프리뷰를 표시할 때 사용한다. 가령 카카오톡에서는 다음과 같이 표시된다 이제 페이지 별로 해당 태그의 content를 조작하는 코드를 작성한다. const setMetaTags = ({ title="기본 타이틀", description="기본 설명", imageUrl="기본 사이트 이미지 경로" }) => { //set title document .querySelector('meta[property="og..

https://www.amitsn.com/blog/how-to-generate-a-sitemap-for-your-react-website-with-dynamic-content How to generate a sitemap for your React website with dynamic content This post illustrates how to use react-router-sitemap to generate a sitemap.xml file for your React.. www.amitsn.com 위의 페이지를 번역한 포스트입니다. 또한 Step 5(aws-amplify를 이용한 동적인 sitemap.xml 생성 부분)는 다루지 않았습니다 ================================..

주의 이 라이브러리를 사용 중 알 수 없는 오류로 사용이 어려울 경우 아래 링크를 참조해서 새로운 라이브러리를 사용해 보세요. react-snap은 유지보수가 중단된 프로젝트이므로 오류 수정 업데이트가 없습니다. https://satisfactoryplace.tistory.com/348 [React] 검색엔진 최적화(SEO):: Prerendering (react-hydratable) https://satisfactoryplace.tistory.com/131 [React] 검색엔진 최적화(SEO):: Prerendering (react-snap) React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결.. satisfactoryplace.tistory..

https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 요즘 클래스형 컴포넌트를 갖다 버리고, 거의 함수 컴포넌트만 사용중이다. 클래스형 컴포넌트에서는 shouldComponentUpdate 메서드를 사용하여 해당 컴포넌트를 업데이트할지 말지 결정할 수 있었으나, 함수 컴포넌트에서는 할 줄 몰라서 그냥 내버려뒀다. (사실 페이지 내에 요소가 그렇게 많지가 않아서 크게 신경쓰지 않아도 문제는 없었다) 그러나, 엘리먼트가 매우 많은 페이지를 만들면서 해당 문제를 해결하는 방법에 대해 알아보았다. 탭바 컴포넌트 구조를..