[StackOverFlow Clone] KPT 회고

22.10.20-22.11.07

FE 4명, BE 3명으로 구성된 팀

메인 프로젝트 전 진행한 스택오버플로우 클론 프로젝트

---

1. 프로젝트 설명

StackOverFlow Clone (github)   

 

목적

• Stack Over Flow 페이지 클론 프로젝트
• 질문 리스트 페이지, 로그인/회원가입, 글 작성 & 수정, 질문 페이지 & 답변 기능을 구현하였다.

구현하고자 했던 기능

• 질문 리스트 페이지
• 로그인/회원가입 페이지
• 글 등록 & 수정 페이지
• 질문 페이지 & 답변 기능

사용 스택(FE)

React.js, javaScript, react-router-dom, Recoil, Styled-components, Axios, ESLint, Prettier

 

협업 툴

GitHub, Figma, Discord

 

역할

[프론트엔드, 팀원]

 

맡은 부분

 

[글 등록 & 글 수정 페이지]

글 등록 페이지(마크다운 언어 작성 가능, 태그, 유효성 검사)

글 수정 페이지(html형식 마크다운 언어로 변환해서 보여주는 기능 & 수정)

 

[Nav]

라우팅 기능

 

[Footer]

링크

 

2. 개인 회고용 KPT

 

keep

• Toast UI 라이브러리 에디터 기능을 사용해 마크다운 에디터 구현
• 글 수정 페이지 받아온 HTML 에디터의 파싱 기능을 사용해 마크다운으로 변환, 수정
• JWT Token 파싱 후 유저 정보 보관
• Discord를 활용해 상시 소통
• Footer 반복되는 li 태그 배열과 map을 활용해 코드 감소
• 글 작성 페이지 유효성 검사

Problem

• [반응형] 반응형을 해보지 못했다.
• [유효성 검사] 글 수정 유효성 검사에 따른 UI 표현을 똑같이 구현하지 못했다.
• [디자인 변화] 클론 프로젝트 진행 중 실제 Stack Over Flow 글 작성 & 수정 페이지 UI 디자인 변화
• [500번대 에러] 이유를 모르겠는 500번대 에러(백엔드의 문제가 아니었다.)

Try

• [반응형]
  • 이것도 Nav 제외 시간내에 반응형 구현을 못해서 아쉬웠다.
  • Media Query를 쓰는 방법으로 구현할 수 있는 문제. 이 때 너무 반응형을 어렵게 생각하고 도전하지 못한게 아쉽다...
• [유효성 검사]
  • 유효성 검사에 따른 UI의 즉각 수정을 보여주고 싶었는데 이상하게 setState가 밀리는 현상이 있었다. 
  • 시간이 모자라서 반영되지는 못했지만 useEffect, setState에 함수로 값 전달하는 방법을 쓸 수 있을 것 같다.
• [디자인 변화]
  • 기획이랑 Figma까지 다 했는데요. 갑자기 UI가 바뀜
  • 이전 버전과 최신 버전 중 골라야하는 상황인데 짜 놓은걸 바로 수정하면 또 1일 정도 소요된다 생각
  • 기획해 놓은 부분에서 최신 버전을 넣어도 무리가 없을 즉 내가 구현이 가능한 기능을 포함하는걸로 해결했다.
  • 예를 들면 유효성 검사가 이전 버전에서는 제출 버튼을 누르면 UI가 바뀌는거라면 최근 버전은 바로바로 UI에 반영되는 방식
  • 이전 버전으로 진행하고 시간적 여유가 된다면 최신 버전을 하는걸로 결정
• [500번대 에러]
  • 500번대는 서버 측 에러라고 배웠는데 이게 100% 백엔드의 잘못이라고 결론 지을 수 없다는걸 알게해준 경험
  • 유효성 검사를 프론트와 백 더블 체크를 하고 있었는데 유효성 검사를 다르게 진행해서 발생했던 문제였다는걸 발견했다.
  • 백엔드와의 소통을 통해 해결했던 문제였다.

3. 느낀점

프리프로젝트 명단 공개 되고 팀 빌딩 이후에 스택오버플로우 클론 코딩을 진행했다.

팀 빌딩할 때 팀장님 아이디어로 아이스브레이킹을 진행했었고 서로 알아가는데 도움되는 좋은 방법을 알아갔다.

사실 나는 이번 프리 프로젝트가 첫 개발(?) 팀 프로젝트였는데 다른 fe팀원분들은 경험이 있고 잘하시는 분들이었다. 

첫 날에는 내가 민폐가 되면 어쩌지라는 생각이랑 경험이 있으신 분들에게 조금 기대도 되지 않을까라는 생각이 공존했었다ㅋㅋㅋ

프로젝트 진행하면서 많이 배려해주셔서 볼륨을 크게 잡지 않아 여유를 가지면서 진행했던 프로젝트였지만 정말 많은 걸 배웠다.

특히 네트워크, 토큰 부분에 대해서 이론 공부하고 과제할때는 그냥 아 이런게 있구나 정도였지 어떻게 쓰이는지 감도 안왔는데 

프리프로젝트 진행하면서 rest(ful) api 사용이랑 jwt token에 대해서 아주 많이 실습할 수 있었다.

