[FE- TEAM12] [Junami, Eamon] PR2

[skawnkk]

(장문 주의😈)

🔢 추가구현사항 : 금요일 데모 내용 + 로그인 기능 추가 구현
(로그인정보를 얻어와 유저정보(깃 프로필/네임) 표기)

👉 리드미

주나미

• 질문
  -useFetch 커스텀 훅을 쓰긴했지만 상황에 따라서는 직접 fetch, axios를 다양하게 사용하였습니다
  useFetch 하나로 해결하지 못한게 아쉬웠는데, 아무래도 파라미터 전달하는 방식을 수정하면 해결될수있었을것 같은데
  잘 모르겠습니다. 어떻게 고치면 여러 인자들을 다루는 fetch훅을 만들수있을지 고민입니다.
  또 지금은 useFetch이후의 error처리를 따로 해야하는데 한번에 에러까지 다루는 방법을 적용해보고 싶습니다.
• 회고
  • 백엔드와 프론트간에 어떤 일을 상호간 요청하는지를 얕지만 알고 경험할 수 있었습니다.
  • Oauth를 공부할때 백엔드 프론트 모두 함께 영상공유를 하며 서로질문하고 중요한걸 확인하고 넘어가는 시간을 가졌었는데 프론트/백 간의 해야할 일을 정리할 수 있어 큰 도움이 되었습니다. 그래도 이해가지 않았던 부분들은 코드를 작성해가면서 흐름을 배울 수 있었습니다.
  • 다양한 훅을 사용하지 못하고 useEffect, useState만 써본것 같습니다. 다음주엔 다양한 훅들을 공부하고 적용해봐야겠습니다.
  • 다른조의 데모를 보면서 리액트가 버벅거림없이 매끄럽게 나오거나 매끄러워보이게 처리하는 방법을 보고 최대한 렌더링을 적게하는 방법과 센스있게 로딩을 처리하는 방식 등을 다음 미션에 적용해보고 싶어습니다.
  • 처음 설계과정에서 컴포넌트 분석을 대략적으로하고 최소단위 컴포넌트 분해를 하지 않았습니다. (귀찮아서)
    그런데 작업을 하면서 재사용되는 컴포넌트들이 생기는걸 확인하고 작업을 하면서 컴포넌트를 만들거나, 또는 만들고나서 분리하는 작업이 필요했는데 사전에 충분한 분석을 하고 시작해야겠다고 느꼈습니다.
  • 이번주는 pr을 1번밖에 못받아서 너무 아쉽습니다. 리뷰어님 많은 리뷰해주시면 너무 감사하겠습니다 ㅠㅠㅠ
  • 협업은 매주매주 느끼는바가 다르네요ㅎ 파트너가 어떻냐보다 제 자신을 더 돌아보게 되는 주였습니다.
    2주간 사이좋게 함께한 이몬과 백엔드 이노, mj 감사합니다~ : )

---

이몬

• 잘한점
  • 컴포넌트를 범용성 있게 만드는 경험을 해보았다. 그렇기 위해서 여러가지 react 의 새로운 라이브러리를 경험해보았다.
  • 로그인 구현을 위해 Oauth 의 개념을 이해하고 백엔드와 협력해서 프론트에 적용해보려고 시도해보았다. 백엔드와 제3자(github) 의 소통에 대해서 고민하게 되었고 , 백엔드의 언어와 프론트의 언어가 많이 다르다는 것을 알게 되었다. 백엔드와 소통을 하려면 http 공부를 생각보다 많이 해야한다고 생각들었다.
  • 커스텀훅을 만들고 사용해 보았다. 커스텀훅 useFetch 를 이용해서 get 이나 post 등 여러가지 요청을 보내고 받아보았다. 그렇지만 범용성을 좀더 높이고 싶은 아쉬운 마음이 있었다.
• 아쉬운점
  • 발표 시간에 이번 미션에 우리 조가 했던 것을 조리있게 멋있게 발표하지 못했다.
  • 미션에서 구현 못했던 부분이 조금 있었다. (npm 배포, 로그인 구현)
  • 6시 이후에도 미션의 코드에 시달렸지만 코드를 보는 시간이 많은 것에 비해 효율이 크게 없었던 것 같다.
    "공부한다" 라는 느낌보다는 "미션을 구현한다" 라는 마음가짐으로 2주를 보냈던 것 같다. 앞으로 남은 기간동안 미션을 하더라도 하루에 하나씩 알아 가는 것으로 구현에 급급해하지 말자. 지금은 일하는 것이 아니라 배우는 기간이다. 하나라도 제대로 알고 넘어가자
  • 다른 프론트 엔드 분들과 교류가 적어서 외딴 섬에서 주나미와 코딩하는 기분이 들때가 조금 있었다. 중간 중간 다른 분들과 문제점에 대해서 토의 했으면 문제를 해결하는데 좀더 수월하지 않았을까 싶다.
  • 회의록과 회고를 매일 하지 못했다. 회의록 작성은 미흡했고 회고는 항상 밀려서 썻다. 그렇기 때문에 작성의 효과가 미미했던 것 같다. 다음에는 좀 더 체계적인 회의록 작성을 해야겠다.
