글 쓰는 시간

17주차에 한것

이번 주는 기능 개발을 위주로 시간을 보냈다.

이번 팀 프로젝트에서도 역시 특히 팀원의 코드를 보면서 배울 점이 많았다.

이번 주에 한 일을 정리해보면 아래와 같다.

• 로그인/회원가입 페이지 레이아웃 및 기본 기능 구현
• 자바스크립트로 구현했던 페이지네이션을 타입스크립트로 마이그레이션

결과

저번 프로젝트때 라이브러리 없이 페이지네이션을 만들어뒀던걸 타입스크립트로 마이그레이션 했다.

Next.js를 쓰느라 Image 태그를 쓰는 등 조금 다른 부분이 있었지만 크게 문제는 없었다.

다만 이번 주에 예비군도 있고 해서 이래저래 집중력이 흐트러져서 시간을 알차게 쓰지 못했다.

거기에다가 팀 컨벤션을 맞추면서 코드를 작성하느라 기능 개발이 늦어졌다.

다시 와서 생각해보면 어차피 코드 리뷰를 하면서 고치면 되는 부분인데 너무 그쪽에 매몰된게 아닌가 싶다.

내 파트에서 밀려서 다른 팀원들의 진도가 미뤄진게 아닌가 싶어서 미안했다.

이번에는 기능 분배에서 어쩌다 보니 내가 너무 우선순위가 높은 기능들을 담당한것 같다.

다음에 기능 분배를 할 때는 선후관계에 우선순위를 둬서 더 적절하게 분배를 해야할것 같다.

이번 주에 아쉬웠던 부분은 아래와 같다.

1. 시간을 알차게 쓰지 못함
2. 팀 컨벤션을 너무 신경쓰면서 코드를 작성하느라 개발이 늦어짐
3. 내가 맡은 파트 부분이 늦어져서 전체적인 일정이 미뤄진듯

16주차에 한것

이번 주부터 2차 팀 프로젝트가 시작됐다.

첫 주에는 역시 프로젝트 기초 설정과 팀 컨벤션을 위주로 시간을 할애하였다.

저번 팀에 비해서 이번 팀에서는 컨벤션이나 팀 노션을 좀 더 적극적으로 활용한것 같다.

이번 주에 한 일을 정리해보면 아래와 같다.

• 패키지, 프리티어, 린트 같은 프로젝트 기초 설정
• 글로벌 CSS 적용
• 요구사항 분석 및 기능 분담
• 유저 플로우 그리기
• 커밋 컨벤션 및 지라 설정
• 폴더 구조 설정
• 코드 리뷰

결과

이번 팀 프로젝트에도 지라를 쓰도록 팀원들을 설득했다.

1차 프로젝트에서 쓴걸 예시로 보여주고 일정관리하기 좋다는 어필을 했더니 호의적이었다.

이번 팀에서는 저번에 비틀어봤던 경험이 있어서 그런지 세팅에 그리 오랜 시간이 걸리지 않았다.

CSS는 아직 써보지 못한 이모션을 써보기로 했다.

멘토님의 추천도 있었고 스타일드 컴포넌트와 비슷해서 그리 어려울것 같진 않아서 찬성했다.

폴더 구조는 의견이 분분해서 멘토링 시간에 멘토님 의견을 듣고 정해보기로 했다.

이번 주에 아쉬웠던 부분은 아래와 같다.

1. 폴더 구조에 대한 지식 부족으로 어필하기에 아쉬움이 있었음
2. 아직도 면접 후유증에서 벗어나지 못한 느낌이라 집중력이 부족했다.

폴더 구조 정하기

팀 프로젝트를 함에 있어서 컨벤션을 정하는건 아주 중요한 일이라고 생각한다.

도중에 바꾸기도 쉽지 않기 때문에 처음에 컨벤션을 잘 정해두는게 중요한것 같다.

그런데 막상 컨벤션을 정할 때 의견을 내서 팀원들을 설득해서 정하기가 쉽지 않은것 같다.

오늘 폴더 구조를 정할 때도 의견이 분분했는데 정확히 어떤 방식으로 하자고 설득하기가 어려웠다.

FSD를 써보자고 설득해보고 싶었지만 이걸 접한지 얼마 되지 않아서 안써봤기에 어떤게 좋은지 어필하기가 어려웠다.

아무래도 경험치가 좀 더 쌓여야하지 싶다.

백엔드에서도 프로젝트 폴더 구조를 정하는건 쉽지 않은 일이지만 프론트엔드에서도 너무 다양한 폴더 구조가 있는것 같다.

꾸준히 뭔가 이것저것 시도해보고 비교하면서 정리해봐겠다.

11주차에 한것

이번 주는 미비했던 부분을 찾아서 마무리하고 리팩토링하는 시간을 가졌다.

또한 발표하기 좋게 어떤 생각으로 기술을 적용하고 개발했는지 정리하였다.

이번 주에 한 일

• 프로젝트의 요구사항을 만족하지 않는 부분 처리
• 프로젝트 전반적인 버그 수정
• 동일한 API 중복 호출하는 컴포넌트 리팩토링
• 개발 내용 정리
• 컴파운드 컴포넌트 패턴으로 드롭다운 구현

결과

이번 주에는 기존 코드들을 리팩토링하면서 몇가지 깨달음을 얻을 수 있었다.