팀 운이 좋아서 백엔드 분들도 정말 좋으신 분들이었고, api 명세를 빨리 작성해주시고 연결도 빠르게 진행해주셨다. 다들 실력자들👍

proxy도 왜 쓰는지 알게 됐다. 내가 api통신을 처음으로 한게 아니었는데 처음으로 진행하셨던 팀원분께서 cors로 많이 고생하셨다고...

Toast UI 라이브러리에서 에디터를 사용했는데 유용하고 좋았다.

 

내가 맡은 부분은 글작성/수정, nav, footer 부분이었다.

[nav] stackoverflow라이브러리를 찾아주셔서 ui적인 부분은 어렵게 구현하지 않았다. 여기서는 css position으로 위에 고정하는 방법을 배웠다. 라우팅 기능은 전에 솔로 프로젝트로 잠깐 끄적여본 react-router-dom에 있는 link로 구현했다.

어려웠던 부분 : x, 아쉬웠던 점 : x

 

[footer] 가장 쉬운 파트가 아니었나 싶다. 하나 하나 링크를 걸지 않고 footer 부분 소개에 규칙성을 찾아 배열로 만들고 규칙에 따른 스타일 적용을 했다. 말만 거창하지 배열 0번째 인덱스는 진하게 나머지는 얇게 하는 형식이다. map을 사용해서 뿌려줬다. 이런 부분은 map으로 뿌리는거 당연하게 생각되는데 이 때는 하나 하나 링크 걸어야 하나라는 고민을 했다.  그러다가 씻으면서 배열로 만들고 map으로 뿌리면 될 것 같은데 한번 해보고 안되면 노가다 하자는 생각으로 했다가 됐다. 여기서는 key에 대해 공부를 했었다.

어려웠던 부분 : 콘텐츠 너비만큼만 링크를 주고 싶었는데 어째서인지 빈 부분에도 링크가 걸리는 현상이 있었다. 결국 프로젝트 종료까지 못고쳤는데 이제 한 번 해보라하면 link를 a tag로 바꾼다던지 width fit-content 할 것 같다.

 

[글 작성/수정] 내 파트중에서 핵심부분. 첨에는 글 작성 페이지만 생각했는데 프로젝트 진행 중에 수정 부분도 작성 페이지와 연관되어 있다는 걸 알게 돼서 수정도 진행했다. ui만드는 건 어렵지 않았다. 이것도 stackoverflow 라이브러리를 사용했기 때문!! 근데 구조를 잡을 때 조금 맘에 안드는 부분이 있었다. 글 작성 페이지에 로봇 그림 넣고 싶어서 flex랑 사용해서 넣었는데 반응형을 생각하지 않아서 크기에 따라 미묘하게 맘에 안들었다. 기능에서 고민했던 부분은 toast ui  텍스트 에디터 사용이었다. 다른 라이브러리 사용이라 살짝 라이브러리 파야한다는 단점이 있었다. 근데 이건 아주 유명하고 많이 쓰였던 라이브러리라 사용 방법이 많았고, 쉽게 설명해둔 사이트가 많아서(심지어 공식 사이트에도 쉽게 적혀있다) 어렵지는 않았다. 그냥 이때는 첨이라서 이게 맞나 계속 반복 노가다 반복 그런 느낌이었지... 처음 에디터 화면에 나왔을 때는 엄청 신났었다ㅋㅋㅋㅋ. 마크다운 에디터를 통해 작성된 값을 보내줄 때 html로 들어가서 이거 어떻게 파싱하지 고민했는데 html 태그 제거하는 정규식이 있다는 걸 알았고(지금도 신기함), 텍스트 에디터 라이브러리 내장 기능에도 파싱 기능이 있다는 것도 알았다. 내장 기능은 공식 사이트에 적혀 있는건데, 이 때는 공식 사이트는 어렵다라는 편견이 있어서 블로그만 계속 뒤지느라 아주 늦게 발견하고 노가다 많이 했다. 수정할 때 파싱이 필요했는데 구현돼서 좋았다. 

어려웠던 부분: 외부라이브러리 사용, 유효성 검사, 아쉬웠던 부분: 유효성 검사가 글 작성이랑 수정이랑 다르게 설정 되어 있었는데 늦게 알게 돼서 수정은 유효성 검사 수정한 부분이 반영 되지 않았다.

 

[전체 후기] 메인 프로젝트 때 멘토링을 진행했는데 멘토님께 코드 리뷰를 받고, 리팩터링에 대해 알게 됐다. 그동안은 구현만 되면 좋았는데 코드 가독성이 매우 중요하다는 것을 알게 됐다. 그 후에 깃허브에 내가 작성한 프리프로젝트(스택오버플로우) 코드를 봤는데 진짜 심각함을 느꼈다. 예전에 부트캠프 초반에 강사님께서 자신이 가장 싫어하는 개발자는 예전의 자신이라고 했는데 완전 공감된다. 프리프로젝트는 개인의 파트가 명확해서 다른 분들의 코드를 수정하는 일이 크게 없었는데 그래서 다행일지도... 내 코드 보여주기 진짜 진짜 부끄럽고, 도대체 얜 왜 이렇게 작성했지 싶었지만 이론, 과제만 진행했던 시간보다 아주 빠르고 많이 배울 수 있는 시간이었다. 프로젝트 하면서 능력있고 좋은 분들을 만나서 많이 배울 수 있었다.