오픈소스 컨트리뷰션 아카데미 2주차 개발일지

김효진·2021년 8월 22일
0
post-thumbnail

👑 길드장이 되다..

길드를 선택한 동기

RAP에서 1개, WAH에서 1개의 길드를 선택해 들어가야 한다.
  • RAP

아직 AnalyticsProvider 코드에 익숙하지 않아서 모르는 코드가 많았기에 선뜻 나설 수 없었다. amplitude는 처음들어봤고 아직 연동이 안된 기능인만큼 실수하면 안되는 부분이기에 내가 할 수 없었다. GA 연동도 AnalyticsProvider와 비슷한 이유... 테스팅 셋업을 해보고싶었지만 과연 내가 테스트코드를 작 작성할 수 있을지 모르겠고 어떻게 테스트 코드를 작성하는지 지켜보며 배우고싶었다. 오픈소스 커뮤니티 관리는 할 수 있었긴 한데 이왕 하는거 코드작성에 참여해보고싶어서 이것만 하기에는 부족해보였다. 그래서 선택한 것이 데모 예제인데,, 사실 프로젝트를 하면서 데모예제를 만들어본적이 없다. 그래서 살짝 감이 안오긴 했지만 그나마 내가 할 수 있는 것 같아보였다. 그런데 OMG... 나혼자였따ㅠ 다행히도 유림님이 혼자인 사람들끼리 이어주어서 서로 서브 역할을 할 수 있게 되었다.

  • WAH

셋 중 어느 것을 해도 상관이 없어서 고민하던중 용어집에 여러 기능들이 주루룩 달렸다. 검색 및 필터 기능도 관심 있었고 CSS 애니메이션도 어떻게 적용할지 기대가 되었다. 그래서 WAH에서는 망설임 없이 용어집 길드로 결정! 다행히(?) 두번째로 이름을 적어서 길드장은 되지 않았다ㅋㅋㅋ

주어진 과제

  • 🧸 demo

    • https://github.com/vercel/vercel/tree/main/examples 을 참고하여 폴더 구성을 하기로 했다
    • 클라이언트 사이드 렌더링 (with-cra) - 현재 만들어진 demo 폴더
    • 서버 사이드 렌더링 (with-nextjs)
    • 폴더구조 만들기
    • with-nextjs에서 cra와 동일하게 페이지 구성하기
    • with-nextjs에서 init 구현하기
    • with-nextjs에서 pageview 구현하기
    • with-nextjs에서 click event 구현하기
  • 📚 용어집

    • 박스 컴포넌트 및 최소한의 ui-kit 구현

    • notion에 있는 컨텐츠 옮기기

    • NavBar 메뉴 이동 시 CSS애니메이션 구현 → transition이 과연 좋은가?

    • emotion Common 컴포넌트 구현 (Paper 등)

    • hamburger bar → 이미되어있음

    • Responsive Design 적용

    • tailwind 적용 어떤가요? ???

    • 필터 기능 구현

    • 검색 기능 구현

    • 용어 사전 페이지네이션 → 무한스크롤로 구현하기

    • 용어 설명 탬플릿 제작

    • tslint

    • babel absolute path

      여기서 내가 한 일은 notion에 있는 용어 옮기기...

      사실 다른 것도 하고싶은데 내가 구축한 개발환경이 아니기도 하고 임의로 변경해도 되는지 몰라서 기회를 엿보고 잇다.. 디자인이나 CSS라도 꼭 해야지!

👌🏻 첫 PR 드디어...!

이렇게 해도 되는건가? 뭐든지 조심조심

나혼자 하는 개인프로젝트나 친구들이랑 하는 소규모 프로젝트는 이것저것 시도해보면서 문제가 발생해도 알아서 척척 해결하고 지나갔는데 이건 오픈소스... 현업에 종사하는 여러 개발자분들도 계시고 내 코드를 마구마구 리뷰받는 장소! 브랜치 하나 만들때도 어떻게 해야하는지, 이슈 만들때도 다른 이슈들 구경하고 열심히 작성해서 커밋도 열심히 했땅. push하기 전에도 한번더 확인하고 조심조심하려고 노력했따ㅏ

이게 나의 첫 PR!!!

