이곳이 바로.. 유니크굿..? — 프론트엔드 인턴의 온보딩과정 #2탄
유니크굿컴퍼니 프론트엔드 인턴의 온보딩 과정을 담았습니다.
<이곳이 바로.. 유니크굿..? — 프론트엔드 인턴의 온보딩과정 #1탄>을 읽고 오셨나요? 1탄에 이어 2탄에서는 온보딩 과제 개발과 그 결과물! 그리고 그 과정에서 느낀점과 배운점들을 적어보았답니다ㅎㅎ! 2탄도 재미있게 읽어주시길 바라요 :)
개발 (기술스택, 컴포넌트 구조, 주요 기능과 결과물)
- 기술스택
- 프로젝트 구조
atoms 폴더, page폴더, components폴더 > 각 page 폴더,
page 폴더에 크게 퀴즈 목록 페이지, 퀴즈 상세 페이지와 같이 페이지 단위로 구분해두었습니다. 각각의 페이지에 쓰이는 컴포넌트들을 components 폴더 > 각 page 이름을 가진 폴더에 모아두었습니다.
그리고 그 중에서 여러 페이지에서 반복적으로 쓰이는 컴포넌트들은 atoms 폴더에 모아 관리했습니다.
- 페이지 및 기능
로그인과 회원가입
마이페이지 — 내가 쓴 글과 댓글 조회
퀴즈 생성 페이지— 글쓰기, 퀴즈 카테고리 선택
퀴즈 목록 페이지— 퀴즈 제목과 카테고리 별 색상 표시
퀴즈 상세 페이지 — 공통:좋아요 기능, 댓글 삭제 기능 / 작성자:글 삭제 기능, 댓글에 정답여부 체크할 수 있는 기능
- 결과물 (각 페이지 및 기능 설명)
퀴즈 생성 페이지 — 나만의 퀴즈를 낼 수 있는 페이지입니다. 제목과 내용을 작성하고 ‘일반, 죽음, 코믹..’ 중 어떤 카테고리에 해당하는 퀴즈인지 선택하여 퀴즈를 생성할 수 있습니다.
퀴즈 목록 페이지 — 생성된 퀴즈를 모아볼 수 있는 페이지입니다. 퀴즈 목록에 인피니티 스크롤이 구현되어 있습니다. 왼쪽 상단 버튼을 통해 카테고리를 선택하여 카테고리 별 목록 보기가 가능합니다. 오른쪽 상단 버튼을 통해 퀴즈 생성 페이지로 이동 가능합니다. 각 퀴즈를 누르면 퀴즈 상세 페이지로 이동합니다.
퀴즈 상세 페이지 — 퀴즈 생성 페이지에서 작성한 제목, 내용, 카테고리가 표시됩니다. 모든 유저가 댓글을 작성하고, 댓글에 좋아요를 표시할 수 있습니다. 퀴즈의 작성자인지 아닌지 확인하여 게시글 삭제 버튼을 표시해 주었습니다. 또한 작성자의 경우 댓글에 YES!, No…, Hmm… 이 세가지를 표시할 수 있는데요. 이것은 ‘바다거북스프’ 게임의 특징을 살리기 위한 기능이었습니다.
마이페이지 — 자신이 쓴 글과 댓글을 모아볼 수 있는 페이지입니다. 왼쪽에는 유저의 이름과 유저가 작성한 글 개수와 댓글 개수가 나타납니다.
배운점과 느낀점
- CSS
온보딩 프로젝트 마무리 후 테크 리더 예찬님께서 전체적으로 CSS 리뷰를 해주셨습니다. 위에서 아래로, 그리고 좌에서 우로 흐르는 문서의 흐름을 생각하며 CSS를 작성해야 함을 배웠습니다. 또한 같은 기능을 수행하는 CSS 속성도 문서의 의미에 맞게, 다른 컴포넌트에 영향을 최소화할 수 있도록 CSS를 작성하는 방법을 배울 수 있었습니다.
돌아보니 저희는 온보딩 과제에서 CSS로 그림을 그렸었네요. 특히 화면상에 잘 배치하는 것만 생각하여 flex를 남용한 과거의 제가 기억이 납니다. (저기요.. flex농장주세요? 아주 flex밭이네 밭이야!)
(한 페이지에 무려 flex를 8개..를 사용한 기적의 레이아웃😱 그치만? 성장한 지금의 저로서는 상상할 수도 없죠!)
- SWR
나름 실시간에 가깝게? API응답을 화면에 반영하기 위해 상태관리를 어떻게 하면 좋을 지에 대해 고민했습니다.
먼저 고민되는 지점에 대해 테크 리더 예찬님과 이야기를 나눴고, 예찬님께선 Recoil 또는 SWR을 제안해 주셨습니다. Recoil과 SWR에 대해 공부한 후 SWR을 도입하기로 하였습니다. 단순히 할 줄 아는 기술이 아닌 상황에 적합한 기술을 고민하여 도입했다는 것 자체로 좋은 경험이 되었는데요!
저희는 특히 댓글을 작성할 때와 작성자가 댓글에 (YES, No.., Hmm..) 표시를 남길때, 즉시 화면에 변경된 데이터가 보여지도록 하고 싶었습니다. SWR이 mutate 함수를 이용해 상태를 즉시 다시 fetch 하고 데이터를 갱신한다는 특징이 저희가 만들고자 하는 ‘바다거북스프' SNS에 적합하다고 판단했습니다.
- Git
git을 사용하여 작업별로 브랜치를 만들어 master에 merge하는 방식으로 협업을 진행했습니다. git의 다양한 명령어들부터 conflict 해결방법, 브랜치 관리법, 그리고 좋은 PR이란 무엇인지까지 배울 수 있었습니다.
저희가 만났던 conflict들과 문제 상황들을 어떻게 해결했는지 두 가지 정도만 공유해 보도록 하겠습니다ㅎㅎ!
첫 번째로 본인이 작업한 브랜치에서 master브랜치로 잘못
rebase한 것을remote브랜치에 까지 반영한 경우가 있었습니다. 이때git reflog로 본인이rebase한 로그를 보고 돌아가고자 하는 특정 커밋을 확인하였습니다.git reset으로 잘못rebase한 브랜치를 되돌리고,git push --force를 하여 해결할 수 있었습니다.두 번째로 원하는 브랜치가 아닌 다른 브랜치에서 작업한 후 commit을 추가한 경우가 있었습니다. 이 경우엔 원하는 타겟 브랜치로
git switch하여 이동한 후, 다른 브랜치에 남긴 commit들을git cherry-pick하여 원하던 브랜치에 commit들을 안전하게 옮겨올 수 있었죠.
이처럼 git을 다루면서 고난과 역경이 있었지만 git을 잘 다루시는 백엔드 개발자 현우님께서 적극적으로 도움을 주셔서 깔끔한 선형 로그를 가진 master 브랜치를 만들 수 있었답니다. (그저 갓-현우✨ 빛-현우✨ 감사합니다ㅎㅅㅎ)
현재는 백엔드 개발자 현우님과 프론트엔드 개발자 무훈님께서 git 스터디를 주최해 주셔서 사내 git 스터디가 진행되고 있습니다.🎉 실습을 포함한 퀄리티 좋은 강의를 준비해주신 덕분에 git에 대한 이해도와 활용력을 더 높이고 있답니다.
git 스터디를 통해 배운 것
(
git remote/git commit --ammend/git add -patch/git diff/git revert/git cherry-pick…)우와 굉장히 많죠?
- 마지막으로 일정산정..!
개발 리소스를 산정하고 ,필요한 경우 일정에 대해 논의하고 설득하는 과정을 경험할 수 있었습니다. 앞선 1탄에서 기획 단계를 소개할 때 ‘스불재(스스로 불러온 재앙)’을 언급한 바 있는데요. 기획자인 저희는 개발자인 저희를 과대평가 했더라구요.
개발 상황을 체크하던 중 일정안에 개발을 마무리하는 것이 어렵다는 것을.. 직감했습니다. 따라서 팀 내 공유 및 일정 논의를 거쳐 마감 일자를 연장하게 되었습니다.ㅎㅎ
역시 일정 산정은 어렵다는 것을 다시 한 번 느꼈는데요. 핵심 기능을 정의하고 기능별 우선순위를 잘 정하는 것의 중요성을 배울 수 있었습니다. 또한 필요한 경우 일정에 대한 논의와 설득을 적극적으로 할 수 있어야 한다는 것을 알게 되었답니다.
마무리
온보딩 과제의 마무리로 팀 내에서 결과 발표 및 회고를 진행했는데요. 테크 리더 예찬님께서는 저희의 온보딩을 지켜보시며 ‘한 아이는 온마을이 키운다.’는 말이 무엇인지 볼 수 있었다고 말씀을 해주셨습니다.
정말.. 어떻게 이렇게 많은 애정과 관심을 주실 수 있지? 싶을 정도로 다정하게 저희 인턴들을 지켜봐주시고 도움을 주신 모든 유니크굿 멤버분들께 감사하다는 말씀을 드리고 싶습니다. 앞으로 더 같이 일하고 싶은 동료 그리고 여러분의 자랑스러운 동료가 되도록 열심히 하겠습니다. 감사합니다 :)
지금까지 ‘유니크굿컴퍼니 프론트엔드 인턴 개발자 정수하의 온보딩!’ 이었습니다. 재미있게 보셨나요? 그렇담 마지막으로 우리 회사 홍보가 빠질 수 없죠?
저의 온보딩 과정이 재밌으셨다면?? 유니크굿컴퍼니에 흥미가 생기셨다면??
소리 지~~~르지 말고 유니크굿컴퍼니 지원해! 함께해! 채용공고 바로가기 👉 👉 (유니크굿컴퍼니와 함께해요 — 유니크굿컴퍼니 채용)
