🤔이 프로젝트 이전의 나

2021.07월 전역하고 HTML이든 CSS든 그저 그런... JavaScript는 아예 모르는.. 그저 웹을 만들고 싶은데 어떻게 공부해야 할 지도 모르겠고, 학과공부처럼 이 태그는 뭐하는 데 쓰고 저 태그는 뭐하는 데 쓰고 이렇게 외워서 하는건가 싶기도 하고 그랬던 웹린이였습니다! (흠.. 저정도면 웹갓난아기?)

그런데 이제 CSS를 위의 방식으로 하다가 깨달았습니다. 어느 세월에 모든 속성과 값들을 머릿속에 넣고 있겠나.. 싶더라구요. 그리고 뭐 CSS 스타일을 써 봐야 구체적으로 어떤 효과를 주는 건지 알 수 있지 그냥 글로만 이런 효과구나~ 하면 필요할 때 딱 생각나서 꺼내 쓸 수도 없고.

그래서 개발은 부딪히면서, 구글링해가면서 해 나가는거구나! 를 깨닫고 (그리고 누군가 저보고 리액트 엄마가 와도 리액트 모른다는 소리를 듣고 ㅋㅋㅋㅋ 정말 많은 깨달음을 얻은...) 웹린이들의 거의 필수 입문코스 중 하나인 TodoList를 유튜브 보면서 따라해보고 검색해보고 하면서 생동감이 1도 없던 나의 HTML에 JavaScript로 뭔가 추가해보기도 하고 삭제해보기도 하고, 이걸 좀 더 부드럽게 나타나게 해보고 싶어서 또 검색해보고..! 이러면서 개발에 드디어 제대로 된 첫 발을 내디뎠고, 그 이후로 혼자서 Gatsby로 github.io를 만들어보기도 하고 (velog로 블로그를 옮기면서 저의 github.io는 다른 용도로 나중에 개편할 거에요) 여러가지를 만들어 봤습니다.

그러다가 문득 드는 생각. 나도 백엔드분들이랑 서버 연동해서 데이터 받아서 띄워도보고 실제 사용자가 내가 만든 사이트를 이용하게도 해보고 그러고 싶은데 어떻게 해야될까... (뭘 어떻게해 너가 풀스택해)
"나도 이제 혼자 말고 협업하고싶다~!"

이렇게 협업에 목 말라 있는 상태에서 저희 학교에 소프트웨어 개발/연구 학회를 찾아서 지원하게 되었고! 여기서 열심히 활동하다가 학회장님으로부터 2022 OO대학교 해커톤: CONNECTHON 플랫폼 개발에 프론트엔드 포지션을 함께할 생각이 있냐는 제안을 받았고! 저는 거절할 이유가 하나도 없었고! 너무나도 기쁘게 프로젝트에 참여하게 되었습니다.
(심지어 '디자인조형학부' 분들도 이 프로젝트에 참여해주셔서, 저는 첫 프로젝트부터 디자이너가 있는 프로젝트를 하게 된 것이 정말 정말 기뻤고 운이 좋다고 생각합니다ㅜㅜ)

🌈CONNECTHON

1. 근데 뭐부터 어떻게 시작해야함?

프론트엔드 2명 (나+회장님~) / 백엔드 2명으로 이뤄진 TF팀이여서 프론트엔드 개발도 처음으로 같이 해보는 순간이었습니다. 근데 그냥 무작정 create-react-app 하고 시작하나요? 나 뭐 해야되지? 라고 생각하고 있었는데 다행히도 나의 파트너가 회사를 다니고 있던 차라 협업이란 어떻게 하는건지에 대해서 저를 참 많이 리드해주셨습니다.

그렇게 정말 기본적인 것 부터 차근차근 정해나가면서 프론트 개발스택의 틀과 스케줄을 만들었습니다.

1. 사용할 라이브러리 및 프레임워크 정하기

   • TypeScript
   • Next.js
   • Recoil
   • react-icons
   • Tailwindcss
     (요녀석은 첫인상이 너무나도 나빴는데 이제 테일윈드에 빠져서 못 나올 것 같아...)

2. Directory 구조 논의

3. Format Convention 논의 : ESLint, Prettier 동시 적용

4. Coding Convention 논의 및 Github Commit 문구 논의

   • feat - 새로운 기능 추가
   • fix - 버그 수정
   • docs - 문서 수정
   • style - 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
   • refactor - 코드 리팩토링
   • test - 테스트 코드, 리팩토링 테스트 코드 추가
   • chore - 빌드 업무 수정, 패키지 매니저 수정

   ex) feat: add landing page

