[개발 회고록] 2월 2주차

💭 이번 주엔 어떤 일들이 있었고, 그 속에서 나는 어떤 것을 느꼈을까

2/6(월) : React Query에 대한 집중 공부

React Query에 대해 깊게 공부해 보았다. 내가 진행하고 있는 프로젝트에 도입한 라이브러리임에도 기능들을 잘 모르고 있음을 느꼈다. 겉핥기만 하고 있었던 것이다. 

 

2/7 (화) : 낙관적 업데이트 훅 세분화 + 한 컴포넌트에서 라우팅

낙관적 업데이트하는 훅을 세분화하였다.

PR 링크

- 같은 '찜하기'라는 post api인데, 각 페이지 마자 get 해오는 api가 달랐다. api가 받아오는 값이 서로 달라서, 이전 값에 대한 처리하는 로직이 달랐다. 그래서 각 페이지별로 이를 구분하였다. 

'낙관적 업데이트' 참 유용한 기능인 것 같다. post를 한 후, 데이터를 get 하기 전에 '내가 전송한 api가 성공했다고 믿고' 먼저 렌더링을 수행하는 것이다. react-query는 파면 팔 수록 깊이가 깊어지는 것 같다.

 

요즘 한 PR에 핵심 기능뿐만 아니라, 다른 기능들도 짬뽕해서 넣어버렸다. 처음에는 '기능 단위'로 PR을 작성하려 했으나, '귀찮다는'이유로 이렇게 되어 버렸다. 사실 이유는 '귀찮다'와 더불어 하나가 더 있다. PR에서 한 기능을 수행하고, 다른 기능을 수행하려는데 기존 PR에서 수정한 부분이 필요한 경우이다. 이러한 경우에 그냥 한 PR에 수정한 것들을 때려 박는다. 그렇다고, 내가 올린 PR을 팀원들이 즉각 즉각 확인할 수도 없는 격이고 말이다. 이 PR에 대해 앞으로는 어떻게 해야 할지 깊게 고민해 봐야겠다.

좋은 PR이란 무엇일까?

 

한 페이지에서 라우팅을 할 수 있다는 것을 배웠다. path/?~에서? 뒤의 값이 변해도 같은 page라는 점을 이용했다. 그리고 router.query의 변화값을 활용하였고, useMemo를 이용하여 기존 값과 다를 경우만 컴포넌트를 달리 띄우는 방식으로 구현하였다.

참고한 문서는 다음과 같다 : 링크

 

근런데 구현을 하고 보니 이럴 바에는? 페이지를 구분해서 router.query에서 값을 받아오는 형태가 낫지 않을까?라는 생각을 했다. '굳이 같은 페이지에?' 이 부분에 대해서 내일 팀원들과 이야기를 더 해봐야 될 것 같다.

 

2/8 (수) : QA - 오류  및 디자인 수정

이번 주까지 배포가 목표이기에 개발자끼리 우선 QA를 진행했다. 상당히 많은 오류들과 디자인적으로 수정해야 할 부분들이 있었다. 개발하면서 미처 인지하지 못하고 있던 부분들이 있었다. 

1. 로컬 서버와 배포 서버의 차이

Visual studio에서 run 한 로컬 서버에서는 실행이 잘 되었는데, Netlify를 통해 배포한 배포 서버에서 실행하니 안 되는 부분들이 있었다. 예를 들어 다이내믹 라우팅한 페이지에서 새로고침을 하면 NextJS 충돌 이슈가 뜨는 문제이다. 아직 해결을 못한 상태이다. 배포 전에 무조건 해결해야 하는 문제인데 말이다.

그리고 두 번째 예시는 로컬 서버의 주소는 localhost:3000이고, 배포 서버의 주소는 atties.shop이다. 소셜 로그인할 때 백엔드 서버에서 넘겨주는 redirect uri, 그리고 CORS설정되어 있는 주소가 로컬 주소로 되어있다. 그래서 이 부분을 수정해줘야 했다. 이 부분은 백엔드 팀에서 잘 처리해 주어서 수월하게 해결하였다.

 

