프로젝트 후기 | 배운 점 1탄

생각해보니 이전 후기에는 감정적인 내용만 적은 것 같아
해당 포스팅에는 프로젝트를 통해 배운점을 이야기해보고자 한다

글이 기니 먼저 핫초코 한 잔 ☕️

목차

0. 깃헙 사용법
1. 초기 세팅
2. 협업 방식
3. 다양한 도구 활용
   → 2탄에서 계속
4. API 개념 확립
5. 폴더 정리
6. velog 포스팅
7. 테스트 방법
8. 반응형
9. 템플릿 활용

---

깃헙 사용법

git branch 분리/수정, PR, readme 작성(마크다운), commit convention

• Git Branch
  뭐니뭐니해도 플젝을 통해 가장 크게 얻어가는 부분은 깃 커밋이라고 생각한다
  혼자 작업하는 경우, master/main 브랜치에서만 커밋을 진행하기에
  브랜치를 분리해서 작업한 경우는 이번이 찐으로 처음이었다.
  master/main 브랜치는 놥두고 메인 페이지 개발용 브랜치를 분리한 후 (feature/main-page),
  그 안에서 또 새롭게 브랜치를 분리해서 작업 후
  merge나 PR이 완료된 브랜치는 삭제하고 다시 브랜치를 분리해서 작업하고의 과정을 반복했다.
  처음에는 정말 당황하기도 하고 전부 새로이 찾아서 진행해야 했던 부분이 어려웠는데,
  지금은 꽤나 익숙해진 자신을 보며 놀라울 정도 ^^
  물론 여전히 부족한 부분은 있고, 명령어들이 바로 떠오르지 않는다
  ㄴ github의 branch를 내 로컬로 끌어와 시작하는 법.
  이번 프로젝트에서는 내가 다 도입 담당이여서 해당 파트를 수행할 기회가 없었다.
  따로 연습 필요 (url 복사해서 붙여넣기하면 된다고 하는데 잘 안 됨)
• PR
  Pull Request. 프론트 팀원분이랑 초반에 이야기할 때 어찌 부르면 좋을지 몰라서
  풀리퀘라고 칭했는데 후반부에 들어서는 PR이라고 자연스럽게 칭하게 되었다
  (이러한 모습을 보면 좀 발전했구나 싶음)
  메인 브랜치를 생성했기 때문에 자동으로 PR 담당이 되었다
  PR은 브랜치를 분리해서 작업 완료 후 합치는 경우 시행하는 과정이며
  코멘트를 달거나 main에 병합할 때는 리뷰를 필수로 한다
  (근데 꼭 필수는 아닌 듯 하여-깃헙 추천 방식은 필수이나) 따로 찾아볼 필요 有
  merge 충돌이 발생하기도 해서
  (참고 : https://velog.io/@eunsuknoh/wc-project-til-241112)
  기존의 내용과 새로운 내용을 둘 다 받아들일 것인지, 한 쪽만 받아들일 것인지 등을 해결하는 과정도 경험할 수 있었다.
• readme 작성 (마크다운)
  이번 플젝 동안
  팀 readme / 프론트 ・ 백 별 readme / velog 포스팅을 통해 마크다운을 엄청 썼다.
  생각해보면 네이버 블로그를 거의 매일 작성하고 있는데
  알고보니 이것도 마크다운(!!)이라는 것을 깨닫고
  아는만큼 보인다는 말을 체감했다 (뭔가 그런 것을 깨닫는 재미가 있음)
  암튼 많이 작성하기는 했지만 여전히 마크다운은 어렵다.
  표시가 여전히 잘 안 익혀지기도 하고, 특히 테이블 만드는 건 매번 구글이나 gpt를 찾게 된다.
  그러나 여러 자료를 참고해서 나름 괜찮은 팀 readme도 만들 수 있었고,
  그를 바탕으로한 프론트 readme도 제작할 수 있었다.
  하지만 확실히 readme 제약 부분에 있어 아쉽다고 느꼈던 부분도 더러 있었다
  (지금 작성만 해도 이미지 옆에 텍스트 배치가 안 됨.
  또 github readme 작성이랑 velog 작성 등 사이트마다 어떤 건 적용이 되고 안되는 차이도 있음)
  갑자기 마크다운 이야기하니까 MDX가 생각나네
• git commit convention
  폴더명이나 컴포넌트 네임명 등 naming convention 같은 건
  꽤 찾아봤는데, 깃 컨벤션이 있는 줄은 예상도 못했던 부분이었다.
  우리 팀은 커밋 메세지를 영어로 작성하기로 했는데 다음에는 한국어로 작성해보고 싶기도 하고.
  하지만 개발 자체가 영어 베이스이기 때문에 영어 작성에 익숙해지는 편이 낫지 않을까 하는 사견이다
  
  
  

초기 세팅

프로젝트가 원체 처음이기도 해서 초기 세팅을
CRA 깔고, 사전에 이야기한 기술 스택에서 미리 다운 받아야할 것들을 ex) 리액트 쿼리, 스타일 컴포넌트
깔기만 하면 된다고 생각했다. (사실 당시 시간에 쫒기기도 하고 멘붕이였던 탓도 있다)
뒤늦게서야 보니 폴더까지 세팅해놓으면 좋다는 것을 알게 되었다.

협업 방식

Discode / Notion 사용법

• Discode
  겪어보니
  왜 소통도구로 디스코드를 사용하는지 너무도 이해가 갔다
  채팅 채널 / 음성 채널을 분리해서 생성하기도 쉽고,
  음성 연결할 때도 해당 방을 클릭하기만 하면 되니 아주 용이하다
  확실히 카톡 전화를 생각하면..... (절레절레)

