[1주차 회고내용]

이진희·2022년 7월 9일

원티드 프리온보딩 회고

목록 보기

2/5

javascript deepdive 내용 정리
1단원 4단원.
코드리뷰 받은 것 정리
- styled-components 를 따로 분리 했다면 파일명이나 폴더 구조로 알아 볼수 있게 하면 좋겠습니다.(ex style.Input.js 등)
if문이 반복되면 함수 분리를 고민해봅시다.
form 이벤트를 사용하면 keydown을 따로 처리 하지 않아도 됩니다.
검색창 input을 ref로 활용해보시면 좋을 것 -> 최적화
수업에서 배운 점 정리
- data fetching 모듈화
- 각 수업별 요약본을 기준으로 보충해서 정리.
팀활동을 하면서 배운 점/개선점/생각해볼만한 것을 체크해도 될 것 같음)

01. 선발과제 리팩토링

💡 유저인증에 따른 라우팅 처리가 참신하네요! 점점 더 좋은 방법을 찾아가시리라 믿습니다! input에 붙일 수 있는 useValidation Hook도 만드셨네요! 넘 좋습니다. data fetching을 모듈화 하신 부분도 칭찬 드리고 싶습니다!! 구조에 대한 고민이 옅보이네요! 깔끔합니다. 더 큰 사이즈의 프로덕트에서는 어떻게 구조를 가져가면 좋을지에 대한 고민도 해보시면 좋겠습니다.

구조

styled-components 를 따로 분리 했다면 파일명이나 폴더 구조로 알아 볼수 있게 하면 좋겠습니다.(ex style.Input.js 등)

컨벤션

축약어를 사용하지 않고 검색가능한 변수를 사용하면 좋겠습니다.

// 이렇게 처리 하신 부분 넘 좋네요. 
// 이렇게 하면 useEffect가 실행 될 때만 함수가 재선언 되기 때문에 
// 외부에서 사용하지 않는 함수라면 넘 효율적이죠!
useEffect(() => {
    async function fetchData() {
      const result = await getFeed();
      setFeeds(result);
      setIsLoading(false);
    }
    fetchData();
  }, []);

    <>
      <GNB />
      {isLoading ? (
        <Loader>loading...</Loader>
      ) : (
        <FeedContainer feeds={feeds} isLoading={isLoading} />
      )}
    </>

		// 요런 방법도 상황에 따라 고려해보시면 좋습니다. 길이가 길면 길수록 삼항연산자는 가독성이 떨어져요!
		// 물론 지금정도 길이에선 삼항연산자가 더 좋을 수 있습니다! 참고용!
		<>
      <GNB />
      {isLoading && (<Loader>loading...</Loader>)}  
      {!isLoading && (
        <FeedContainer feeds={feeds} isLoading={isLoading} />
      )}
    </>

로직

if문이 반복되면 함수 분리를 고민해봅시다.
form 이벤트를 사용하면 keydown을 따로 처리 하지 않아도 됩니다.

02. 영화 정보 사이트

💡 컨벤션을 최대한 맞춰주신 부분이 너무 좋습니다..! theme도 상황에 맞게 잘 추가해주셨고, helper를 따로 두고 사용하신 부분도 좋습니다. 네이밍에도 최대한 많은 고민을 하신 흔적이 보이는 것 같아요. 컨벤션에 따라 다르겠지만 Modal을 useModal과 함께 사용하도록 같은 파일에 넣어놓은 부분도 고민의 흔적이라 생각합니다! 아직 시간이 많이 남았으니 새로운 기능들을 추가해보면 좋을 것 같습니다. 저희가 추천검색어 과제와 두가지 기능을 합치기로 했으니 쿼리로 검색을 대신하는 것보다 직접 전체 데이터를 받아와서 데이터들 중에 검색하는 로직을 만들어보면 좋겠습니다. 장르별 검색(전체,action,romance등)을 할수있는 드롭다운을 만들어 보는 것도 좋을 것 같아요.

구조

router는 유일하지 않을 확률이 높습니다. 지금은 괜찮지만 추후에 라우터가 추가 된다면 폴더로 따로 분리 해주시는것도 좋은 방법입니다.
globalStyle과 theme을 styles를 만들어 모아주시면 유지 보수할때 더 편할 것 같습니다.
recoil파일은 store라는 폴더를 따로 두고 관리하면 좋을 것 같습니다.

컨벤션

컨벤션은 잘 맞춰진 느낌이 듭니다!

로직

Modal의 Overlay가 굳이 필요한지에 대해 의문이 있습니다. prop으로 받은걸 그대로 재사용할 뿐이라면 Styled-components에 바로 넘겨주어도 괜찮을 것 같습니다.
이전 리팩토링에서처럼 검색창 input을 ref로 활용해보시면 좋을 것 같습니다. 검색 버튼을 두면 ref에서 검색 버튼을 누를 때 current.value를 가져오는 방법으로 랜더링 최적화를 시킬 수 있을 것 같습니다.

// find를 사용하셔도 좋을 것 같습니다.
const handleCardClick = (movieId) => {
    const [movie] = movies.filter((movie) => movie.id === movieId);
    setSelectedMovie(movie);
    openModal();
  };

참고

Array.prototype.find() - JavaScript | MDN

02. 영화 정보 사이트 part 2

💡 한 주간 고생 많으셨습니다! theme provider도 적용해보시면 좋을 것 같아요!

구조

database를 src 외부로 옮기는 것도 고려해보시면 좋겠습니다. (제가 src에 넣어두어서….;;)
pages 내부에 해당 페이지에서 사용하는 컴포넌트를 넣지 않고 components에 page에서 쓰이는 컴포넌트를 따로 모아두는 것도 좋아보입니다.
globalStyle은 따로 styles 폴더로 관리해주시면 좋을 것 같습니다.

컨벤션

대체적으로 잘 정리 된 것 같습니다! 컴포넌트 내부의 변수나 함수 등의 순서를 일관성있게 관리해보시는 것도 추천드려요!

로직

custom hook을 더욱 적극적으로 사용해보시는 것도 좋겠습니다! 사실 필요 없는 부분에 적용할 필요는 없지만 연습하신다 생각하고 후에 재사용이 가능하다고 느껴지는 부분이 있다면 적용 해보세요.

폴더 구조 고민

components/ -common한 컴포넌트 모아두는 곳
store/ - redux, recoil등 상태관리 관련 모아두기
hooks/ - 공통 hook 작성
pages/ - page 모아두는 곳
services/ - 아직도 역할 잘 모르겠움.
styles/ - 공통스타일 관련
utils/ - 공통적으로 쓸 수 있는 것들 모아둠
├─ constants/
├─ helpers/
routers/ - 라우터
App.js - 렌더링할 것
index.js - entry 포인트