TodoList Project 회고록

 

TodoList Project 란?

 

 

 

 

👇 배포 링크

 

https://joeunji0119.github.io/loginTodo/

TodoList

 

 

 

 

 

 

팀원

 

FE : 조은지

GitHub - Joeunji0119/loginTodo: 프리온보딩-7 마무리 후 배운 걸 적용하며 ts로 Auth, TODO 구현 연습

 

BE : 이상우

GitHub - sw1104/todo-server-api

 

 

 

 

 

기술 스택

 

FE 

 

BE

 

 

 

 

 

프로젝트 설명

프리온 보딩 수료 후 배운 typeScript, ReactQuery, emotion.js 를 학습하기 위해 백엔드 개발자 동료와 함께 TodoList 프로젝트를 기획하였습니다

 

 

 

 

구현 기능

 

 

 

 

 

로그인 / 회원가입 / TodoList 

 

 

---

 

 

 

 

이번 프로젝트는 지난 프로젝트들과는 다르게 학습의 목적이 컸고 프론트, 백엔드 각각 한명씩 구현한 터라 자유도 높게 작업할 수 있었다. 프리온보딩을 수료하며 많은 개발자 분들의 코드를 보고 배운 점이 정말 많았는데, 이를 코드로 학습하기엔 CRUD가 가장 적합하다고 생각해, 같은 시기에 프리온보딩을 수료한 백엔드 개발자님과 함께 프로젝트를 진행했다. 

 

 

프리온보딩 때는 주어진 api 만을 사용해 과제를 구현해야했는데, 이번 기회엔 오랜만에 백엔드 개발자님과 함께 작업할 수 있어서 구현 하고픈 기능을 많이 제안 드렸다. 특히 회원가입창 관련해서 많이 아이디어를 냈는데, usehookForm을 써서 많은 input 창을 접해보고 싶었기 때문에 팀원과 회의를 거쳐 회원가입 창에서 사진, 이름, 생년월일, 성별, 이메일, 비밀번호를 받기로 했다.

 

 

그리고 아니나 다를까, 회원가입 페이지 구현 초반에 useHookForm과 폼데이터로 사진을 보내는 작업도 처음이었기 때문에 초반에 애를 많이 먹었다. hookForm 기본 설정이 폼데이터였기 때문에 굳이

 

formData.append(name, value);

 

 

메서드를 사용할 필요가 없다고 생각했는데, formData 메서드를 넣지 않으니 사진만 데이터가 가지 않았다. 콘솔엔 잘 찍히는데 페이로드에는 담기지 않았다. 결국 formData 로직을 넣어 기능을 구현했는데, 코드량이 확 늘게 된 점이 크게 아쉬웠다. 하지만 회원가입 창에서는 더이상 작업 시간을 지체할 수 없었고 hookForm + formData 로 처음 구현한 작업물이라는데서 위안을 찾고 다음 구현 파트로 넘어갔다. 지금도 물론 아쉽지만 이때의 결정이 옳았다고 생각하는데, 이때 더욱 욕심을 부려 계속 회원가입 페이지를 작업하고 있었다면 구현 기간 늘어져 프로젝트 분위기가 루즈해져 자칫 완성을 못했을 수도 있다고 생각한다.

 

todo 페이지는 reactQuery를 중점적으로 쓰고자했다. 좀 더 잘 활용할 수 있을 거 같은데, 이렇게 쓰는 컨셉이 아닌 거 같은데, 하는 아쉬운 점이 남는 작업이었는데 사실 학습을 진행하고 코드를 작성하면서 todoList를 구현하는데 reactQuery는 매우 오버 스펙이라고 생각했다.

 

todoList는 useQuery를 사용해 주기적으로 데이터를 받아올 이유도 없었고 error나 loading 처리도 크게 필요하지 않았다. CRUD(read 제외) 부분은 useMutation 을 사용해 api 를 불러왔는데 onSuccess 로 전체 list를 다시 불러오게끔했다. 이런 방향으로 로직을 짜는 게 리액트 쿼리의 컨셉에 맞다고 판단해서 코드를 작성했지만, 작업 내내 오히려 불필요하게 통신이 이루어진다는 느낌을 많이 받았다. 간단한 todoList는 오히려 UI적인 부분에 신경을 크게 쓰는게 맞다고 느꼈다.

 