우선 서버 상태와 클라이언트 상태라는걸 이해했다.

리액트 쿼리는 서버 상태, 리덕스는 클라이언트 상태를 관리하는걸로 분리할 수 있단걸 알았다.

그동안 고민이었던 서로 다른 컴포넌트들이 데이터를 공유하려면 어떡해야하는가? 에 대한 답이 보인것 같다.

리액트 쿼리로 서버 상태를 캐싱해두면 다른 컴포넌트에서 API를 중복으로 호출하게끔 코드를 작성해도

캐싱되어있는 데이터를 이용하므로 전혀 문제가 없을거라고 생각이 든다.

다음 프로젝트에서는 이런 상태 관리 라이브러리를 적극 활용해보아야겠다.

이번 주에 아쉬웠던 부분은 아래와 같다.

• 팀프로젝트에서 서버 상태와 클라이언트 상태를 원하는대로 관리해볼 수 없었다.
• 스토리북, 제스트를 많이 적용해보지는 못했다.

10주차에 한것

이번 주는 기능 개발을 위주로 시간을 보냈는데, 특히 팀원의 코드를 보면서 많이 배웠다.

팀원이 만들어둔 커스텀 훅이 굉장히 참고가 많이 되었다. 나중에 또 써먹어야지.

이번 주에 한 일을 정리해보면 아래와 같다.

• 글로벌 CSS 설정 
• 메인 페이지에서 모바일과 PC의 다른 레이아웃을 커스텀훅으로 처리
• 라이브러리 없이 페이지네이션 구현
• 테스트코드 작성
• portal을 이용한 모달 완성

결과

페이지네이션에서 라이브러리를 쓸지, 직접 구현해볼지 고민이 되었다.

라이브러리를 쓰는 법도 알아야겠지만 직접 구현해보면서 배울 수 있는 부분이 있을것 같아서 직접 구현해보았다.

또한 IDIOTs의 유일한 프론트인 분께 전에 들었던 모달 구현 방법을 적용해보았다.

이 방법으로 구현해보니 장점이 뚜렷해서 다음에도 비슷한 방식으로 구현을 할 것 같다.

그리고 멘토링 시간에 들은 부분을 바탕으로 리팩토링을 해보았다.

특히 스타일드 컴포넌트를 쓰면서 코드 양이 길어지는게 고민이었는데

읽는 사람을 생각해서 스크롤 안내려도 바로 보고싶은걸 볼 수 있게끔 하라는 조언이 도움이 되었다.

이번 주에 아쉬웠던 부분은 아래와 같다.

1. 이것저것 과하게 생각하다보니 기능 구현이 느렸다.
2. 각각 컴포넌트에서 같은 API를 두 번 호출하는 등, 상태 관리가 아쉬웠다. 

JIRA

지금까지 JIRA 하면 뭔가 복잡한 무언가라고 생각하고 있었던것 같다.

그래서 JIRA, 티켓 이런 이야기가 나오면 괜히 쫄아서 손 댈 생각도 못해보고 있었다.

하지만 요즘들어 다른 사람들도 다 쓰는데 나라고 못쓸까? 라는 생각을 갖고 그동안 못해본걸 해보고 있는데,

JIRA도 그 중 하나라고 생각이 되어 뭐가 됐든 한번 해보기로 했다.

최근 IDIOT-s 에서 팀 프로젝트 하는것도 JIRA 쓴다고 해서 팀원분께 알려달라고 부탁했다.

설명을 들으면서 시연하는걸 보고 나니 잔뜩 쫄아있던거에 비해 생각보다 별거 없었다.

깃허브 기능의 마일스톤, 이슈와 비슷한 느낌인데 더 쉽게 만들어둔 느낌이었다.

써보기

JIRA 에는 에픽이라는 조금 큰 작업 단위가 있고, 에픽 하위에 하위 이슈라는 작은 작업 단위가 있다.

내가 이해한 바로는 대충 이런 식으로 쓰는것 같다.

1. 적절한 크기(하루 내로 할 수 있을 정도)로 업무를 쪼개고, 쪼갠 업무로 에픽을 만든다.
2. 에픽에서 세부적으로 해야할 일을 나눠서 하위 이슈를 만든다.
3. 하위 이슈를 처리할 때 해당 이슈 이름의 브랜치를 만들고 거기서 처리한다.
4. 각각의 하위 이슈들을 작업하고 PR을 올린다.

팀 스타일에 따라 맞추면 되겠지만 기본적인 골자는 이런것 같다.

내가 써보면서 익힐겸, 팀원들도 꼬실겸 어떻게 쓰는지를 나름대로 정리해보았다.

이슈 생성 방법을 간단하게 사진으로 정리하면 아래와 같다.

JIRA는 깃허브 org 레포지토리와 연동할 수 있다.

연동 후에 이슈를 처리하는건 아래처럼 하면 된다.

워크 플로우 설정같은거도 할 수 있는것 같았는데 차근차근 만져봐야겠다.

좀 더 많은 기능이 있겠지만 이 정도만 써봐도 깃허브보다 이슈 관리, 브랜치 설정하기 편하다는 느낌이었다.

그래서 팀 프로젝트 할 때 쓰자고 꼬셔서 도입에 성공했다. 야호 !