DiaryProject(React) - 프로젝트 마무리

개요

• 첫 스터디 프로젝트를 마무리했다. 사실 누군가에게 보여주기 위한 프로젝트라기보다 리액트를 한 번 경험해보자라는 생각으로 제로베이스에서 hook을 하나씩 학습해가면서 만든거라 완성도보다는 개인의 학습에 중점이 된 프로젝트였다. 그럼에도 불구하고 내 개발 인생 첫 프로젝트를 무사히 마무리해서 뿌듯하다.
• 개인적인 학습과 부트캠프의 커리큘럼 그리고 토이 프로젝트 그리고 팀 프로젝트를 병행하게 되면서 팀 프로젝트에 충분한 리소스를 쏟지 못한 것 같아 아쉽다.

프로젝트 결과물

깃헙 링크

• 내가 이번 프로젝트에서 담당한 부분은 아래와 같으며, 내가 구현한 부분만 살펴보겠다.
  • 회원가입 페이지와 관련 기능 구현,
  • 메인 페이지에서 일기장 부분 CSS
  • 메인 페이지 모든 데이터 가공 및 서버 통신
  • 작성한 다이어리 목록

회원가입 페이지

• 회원가입은 기존에 의도한대로 회원가입 폼 작성 중 실시간으로 유효성 검사가 진행된다.
• 조건을 모두 충족한 경우에만 서버에 post 요청을 보낸다.
• 회원가입이 완료된 이후에는 router기능을 통해 로그인 페이지로 이동하게 해놨다.

메인 페이지(다이어리 작성)

• 메인 페이지에서 가장 많이 공들였던 작업은 데이터를 한 곳에 모으는 것이였다.
• 각 컴포넌트의 state로 관리되던 여러 데이터를 부모 컴포넌트를 생성하고 부모 컴포넌트에서 모든 데이터가 관리될 수 있도록 다른 팀원의 코드를 직접 수정하면서 연결했다.
• 이 과정에서 최초에 작업할 때는 usecallback이라거나 useeffect등으로 성능을 잘 관리하고 있었던 것 같은데, 부모 컴포넌트-자식 컴포넌트를 연결하면서 렌더링이 많이 일어나게 되었다.
• 이를 인지하고 다양한 방법 memo, ref, usecallback등을 활용하면서 무분별한 렌더링을 방지하려고 노력했으나 좀처럼 잘 되지 않았다. 이 부분은 나중에 다시 리액트를 학습하게 되면 제대로 파고들어가보고 싶다.

작성한 다이어리 목록

• 작성한 다이어리 목록에서 항목을 클릭하면 모달로 내용을 띄워주도록 구현했다.
• 특히, 모달의 컨트롤이 굉장히 어렵게 느껴졌는데, '모달'이라는 개념 자체를 본 기능을 구현하면서 알게 됐다.
• antd modal 컴포넌트를 사용했는데 modal의 구조를 이해하지 않은 상태에서 가져다 쓰기만 하다보니 어떻게 효율적으로 활용할 수 있는지 파악하기 어려웠다.
• 이미 만들어져있는 레퍼런스를 적절히 활용하는 것도 중요하지만 더 중요한 본질은 만들어져있는 코드에 대한 구조, 동작원리의 이해가 바탕이 되지 않으면 결국 또 다른 에러와 문제를 발생시키는 것 같다.
• 결국 이 본질은 다른 사람 -> 나 -> 다른 사람 연결되는 파이프라고 생각한다. 내가 지금 작성하고 있는 코드가 적절하게 활용되기 위해서는 내 코드가 얼마나 직관적이고, 가독성있게 상대방을 이해시킬 수 있는지 계속해서 의식해야만 한다.

회고

- 이번에 프로젝트에서 느꼈던 문제의식은 아래와 같다.

1. 백엔드에 대한 지식이 부족하여 구체적이지 않은 요청이 발생.

• 본 프로젝트에서는 axios를 통해 post요청을 하는 코드만 수동적으로 작성했다. 서버 통신에 대한 이해가 매우 부족했고 DB구조가 어떻게 되어 있는지, 라우터가 어떻게 구성되어 있는지 파악하지 못했기 때문에, 단순히 백엔드에서 "이 URI로 데이터 보내시면 됩니다."라는 말에만 의존했다. 원리와 구조는 생각하지 않은 채 생각없이 그냥 기계적인 코드만 작성한 것이다. 과연 내가 이렇게 코드를 짜는 것이 의미가 있을까 계속해서 고민했다. 장기적으로 내 성장에 도움이 되는 과정일까 의문이 들었고, 당장 프론트엔드 공부의 비중을 낮추고 백엔드 학습량을 늘리기로 결정했다.
• 아는 만큼 보인다고, 이번 프로젝트 막바지에는 express와 mongodb를 통해 서버를 구현하고 프론트-백 간 서버 통신이 어떻게 이루어지는지에 대한 학습을 많이 했다. 토이 프로젝트를 하면서도 백엔드에 대한 지식이 없기 때문에 파일 구성, 코드 구조를 어떻게 짜야 하는지 감이 잡히지 않았기 때문이다. 프로젝트 막바지가 돼서야 서버 통신, 백엔드 흐름이 어떻게 되는지 보이기 시작해서 실제 내 코드에는 적용해볼 수 없었다.
• 이 경험으로 느낀 점은 백엔드와의 통신이 어떻게 이루어지는지, 그리고 백엔드에서 서버를 어떻게 생성하고 어떤 식으로 데이터를 가공하고 전달하는지 그림을 그릴 수 있어야 한다. 한 마디로 프론트엔드가 프론트엔드만 할 줄 알아서는 안된다. 백엔드 지식이 바탕이 되어야 프론트엔드에서도 더 훌륭하고 최적화된 코드를 고민해볼 수 있으며 반대로 백엔드에서도 함께 더 효율적인 코드에 대해 고민해볼 수 있을 것 같다.