2. PC 화면과 휴대폰 화면의 차이

PC에서 개발자 도구를 열어 휴대폰 화면으로 볼 때와 진짜 휴대폰으로 접속하여 볼 때의 차이가 상당히 있는 것이다. 휴대폰으로 보니 위와 아래에 크롬 앱 고유의 창이 존재하고, 마우스가 아닌 손가락으로 누른다는 차이가 있었다. 손가락으로 누르니 작은 '좋아요'버튼은 누르기가 힘들었다.

휴대폰으로 접속했을 때 위와 아래가 가려지는 현상 & 좋아요 버튼은 크기 키운 상태

예상했던 것보다 고려해야 할 부분이 많다는 점을 깨달았다. 정식 배포 전에 이러한 점들을 알아서 참 다행이다. 이래서 기획부터 배포까지 경험을 해봐야 한다는 것 같다. 직접 배포를 해봐야 개발을 진행할 때 어떠한 점들을 고려해야 하는지 알 수 있다.

'모든 요소들을 고려하면서 개발을 진행해야 하는구나' 깨달았다.

 

2/8(수) : 홀랑 회의 (질문 만들기)

피그잼에서 모여 다 같이 질문 리스트를 만들었다. 다 같이 질문을 3개씩 만들어 오고, 이 중에서 투표하여 선별하는 방식으로 진행하였는데 나는 이 방식이 크게 효율적이라고 생각되지는 않았다. 한 사람이 질문을 만들어 와서 이에 대해 피드백을 받는 방식으로 진행하면 어땟을까?라는 생각을 했다. 위와 같은 방식으로 질문을 뽑으면 질문들이 서로 다른 사람들이 만들었기에 질문 성격과 유형이 다를 것이며, 결국에는 다시 또 사람의 손을 거쳐야 할 것이기 때문이다.

 

2/9(목) : 개발자+기획자+디자이너 모두가 QA 진행

미니 경매를 열어 모든 팀원이 함께 QA를 진행했다. 디자인적인 측면, 기획적인 측면, 그리고 기술적인 측면 다방면에서 수정해야 할 부분들이 나왔다. 프로젝트에 경매, 알림, 채팅, 프로필 수정 등 웬만한 기능들이 다 있다 보니 고려하지 않고 넘겨짚고 넘어간 부분들이 상당수 있었다.

처음에 QA를 다 같이 진행하고 나온 수정해야 할 부분들이다.. 아래에도 더 있는데 화면에는 잘렸다.

 

결국 프런트엔드 파트는 1주일을 더 연장하기로 결정했다. 다음 주에 이벤트들과 수강신청이 있지만, 그래도 최선을 다해 끝까지 힘내보자. 거의 다 왔다, 거의 다 했어.

 

2/10(금) : Atties 프로젝트 마지막 날, README 작성, 회고와 마무리

Atties프로젝트의 마지막 날이다. 오전에는 HackMD를 이용하여 팀원들과 다 같이 Github의 README.md를 작성하였다. 처음 HackMD를 사용해보았는데, 너무 편하더라. README는 아무래도 github의 표지다 보니까 혼자 작성하기보다는 다 같이 공유하며 작성하는 것이 중요하다. 그런데 github만으로는 동기적으로 작성하지 못한다는 한계점이 있었는데, HackMD는 그러한 불편함을 해결해 주었다.

오후에는 마지막 회고를 진행했다. KPT 회고를 진행한 지난 7주와 달리 이번에는 새롭게 4L 회고를 진행하였다. KPT도 좋았지만, 이번에 처음 도입한 4L도 유익하고, 충분히 매력이 있음을 느꼈다.

그렇게 8주의 여정을 달려온 Atties프로젝트가 끝이 났다. 사실 모든 작업이 끝나진 않았다. FE작업만이 아직 조금 남아 있다. 그래서 1주일간 QA와 수정을 한번 더 거친 뒤, 정식 배포는 1주일 미뤄 2월 20일 예정이다. 

 

2/11(토) : QA 바탕으로 디자인 수정

오늘의 PR

