[React] CEOS 4주차 미션: React-messenger 구현하기

4주차 미션은 채팅방만 구현했던 3주차 미션에 이어 전체 메신저 어플을 구현해보는 미션이었다.

중간 고사가 끝나고 평소보다 조금 빠르게 과제를 시작했다..! (결론적으로 아주 좋았던 선택🥂)

 

[미션 목표]

• React에서 Routing 구현
• React에서 상태 관리를 하는 방법에 익숙해지기
• SPA 개념 이해하고, 그에 따른 라우팅 구현
• UI 컴포넌트 중복 줄여보기
• 코드 확장/재사용/리팩토링 하는 방법 이해하기

 

[필수 요건]

• 친구 목록 페이지, 채팅 목록 페이지, 설정 페이지 세 부분으로 구성하기
• 채팅 목록 클릭 시 채팅방으로 이동
• 친구 목록에서 친구 검색 기능 넣기
• Custom Hooks 통해 중복 로직 줄이기

 

[Key Questions]

 

1. Routing

• 라우팅이란 사용자가 요청한 URL에 따라 적절한 페이지를 보여주는 것
• 페이지별로 컴포넌트를 분리하며 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템
• 리액트에서는 다양한 라우팅 라이브러리가 존재하지만, 이 중 가장 자주 쓰이는 것은 리액트 라우터

 

2. SPA

• Single Page Application의 약자로, 한 개의 페이지로 이루어진 어플리케이션을 의미함.
• 예전에는 페이지를 로딩할 때마다 서버에서 리소스를 보내주는 식으로, 즉 웹의 뷰를 서버에서 전송을 해주는 방식이였다.
• 하지만 SPA는 페이지 전체보다는 필요한 부분만 로딩하는 방식이다. 필요한 데이터를 받아와서 업데이트가 발생한 부분에만 적용을 해주는 방식!
• 첫 화면의 로딩 시간은 다소 길다는 단점이 있음.

 

3. 상태 관리

• 어플리케이션의 규모가 커질수록 상태 변화는 많아진다. 하지만 이런 상태들은 일관적으로 유지가 되어야 하며 관리가 되어야 함.
• 즉, 데이터 무결성을 지키기 위해 상태 관리를 사용함.
• 상태의 종류로는 전역 상태, 컴포넌트 간 상태, 지역 상태 3가지로 구분을 할 수 있으며 이 때 컴포넌트 간 상태와 전역 상태는 Prop Drilling 방식을 활용함.

---

겪었던 에러 정리한 페이지(다음 과제에는 더 정돈을 해볼 예정!)

https://half-catsup-728.notion.site/4-react-messenger-9cbbbbba2c514cbda064dd44831673e0

4주차 react messenger

위 페이지 외에도 조언을 받은 것들도 많은데, 이것도 정리해봐야지.. 일단 넷플릭스 만들어볼게요..?

 

 

배포 링크: https://react-messenger-17th-psi.vercel.app/

React App

 

피그마 링크 (이번 과제에는 피그마를 써보았다) : https://www.figma.com/file/gQkGEwFAD2gDcHbghxZG5b/ceos4%EC%A3%BC%EC%B0%A8%EA%B3%BC%EC%A0%9C?type=design&node-id=0-1&t=23CkPMzXZ7ax4B2d-0 

Figma

 

이번에는 발표도 했답니다~!💪 이번 과제를 하며 중점적으로 고려한 요소, 배운 점, 아쉬운 부분들에 대해 발표를 했다.

발표 자료: https://half-catsup-728.notion.site/4-902469acafc64308b274b82f8f1d4e93

4주차 과제 발표

 

 

---

 

이번 과제는 제대로 해보자는 마음으로 각을 잡고 했었다 하하

지금까진 휘몰아치는 과제 페이스에 적응을 하느라 내가 구현을 하는 부분에 대한 이해가 조금 부족했던 것 같다. (지난 과제들에 대해서는 또 리팩토링을 해볼 계획이다!💪) 따라서 이번 과제에는 중간 고사를 끝내고 조금 여유 있게 과제를 일찍 시작했다. (근데 이런 저런 이슈 때문에 여유가 있진 않았다😂)

 

앗 그리고 이번 주는 특히 ✨갓프엔 멤버들의✨ 도움으로 무사히 과제를 끝마쳤고, 코드 리뷰를 받을 수 있었다. 어떻게 이렇게 따숩고 재밌고 멋진 사람들이 모인 걸까 야호🥂

 

항상 동아리 과제 기록을 해야겠다는 생각은 있었는데, 좀 더 잘 정리해서 꾸준하게 아카이빙을 해보려 한다.

다음 과제도 화이탱!