한분의 approve를 받았고 good도 받았다! 사실 별로 바꾼게 없긴하지만ㅋㅋ

수정요청이 들어와 열씨미 수정하고 다시 push도 했따

그런데 이걸 merge해도 되는지,,, 언제 merge해도 되는지,,,

모르겠어서 우선 냅뒀다.........(←왜그랬니 흑흑ㅠ)

그런데..........?!?!?!?

머지버튼이 사라졌다

한 명 이상의 approve를 받으면 머지해도 된다고 해서 내껏도 이제 머지하려고!! 드디어 컨트리뷰터가 되는건가!! 했는데

이게뭐람,,, github에 머지버튼이 사라진 것이다..

PR 올린지 오래되어 main은 이미 내 브랜치보다 앞서갔고 내가 작성한 부분과 conflict가 난 것이다

보통 conflict가 났을 때는 github에서 해결을 하거나 gitkraken을 이용해서 충돌을 해결하고 다시 머지하곤 했다

그런데 이건 오픈쏘스,,, 조심조심해야할텐데 충돌이 나버린 것ㅠㅠ

진짜 당황해서 어떻게 해결해야할지 막막했다...

로컬환경에서 이것저것 해보는데 확신이 없으니까 멘붕이 왔다...

그러다 결국 멘토님께 도움을 요청하여 해결방법을 알아냈다ㅠㅠ

해결법 (여기서 쫑은 충돌을 말함ㅋㅋ)

  1. feat/48에 체크아웃을 한다. git switch 또는 git checkout
  2. main브랜치를 feat/48브랜치에 머지한다. git merge main
  3. 충돌 해결하기. git status 해서vscode에서 !로 표시된부분이 충돌난 파일
  4. package-lock.json 지우고 npm i 하기.
    에러날 땐 npm i —legacy-peer-deps 하기
    같이 작업할 때는 npm i 했을 때 공유하면 좋음
  5. feat/48을 push한다.
    요약 : main을 48로 가져와서 충돌 해결 후 커밋하고 푸쉬하면 github에서 머지버튼 활성화됨

참고할 만한 글

CI실패...? 오마이갓

새로운 마음으로 다시 해보려고 PR을 닫고 브랜치를 삭제하고 새로 처음부터 다시했다. (← 이거 나중에 문제)

그래서 다시 PR을 올렸는데 이번엔 CI 에러가 나는 것이다

git action에 아직 익숙하지 않아 에러의 원인이 git action에 나온다는 것을 몰랐다!

슬랙에 올렸더니 다행히도 많은분들이 도움을 주셨다..

lint오류라고 판단되어 eslintignore에 demo폴더를 통째로 추가하니 해결은 되었다

📍공부가 된 것들

  • next 11부터 build 시에 eslint를 검사하기 시작함

https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint

next.config.js

module.exports = {
  /*
    next 11부터 build 시에 eslint를 검사하기 시작함
    // https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint
  */
  eslint: {
    ignoreDuringBuilds: true,
  },
}
  • GitHub에서 git action 보는법

나도 오픈소스 컨트리뷰터

첫 PR : https://github.com/EveryAnalytics/react-analytics-provider/pull/68

결국 무사히 룩굿투미를 받고 첫 머지를 하게된다..

오마이갓 나도 컨트리뷰터!!!🤭👻

충돌난 것을 고대로 머지...?

충돌 잘 해결된 것 같아서 안도 후 다음 개발을 시작하려는데,,,

삭제했다고 생각한 브랜치는 내 로컬에서만 삭제했고 원격에서는 삭제가 안된채 있었던 것이다 (당연)

그리고 충돌 해결할 때 vscode에서 both accept를 눌러서 둘다 반영이 된 것 같다

demo 이외에 query string 이슈를 해결하고 PR을 올렸었는데

뭔가 이상하게 main 브랜치에 충돌이 난 코드가 그대로 merge되었다

근데 뒤늦게 발견해서 ㅋㅋ ㅠㅠㅠ 부랴부랴 이슈 만들고 고치고 PR을 올렸다

어찌어찌 충돌은 다 해결했는데 demo/with-cra에서 npm start 하면 오류가 발생하는 것이다

eslint와 prettier 플러그인도 설치되어 있는뎁,,, 왜지?ㅠ