오후에 약속이 있어서 오전에 작업을 최대한으로 마쳤다. 내일은 1주일 간의 회고와 앞으로의 계획 세우기를 중점적으로 진행해야겠다.

 

📚 이번주의 개발 독서 : 소프트웨어 장인의 태도

월 : 모르는 것을 배우는 기회를 만들기 위해 항상 노력해야 한다.

아무 동료나 붙잡고 최신 기술 동향을 따라가기 위해 그 동료가 어떤 노력을 하고 있는지 물어라

> 내가 모르는 것이 무엇인지 항상 찾고, 항상 배우려 노력하자. 그리고, 주변 동료들(프로젝트 팀원)에게 어떻게 공부 중인지, 무엇을 배우고 있는지 '적극적으로' 질문하자.

화 : 진실은, 우리는 항상 시간이 있다는 것이다. 시간을 최적화하지 못할 뿐이다.

생산적인 시간은 보통 뭔가 새로운 것을 배우거나, 우리가 사랑하는 사람과 함께 보낸 시간이다.

"시간을 매우 스마트하게 계획하는 것만이 업무 외 시간에 자기 계발을 할 수 있는 그의 유일한 방법이었다."

> 맞아. 우리는 항상 시간이 있어. 하지만 최적화하지 못했을 뿐이야. '시간을 최적화하자'.

> 무언가 새롭게 배우는 것뿐 아니라, 사랑하는 사람과 함께 시간을 보내는 시간도 "생산적인 시간"이다. 사랑하는 사람과 함께 보내는 시간을 절. 대 아깝게 생각하지 말자. 

수 : 더 많이 훈련할수록 더 편안해지고 별도의 주의 집중과 의식적인 노력이 없어도 자연스럽게 할 수 있다.

그렇게 되면 그를 이용하여 우리가 달성하려는 목표에만 집중할 수 있다. 시간은 걱정하지 말고 변수, 메서드, 클래스들의 이름을 가장 이해하기 쉽고 의미를 포괄할 수 있도록 최선을 다해 네이밍 한다. 훈련할 때는 그 훈련이 완벽하도록 노력해야 한다."

> 코딩을 하다가 반복적인 작업이 질려, 혹은 귀찮다는 이유로 대충 하려는 경향이 있다. 앞으로는 변수, 메서드, 클래스명 하나하나 대충 짚고 넘어가지 말고 최선을 다해 연습하다.

목 : 출근 전 자기 계발을 해보자

코드를 작성하거나, 기술 문서를 읽거나, 블로그에 글을 올리는 등 새로운 것을 배우고 커리어에 도움이 된다고 생각되는 일들을 하자."

> 잘하고 있는 것 같다. 코드 작성, 기술 문서, 블로그

"사용자 그룹이나 기술 커뮤니티가 있는지 찾아보고 참여해 보자. 사용자 그룹은 보통 한 달 주기로 1~3시간 정도 진행되어 시간적으로 큰 부담이 되지 않는다."

> 기술 커뮤니티, 1주일에 1번은 사실 조금 부담스러웠는데 1달에 1번 정도는 괜찮을 것 같다. 이런 지식을 공유하는 커뮤니티에 가입을 해보자.

금 : 블로그는 우리의 배움과 자기 계발에 대한 기록의 장으로 두는 게 좋다. 

여러 가지 생각이나 아이디어들, 커리어를 둘러싼 세상을 어떤 관점들로 보는지 기록해 보자. 다른 사람들이 그 기록에 대해 어떻게 생각할지 너무 걱정할 필요는 없다. 나 자신을 위한 기록이 가장 우선이다."

> 맞아, 내가 요즘 하는 생각들, 아이디어들, 주변 세상을 어떤 관점으로 보는지 기록하자. 그리고, 누가 본다는 생각은 전혀 하지 말고 나 혼자만의 글 속 세상을 펼치자.

토 : 오래전에 작성했던 코드를 지금에 와서도 고칠 부분이 없어 보인다면, 그것은 그동안 배운 것이 없다는 뜻이다.

 

---

😊이번주를 돌아보며

