핵토버페스트!! 오픈 소스에 대한 나의 첫 작은 기여

시작하기

2020 핵토버페스트 시즌! 미래의 개발자를 꿈꾸는 적극적인 학습자이자 오픈 소스 개발 학생으로서 저는 Github의 프로젝트에 몇 가지 버그를 수정하거나 새로운 기능을 추가하기로 결정했습니다. 나는 거기에서 Next.js , Freetube 등과 같은 훌륭한 프로젝트를 찾았습니다. 이 거대한 프로젝트에 참여하려고 노력했지만 너무 어려웠습니다. 그래서 상대적으로 작은 프로젝트를 선택하기로 결정했지만 여전히 도움을 찾고 있습니다.

고맙게도 Pettnaut은 이 프로젝트의 UI를 업데이트하기 위해 제 도움이 필요했습니다. 저는 React.js로 몇 번 코딩을 했기 때문에 첫 번째 기여를 시작할 수 있는 좋은 기회였습니다.

문제!

그는 특히 "Fix Header styles" 헤더 UI를 업데이트하고 싶었습니다. 그래서 작업하고 싶다는 메시지를 남겼습니다. 몇 분 후, 그는 친절하게 "왜 안돼요? 계속하세요!"라고 대답합니다.

그는 이런 변화를 원했다

이것을 좋아하다

기능 #1 배경색 변경: #5D34AF

첫 번째 변경은 매우 간단했습니다. 배경 색상을 변경하기만 하면 됩니다.

.header {
    background-color: blueviolet; // old  
    background-color: #5D34AF;   // new

기능 #2 시작 부분에 Pettnaut의 로고를 추가합니다.

약간 까다로웠고 프로젝트는 react-bootrap을 사용했기 때문에 먼저 설명서를 읽어야 했습니다. 또한 navbar에 로고를 추가했을 때 각 목록이 가로로 정렬되지 않았습니다. 그래서 나는 이것을 단계별로 수행했습니다. 먼저 navbar에 로고를 추가했습니다.

import logo from '../../assests/logo.svg'
...
<Nav.Link className="item-logo" href="/home"><img alt="logo"
 className="mr-3" style={{maxHeight:'30px'}} 
 src={logo} />Pettnaut</Nav.Link>

그런 다음 이 Nav 요소에 지정된 패딩을 제거했습니다. 그리고 text-align;와 line-height;를 주어 위치를 적절하게 조정합니다.

.nav-link {
    padding: 1.5rem 1rem !important; // removed
    color: #ffffff;
    height: 100%;
    text-align: center;
    line-height: 30px;
}

자세한 정보는 here입니다.

이 커밋 푸시

git checkout -b issue-17 그런 다음 'git add 'git commit -m "fixex issue-17 add logo change color"가 커밋을 만들었습니다.
출력과 코드를 다시 검토한 후. 나는 PR를 만들기로 했다.

하루 후, 우리는 이 커밋을 병합했습니다! 그것이 "오픈소스 프로젝트에 대한 첫 기여"에서 나의 작지만 큰 경험이었습니다.

다음 단계

나는 이것에 만족하지 않을 것이다. 나는 hacktoberfest에 더 많이 참여할 것입니다! 이번 시즌에 새로운 것을 배우고 실제 적용에 큰 기여를 하려고 합니다.

제가 처리할 수 있는 몇 가지 중요한 문제를 찾고 있습니다. "좋은 첫 번째 문제"가 있으면 알려주세요!