TIL 23.11.22 리액트 팀 프로젝트(팀 프로젝트 깃허브 오류해결)

오늘은 본격적으로 리액트 팀 프로젝트를 시작했다

피그마를 이용한 와이어 프레임

처음 피그마를 이용해서 와이어 프레임을 제작했는데 생각보다 편리해서 처음 사용하는데도 불구하고

쉽고 빠르게 작성할수있었다 여러명이서 실시간으로 이용가능하고 심지어 저대로 css도 뽑을수있다한다

직접 만들어본 리액트 화면

와이어 프레임을 참고해서 직접 작성해보았다 이전에 해설과제에서 본 걸 이용해 새로 꾸며봤는데

function UserInfo() {
  return (
    <>
      <ListWrapper>
        {fakeData.map((User) => (
          <UserCard User={User} />
        ))}
      </ListWrapper>
      <ListWrapper2>
        내가쓴 게시글 목록
        {fakeData2.map((content) => (
          <ContentsCard content={content} />
        ))}
      </ListWrapper2>
    </>
  );
}

 

둘다 코드는 거의 동일하다 맵을 이용해서 받은 API정보를 나열한다 현재는 파이어 베이스 연결이 되지않아

예시로 fakeData를 이용해 자료들을 props해서 만든상태이다

.

 

현재는 유저 정보창이 <p>로 되어있는데 내일은 edit profile 버튼을 누르면 input으로 변경이 되고

버튼도 수정완료 라고 바꾸는 토글을 이용해볼 예정이다

---

오류 발생

마지막 저녁시간에는 팀원들끼리 깃허브 파일을 커밋 푸쉬하는 시간을 가졌는데

내가 한 파일을 푸쉬후 같은 팀원들이 pull을 받아오니 잘되는 걸확인할수있었다 모두 메인에 merge후

나도 pull을 땡겼는데 리액트가 갑자기 먹통이되었다,

내가 올린 파일은 팀원들은 정상적으로 동작이되는데 막상 나는 작동이 안되니 이해가 안가는 경우였다

Usememo 가 오류가 떳다는 문구였는데 정작 중요한건 우리모두 아무도 Usememo 를 사용한적이 없다는 점...!

혹시나 메인브랜치에서 pull을 안받았을까, 아니면 다른 오류일까 싶어 주석처리도 해보고 ㄴ튜터님과 40분을 해멘결과,,,,

 

info Merge conflict detected in yarn.lo
warning package-lock.json found. Your pised not to mix package managers in ordes. 
To clear this warning, remove packa

 

해결 방법

결론은 팀원들은 npm을 사용하고 나는 yarn을 사용한다는 차이였다 마지막에 yarn install 을입력하니해결

무려 181.74 초가 걸려 패키지가 다시 다운받아졌다

 

팀원들이 원격으로 올린 브랜치는 npm이고 나는 yarn을 사용하니 패키지 매니저들끼리 충돌이난거였다

근데 오류에는 왜 Usememo오류라고 표기되는지 모르겠다... 혹시나 원인 모를 리액트 오류가나면

패키지 매니저를 다시 다운 받아보는것도 하나의 해결책이겠구나 싶었다

앞으로 팀 프로젝트 시에는 꼭 패키지 매니저를 통일후 작업을 이어나가야겠다