소스 코드: https://github.com/soonitoon/React_Hooks

이 글은 Nomad Coder의 "실전형 리액트 Hooks 10개" 강의를 바탕으로 작성되었습니다.

---

2021년 4월 30일

React Hook 만들기의 마지막 포스팅 날짜로부터 시간이 꽤 많이 지나고 후기를 작성하게 되었습니다. 그동안 Git/Github 기초 강의를 들으며 강의 내용을 열심히 블로그에 정리하기도 했고, 대학 중간고사 기간도 지나갔습니다. Git을 GitHub의 줄임말로 알았던 예전보다는 버전관리에 대해 조금 더 알게 되었지만, 아직까지는 부족한 점 투성인 것 같습니다.

생애 첫 브랜칭

Git/GitHub 강의에서 들었던 내용을 바탕으로 이번 리포지토리의 README 파일 작성은 master 브랜치와는 독립된 'README 작성 전용' 브랜치에서 진행해보았습니다. 또한, 각 후크 별로 NPM에 올라갈 README파일을 작성할 때도 일일히 브랜치를 만들어서 master브랜치에 Pull request를 보내는 방식으로 작업을 진행하였습니다. 자신의 리포지토리에 Pull request를 보낸다는 것이 조금 우습긴 하지만 Pull request가 진행되는 방식에 익숙해지고자 했습니다.

요약하자면, 이런 느낌으로 브랜칭을 해보았습니다. 각각의 Hook 파일에 들어갈 README를 작성할 때마다 master에서 브랜치로 분기해서 작업을 진행하고 master에 Pull request를 보냈습니다. 마치 각각의 README 작성을 맡은 협업자들이 각자의 브랜치에서 작업을 진행하는 것 같은 느낌을 내보았습니다.🙃

그리고 각각의 Hook들의 README 파일이 작성되는 대로 그 내용을 리포지토리 페이지에 보일 메인 README 파일에 붙여넣는 작업을 또 다른 브랜치에서 진행했습니다.

물론 모든 작업이 원활하게만 진행되지는 않았습니다. master에서 분기하는 브랜치를 만들어야 했는데, 메인 README를 작성하는 브랜치에서 분기한 상태로 커밋을 진행해서 cherry-pick으로 커밋을 하나하나 옮기기도 했습니다.

심지어 브랜칭을 시작한 초반에 브랜치 분기를 너무 엉망으로 진행하는 바람에(물론 엉망이라는 사실은 모든 작업이 거의 끝나갈 때쯤 알게 되었습니다.) git push -f를 사용하기도 했습니다. 메인 README를 작성한 브랜치를 master에 Pull request 보내고 Rebase and merge로 병합하려고 했으나 충돌이 발생해 결국 로컬에서 rebase를 수행하며 충돌을 해결하고, 리베이스된 메인 README 작성 브랜치를 origin에 강제로 푸쉬한 것입니다.

아직은 엉터리 브랜칭이지만, 이제라도 브랜치 사용하는 법을 알게되어 다행이라고 생각하고 앞으로도 더 나은 브랜칭을 위해 연습해야겠습니다.

논리적으로 커밋하기

처음부터 그러지는 못 했지만 README 파일을 작성하는 과정에서는 최대한 Git 특강 포스팅에서 정리한 커밋 메시지 규칙대로 커밋을 작성하려고 노력했습니다. 물론 문서화 작업이었기에 커밋 유형은 대부분 정해져 있었지만 규칙을 통해 커밋의 내용이 구조화되니 저절로 작업의 단위도 구조화가 이루어지는 느낌이었습니다.
눈에 보이는 대로 수정 사항을 이것저것 손대기 보다는, 머리속에 할 일 목록을 만들고 커밋의 단위대로 작업을 진행하는 방식에 조금은 익숙해진 느낌입니다.

그래서 코드는?

문서화 작업을 뒤늦게 진행하였고, 때마침 Git 기초 수업을 듣는 바람에 리액트 후크 만들기의 후기가 아니라 Git 사용 후기가 되어버린 것 같습니다. 후크 만들기 자체에 대한 후기도 적어보려고 합니다.

사실 이 "실전형 리액트 Hooks 10개" 강의를 수강하기 전에 많은 고민을 했습니다. 아직 리액트는 커녕 자바스트립트의 기본기도 제대로 갖추지 못한 제가 듣기에는 너무 앞서나간 내용인 것 같았습니다. 그러나 이 강의를 수강하면서 리액트 후크에 대한 경험만큼이나 자바스크립트, 그리고 함수형 프로그래밍에 대한 경험 또한 할 수 있었습니다. 후크를 만들며 리액트가 자바스크립트의 문법을 최대한 살린 프레임워크라는 말에 공감했습니다.

만든지 몇 달이 지난 후에 후기를 쓰려니 살짝 글에서 감정이 빠진 느낌이 없지 않지만😂 그래도 "자바스크립트로 이런 것까지 할 수 있어?"라는 생각이 많이 들었던, 재밌는 경험이었습니다.

NPM 배포

사실 이번 프로젝트를 진행하며 코딩 자체보다 흥미로웠던 것은 NPM에 제가 만든 자바스크립트 모듈을 실제로 배포하는 과정이었습니다. 우선 package.json 파일과 커맨드 몇 줄로 배포를 할 수 있다는 것이 신기했습니다.

그렇게 배포한 패키지를 다시 npm install 한 줄로 설치할 수 있는 것을 보고 커맨드라인과 NPM의 위대함(?)에 대해 다시 한 번 느낄 수 있었던 시간이었습니다.🏗️

제가 만든 패키지를 실제로 다운로드 하는 사람이 있다는 것도 참 신기했습니다.

심지어 use-input의 경우 8일 동안 168명이 패키지를 인스톨했다고 뜨는 것을 보고 정말 놀랐습니다. (물론 그중에 비슷한 이름을 잘못 찾은 사람이 더 많을 거라고 생각하지만😏) 직접 만든 패키지를 누군가가 다운로드한다는 것이 이제 막 프로그래밍을 시작한 사람에게는 참 재밌는 경험이었습니다.

NPM 페이지 : https://www.npmjs.com/~soonitoon

다시 시작하는 영어 공부📝

이번 README 작성도 전부 영어로 진행하였습니다. 안 그래도 영어에 약한 사람인데, 1000줄에 가까운 README를 영어로 작성하는 것은 정말 힘들었습니다. 사실 이 README 작성을 미루느라 후크 만들기 프로젝트의 마감이 늦어진 면도 없지 않습니다.🙃

그와 동시에 <해외 계발 포스팅 번역>이라는 새 시리즈도 시작했습니다. 아무래도 제가 가진 영어 지식으로 글을 쓰는 데에는 한계가 있어, 영어로 적힌 글을 많이 읽고 해석하며 좋은 표현을 배우려고 합니다. 그와 동시에 개발에 관한 지식도 얻을 수 있으니 일석이조라고 생각합니다!

물론 각 후크에 대한 설명에서 겹치는 부분도 많고 문법이나 표현도 엉터리입니다. 아직은 부족한 README 파일이지만 다음 README파일은 조금 더 괜찮아질 거라고 믿습니다.🙏

다음 계획은?

기초를 탄탄히 다지는 것이 다음 계획입니다. 역시 완벽주의에 빠지지 말고, 더 나아지기 위한 무언가를 지금 하고 있다는 것에 집중하려고 합니다.

<여러분의 CS교육에서 누락된 학기> https://missing-semester-kr.github.io/

우선 이 링크에 있는 학습자료를 활용해 기초를 다질 예정입니다. 물론 포스팅도 진행하려고 합니다.