Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4주차] 정희수 미션 제출합니다. #16

Open
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

heeeesoo
Copy link

@heeeesoo heeeesoo commented Nov 4, 2022

이번에 처음 Recoil을 써봤는데 확실히 코드 짜는데 더 좋았어요! 저번 과제에서는 props 계속 내리고 내리고 올리고 올리느라 코드 짜는데 좀 혼란스러웠는데 Recoil 쓰니까 편하네요.. 왜 React에서 상태 관리가 중요한지 알 것 같습니다.

저는 메세지 json 파일에 저장할 때 room번호를 안 쓰고 from과 to를 모두 써서 저장했는데, 아예 room 번호를 지정해서 각각 저장하신 분도 있더라구요!! 다른 분들은 어떻게 메세지 파일을 관리하셨는지 궁금합니다

코드리뷰 감사합니다!!😀

배포링크

Routing

웹에서 Routing은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것입니다.
React에서 Routing을 할 수 있는 선택지는 두 가지입니다.

  1. React Router : 컴포넌트 기반으로 라우팅 시스템을 설정합니다.
  2. Next.js : 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동합니다.
    이번 과제에서 React Router v6를 사용했습니다.

SPA

SPA는 Single Page Application으로 한 개의 페이지로 이루어진 애플리케이션입니다.
뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 웹을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식입니다. 새로운 데이터가 필요하면 서버 API를 호출해 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있습니다. 이렇게 html은 한번만 받아와 웹을 실행시킨 후에 그 이후에는 필요한 데이터만 받아와 화면에 업데이트 해주는 것이 SPA입니다.
이번 과제에서 React Router를 사용해 Single Page Application을 만들어 봤습니다.

상태 관리

React 어플리케이션에서는 Redux, Recoil, Hooks 등으로 상태 관리를 할 수 있습니다.

  1. Redux : Store 객체를 제공하고, 한 번 설정으로 어플리케이션의 모든 상태를 포함하고, 필요할 때 업데이트합니다. 앱의 상태를 한 곳에서 관리하고 앱의 변경사항을 보다 예측 가능하고 추적 가능한 상태로 유지할 수 있습니다. Redux는 전역 상태 라이브러리라 전역 State가 바뀔때마다 리렌더가 일어날 수 있는 단점이 있습니다. 또 Redux는 Flux 패턴을 사용해 원하는 상태 변경을 위해서 dispatch를 위한 action, 상태 변화를 위한 reducer, 컴포넌트에서 state를 가져다 쓰는 부분을 모두 손봐야 하기 때문에 어플리케이션 규모가 커질수록 상태 관리가 너무 장황해질 수 있습니다.
  2. Recoil : Atom에서 해당 State 변화 시에 이를 참조하는 컴포넌트들만 리렌더를 시키는 로직으로 되어있습니다.
    이번 과제에서 Recoil과 Hooks를 이용해 상태를 관리해봤습니다.

아래는 Key Questions 작성하면서 참고한 링크입니다!
2021년 React 상태 관리 라이브러리 전쟁 : Hooks, Redux, Recoil

@jhj2713
Copy link
Member

jhj2713 commented Nov 5, 2022

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

배포링크에 있는 캐릭터들 너무 귀엽네요,,, TMI지만 저는 어릴때부터 지금까지 짱구가 최애 캐릭터입니다😆
그리고 저는 항상 room 배열을 따로 만들어서 message를 저장하는 방법을 사용했는데, 그냥 메시지만 저장하셨군요! room없이 메시지만 저장하면 input을 저장할때 훨씬 수월하다는 장점이 있을 것 같네요. 하지만 아주 많은 채팅이 오가게된다면 어떤 게 더 효율적일지 생각해볼 수 있을 것 같아요!

이번주도 수고많으셨고 스터디 시간에 뵐게요~!👍

Copy link
Member

@YooSeonHo YooSeonHo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 희수님~! 캐릭터들이 너무 귀여워요 ㅋㅋ
코드가 너무 깔끔해서 깊이 생각하지 않아도 바로바로 이해가 됐어요!
상태 관리도 잘하시는 거 같아 부럽습니다!!!!
고생하셨고 스터디때 봬요!

return (
<StyledItem to={chatLink}>
<StyledBox>
<StyledImage width={"45px"} height={"45px"} src={src}/>&nbsp;
{name}
<StyledFontBox>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

큰 styled component 안에 있는 요소들은 선택자로 관리하시면 굳이 새로운 styled component 만들지 않으셔도 돼요!.!

@@ -28,7 +28,7 @@ function FriendItem({id,name,src,number}:FriendItemProps){
</StyledItem>
<hr/>
<StyledFont>
친구 {number}
친구 {number-1}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오옷 친구 수도 추가하셨네용..!!

Copy link
Member

@chaeyeonan chaeyeonan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 코드리뷰파트너 안채연입니다
짱구 너무귀엽네요!
코드 깔끔하게 쓰셔서 보기 좋았고 저랑 다르게 구현하신 부분이 좀 있어서 흥미롭게 봤습니다!
수고하셨어요~~ 👍

"to":0,
"content":"난 뚱이",
"date":"02:21"
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

희수님이 코드리뷰 남겨주신대로 저랑 이 부분이 조금 다르군요..!
저는 기존 과제에서는 concat을 사용했고, 이번 과제에 roomId를 추가하면서 concat 사용이 힘들었는데, 희수님처럼 구현하면 제가 저번 과제 했던 것 처럼 concat을 쉽게 사용할 수 있었겠네요! 방법하나 알아갑니다 👍

<Header/>
<StyledContent>
친구
<StyledButton onClick={onClick}>🔍</StyledButton>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const [search, setSearch] = useState(false);
<StyledButton onClick={() => setSearch((prev) => !prev)}>

이렇게 해주면 onClick 함수를 따로 작성하지 않고 구현할 수 있을 것 같습니다.!

<StyledButton onClick={onClick}>🔍</StyledButton>
{
search === 0 ?
<Search/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저는 주절주절 한파일에 다 작성했는데 .. Search 컴포넌트를 따로 작성하셨군요.! 저도 이렇게 해야겠습니다..ㅎㅎ 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants