아직 AnalyticsProvider 코드에 익숙하지 않아서 모르는 코드가 많았기에 선뜻 나설 수 없었다. amplitude는 처음들어봤고 아직 연동이 안된 기능인만큼 실수하면 안되는 부분이기에 내가 할 수 없었다. GA 연동도 AnalyticsProvider와 비슷한 이유... 테스팅 셋업을 해보고싶었지만 과연 내가 테스트코드를 작 작성할 수 있을지 모르겠고 어떻게 테스트 코드를 작성하는지 지켜보며 배우고싶었다. 오픈소스 커뮤니티 관리는 할 수 있었긴 한데 이왕 하는거 코드작성에 참여해보고싶어서 이것만 하기에는 부족해보였다. 그래서 선택한 것이 데모 예제인데,, 사실 프로젝트를 하면서 데모예제를 만들어본적이 없다. 그래서 살짝 감이 안오긴 했지만 그나마 내가 할 수 있는 것 같아보였다. 그런데 OMG... 나혼자였따ㅠ 다행히도 유림님이 혼자인 사람들끼리 이어주어서 서로 서브 역할을 할 수 있게 되었다.
셋 중 어느 것을 해도 상관이 없어서 고민하던중 용어집에 여러 기능들이 주루룩 달렸다. 검색 및 필터 기능도 관심 있었고 CSS 애니메이션도 어떻게 적용할지 기대가 되었다. 그래서 WAH에서는 망설임 없이 용어집 길드로 결정! 다행히(?) 두번째로 이름을 적어서 길드장은 되지 않았다ㅋㅋㅋ
🧸 demo
📚 용어집
박스 컴포넌트 및 최소한의 ui-kit 구현
notion에 있는 컨텐츠 옮기기
NavBar 메뉴 이동 시 CSS애니메이션 구현 → transition이 과연 좋은가?
emotion Common 컴포넌트 구현 (Paper 등)
hamburger bar → 이미되어있음
Responsive Design 적용
tailwind 적용 어떤가요? ???
필터 기능 구현
검색 기능 구현
용어 사전 페이지네이션 → 무한스크롤로 구현하기
용어 설명 탬플릿 제작
tslint
babel absolute path
여기서 내가 한 일은 notion에 있는 용어 옮기기...
사실 다른 것도 하고싶은데 내가 구축한 개발환경이 아니기도 하고 임의로 변경해도 되는지 몰라서 기회를 엿보고 잇다.. 디자인이나 CSS라도 꼭 해야지!
나혼자 하는 개인프로젝트나 친구들이랑 하는 소규모 프로젝트는 이것저것 시도해보면서 문제가 발생해도 알아서 척척 해결하고 지나갔는데 이건 오픈소스... 현업에 종사하는 여러 개발자분들도 계시고 내 코드를 마구마구 리뷰받는 장소! 브랜치 하나 만들때도 어떻게 해야하는지, 이슈 만들때도 다른 이슈들 구경하고 열심히 작성해서 커밋도 열심히 했땅. push하기 전에도 한번더 확인하고 조심조심하려고 노력했따ㅏ
이게 나의 첫 PR!!!한분의 approve를 받았고 good도 받았다! 사실 별로 바꾼게 없긴하지만ㅋㅋ
수정요청이 들어와 열씨미 수정하고 다시 push도 했따
그런데 이걸 merge해도 되는지,,, 언제 merge해도 되는지,,,
모르겠어서 우선 냅뒀다.........(←왜그랬니 흑흑ㅠ)
그런데..........?!?!?!?
한 명 이상의 approve를 받으면 머지해도 된다고 해서 내껏도 이제 머지하려고!! 드디어 컨트리뷰터가 되는건가!! 했는데
이게뭐람,,, github에 머지버튼이 사라진 것이다..
PR 올린지 오래되어 main은 이미 내 브랜치보다 앞서갔고 내가 작성한 부분과 conflict가 난 것이다
보통 conflict가 났을 때는 github에서 해결을 하거나 gitkraken을 이용해서 충돌을 해결하고 다시 머지하곤 했다
그런데 이건 오픈쏘스,,, 조심조심해야할텐데 충돌이 나버린 것ㅠㅠ
진짜 당황해서 어떻게 해결해야할지 막막했다...
로컬환경에서 이것저것 해보는데 확신이 없으니까 멘붕이 왔다...
그러다 결국 멘토님께 도움을 요청하여 해결방법을 알아냈다ㅠㅠ
쫑
해결법 (여기서 쫑은 충돌을 말함ㅋㅋ)
- feat/48에 체크아웃을 한다.
git switch
또는git checkout
- main브랜치를 feat/48브랜치에 머지한다.
git merge main
- 충돌 해결하기.
git status
해서vscode에서 !로 표시된부분이 충돌난 파일- package-lock.json 지우고
npm i
하기.
에러날 땐npm i —legacy-peer-deps
하기
같이 작업할 때는npm i
했을 때 공유하면 좋음- feat/48을 push한다.
요약 : main을 48로 가져와서 충돌 해결 후 커밋하고 푸쉬하면 github에서 머지버튼 활성화됨
참고할 만한 글
새로운 마음으로 다시 해보려고 PR을 닫고 브랜치를 삭제하고 새로 처음부터 다시했다. (← 이거 나중에 문제)
그래서 다시 PR을 올렸는데 이번엔 CI 에러가 나는 것이다
git action에 아직 익숙하지 않아 에러의 원인이 git action에 나온다는 것을 몰랐다!
슬랙에 올렸더니 다행히도 많은분들이 도움을 주셨다..
lint오류라고 판단되어 eslintignore에 demo폴더를 통째로 추가하니 해결은 되었다
📍공부가 된 것들
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,
},
}
첫 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 설정을 제거합니다.
헷갈렸던 부분을 명쾌히 해결해주셨다.. 짱짱
나는 5명 이상 프로젝트 경험이 없어서 git을 활용한 협업에 미숙할까봐 걱정했다
다행히 다른 사람들이 하는 모습을 지켜보면서 많이 배우고 있다!
이슈, PR, 코드리뷰 등 전반적인 과정을 어깨넘어 지켜보며 따라하고 있다
누가 이슈를 등록하고 PR을 올리면 구경하는 재미가 있다ㅎㅎ
얼릉 나도 굵직한 개발을 해서 코드리뷰를 마구마구 받아보고싶당
처음에 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
도구의 역할
이슈
이슈 해결