프로젝트/모락모락

모락모락 리팩토링 - 리팩토링 과정 기록 (디렉토리 구조, 아키텍처, 중복코드, 버그 픽스 등)

지난 달부터 매주 토요일, 모락모락 팀원들과 모여 리팩토링을 진행중이다. 뜯어 고치고 싶은 내용은 정말 많은데, 시간이 많이 없다보니 야금야금 고쳐가는 중이다. 저희 리팩토링 하시죠!! 하고 제안하고나서 프론트는 이런거 합시다~ 라고 정리했던 문서. 원래 프론트가 3명이었는데, 한 분은 연락이 안되셔서 2명이서 작업중이다. 본 프로젝트 진행 기간에는, 대화도 많이 없고 서로 무엇을 작업하는지 어려움은 없는지 이런 얘기를 잘 안했었는데 (너무 아쉽) 요즘은 만날 때마다 근황 토크도 하고, 어떤 코드가 더 나은지 서로 리뷰도 하면서 재미있게 진행중이다. 오히려 프로젝트 기간보다 지금이 더 스트레스 없고 길게 조금씩 개선한다는 생각이라 마음도 편하다. 아무튼 지금까지 해온 작업은, 프로젝트 폴더 구조 뜯어 고..

[리팩토링] 🔥모락모락 - 코멘트 컴포넌트 리팩토링

❓문제 상황 게시글 상세 페이지에서 질문 본문과 답변 본문에 각각 코멘트가 달려있다. 이 코멘트가 페이지가 렌더링 되면서 동시에 답변의 갯수만큼 조회 요청을 보내는데, 문제는 swr 을 적용하면서 페이지를 클릭하거나 이런 변동이 있을때마다 다시 자동으로 요청을 보내 갱신해주기 때문에, 답변이 많아질 경우 서버에 부담이 우려되는 상황이다. 사실 원래는 답변 하나당 미리보기 코멘트 하나를 같이 응답해주고 있어서, 답변 리스트만 조회하면 펼치기 버튼을 누르기 전까지는 comments 에 대한 조회 요청이 갈 필요가 없다. 그래서 이 부분을 고쳐보려고 한다. 💡해결 과정 일단 해야할 일은 아래와 같다. 첫 미리보기 코멘트는 코멘트 존재 여부와 상관없이 답변 리스트에서 응답받은 데이터로 화면에 렌더링해준다. 펼치..

[Project] 모락모락 프로젝트 5주차 회고😸

💡WEEK 5 (2022-1128 ~ 2022-1204) 정말 쏜살같이 흘러간 5주간의 시간이었다. 오늘 (12월 4일)이 최종 제출일이기 때문에 개발 일정은 어느정도 마무리가 되었다고 봐야한다. 다만 여러가지 일들이 있었고 그 때문에 미처 마무리 하지 못한 아쉬운 부분들이 많이 있기 때문에 데모데이가 종료되어도 조금 더 보수를 하면서 퀄리티를 올려야 할 것 같다. 이번 한 주는 1차적인 배포 이후 버그 픽스 그리고 남은 기능을 개발하는데 집중했다. axios interceptor 를 활용한 refresh token 갱신 이번 프로젝트에서는 리프레시 토큰을 도입하여 액세스 토큰 만료 이후에 갱신이 될 수 있도록 했다. http 통신 라이브러리로 axios 를 사용중인데, axios client 에 int..

[Project] 모락모락 프로젝트 4주차 회고😸

💡WEEK 4 (2022-1121 ~ 2022-1127) 퍼블리싱 단계를 마치고 본격적인 기능 개발에 돌입했던 4주차의 기록이다. 내가 맡은 부분은 게시글을 상세조회 했을 때 사용하는 답변 CRUD, 코멘트 CRUD, 좋아요, 북마크 기능 그리고 답변을 채택하거나 후원을 했을 때 상대방에게 메시지를 보내는 기능이었다. 프리 프로젝트때도 비슷한 페이지의 CRUD 코드를 작성해본 적이 있어서 빨리 끝낼 수 있다고 생각했는데, 이게 왠걸. 생각보다 간단하지 않았다. 기존 프로젝트에서는 CRA를 활용해 일반적인 리액트 그리고 자바스크립트로 프로젝트를 진행했는데, 이번 프로젝트에서는 next.js + Typescript 그리고 데이터 캐싱을 위해 SWR 이라는 라이브러리까지 추가로 도입했기 때문에, 사용 방법을 ..

[Project] 모락모락 프로젝트 1,2,3 주차 회고 (중간 회고 ^^😸)

