프로젝트 스캐폴딩 기록 📸

첫 번째, 초기 프로젝트의 뼈대를 만들어주는 행위를 뜻한다. 어떤 프로젝트를 시작할 때 기본적인 README, License를 비롯하여 디렉토리 구조, 컴파일 설정 등이 자동으로 생성하는 CLI 혹은 UI 도구가 이와 같다.
출처: 프로그래밍 용어사전

 

우리는 React Native 내에서 Next.js로 웹뷰를 띄우기로 했다. 그래서 Next.js 레퍼지토리와 React Native 레퍼지토리 두 개가 필요했다. 난 그 중 RN 레퍼지토리의 스캐폴딩을 담당했다!🙋🏻‍♀️ 디프만 이전 기수의 RN 레퍼지토리와, 다른 팀원 분이 끝내놓으신 웹 레퍼지토리를 참고했다. 다른 팀원들이 clone을 받았을 때도 문제없이 작동해야 한다는 점, 참고한 레퍼지토리에 추가되어 있는 각종 툴들(패키지들)을 직접 사용해본 적이 없다는 점이 어려웠다. 또 개별 라이브러리들을 세팅하는 게 어려웠다기 보다는, 라이브러리들 간의 선후관계를 파악하는 게 어려웠다.

무한 구글링의 흔적

💁🏻‍♂️ 내가 한 것들

• Yarn Berry 설정
• React Native 프로젝트 생성, ios/aos 빌드
• eslint와 각종 eslint 플러그인 설치
• husky
  • commitlint
  • lint-staged
• github actions로 CI 구축
• Reviewer, Assigness 자동 할당
• CODEOWNERS 추가
• PR 템플릿 추가
• dotenv 환경 변수 사용 가능하게 세팅: .env 파일 내 환경변수를 바로 import할 수 있게 한다.
• 절대경로 설정: alias를 사용해 길어지는 상대경로를 짧게 바꾼다.

새로 접해본 것들이 대부분인데 세팅을 하려니 쉽지 않았다.. 굵직한 것들만 간단히 기록해보자.

 

Yarn Berry + React Native 세팅

아래 포스팅에 자세히 정리해놓았다.

https://meoweundi.tistory.com/35

Yarn Berry로 React Native 프로젝트 시작하기

CI 구축(Github Actions)

https://meoweundi.tistory.com/34

Github Actions로 CI 적용하기(극 초보자용😈), Github Actions 작동 확인하는 법

eslint 관련

https://meoweundi.tistory.com/36

eslint 플러그인 종류, 총 정리

Git hook(Husky)

https://meoweundi.tistory.com/m/37

Husky로 Git hooks 자동화하기(+ lint-staged, commitlint)

 

새끼글을 계속 작성하려니 포스팅이 마무리가 안된다.. 이쯤에서 마무리하고, 개별 세팅에 대해 포스팅을 더 작성하게 된다면 링크를 추가하겠다!