2. 사람이 두 명 이상인 이상 절대로 그리는 그림이 똑같을 수 없다. 그렇기에 끊임없이 소통해야한다.

• 개발자 채용 페이지의 필요 역량에는 기본적으로 커뮤니케이션 역량이 들어가있다. 개발자는 이어폰끼고 코딩만 하면 되는거 아닌가...라고 생각하는 사람이 있을 것 같다. 개인적으로 나는 앞서 말한 정도는 아니지만, 그냥 말만 통하면 되는 정도 아닐까? 라고 생각했다.
• 하지만, 이번 프로젝트 경험으로 인해 개발에서 커뮤니케이션은 매우, 매우, 매우 중요하다고 느꼈다. 개발에서의 커뮤니케이션 역량은 3가지 방향으로 나뉘는 것 같다.
• 첫 번째로, 잘 쓰는 것. 코드와 글 모두 해당된다. 코드도 하나의 커뮤니케이션이다. 그렇기에 끊임없이 가독성 있는 코드를 고민하고, 컨벤션을 정하는게 아닐까? 이번 프로젝트에서 다른 사람의 코드를 활용해서 내 코드를 작성한 적이 있다. 당연히 우리는 초보기 때문에 코드는 엉망이였고 정말 하나하나 물어가면서 고쳤던 것 같다. 글도 잘 써야 하지만... 당장 이 글도 가독성은 포기하고 쓰고 있기 때문에 여기서 말을 줄이는 걸로...
• 두 번째로, 잘 말하는 것. 설득의 영역이다. 이번 프로젝트에서는 서로 대화하는 시간이 부족하다고 느꼈다. 2-3일에 한 번 온라인으로 만나서 각자가 하고 있는 걸 공유하고 이어붙이는 작업의 연속이였다. 이 방식의 문제점은 그리는 그림이 다르기 때문에 대화가 부족한만큼 각자 나아가는 방향이 엇나가게된다. 이게 누적되면 결국은 다시 뜯어고치거나, 엇나간대로 유야무야 묻어버린다. 완성도는 당연히 떨어진다. 특히 나같은 사람은 스스로 자괴감까지 느낄 정도다. 이렇게 되는 이유는 한 번 만나서 일치를 시켜놔도 프로그래밍을 하다보면 다른 길로 새거나 뭔가 추가되거나 빠지게 되기 때문인 것 같다. '이건 빼도 되겠지', '이건 넣어도 되겠지', '이건 이렇게 하는거던가?' 의 연속이다. 그렇기 때문에 끊임없는 대화와 피드백으로 내가 생각하는 결과물과 팀원이 생각하는 결과물을 일치시키고 한 방향으로 나아가야 한다.
• 세 번째로, 잘 듣는 것. 이해의 영역이다. 개떡같이 설명해도 찰떡같이 알아듣는 그런 엄청난 역량...이 필요하다고 느꼈다... 이것의 원인은 아마 배경지식의 차이와 코드를 바라보는 시선의 차이인 것 같다. 코딩을 할 때도 실력과 관계없이 개인 사고방식이 어느정도 반영이 되는 것 같다.

3. 똑똑한 사람도 좋긴한데, 똑부러진 사람이 되자

• 이 개념은 개발뿐만 아니라 모든 업무에 적용할 수 있는 것 같다. 업무를 할 때 '이래서 안돼요.', '해봤는데 잘 안 됐어요.'라는 말을 많이 듣기도, 많이 하기도 했을 것이다. 사실 이런 말들은 누구나 할 수 있는 말이다.
• 조직 내에서 나의 가치를 증명하기 위해서, 예상을 뛰어넘는 결과물은 만들어내기 위해서는 새로운 방향을 제시해야 한다. 그 방향이 맞는지, 틀린지 모르지만 방향을 제시할 수 있는 용기가 있다는 것. 그런 창의력과 사고방식을 가지고 있다는 것 하나만으로 하고 있는 분야, 일에서 혁신이 일어날 수 있는 가능성이 생긴다. 이 가치관을 가지고 있어야만 한다.

회고 요약

1. 프론트엔드 개발자가 프론트엔드만 잘해서는 절대 크게 성장할 수 없을 것 같다고 느꼈다.
2. 높은 완성도를 끊임없이 추구하기 위해서는 끊임없이 커뮤니케이션하며 각자가 그리는 결과물을 일치시켜야 한다.
3. 비록 틀릴지라도 방향을 제시할 수 있는 용기를 가지자.

• 미니 프로젝트가 끝나자마자 정식 프로젝트를 바로 시작해서 매우 정신없는 상태로 틈틈이 쓰다가 일주일만에 이 글을 완성했는데, 정말 글이 산만하고 무슨 말인지 잘 모르겠지만...(지금도 사실 정신없이 코딩하다가 머리를 식히기 위해 블로그를 쓰러 왔다)
• 어쨌든 프로젝트 하느라 고생한 나에게 약간의 박수와 약간의 채찍을 보내고... 다음 프로젝트는 더욱 더 완성도 있고, 한층 더 깊은 수준으로 임해보고 싶다.