Hacktoberfest에 대한 마지막 풀 리퀘스트

이것은 Hacktoberfest의 네 번째 블로그 게시물입니다. 이번에는 지난번 작업했던 이슈들보다 훨씬 더 큰 이슈를 찾으려고 노력했습니다.

그리고 애완 동물 입양 페이지에 디스플레이 사용자 스토리 페이지를 만드는 데 필요한 하나issue를 찾았습니다. 먼저 댓글을 남기고 디스코드에 가서 기여자들과 대화를 나눴습니다. 많은 사람들이 같은 프로젝트에서 다양한 종류의 문제를 가지고 작업하는 것을 보는 것은 좋은 경험이었습니다.

이것은 이슈 작성자가 페이지에 표시하려는 샘플입니다.


이issue의 경우 설정이 조금 어려웠습니다. 로컬에 앱을 배포하기 위해 npm을 사용했습니다. 하지만 이 프로젝트는 Petfinder API 을 사용하고 있기 때문에 페이지를 등록하고 로그인하려면 Petfinder API 개발자의 웹 페이지로 이동하여 API 키에 대한 자격 증명을 얻기 위해 등록해야 합니다. 그러나 올바른 방법으로 수행했음에도 불구하고 오류가 발생하여 이 응용 프로그램의 웹 페이지에 액세스할 수 없는 몇 가지 문제가 있었습니다.
이것이 내가 직면한 오류였습니다.

슬랙에 물어보고 이 문제에 대해 검색했습니다. 이 오류를 수정하는 데 시간이 좀 걸리지만 해결되었습니다! 쿠키 문제였습니다. 그래서 쿠키를 삭제하고 다시 시도했더니 잘 되었습니다.

그 오류를 해결하는 동안 그 문제를 해결할 생각이 없었습니다. 모든 정보를 올바르게 입력했는데 여전히 오류가 발생하기 때문입니다. 지금은 쿠키가 웹 응용 프로그램을 손상시키는 데 문제가 될 수 있다는 것을 알고 있었습니다. 버그를 수정할 때 쿠키 삭제가 체크리스트에 추가되었습니다.

API에 성공적으로 연결한 후 User Story 페이지를 만드는 작업을 했습니다. 먼저 stories 구성 요소를 만들고 폴더에 js 및 CSS 파일을 추가합니다. 그리고 각 사용자 스토리 카드를 만들기 위해 사용자 카드라는 또 다른 구성 요소를 만듭니다.


그리고 라우터에 경로를 추가했습니다.

  <Route path="/stories">
         <Stories />
  </Route>

그런 다음 JSX 파일을 만들어 사용자 스토리 페이지용 HTML을 렌더링합니다.

//Stories.jsx
<div className="stories">
      <div className="main_title">
        <h1>User Story</h1>
        <Button className="story_btn" as={Link} to={"/404/"}>
          Create your Story
        </Button>
      </div>
      <Row className="mb-2 w-100 petList">
        {userData &&
          userData.map((userData, index) => (
            <UserCard key={index} userData={userData} />
          ))}
      </Row>
    </div>

각 사용자 스토리 카드를 렌더링하는 JSX 파일을 만들었습니다.

//UserCard.jsx
<Col md={6} xs={12} key={id} className="card-container">
      <Card className="card">
        <Card.Body className="card__body">
          <div className="profile_Section">
            <img src={photos} alt={name} className="card__img" />
            <span className="user-card__title">{nameCleaner(name)}</span>
            <br />
            <span className="card__title desc">
              {nameCleaner(description)}
            </span>
          </div>
          <div className="story_Section">
            <div className="story">{storyCleaner(story)}</div>
            <Button className="user-card__btn" as={Link} to={"/404/"}>
              More Info
            </Button>
          </div>
        </Card.Body>
      </Card>
    </Col>

그리고 사용자 스토리 페이지를 테스트하기 위해 임의의 정보로 Sample UserData도 생성했습니다.

//UserData.js
const userData = [
  {
    id: 1,
    photos: User1,
    name: "T.S Eliot",
    story: "Lorem ipsum dolor sit amet,...",
    description: "Every moment is a fresh beginning. ",
  },

사용자 스토리 페이지의 결과:

이 문제를 해결하기 위해 이 페이지에서 react.js를 사용하는 방법을 연구해야 했는데, 이 문제를 해결하는 데 가장 어려운 부분이었습니다. 코드는 react.js로 작성되었고 이슈 작성자 상태는 사용자 스토리 페이지에 JSX 파일을 사용하기 때문입니다. 지난 학기에 배운 내용을 기억하는 데 시간이 좀 걸렸습니다. 인턴십을 하기 전이었기 때문입니다. 그런데 어떻게 컴포넌트를 만들고 어떻게 사용하는지 조사해보니 아주 순조롭게 진행되었습니다.

pull request 을 생성한 후, 이 프로젝트의 메인 관리자는 3개 부분을 수정하라는 내 풀 리퀘스트에 댓글을 달았습니다.
첫 번째는 스토리 카드의 클래스 이름을 변경하는 것이었습니다. 이는 in usercard 컴포넌트와 petcard 컴포넌트가 동일한 클래스 이름을 가지므로 usercard 컴포넌트의 스타일이 pet 카드의 스타일에 영향을 미치기 때문입니다. 이 문제를 위해 사용자 카드 구성 요소의 클래스 이름을 클래스 이름 앞에 사용자를 넣어 변경했습니다. 예를 들어, card_btn ~ user-card_btn .

그리고 그 다음 2개의 이슈는 제 실수로 petCard의 CSS 일부를 변경한 비슷한 이슈였습니다. 그리고 그는 그것을 원래대로 되돌리고 싶어합니다. 그래서 수정하기 전에 petCard를 다시 변경합니다.

메인테이너와의 이 커뮤니케이션은 그가 나에게 준 일종의 코드 리뷰이기 때문에 흥미로웠다. 그리고 그가 내가 실수를 한 것을 알려주지 않고 그냥 병합하면 더 큰 문제가 발생할 수 있습니다. 그래서 메인 브랜치에 병합하기 전에 다른 사람의 코드를 읽고 테스트하는 것은 아주 좋은 경험이라고 생각합니다.

Hacktoberfest 블로그는 여기까지입니다... Hacktoberfest를 통해 느낀 점에 대해 블로그 게시물을 하나 더 작성하겠습니다.