내 첫 진지한 반응 프로젝트의 교훈

이 기사는 누구를 위한 것입니까?

첫 번째 반응 앱을 작성하는 경우 이 기사는 초보자에게 친숙하지 않기 때문에 적합하지 않습니다. 이 기사를 충분히 이해하려면 할 일 목록과 같은 몇 가지 기본 반응 앱을 구축해야 합니다.

이 글에는 무엇이 있습니까?

몇 가지 버그를 수정하고 몇 가지 기능을 조정하면서 아직 개발 중인 적절한 복잡성 반응 앱을 구축한 실제 경험을 통해 실용적인 뉘앙스에 대해 논의하고 학습할 것입니다. 일부 백엔드 기능이 앱에 내장된 플랫폼, 프로젝트 확인here )

이 시점에서 백엔드 기술을 모르기 때문에 백엔드의 일부 기능을 내 앱에 통합해야 합니다(예: API 호출에 대한 데이터 조작 작업).

교훈

1. 모든 API에 json-server 사용

상품의 데이터를 .js 파일에 오브젝트 형태로 넣고 해당 오브젝트를 임포트했습니다. 데이터를 렌더링해야 할 때마다 이 개체를 가져오고 개체 내의 데이터를 사용하기만 하면 됩니다. 데이터(제품 데이터)를 매우 간단하게 처리합니다.

그러나 이것은 실생활에서 일이 이루어지는 방식이 아닙니다. 현실 세계에서 우리는 API 호출을 합니다(저는 내장fetch 함수를 사용했습니다). 모든 데이터가 포함된 .js 파일을 공용 폴더에 배치하고 이 파일의 상대 경로를 fetch 함수에 제공했습니다. 첫 번째 문제를 환영합니다. 이 접근 방식을 사용하면 이미지가 렌더링되지 않습니다. 이미지(즉, assets)는 반응에 의해 비공개로 간주되는 src 폴더 안에 있었고 분명히 공개 폴더에 있는 어떤 것 안에도 비공개인 경로를 넣을 수 없습니다. 발견했지만 구현하지 않은 한 가지 솔루션은 자산을 공용 폴더에 배치하는 것이었습니다. 이 접근 방식은 실제 프로젝트에서 수행되는 방식이 아니기 때문에 시도하지 않았습니다.

json-server를 설치하고 이미지 인덱스를 생성하여 이 문제를 해결했습니다. 이미지를 렌더링해야 할 때마다 필요한 기능에 제품 ID를 전달하고(날씨에 따라 하나 이상의 이미지만 필요함) 이미지 인덱스 파일을 사용하여 이미지를 가져옵니다.

내 솔루션에 대한 아래 코드 조각을 확인하십시오.

이것은 이미지 색인 파일의 예입니다.

const image_urls = [
  {
    id: "0cb1a1c0-4ba9-4464-91d6-112c2dcfecc9",
    images: [require("../images/headphones (7).jpg")],
  },
  {
    id: "f7d224e4-0ecb-4b24-95a9-e171241b5eb4",
    images: [
      require("../images/jeans (1).jpg"),
      require("../images/jeans (2).jpg"),
      require("../images/jeans (3).jpg"),
    ],
  },
];

export default image_urls;

이 함수는 단일 이미지를 반환합니다.

//IMPORTING ASSETS
import image_index from "../../assets/data/image_index";

const SingleImageLoader = (productId) => {
  const selectedItem = image_index.filter(
    (item) => item.id === productId.productId
  );
  return <img src={selectedItem[0].images[0]} alt="not found" />;
};

export default SingleImageLoader;

2. 복잡한 것을 깊이 파고들기 전에 userReducer /Redux 마스터하기

만약 당신이 리액션으로 폼을 만들었다면, 그것과 관련된 좌절감에 익숙해야 합니다. 양식은 항상 생각했던 것보다 더 복잡합니다. 이와 관련된 여러 상태 변수 및 함수가 있습니다. 이러한 모든 변수와 함수를 추적하는 것은 특히 양식에 여러 입력 필드가 있는 경우 골칫거리가 됩니다. 구조하러 오세요useReducer . useReducre는 반응에서 redux 유형 워크플로를 구현하는 반응의 후크입니다. 시작하는 데 도움이 되는 Harry Wolf의 멋진 자습서입니다. 푹 빠지세요.

3. 디자인 패턴 따르기

항상 디자인 패턴을 따르십시오. 어떤 패턴을 따르든 상관없이 디자인 패턴을 따라야 합니다. 프로젝트 크기가 커지면 파일 이름 지정 전략이 아무리 똑똑해도 파일을 추적하기가 더 어려워집니다. 앱을 사용하는 도중에 src 폴더 내부가 너무 혼란스러워졌다는 것을 깨달았기 때문에 디자인 패턴을 조정하고 전체 프로젝트를 리팩터링하여 이해하기로 결정했습니다.