CSS-in-JS로 이번에 emotion.js 를 선택해 사용했는데, 이 또한 너무 styled-component처럼 사용해서 아쉬움이 남는다. 초기 global, theme 설정 때문에 시간을 많이 소요했는데 후에도 <div css={styeld}> 형태가 불편하다고 느껴

 

 import styled from "@emotion/styled"

 

로 쭉 작업했고, 결국 조건부 스타일링을 주는데서 막혀 크게 애를 먹었다. styled-component 는 함수를 props로 넘겨 스타일.tx 내에서 바로 처리하면 됐었는데 @emotion/styled 는 좀 다른 거 같았다. 결국 스프레드 연산자를 사용해 함수로 뺐는데 이 부분에 대해서도 크게 아쉬움이 남았다.

 

 

 

 

 

 

 

공유 툴

 

 

Swagger

 

 

정말 편리하게 쓸 수 있었던 Swagger. 평소 팀원이 쓰던 Swagger 툴을 눈여겨 보고 있었기 때문에 꼭 받아보고 싶었는데 이번 프로젝트를 하면서 처음으로 받아보게되었다. api가 한 눈에 들어와서 가장 좋았고 각 우측의 토글을 클릭하면 요구하는 데이터들을 볼 수 있었는데, postman처럼 모든 method를 테스트 해 볼 수 있어 편리했다. 

 

그 외의 공유툴로는 슬랙을 썼고 같은 기간에 백엔드 팀원도 catBow 프로젝트에 함께 참여했었기 때문에 오프라인에서의 소통이 많아 공유툴은 늘리지 않았다. 게다가 이제껏 해왔던 프로젝트와는 달리 이번 프로젝트는 규모가 작은 프로젝트였고, 서로 같은 공간에서 빠른 시간 내에 피드백을 주고 받을 수 있어서 큰 불편함 없이 작업할 수 있었다.

 

 

 

 

 

 

 

 

느낀 점

 

이번 프로젝트는 Catbow 프로젝트와 기간이 겹쳐 온전히 시간을 쏟지 못해 아쉬움이 남지만 (백엔드 팀원분도 catbow 프로젝트를 함께했기 때문에 별다른 이슈는 없었다.) 쓰고 싶었던 스택으로 CRUD를 했다는 점에서 즐겁고 행복하게 작업했다. 프리온보딩은 짧은 기간 내에 과제를 수행해야해서 새로운 스택들을 썼지만 과연 이해하고 쓴 것이 맞는가 하는 의문이 크게 들었었는데 이번 프로젝트를 통해 천천히 공식문서를 읽고 따라 써보는 충분한 학습 시간이 있었기에 그걸 조금이나마 해소했다고 느낀다. 이번 프로젝트는 이렇게 마무리 지었지만, 간단한 todoList인 만큼 계속해서 리팩토링이 이루어질 거 같다.

 

또, 이번엔 여타 다른 프로젝트들과는 다르게 프론트 1명, 백엔드 1명으로만 프로젝트를 진행해 루즈해질 수도 있었는데 이 점을 매일 오프라인으로 서로 아이디어를 주고 받고 진행 상황을 공유했기 때문에 프로젝트가 흐지부지 되는 일 없이 잘 마무리 되었다고 생각한다. 개발자를 꿈꾸고 개발을 학습한지 벌써 5개월이 흘러가고 있다. 그 동안 3-4개의 프로젝트를 거치면서 작업 상황을 공유하고 팀원과 커뮤니케이션을 하는데 있어서 자연스러워졌다고 느낀다. 원하는 폼을 제안하고 팀원의 아이디어를 듣고 수용하고 타협하는 과정이 매우 즐거웠는데, 특히 이번엔 백엔드 한 분이 만드신 데이터를 UI로 그려 눈으로 보여줬다는 만족감도 나름 남았다. 

 

첫 프로젝트 때의 '나'와 지금의 '나'를 비교하자면 기술적인 면도 많이 발전했지만 어엿한 개발자로서 전체적인 틀을 이해하고 아이디어를 제안해 자연스러운 커뮤니케이션을 했다는 점에 있어서 크게 성장했다고 느낀다. 이는 구현하고 싶었던 점을 흔쾌히 수용해주신 백엔드 팀원분이 있었기에 가능한 일이라 생각한다. 💪 

 

앞으로 인격적으로나 기술적으로 끊임없이 발전해 나가는 프론트 개발자가 되어야겠다는 다짐을 다시 굳게 새기게 되는 프로젝트였다.

 

 

 

 

 

👇 관련 포스팅

 

 

https://0119eunji.tistory.com/71

깃 배포시 readMe 배포 오류 해결