처음 학자 때 만든 소프트웨어를 업데이트했어요.

그때 소스 코드를 다시 쓰니까 좋네요.

약 1년 반 전 저는 무직이고 자바스크립트의 자바 글자를 몰랐을 때 리액션을 배우면서 다양한 앱을 만들었습니다.
그에 상응하는 지식을 습득한 현재, 당시 만들어진 앱을 다시 쓰는 작업이 즐거워 시를 남겼다.

초보자(?) 있음

그 방면의 기술 블로그를 지나치게 믿는 문제

React 학습을 추진하고 있는데 구성 요소 이외에use State가 오류로 koke라고 하죠.
당시 전 세계 국가들이 어떻게 관리하는지 생각하자'리액트 글로벌 국가'에 투덜거렸다.
"Redux는 어렵다", "context의 글로벌 상태 관리"등의 글을 읽고 마침내 unstated라는 상태 관리 라이브러리에 도착했다.
unstated는 React context로 포장된 프로그램 라이브러리이지만 구독자가 context.Consumer 기반의 API이기 때문에 현대의 useContext 기반의 API보다 더 난잡하다.그럼에도 불구하고 그때는 useContext의 존재를 모르고 unstated를 좋아해서 3개의 자체 제작 프로그램에서 사용했다.
그것 덕분에(?)아직까지 Redux로 앱을 제작한 적이 없어 스스로 상태 관리 라이브러리 제작에 나섰다.

react-router를 모르고 프로그램을 만들다

react-router와history API를 사용하지 않고 프로그램을 만들었습니다.

const [page, setPage] = useState<"foo" | "bar">("foo");

return (
  <div>
    <button onClick={() => setPage("foo")}>foo へ</button>
    <button onClick={() => setPage("bar")}>bar へ</button>
    {page === "foo" && <Foo />}
    {page === "bar" && <Bar />}
  </div>
);

같은 코드는 매우 우직스럽게 썼다.그러고는 "재부팅하면 모든 상태가 회복되고 화면을 유지할 수 없어...SPA는 그런 거겠지~"라고 생각했다.UX의 흔적은 없습니다.

create-react-app만 사용할 수 있습니다.

매우 편리합니다.앞으로 한 페이지로 해결할 수 있는 프로그램이라면 사용하려고 합니다.
하지만 리액션이 서버에서도 렌더링을 할 수 있다는 점을 배우지 못했다.Next.제이스의 존재를 재취업하고 나서야 알았으면 해요(Gatsby는 이름만 아는 것 같아요).
Firebase Hosting에서create-react-app로 제작된 애플리케이션을 설계했으며Firebase Function에서meta 태그의 HTML만 반환하는 HTTP 함수를 설정하여 동적 OGP 생성을 실현했다.Next.js를 쓰면 더 간단해.

업데이트 내용

상태 관리

나는 Recoil로 unstated에 쓴 전역 상태 관리를 다시 썼다.
리코일을 실천해보려고 사용하던 곳을 고민하다가 과거 앱을 수정하기 시작했다.
리콜 책 쓰니까 좋네.리액트의 표준 연계와 거의 차이가 없는 API는 고민 사용법이 거의 없다.
또한 인프라 비용을 지불하지 않으려고Firestore의 방문량을 최대한 줄이기 위해 저는 unstated에 고속 캐시 데이터 처리를 썼습니다.어리석다.
리코일이라면 그걸 깨닫지 못하더라도 전부 당신 맘대로 할 거예요.코드가 너무 간단해져서 팩스라는 기분이 들었어요.

URL 라우팅

react-router를 가져와 적용된 상태와 URL을 일치시킵니다.브라우저가 다시 불러와도 같은 화면을 유지하거나'후퇴·전진'버튼으로 화면 상태를 복원할 수 있다.
React를 사용할 수 있도록 필사적으로 애플리케이션의 조작감을 전혀 의식하지 못했다.다른 사이트와 같은 상호작용을 제공하는 것은 매우 중요하다.

동적 페이지가 필요한 응용 프로그램입니다.js로 바꾸다

이 응용 프로그램은 이 보도에서 매우 긴 설명을 가지고 있다.
https://qiita.com/stin_dev/items/41ac4acb6ee7e1bc2d50
Firebase Hosting에 React SPA를 게재했는데, Firebase Function이 동적 OGP를 생성하고 있다고 장시간 적혀 있었다.
원본 코드를 정리한 후에js에 올렸어요.OGP용 Meta 태그도 Next입니다.Firebase Function은 js에서 구현하여 중지할 수 있습니다.응용 프로그램 자체가vercel을 설계하고 있습니다.
(접속역이 아닌Firebase.web.app에 공개되어 도메인 이름이 변경되었습니다)
Firebase Function 중지를 통해 무료로 사용할 수 있습니다!이러면 계산서를 두려워할 필요가 없겠지(?)
그나저나 업데이트 전에는 Firebase Storage의 용량을 염두에 두고 사용자마다 OGP 이미지를 한 장씩 유지했지만 캐시를 통해 이미지를 업데이트해도 바뀌지 않는 문제가 발생했다.(그리고 그것을 한쪽에 놓았다. 학자처럼 보인다.)
이번 응용 프로그램에서 규격을 수정하면 한 사용자가 여러 장의 그림을 생성할 수 있다🎉
https://thinking-generator.stin.ink

총결산

약 1년 반 전, 내가 첫 번째 학자였을 때 만든 앱이 업데이트되었다고 들었다.
"그때 제가 너무 심한 코드를 썼지만 그만큼 쓸 수 있었다"고 실감할 수 있는 좋은 기회였다.
첫 번째 학자가 읽었다면 코드를 쓰는 학습뿐만 아니라 실제 앱을 만들어 공개하는 것도 추천한다.몇 년 후에 다시 읽거나 팩스로 보내서 즐거웠어요.
"기술 수준이 형편없다고 할 정도로 향상되지 않았나요?"욕이 아주 효과가 있으니 이렇게 하지 마세요.