🎖️이번 주 이룬 성과는?

1. 프로젝트 외의 시간에는 노션에 기록하며 개인 추가 공부

> 기존에는 프로젝트 외의 다른 시간에는 다른 프로젝트를 진행하거나, 현재 프로젝트의 추가 작업을 했었는데 이번 주부터는 프로젝트를 진행하며 부족하다고 생각했던 react query, NextJS, 낙관적 업데이트 등을 추가 공부했다. 추가 공부를 하며 ‘이 점을 프로젝트에 도입하면 어떨까?’하며 실제로 도입을 했고, 그로 인해 프로젝트에 있어 큰 도움을 주었고, 나에게도 큰 성장을 가져다주었다. 프로젝트를 진행할 때는 느끼지 못한 ‘새로운 배움’을 느꼈다. 프로젝트를 진행할 때는 다른 사람의 PR을 보며, 혹은 공식 문서를 통해 ‘좁은 눈’으로 필요한 부분만 필터링하여 보였다. 추가 공부를 하며 전체적으로 훑고, 더욱 깊게 공부하니 더 ‘넓은 눈’을 가진 기분이었다. 앞으로는 프로젝트 작업 시간이 끝나면 오늘 작업한 것에 대한 피드백, 도입한 라이브러리, 혹은 도입할 라이브러리에 대해 추가 공부를 하면 프로젝트를 통한 폭발적인 성장을 이룰 수 있을 것이라 생각했다.

 

2. 내가 도입한 기술스택에 대한 필기

> 금요일, 프로젝트에서 사용한 기술스택을 노션에 정리하고, 티스토리에도 내용을 옮겨 적었다. 내가 실제로 프로젝트에서 사용한 방식 + 공식 문서 + 다른 블로그를 참고한 내용을 합쳐서 내가 사용한 기술 스택에 대해 정리하였다. 그러고 나니 내 머릿속에 여기저기 흩어져 있던 정보들이 한 곳에 차곡차곡 정리되는 기분이었다.

앞으로도 프로젝트에 새로운 것을 도입했거나, 어떠한 문제를 해결할 때면 블로그에 정리를 해봐야겠다. 내 머릿 속에 정리도 되고, 나중에 찾아볼 수도 있고, 다른 누군가에게도 분명히 도움이 될 것이다. 1석 3조이다.

 

3. QA 진행

> 프로젝트를 진행한 이후 처음으로 개발자들과, 그리고 모든 팀원들과 QA를 진행했다. 생각지 못한 많은 오류들이 있었고, 이슈들이 있었다. 배포하기 전인 지금에서라도 QA를 진행해서 다행이지만, ‘조금 더 일찍, 1달 진행했을 때 진행했더라면 어땠을까’라는 생각을 했다. MVP를 애초에 2달 단위로 끊어서 어쩔 수 없는 거긴 했다. 다음부터는 짧은 주기로, 예를 들어 1달 단위로 MVP를 만들어 QA를 진행하여 배포하는 식으로 진행해 봐야겠다.

 

4. 성공적인 프로젝트 마무리

> 8주간의 프로젝트가 드디어 마무리 되었다마무리되었다. ‘아띠즈 프로젝트 회고’ 글에서 더 자세히 작성하겠다.

 

❤️‍🔥이번 주의 아쉬움은?

x : 이번 주는 하루도 빠짐없이 개발을 진행했고, 많은 성장을 했고 많은 것들을 배웠기에 아쉬움이 없다.

 

🏃‍♂️다음 주의 목표는?

1. 다음 주부터는 오전 10시 ~ 오후 4시 코어 타임이 없어진다. 그에 따른 대응이 필요하다. 스터디를 찾아보던가, 이제 새롭게 시작할 프로젝트 팀원들과 게더타운에 모여 작업을 진행하던가 하는 방식으로 해야겠다.

2. 다음 주 수요일에 진행하게 될 QA 전까지 최대한 Atties프로젝트를 마무리 지어야겠다.

3. 내일부터 본격적으로 시작하게 될 '홀랑'프로젝트도 소홀히 하지 말자.