3주차 주간 회고를 작성하기에 앞서서, 지난 2주간 진행되었던 내용과 각 주차의 소감을 간략하게 정리하고 넘어가고자 한다. (매주 썼어야 했는데..^^) 💡WEEK 1 (2022-1101 ~ 2022-1106) 프로젝트 시작! 우리 팀은 2주 반 정도 진행됬던 클론 코딩 프로젝트(프리 프로젝트)에 앞서서, 먼저 팀을 꾸려 기획에 대한 논의를 짬짬히 진행했다. 메인 프로젝트 기간 동안은 기획부터 배포까지 가이드 없이 직접 진행하는 것이기 때문에, 기획 단계에서 드는 시간을 아끼고자 먼저 진행을 했던 것 같다. 팀원 중 두 분은 이전에 같이 팀을 한 적이 있는 분들이었고, 나머지분들은 오며가며(?) 서로의 존재를 알지만(?) 같이 프로젝트를 진행해본적은 없었다. (프론트 얘기) 사실 이번 프로젝트에서 팀장을..

[Project]스택오버플로우 클론코딩 3주차 회고

😸주간 요약 프리 프로젝트 끝! JWT를 이용한 로그인, 로그아웃과 기본적인 CRUD, 댓글 기능을 갖춘 간단한 프로젝트를 끝마쳤다. 처음에는 백엔드와 소통하는 부분이 많이 걱정되었었는데, 소통도 너무 잘 되었고 팀 분위기가 좋아서 어려운 점을 서로 공유하면서 잘 마칠 수 있었다. 볼륨이 크지 않고 정말 간단한 통신 로직이 들어간 프로젝트였고 클론코딩이라 기획에 크게 힘을 쏟지 않은 것도 이 산뜻한 마무리에 큰 지분이 있다고 생각한다. 이번에는 기본적인 통신과 게시판 구현에 대한 전체적인 연습, 그리고 무엇보다 팀 프로젝트에서 협업하는 방식을 많이 배우게 된 것 같다. 처음에는 소통적인 부분에 대해서 크게 신경을 안썼던 것 같은데, 용어 자체가 다르고 6명의 인원이 서로 생각하는 바가 다를 수 밖에 없기..

[Project]스택오버플로우 클론코딩 2주차 회고

😸주간 요약 컴포넌트 구현을 하다보니 순식간에 지나가버린 일주일이었다. 원래는 기록을 매일 하다가 바빠진 탓에 제대로 하지 못했더니 뭔가 했지만 뭘 했는지 잘 모를 정도로 빠르게 흘러간 것 같다. 나중에 회고를 작성하려면 다 기억을 해내야 하기 때문에 다음주 부터는 간단하게라도 TIL을 작성하도록 해야겠다. 멘탈 관리를 위해서 일상과 프로젝트 사이에 간격을 두고 과몰입(?) 하지 않으려고 많이 노력하고 있다. 자기 자신을 잘 알고 있기 때문에.. 뭔가 이것도 하고 싶고 저것도 하고 싶은 욕심이 많지만 생각만큼 따라주지 않는 것이 좀 아쉽고 또 그동안 많이 공부했다고 생각했는데 기억이 나지 않는 부분도 많아서 좀 회의감이 든다. 긍정적인 부분은 프로젝트 하면서 깃플로우에 많이 익숙해졌다는 것. 그리고 이번..

[Project]스택오버플로우 클론코딩 1주차 회고

😸주간 요약 정말 후루루룩 지나간 일주일이었다. 대망의 pre project를 시작하게 되었고 감사하게도 팀장을 맡게 되었다. 프로젝트를 해본 경험도 많이 없고, 팀장을 맡은 경험은 더더욱 없어서 걱정을 많이 했다. 그래도 팀장 역할을 꼭 해보고 싶어서 넌지시 제안을 드렸고 흔쾌히 수락을 해서 열심히 해야겠다고 마음먹었다. 기술적인 부분은 나보다 더 잘하시고 경험 많은 분들이 계시기 때문에 많이 배우게 될 것 같다. 나는 팀 커뮤니케이션과 전체적인 진행, 문서화를 위주로 담당하게 될 것 같다. 뭔가 운영느낌이 물씬 풍기지만! 이렇게라도 팀에 기여할 수 있다는게 기쁘다 후후😊 이번 주 아쉬운 점은 기록을 많이 남기지 못했다는 것..? 뭔가 부랴부랴 쳐내느라 바빠서 TIL도 많이 못쓴 것 같고(티스토리가 복..