핵토버페스트 #2

Hacktoberfest 이벤트에서 오픈 소스에 기여한 두 번째 주에 대해 이야기해 보겠습니다.

문제:

이번 주에 더 어려운 문제를 찾고 있었고 2개의 pull 요청이 partner-finder 프로젝트에 병합되었습니다. 첫 번째는 PaginationControl upper page limit is always 100 이고 두 번째는 Display username on home navbar 입니다.

내 풀 리퀘스트: 1st issue , 2nd issue

첫 번째 문제:

일반적으로 프론트엔드는 React를 사용하기 때문에 로직을 파악하는 것이 어렵지는 않지만 설치하는 동안 어려움을 겪었습니다.

프로젝트는 도커를 사용하여 내가 가지고 있지 않은 컴퓨터에 도커를 설치해야 하는 코드를 컨테이너화합니다. 또한 Windows 버전으로 인해 가상화도 활성화되지 않았습니다. 따라서 일부 파일, Windows 하위 Linux 시스템을 다운로드하고 내 PC의 BIOS를 구성해야 했습니다.

문제는 최대 페이지가 항상 실제 데이터에 반영되지 않은 100개였다고 말했습니다. 목표는 명확했습니다. PaginationControl 구성 요소를 수정하는 것입니다. Home 구성 요소가 모든 데이터 가져오기를 수행하고 데이터를 PaginationControl 에 전달하므로 모든 '리드'(또는 레코드)의 페이지 수를 가져오고 다른 상태maxPages를 생성하기 위해 또 다른 API 호출을 해야 했습니다.

const [maxpages, setMaxPages] = useState(100);
//... 
const n_pagesUrl = `${API_HOST}/leads/n_pages?perpage=${perpage}`;
fetch(n_pagesUrl, {
      headers: headers,
    })
      .then((response) => checkForErrors(response))
      .then((data) => setMaxPages(data.pages))
      .catch((error) => console.error(error.message));

그리고 maxPages를 PaginationControl 구성 요소로 전달합니다.

<PaginationControl
            page={page}
            perpage={perpage}
            maxpages={maxpages}
            setPage={setPage}
            setPerpage={setPerpage}
          />

남은 일은 PaginationControl 의 숫자 100 을 maxPages 로 변경하는 것뿐이었습니다. 또한 > 버튼을 클릭해도 최대 페이지에 도달한 후에도 페이지 수가 증가하는 또 다른 버그를 수정했습니다.

<Button
        onClick={() => setPage(page + 1 <= maxpages ? page + 1 : maxpages)}
      >

두 번째 문제:

두 번째도 어렵지 않았다. jwt 토큰이 로컬 저장소에 저장되고 사용자 확인을 위해 추출되는 경우 사용자 이름으로 동일한 작업을 수행하지 않는 이유를 알았습니다.

  const handleSubmit = (event) => {
    const url = `${API_HOST}/login`;
    fetch(url, {
      //...
        if (success) {
          localStorage.setItem('partnerFinderToken', token);
          localStorage.setItem('username', username);
          history.push('/');

그런 다음 로컬 저장소에서 '사용자 이름' 키를 추출하고 표시합니다.

const [username, setUsername] = useState('');
//...
<Typography variant="h6" component="h6">
          {username}
        </Typography>

내가 배운 것:

이 프로젝트는 docker를 사용하기 때문에 docker가 무엇인지 배울 기회를 얻습니다. 이 개념은 코딩 프로세스에 관련된 모든 사람에게 매우 유용합니다. 앞으로 실제로 사용하고 더 이해하기를 바랍니다.

도커 설치는 저에게 상당한 교훈이었다고 생각합니다. 가상화가 비활성화된 Windows Home 버전을 사용하는 저와 같은 사람들을 돕기 위해 나중에 블로그에 글을 쓸 것입니다.

코딩과 관련하여 나는 더 많은 React를 연습하고 다른 스타일의 React 코딩을 배우고 일반적으로 기여하는 데 익숙해지고 기여 지침을 따르고 다른 개발자에게 내 문제를 명확하게 발표하는 데 익숙해졌습니다.

참고: 할당 릴리스 0.2의 경우 동일한 리포지토리의 백엔드 Python 문제도 작업 중이므로 첫 번째 문제만 제출하겠습니다.