• Notion
  노션 ? 어렵다
  오 네. 정말로 그렇습니다
  스케줄이나 정리, 공지 등에 노션을 썼지만 노션 자체는 활용을 거의 못 하고 작성만 했다
  (찾아보기도 했는데 뭔가 원하는 자료가 마땅치 않았고.. 쉽지 않다)
  약간 왜 이렇게 만들었지? 싶은 생각도 들었다. 직관적이지 않다고나 할까?
  뭔가를 만들려면 찾아봐야하고 바로 파악해서 사용하기 어렵다고 느꼈다
  물론 작성 글을 동시에 수정할 수 있는 부분은 좋았다
  아무튼 갈길이 먼 노션 ⛰️
  그래도 플젝 마지막에는 노션 템플릿을 받아 빠르게 정리하고 나름 구색을 갖춰 마무리했다.
  역시 템플릿 활용이 최고다.
  
  

다양한 도구 활용

와이어프레임 : Balsamiq / Figma

• Balsamiq
  멤버 구인 공고를 올리기 전-스토리보드라고 생각했지만
  알고보니 와이어프레임이였던-와이어프레임을 만들어보기 위해
  gpt로 도구 추천을 받았는데 위 2개를 추천받아서 그 중에서도
  좀 더 쉬운 편인 발사믹을 먼저 사용했다.
  무료 체험판을 이용하였고 사용 방법은
  이미 만들어져있는 요소들을 끌어와서 원하는대로 배치만 하면 되는 거라 재밌게 집중했던 작업이었다.
  특징이라면 직접 그린 것 같은 핸드라이팅이 포인트 🪄
• Figma
  그 유명한 피그마.
  협업 요소로 가장 많이 사용되는 도구이자 개발자 구인 공고에서 흔히 볼 수 있는 그 피그마다.
  피그마를 초반에 가입했는데 노션처럼 이게 뭐지? 가 되서
  그냥 계정만 생성해둔 상태였다가
  후반부에 필요한 상황이 생겨(발사믹 무료체험판 종료됨, 노트 없음 이슈)
  작업해봤는데 나름 나쁘지 않아서 사용하게 되었다.
  확실히 피그마로 작업하니 정말 그럴 듯한 와이어프레임이 생성된다
  근데 약간 웃겼던 점은 보통
  디자이너가 웹페이지를 미리 디자인해서 그에 맞춰 프론트가 작업을 하는 방식일텐데
  나 같은 경우는 웹페이지를 만들어두고 그걸 바탕으로 피그마를 만들어서
  약간 이게 뭐지? 싶은 느낌이였다 로꾸꺼
  그러나 해보니 일일이 코드를 바꿔 디자인을 확인하는 것보다
  피그마로 여러 시안들을 만들어 비교 후 결정된 시안으로 제작하는게
  훨씬 더 나은 과정이라고 여겨졌다. 협업도구로써는 활용하지 못했다

이미지 소스 : Freepik / Adobe Stock

• Freepik https://www.freepik.com/
  무료 이미지 사이트.
  여러 이미지를 수집하는데 사용했다.
  자료 양이 방대하나 그럴듯한 이미지는 유료이다
  그래도 양이 많아서 그런지 괜찮은 이미지 수집도 가능하다

• Adobe Stock https://stock.adobe.com/kr/
  이번 플젝에 사용한 이미지 소스는 다 어도비 스톡해서 받았다
  유료 플랜을 한달 간 무료로 체험할 수 있는데,
  총 20개의 크레딧을 제공받아서 20개의 이미지 라이선스를 획득할 수 있다.
  어도비 스톡 너무 좋다.
  돈만 많으면 진짜 유료 서비스를 사용하고 싶을 정도 !
  정말 ★ 추천추천추천대추천 ★
  자료 양도 많지만, 이미지 퀄리티가 정말 좋다.
  옷 이미지를 기존 아이콘?에서 어도비 이미지로 변경했는데
  (참고 : https://velog.io/@eunsuknoh/wc-project-til-241105)
  정말 대만족 !!!
  니즈에 딱 들어맞는 이미지를 발견했을 때의 그 희열이란 !
  마음에 쏙 드는 이미지를 발견했던 날에는 너무 기쁘고 행복해서 기분이 방방 뛰었다
  그리고 그 날에 배웠던 교훈. 디자이너가 없으면 유료 이미지를 사용하자!

아이콘 소스 : React Icons

• React Icons https://react-icons.github.io/react-icons/
  평소에는 아이콘으로 Font Awesome을 사용하는데
  노션 아이콘이 필요한데 폰트어썸에 없어서 찾는 와중 발견 !
  사용 방법도 훨씬 간단하고 아이콘 이미지도 정말 많아서 (폰트어썸은 무료 아이콘이 한정적)
  다음에도 애용할 것 같다.
  근데 니코쌤이 폰트어썸을 추천한 이유가 있지 않을까 싶기도 하고.....

이미지 편집 : Pixlr / Photopea

• Pixlr https://pixlr.com/kr/express/
  간단한 이미지 편집 사이트.
  이번에 이미지 작업을 하면서 가장 도움을 받았던 사이트다
  직관적이라서 이용하기에도 쉬웠고,
  png 이미지들을 조합해서 다운받는데 사용했다
  (근데 다운이 하루에 3번까지 무료인 듯)

• Photopea https://www.photopea.com/
  포토샵의 무료버전.
  이번 프로젝트에서 사용하지는 않았지만 (살짝 작업하긴 했는데 결국 안 씀)
  많이 써본 건 아니라 작성할지 고민하다가 일단 기록용으로 적기로 했다
  근데 역시 포토샵은 어렵다
  
  

→ 2탄에서 계속됩니다