5. Small, but Frequent Commit 하기
   혼자 작업할 땐 진짜 뭐 커밋하고 싶을 때 했었는데 커밋하는 것에도 분명히 기준이 있어야 하는 것이었다. (당연하지) 그래서 정말 작은 기능 하나 당 1 커밋을 했었는데 사실 아직도 잘 모르겠어서 더 많은 글을 읽어보고 있다! (개인적으로 이 블로그가 기억에 남습니다)

6. 전체회의 때 디자이너분들과 IA(Information Architecture), 와이어프레임, 그리고 사전행사로 인한 페이지 별 우선순위를 확정한 후, 필요한 모든 페이지들을 리스트업하고, 우선순위에 따라서 주차별로 만들 페이지들에 대한 개발 스케줄을 잡고, 역할분담은 한 페이지 단위로 하게 되었습니다.
   

2. 처음부터 이렇게 했다면 더 좋았을 것들

[1] 공통으로 쓰는 파일은 먼저 말하고 건들자

Github으로 혼자만 커밋하고 혼자 푸쉬하곤 했었는데 이제 같이 일을 하게 되다보니까 자신이 맡은 페이지는 알아서 커밋하고 푸쉬해도 되지만, next.config.js, tailwind.config.js, globals.css와 같이 공통적인 파일들은 마음대로 건들고 푸쉬하면 나중에 Merge할 때 Conflict가 날 위험이 상당히 높습니다.

Conflict를 처리하는 시간도 우리의 소중한 자원이기 때문에 공통으로 쓰는 파일은 꼭 파트너에게 말하고 괜찮으면 건드는 식으로 일처리를 해야 한다는 것을 깨달았습니다! (수진님 미안)

🐳이 프로젝트로 나는 성장했는가?

솔직히 엄청 많이!! 성장했다고 느낍니다. 7월 초부터 8월 말까지 이 프로젝트를 진행하면서 방학이 있었는지 없었는지 모를 정도로 밤도 많이 새고 힘들었는데 (인생 처음으로 새벽 3시에 아메리카노를 마시며 '나 진짜 개발자가 되는건가' 생각함ㅋㅋㅋㅋㅋ) 이토록 뿌듯하고 성취감 있는 방학이 없었습니다.

혼자 개발 공부를 하면서는 절대 얻을 수 없는 협업 경험을 얻었고, 일을 할 때 사람들과 효율적으로 소통하는 방법도 배웠습니다. 그리고 더군다나 내 파트너가 IT회사에 다니고 있는 사람이라 실무에서의 작업 과정, 작업 방식, 코딩 컨벤션 등을 간접적으로라도 체득할 수 있어서 정말 정말 기뻤습니다.
또, 첫 프로젝트부터 실제 사용자들이 우리 사이트에 가입하고 서비스를 이용하는 것을 바로 눈 앞에서 지켜볼 수 있었다는 점도 저에게는 잊지 못할 경험이 되었습니다.

가장 크게 체감되는 것은 개발에 대한 자신감이 생겼다는 것입니다. 음... 다른 말로 두려움이 사라졌다가 되겠네요. 솔직히 처음 TF팀 회의 할 때, 나 빼고 다들 개발 경험이나 해커톤 경험이 있는데 나 혼자 아예 처음인 터라 '무슨 기능 넣자, 여기에 뭘 추가하자'라는 말만 들어도 무섭고 내가 잘 할 수 있을까 생각했는데 해 보니깐 나도 할 수 있었다는거! 걱정한다고해서 해결될 일은 하나도 없는데 말이죠.

이 프로젝트를 통해서 저의 마인드는 '할 수 있을까?'에서 '오, 이건 어떻게 해볼까? 도전해보자!'로 매우 긍정적으로 변화하게 되었고, 제일 중요한 건 '개발에 대한 흥미' 가 상당히 높아져서 개발 공부 를 더 열심히 하고 싶어졌다는 것입니다!!

그래서 이번 프로젝트를 하면서 완벽히 이해하지 못하고 조금 애매했지만 일단 그냥 썼던 개념, 즉 다음 프로젝트 때는 제대로 알고 써야겠다고 생각한 개념 리스트를 추려보았습니다.

1. async, await

2. Promise

3. sessionStorage, localStorage, Cookie
   (특히, 배포된 서버에서 로그인 하고 생겨난 쿠키를 localhost:3000 탭의 쿠키 칸에 붙여 넣으니 실제로 로그인 한 것처럼 마이페이지도 들어가지게 되었는데 대체 무슨 원리일까)

4. JWT

5. Proxy

6. SSR, CSR (특히 Next.js 쓰면서 더 궁금해짐)

모자랐던 부분들을 하나하나, 제대로, 꼼꼼히 채워가면서 더욱 더 성장하는 개발자가 되자!! ✨✨