[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑦

작업 내용 리뷰

antd 커스텀

우리 프로젝트의 메인 컬러는 햄버거바에서 보이는 바와 같이 연두색에 가까운 초록색인데, React UI library를 앤트디자인으로 사용하였더니 default컬러가 저런 파란색으로 나왔었다. 우리가 직접 css한 부분은 초록색인데 antd를 사용한 부분만 푸릇푸릇하니 통일성이 없어보여 이 부분을 우리가 커스텀하기로 했다!

👍시도

1. less를 글로벌로 설치한다.

npm i -g less

2. antd.less 파일을 불러오기 쉽도록 터미널로 node_modules에 직접 들어가서 커스텀 코드를 작성할 less 파일을 생성한다.

cd node_modules/antd/dist
touch my_custom.less

3. 디렉토리의 node_modules/antd/dist 경로에 가보면 my_custom.less파일이 생성되었을 것이다.
   

4. my_custom.less파일에 원본을 import한 후 커스텀할 코드를 작성한다.

//my_custom.less

@import "./antd.less"

//커스텀할 코드 작성
@primary-color: #73d13d;

5. 터미널에서 원하는 경로와 파일 이름을 정하고 css로 추출한다. 나는 src 디렉토리에 styles폴더에서 모든 스타일을 관리하고 있기 때문에 해당 경로로 설정했다.

lessc --js my_custom.less ../../../src/styles/my_custom.css

그러면 아래처럼 무수히 많은 코드가 적힌 css파일이 해당 경로에 생성된다.

6. App.js(jsx)에서 antd.css 대신 my_custom.css를 import 한다.

// App.js

import './style/my_custom.css'

폴더명 및 파일명 변경사항 git에 반영하기

처음 프로젝트를 시작했을 때 모든 폴더 및 파일을 대문자로 시작하는 표기를 하였는데 대부분의 개발이 완료되고 나자 이 부분도 리팩토링 하면서 수정하기로 했다. 처음에는 창엽님의 로컬에서 직접 파일선택하여 rename하여 push하였는데 git에 반영이 되지 않았다.. 알고보니 git은 대,소문자를 구분하지 않아 파일명이나 폴더명이 바뀐 것을 반영하지 않는다고 한다.

그래서 창엽님의 로컬과 내 로컬, 원격의 폴더명이 다른 문제가 발생하였는데 이 문제를 해결하기 위해서 git에 폴더 및 파일명을 바꿀 수 있는 명령어를 찾아보았고 나와 같은 문제를 겪은 사람에게 도움이 되고자 같이 포스팅 한다.

👍시도

git에 파일명 및 폴더명을 수정하여 반영하는 명령어는 아래와 같다.

// 폴더명 수정
git mv oldFolderName newFolderName

// 파일명 수정
git mv oldFileName.js newFileName.js

단, 이 때 주의사항이 몇 가지 있다.
1. 직접 해당 경로로 터미널에서 이동한 후 위의 명령어를 입력해야한다.

src디렉터리 하위에 있는 폴더나 파일명을 바꿀 때 cd 명령으로 디렉터리를 이동한다.
사진에서 보는 assets 폴더의 하위 폴더/파일을 바꿀 때도 마찬가지로 cd assets으로 이동한다.

2. 대소문자만 바뀌는 경우는 위의 명령을 실행하면 아래처럼 실패가 뜬다.

$ git mv assets Assets
fatal: bad source, source=project/assets, destination=project/Assets

따라서 번거롭지만 아래처럼 두번 바꾸는 과정을 거쳐야 한다.

temp외에 다른 이름을 사용해도 무방하다.

그런데 가끔, 몇몇 디렉토리는 파일명이 바뀌지 않는 경우가 있는데

$ git mv assets assetsAfter
Rename from 'src/assets' to 'src/assetsAfter' failed. Should I try again? (y/n) 

이런 경우 바꾸는 파일이나 폴더명을 겹치는 것 없이 아예 다른걸로 여러번 바꾸다 보면 얻어걸린다.. (이 부분은 왜 이런지 모르겠다..)

👏느낀점

위의 두 가지 이슈는 회사에서 프로젝트를 진행하면서도 개선하고 싶었던 사항이고, 직접 겪은 이슈이기도 했다. 다만, 프로젝트를 완수하는 기간이 너무 촉박하여 그런 디테일한 부분에 신경을 쓸 수 있는 여력이 없어 해결을 미루었던 일들인데, 이번 기회에 해결방법을 직접 찾아 해결해 보니 회사 프로젝트에서 변경하는 일이 좀 수월해 질 듯 하다!

두 가지 이슈는 기능이나 성능상의 문제가 있는 이슈는 아니지만, 개발자간 혹은 유저들이 보는 화면상에서 드러나므로 가능한 통일성을 맞추고 규칙적인 협업을 하기 위해 일찍 해결할 수록 좋다고 생각한다. 혹시라도 프로젝트를 진행하며 같은 고민을 하고 있는 개발자가 본다면 조금이나마 도움이 되기를 바라본다.