[4주차] 오지은 미션 제출합니다.

[JeeeunOh]

3주차에 나름 구조를 잘 짜놨다고 생각했는데, 전혀 아니었네요..
이번 과제에서는, 생각보다 채팅방 input값을 store에 저장되어있는 chatList에 반영하는 부분에서 시간을 많이 썼던 것 같습니다.
그리고 이번 과제의 포인트는...! settingPage에서 발견하실 수 있습니다.
움짤이라 로딩이 좀 걸리긴 하지만.. 제 배포페이지를 구경오신 분들에게 드리는 소소한 재미입니다^~^

Key Questions

1. Routing 이란?

네트워크적인 개념으로 설명하자면, '어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정'이라고는 하는데,
좀 더 풀어서 쓰면 하나의 페이지에서 다른 주소로 이동하면 다른 페이지를 보여주는 것을 의미한다.

보통 프론트엔드에서 라우터를 쓴다!고 하면 한 페이지에서 다른 페이지로 이동할 때 페이지끼리 연결하는 도구..? 정도로 생각하면 될 것 같다. 나는 라우터를 사용하기 위해 react-router-dom을 설치해서 페이지끼리 이동하였다.

2. SPA 란?

SPA의 반대되는 개념으로 MPA가 있는데 SPA는 Single Page Application으로 한 개의 페이지로 구성된 어플리케이션, MPA는 Multiple Page Application으로 여러개의 페이지로 구성된 어플리케이션을 의미한다.

SPA는 웹 어플리케이션에 필요한 모든 리소스를 한번에 다운로드해서 초기 세팅 시간이 오래걸리지만, 하나의 페이지 안에서 이동을 할 때 페이지가 빨리빨리 전환된다는 장점이 있고 MPA는 그때그때 서버에서 필요한 리소스를 가져와 페이지를 렌더링하기 때문에 깜빡임 현상이 일어날 수 있다는 단점이 있지만 필요한 리소스들이 서버에 저장되어있어 검색엔진에 잘 잡힌다는 장점이 있다. 내가 이번주에 개발한 페이지는 SPA이다!!

3. 상태관리란?

상태란, 컴포넌트의 변경 가능한 데이터 저장소인데 이런 상태를 관리하기 위해서 context API, redux, recoil 등을 사용한다. 나는 그 중에서 recoil을 사용해서 상태관리를 하게 되었다.

개발 후기

https://55wldms.tistory.com/19

배포링크

https://jieun-message-2onv9ozj6-0909oje.vercel.app/
-> 오류 수정했더니.. 링크가 바뀌어서 재배포되네요 쥬륵...

[jhj2713]

안녕하세요, 프론트 파트장 주효정입니다🙌

오늘도 역시나 너무 깔끔하게 코드를 작성해주셨네요! recoil로 상태관리도 적절하게 잘 해주신 것 같아요👍 블로그 보니까 recoil atom의 불변성 문제를 겪으셨네요. 저도 처음에는 그 부분으로 많이 애를 먹었던 기억이 납니다... setState처럼 불변성 유지가 꼭 필요하더라구요.

그리고 한가지 더 말씀드리자면 recoil의 atom에는 직렬화가 가능한 데이터만 저장이 가능합니다. 인스턴스나 함수 등은 직렬화가 불가능해서 recoil로 상태관리가 안됩니다. recoil이 내부적으로 직렬화/역직렬화 과정을 거치는 것 같더라구요. 저도 최근에 알았습니다..ㅎ recoil을 계속 사용하신다면 언젠가는 마주하실 이슈일 것 같아서 한 번 말씀드려봤습니다!ㅎ

수고많으셨고 스터디 시간에 뵙겠습니다🥳

[kongnayeon]

안녕하세요 지은님 이번 주 코드 리뷰 파트너입니다 ^_^

코드가 엄청 깔끔해서 리뷰하기 너무 너무 좋았어요! 역시... 🤩
이번 과제에서 코드가 많이 깔끔하지 못한 것 같아 다른 분들은 어떻게 짜셨나 궁금했는데 지은님 코드 보고 많이 배워 갑니다 ☺️

이번 주 과제하느라 수고하셨고 스터디 시간에 봬요!!

[kongnayeon]

이렇게 하면 친구 목록과 검색 목록을 따로 만들지 않아도 되네요!! 우왕... 👀

[kongnayeon]

Suggested change

	export default ChatProfile;
	export default React.memo(ChatProfile);

요렇게 하시면 리렌더링 방지할 수 있어요!
참고 링크

[kongnayeon]

움짤 너무 귀여워용 ㅎㅅㅎ...