구름톤 유니브 개발로그 : 개발 환경 세팅

저번 구글 솔루션 챌린지 때 중간회고들을 남기지 못한게 아쉬워서,, (솔챌 끝나면 쫙 정리해서 써야지~ 라고 했으나,, 안쓰게됨,,, 우리에겐 늘 다음 프로젝트가)

이번에는 개발 중간중간 짧게나마 진행상황과 배운점들을 남겨두려고 한다

 

우선 체계없이 냅다 개발하던 (업무 방식도 코드자체도,,,모두) 저번 프로젝트와는 달리

이번엔 경력 짱짱한 프로 프엔님과 협업을 하게되어서, 제대로 된 프론트 개발 협업에 대한 경험이 가능했다

 

1) 프로젝트 시작 전 기술스택을 모두 정하는 것의 이점과 효율성에 관하여

우선 개발 전에 

 

위와 같이 기술스택을 모두 정하고 초기세팅을 진행했다

리액트 프로젝트 생성 후 필요한 패키지들을 처음에 모두 받아서 main에 푸쉬를 해두고 설치된 파일들의 모음인 node_modules는 gitignore에 넣어두면, 그 뒤로는 내 로컬에 clone 후 npm i 만 입력하면 설치한 패키지들의 정보가 담긴 package.json을 바탕으로 필요한 모든 패키지를 자동으로 설치해준다 (그 후에 개개인이 다시 push,merge 해도 여전히 모듈들은 gitignore에~)

 

이전에 첫 프론트 플젝을 하면서 내가 작성하는 코드파일 외에 package.json이나 node_modules 등의 파일들에 대한 이해와 활용이 부족했는데, (node_modules 패키지를 gitignore에 보통 넣는다는 점을 플젝 중후반에 알게 되었지만 .. 혹시 ignore에 넣어서 깃에 업로드를 안했다가 뭔가 문제가 생길까봐 (?) 그냥 냅다 다 올렸었던,,) 이번에 package.json을 통해 이러한 것들을 깃에 직접 올리지 않고도 관리가 가능하다는 것을 알게 되었다

여러 라이브러리나 패키지를 설치하게 되어 package.json에 이 설치된 것들에 대한 표시가 생기게 되면, 패키지 파일들을 gitignore에 넣더라도 깃에서 clone이나 pull을 받았을때 npm i 를 실행하면  package.json에 설치된 패키지들을 알아서 설치해준다

 

 

2) 폴더 구조 확정 : 드디어 모듈화를 진행하다

저번 플젝 때 가장 아쉬웠던 지점은,, 결국 개발 외적 부분이든 내적 부분이든 하나의 키워드로 귀결된다

바로 모듈화,, 

나도 내가 그렇게 주먹구구식으로 코드를 짤 줄은.. 몰랐다 (그때는 프엔 모두가 첫 플젝이었고.. 어떻게든 일단 구현해야하는걸 구현하는게 우선이었다는 변명을,, 해본다 ^^)

그런데 아무래도 그런 비효율적인 개발의 첫 시작이 아마도.. 폴더구조를 합의하지 않고 냅다 개발에 들어가서 였던 것 같다

모듈화 할것들은 대부분 폴더구조에서 이미 결정이 되기때문에 (컴포넌트, 전역 스타일, 컬러팔레트 등) 여기서 초기구조를 잘 잡아야 이후에 모듈화가 번거로운 고민과정이 되어버리는 일이 없는 듯 하다

(저번 플젝때.. 모듈화 모듈화 말은 들었지만 대체 뭘 얼마나 모듈화해야하는지 모르겠고.. 그걸 고민하면서 신중히 개발을 진행하기엔 당장의 구현이 급했기 때문에.. 어디서나 재활용되는 navbar 정도만 의미있는 모듈화를 진행했던 것 같다

우선 전체적인 폴더구조는 asset(사진이나 로띠), components, fonts, hooks (커스텀 훅들), pages, routes(라우팅 코드폴더), styles(font랑 globalstyle-> 자주 사용되는 태그들에 폰트 우선순위 걸어두기, 전역 스타일 설정) , utils(훅 외 함수 모음)

 

 

3) 이제 cd 프로젝트명 을 안해도 된다 !

리액트에서 프로젝트를 생성하면 자동으로 폴더를 생성하기 때문에, 늘 cd 프로젝트명 을 해서 패키지 설치나 실행등을 해야하는것이 불편했는데, 그냥 리액트 관련 폴더들 (src , index.html 등등)을 자동으로 생성된 폴더에서 빼서 깃허브 폴더 바로 밑에 둬도 상관이 없었다

별건 아니지만,,, 이때부터 cd Gieoghaebom 명령어 없이도 실행이나 설치 등이 가능해져서 조금 더 편리해졌었다