그래서 help wanted에 에러를 적어놓았더니 댓글이 달렸다!

eslintignore에서 demo를 삭제하고 format-fix를 하면 된다고!

그래서 삭제는 했는데 format-fix는 어떻게 하는지 몰라서 질문하고 기다렸다

관련 PR : https://github.com/EveryAnalytics/react-analytics-provider/pull/83

(demo/with-cra 에서 npm start를 하면 src/App.tsx와 src/router/Route.tsx 에서 prettier/prettier 에러가 발생)

👇🏻이렇게 해결

npx eslint src/App.tsx --fix
npx eslint src/router/Route.tsx --fix

총정리 PR : https://github.com/EveryAnalytics/react-analytics-provider/pull/85

  • demo 폴더에 eslint 가 적용되지 않아 작업 중에 lint 에러가 있는 부분을 감지 하지 못함
  • vscode eslint 플러그인을 활용하지 못해서 lint fix 명령어로 해당 부분을 해결하고 있었음
  • prettier format 이 더 이상 사용되지 않음에도 불구하고 script 파일에 있었음
  • demo 하위 폴더 까지 모두 공통된 eslint rule을 사용하도록 next 전용 eslint.rc 설정을 제거합니다.

헷갈렸던 부분을 명쾌히 해결해주셨다.. 짱짱

👩🏻‍💻 개발자로 전직하기

git flow, 코드리뷰문화

나는 5명 이상 프로젝트 경험이 없어서 git을 활용한 협업에 미숙할까봐 걱정했다

다행히 다른 사람들이 하는 모습을 지켜보면서 많이 배우고 있다!

이슈, PR, 코드리뷰 등 전반적인 과정을 어깨넘어 지켜보며 따라하고 있다

누가 이슈를 등록하고 PR을 올리면 구경하는 재미가 있다ㅎㅎ

얼릉 나도 굵직한 개발을 해서 코드리뷰를 마구마구 받아보고싶당

LGTM? LGTM!

처음에 LGTM가 뭔지 몰라서 찾아봤는데...

LGTM : Looks Good To Me. 나에게 좋아 보인다.

PR에서 리뷰를 남길 때 장황한 설명 대신 많이 쓰는 말이라고 한다

나도 룩굿투미 받아봤고 써봤따!

부끄...ㅎ🙈

Next Level 노래 나오고 넥스트 쓸 때 이노래밖에 안떠오른다

그래서 create next app 하다가 예제 소스 다 지우고 대충 Next Level 썼는데 들켜버렸다......

매우 부끄러웟다.....ㅋㅋㅋㅋㅋㅋㅋ

공부가 된 것들

  • 📍프로젝트 안에 프로젝트가 있을 때 모듈 경로 설정해주기

"@every-analytics/react-analytics-provider": "file:../..",

관련 이슈링크

https://github.com/EveryAnalytics/react-analytics-provider/issues/1

https://github.com/EveryAnalytics/react-analytics-provider/pull/5

내부 프로젝트의 root폴더에 .env 파일 만들어서 SKIP_PREFLIGHT_CHECK=true 추가하기

.dotenv 관련 설명 : https://github.com/motdotla/dotenv

도구의 역할

  • eslint -> syntax + format 일부 영역 담당, -> eslint -- fix 명령로 코드 수정
  • prettier -> format 영역 담당 -> format 명령어로 코드 수정
  • 두 도구 모두 format 영역을 담당하는 부분이 있음

이슈

  • eslint + prettier 같이쓰면 각 도구의 format 영역 담당이 충돌남

이슈 해결

  • eslint 플러그인으로 prettier 플러그인을 등록해주면 위에서 말한 prettier와 충돌나는 부분을 prettier 기준으로 바꿔주고, eslint 에서 그 부분을 prettier 에러로 표현해줌
  • prettier 의 format 명령어를 쓰지않고, eslint --fix 만 쓰면 format + synyax 부분을 충돌없이 사용할 수 있음

그 외 바라는점..?

  • 브랜치 네이밍 컨벤션도 있었으면 좋겠다
  • 좀 더 소통이 활발했으면 좋겠닿ㅎ
  • 스터디..?
profile
맨땅에 헤딩 🐣

0개의 댓글