퍼스트 프로젝트 : 에러해결했덕

에러해결했덕

• 코딩을 하면서 겪는 에러를 기록하고, 공부할 수 있는 웹 어플리케이션

• 클라이언트 깃헙 저장소 https://github.com/grin-quokka/errorHadDuck-client

• 배포된 서비스 주소 http://mysterious-journey.surge.sh/

  개발을 할 때 많은 에러를 만나게 되고 디버깅하게 되는데, 그 과정을 기록하고 추후에 다시 보면 도움이 될 것 같았다. 그래서 이 프로젝트를 기획하게 되었고, 덧붙여서 러버덕 디버깅을 할 수 있는 채팅 기능을 만들고 싶었다.

  서비스를 이용하는 방법은 http://mysterious-journey.surge.sh/ 웹사이트로 들어가 간단하게 회원가입을 한 후에 디버깅을 하면서 새글쓰기에 있는 항목들을 작성한다.

새 글 작성

• 러버덕과 대화하기 메뉴에서는 어떤게 문제인지, 어떤 로직인건지 혼잣말을 하면 된다.

디버깅

기술 스택

• REACT : 웹 라이브러리

• REACT_ROUTER_DOM : 라우팅 라이브러리

• ANT DESIGN : 디자인 컴포넌트 라이브러리

  이 프로젝트에서 나는 팀 리더로서 서비스의 기능을 기획했고, 프로젝트 진행을 관리했다. 프론트엔드를 담당하여 로그인 화면, 글 작성, 수정, 삭제 기능을 구현했다.

  또한 같이 프론트엔드를 맡은 팀원과 함께 컴포넌트 설계와 Ant design을 이용해 UI를 구현했다.

글 읽기, 쓰기, 수정, 삭제

• 리액트 라우터에서의 구분

{/* only write mode */}
<Route
  path="/singleview"
  exact
  component={() => <SingleView isLogin={isLogin} />}
  />

{/* update, delete, read mode */}
<Route
  path="/singleview/:postid"
  exact
  component={SingleView}
/>

컴포넌트 디자인

컴포넌트 디자인

배운점, 느낀 점

• 서비스 기획, 컴포넌트 디자인, API 설계 등 실질적인 코드를 작성하기에 앞서, 고민하고 설계하는 시간을 길게 가졌다. 처음에는 기능을 빨리 구현하고 싶은 마음이 앞섰다. 그러나 그전에 팀원들과 상의하는 시간 동안 프로젝트가 추구해야할 방향이 명확해졌다.
• 리액트 라우터를 사용해보니 확실히 새로고침 없이 원하는 부분만 내용이 바뀌어 동작이 부드러웠다. 제일 어려웠던 부분은 뒤로가기/취소 버튼이었다. history.back( )을 주로 사용했고, 잘 안될때는 Redirect 컴포넌트를 사용했다.
• 비슷한 컴포넌트를 여러개 만들고 싶지 않아서, 읽기, 쓰기, 수정 기능을 한 컴포넌트 안에서 다 구현했다. 이로 인해 하나의 컴포넌트가 너무 커진 점이 아쉽다. 다음에는 기능별로 컴포넌트를 나누고, 더 작은 범위내에서 재사용을 많이 하면 좋을 것 같다.