• 개선할 점
  • 다음 미션에는 (파트너와 합의하에) 6시 이후에는 미션 코드를 보지 않으려는 노력을 해야겠다. 하루에 배운 것들을 정리하는 개인 공부시간으로 6시 이후를 사용 해야겠다.
  • 발표준비를 좀 더 시간있게 준비하기 위해서 2번째주 목요일 까지만 미션을 준비하고 그 다음날인 금요일에는 발표준비에만 몰두하도록하자.
  • 사실, 개인적으로 나의 부족함이 많았던 미션이지만 주나미와 함께 코드를 짜면서 내 생각을 좀 더 유연하게 사고해야겠다라는 생각을 많이 했다. 일례로 주나미 께서 케러셀를 구현할때 div 로 감싸는 로직이 불필요한 엘리먼트를 만든다고 생각해서 막상 구현할때는 혼자서 찜찜해 하고 있었다. 그러나 그 찜찜함은 나중에 케러셀을 범용성있게 만들거나 page 번호를 매길때 그러한 div 들로 감싸준 것들이 너무 유용하게 쓰이면서 사라졌다.
  • 공부가 조금 길어지다보니 내가 모르는 것에 집중하기보다는 내가 아는 것으로 돌려막기를 한다는 생각이 든다. 그렇게 하기보단 내가 현재 모르는 것이 무엇인지 제대로 파악하고 그것을 제거하는데 다시 중점을 두어야겠다. 나에게는 아직 4개월 전에 CS 10 을 하던 그 때와 같이 공부할 내용들은 무궁 무진하다.

[p-iknow]

• hook의 사용 관점에 대해 리뷰드렸어요.
• forwardRef 와 useImperativeHandle을 잘 이해하고 쓰신 것 같아요. 리엑트 lib 컴포넌트들이 ref를 제공해서 제어권을 밖으로 넘겨주는 방법인데, 특정 상황에는 잘 쓰입니다. 👍 👍
• hook 디자인할 때 https://github.com/rehooks/awesome-react-hooks 요런 링크도 참고해보세요.
• https://use-http.com/#/?id=basic-usage-auto-managed-state 이런 hook의 인터페이스만 동일하게 해두고 내부구현은 어떻게든 하는 식으로 참고해보면 어떨까요?

[p-iknow]

p3;
dependency 배열에 [x] 만 들어가 있는데, lint disable 까지 하신걸 보니 특정 동작을 의도하신 것 같아요.
그러나 이렇게 사용하기 시작하면 코드를 작성한 분 이외에는 이 코드가 어떤 원리로 돌아가는지 파악하기 어려울 것 같습니다.

[p-iknow]

p3;
요런식으로 하는게 더 원하는 바를 잘 표현한 것 같네요.

const fetchUrl = useCallback(() => {..}, [url]);
useEffect(() => {...}, [fetchUrl])

[p-iknow]

요런식의 hook으로 바꾸면 좀 더 선언적으로 쓸 수 있습니다.
Hook을 재사용 관점뿐만 아니라, 관련 로직을 하나로 응집한다는 개념으로 사용해서, 특정 컴포넌트에서만 사용하는 hook을 만들어 쓰면 좋습니다. 그렇게 쓰면 뷰(jsx)와 로직이 분리되는 효과도 있습니다.

const useBestDishMenu = (basicUrl) => {
  const [bestDishMenu, bestDishLoading] = useFetch(basicUrl, 'get');
  return { besDishMenu, bestDishLoading }
}

[p-iknow]

p5 요런 변수명이 더 좋겠네요.

Suggested change

	const button = useRef();
	const buttonRef = useRef();

[p-iknow]

이런 로직을 묶어서 hook으로 분리해도 좋겠네요.vanila js에서 관련성 높은 부분을 묶어서 함수로 표현하는 것처럼,
리엑트에서는 hook으로 표현할 수 있습니다. hook을 너무 재사용 관점으로 생각하지 않으셔도 됩니다. 로직을 묶어서 표현하는 표현양식이라고 생각하면 좋을 것 같아요.

[crongro]

코드 들여쓰기가 너무 깊으니 vscode설정을 해보세요.

[crongro]

고차함수를 사용해보시죠.

[crongro]

코드 들여쓰기를 에디터에서 설정해보세요.
너무 들여쓰기 크기가 크네요.

[crongro]

1 이라는 표현은 방향을 의미하지 않아서 별로같아요.

[crongro]

axios 와 같은 라이브러리를 만들면 좋겠어요.

[crongro]

옵션이 많아서 좋네요.