[개발 공부 62일차] 개인 프로젝트 진행 상황 | 트러블 슈팅, 매핑

 

< 목차 >
1."The data that you are trying to import is incompatible with your table structure"
2. PR 템플릿 생성 및 첫 PR 등록
3. Next-UI Select: onChange가 안 돼서 Next-UI 공식 문서 참고해 해결
4. string Type에 배열 할당하면 Error 뜸
5. 로컬 브랜치명 변경
6. 데이터 필터 처리가 안 됨 ➡️ Supabase에서 Filter 처리해서 해결!
7. '매핑(mapping)'이란?
8. 금일 소감

 

 

1."The data that you are trying to import is incompatible with your table structure"

 

 

"The data that you are trying to import is incompatible with your table structure"라는 메시지는 CSV 파일의 데이터 구조가 Supabase에 생성한 테이블의 구조와 일치하지 않을 때 발생한다.

 

 

 

 

그래서 위 사진처럼 데이터 레이블을 Supabase Key와 똑같이 맞춰주었다. 그리고 평점과 같은 숫자가 들어가야 하는 값에 "없음"으로 되어있는 값은 모두 빈칸으로 바꿨다. 이것도 오류 메시지가 떴기 때문이다. 이렇게 바꿔주니 정상적으로 50개의 데이터가 모두 들어가졌다.

 

 

[Reference]

https://velog.io/@sweet_potato/47-supabase%EC%97%90-jsonb-%ED%98%95%ED%83%9C%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%84%A3%EA%B8%B0

 

 

 

2. PR 템플릿 생성 및 첫 PR 등록

 

 

개인 프로젝트지만 협업하는 방식은 타 팀들과 똑같이 해봐야 하기 때문에 PR 올리고 Feedback 하는 것까지 혼자 하고 있다. 북 치고 장구 치고 하는 중 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 나름 재밌긴 하다. PR 템플릿 생성은 이번에 처음 해봤는데 정말 별거 아니다.

 

이번 개인 프로젝트로 인해 처음부터 끝까지 스스로의 힘으로 해보는 중인데, 시간이 조금 더 들지언정 몰랐던 것도 많이 알게 되고, 하나둘씩 내가 할 수 있는 게 하루가 지날수록 늘게 되니 자신감도 더 붙는 듯하다.

 

 

[Reference]

https://2jinishappy.tistory.com/337

 

 

 

3. Next-UI Select: onChange가 안 돼서 Next-UI 공식 문서 참고해 해결

 

 

inline으로 넣었더니 onChange에서 에러가 자꾸 떴다. 어떻게 해야 할지 모르겠어서 일단 Next-UI 공식 문서에서 onChange 관련 내용을 찾아봤다.

 

 

 

 

'헉 설마 이렇게 따로 빼야만 작동하나?' 싶어서 저 코드 그대로 가져와서 내 코드에 맞춰 State 정도만 변경했다. 일단 코드 작동이 되는지부터 보려고 Type은 any로 했다. '오 될 것 같은데?' 싶어서 바로 테스트해봤다.

 

 

 

 

테스트 결과, 잘 들어가는 것을 확인할 수 있었다! 이제 닉네임이랑 사용자 타입 부분 유효성 검사만 하면 로그인, 회원가입 코드는 완성될 듯하다. 나 혼자 하니만큼 얼른얼른 진도를 빼야 한다. 아 너무 재밌다 ㅋㅋㅋㅋ 예전에 비해 혼자서 해결하는 스코프가 넓어져서 짜릿하다. 장하다 나 자신

 

 

 

4. string Type에 배열 할당하면 Error 뜸

 

 

뭐지.. 공식 문서에서 하란 대로 Type 지정해줬는데도 안 된다. 왜 이런 거지

 

 

 

 

구글에도 해결책이 나오지 않았다. 그래서 에러 메시지를 유심히 봤다. 뭔 말인지 다는 모르겠는데, 일단 문자열 타입에 [ ] 배열을 할당하면 안 된다는 건가? 싶었다.

 

 

왼쪽: 초기값 바꾸기 전, 오른쪽: 바꾼 뒤

 

 

'userType state 초기값이 배열이라서 그런가?' 라는 생각이 들어 '중고등학생'으로 변경해주었더니 위처럼 빨간 에러 표시가 사라졌다. 해결!

 

 

 

5. 로컬 브랜치명 변경

 

 

왼쪽 자료 보고 따라서 했더니 됐다.

변경하려는 브랜치 외 브랜치로 이동해야 하는 것 같다. master, main 이렇게 이동하라고 하길래 그냥 원격 브랜치면 다 될 듯해서 dev로 이동한 뒤, 아래와 같이 Git 명령어를 작성했다.

 

 

git branch -m 변경하고자하는브랜치명 변경할브랜치명

 

 

위와 같이 한 칸 띄어서 구분하여 명령어 작성하면 정상적으로 로컬 브랜치명이 변경된다.

 

 

[Reference]

https://www.freecodecamp.org/korean/news/git-rename-branch-how-to-change-a-local-branch-name/

 

 

 

6. 데이터 필터 처리가 안 됨 ➡️ Supabase에서 Filter 처리해서 해결!

 

 

어떤 카테고리를 클릭하든 전체 장소 데이터가 나와버림.. 일단 오랫동안 고민한 탓에 머리도 안 돌아가기 시작해서 튜터님께 찾아가서 해결책을 여쭤보았다. 백엔드인 Supabase에서 데이터를 필터해서 갖고 오는 게 빠른 방법일 수 있다고 하시면서 추천해주셨다. 바로 적용해 보자!

 

 

 

 

코드는 Supabase 공식 문서를 참고하여 위와 같이 수정해서 적용했더니 아주 말끔하게 해결되었다!

 

 

 

7. '매핑(mapping)'이란?

: 프로그래밍에서 자주 쓰이는데, 한 데이터 집합의 요소들을 다른 데이터 형식이나 구조로 변환하는 과정을 의미

 

React에서 매핑(mapping)은 보통 배열의 각 항목을 JSX 요소로 변환하여 화면에 렌더링할 때 사용된다.

 

예를 들어, Supabase에서 가져온 공부 장소의 데이터를 UI 컴포넌트에 '매핑'한다는 것은, 데이터베이스의 각 컬럼(예: place_name, category, address 등)을 HTML 요소(예: <h1>, <p>, <address> 등)로 변환하여 브라우저에서 보여주는 것을 말한다.

 

 

매핑 과정의 간단한 예시

const StudyPlaceDetail = () => {
  // 상태로 데이터를 관리
  const [studyPlace, setStudyPlace] = useState(null);

  // 데이터를 가져오는 로직 생략

  // 데이터가 없으면 로딩 메시지를 표시
  if (!studyPlace) return <p>Loading...</p>;

  // 데이터가 있으면 UI 요소로 매핑하여 렌더링
  return (
    <div>
      <h1>{studyPlace.place_name}</h1>
      <p>{studyPlace.category}</p>
      <img src={studyPlace.photo_url} alt={`${studyPlace.place_name}의 사진`} />
      <div>평점: {studyPlace.rating}</div>
      <p>주소: {studyPlace.address}</p>
      {/* 이하 나머지 컬럼도 같은 방식으로 매핑하여 표시 */}
    </div>
  );
};

 

 

위 코드에서 studyPlace 객체의 각 속성(즉, 데이터베이스의 컬럼)을 React 컴포넌트의 JSX 요소로 변환하여 렌더링하는 과정이 매핑이다. 사용자가 이 페이지를 방문하면, 각 공부 장소의 정보가 웹 페이지에 적절한 형식으로 표시된다.

 

 

 

8. 금일 소감

튜터님들께서 모의 면접이랑 담당하시는 팀들 봐주시느라 너무 바쁘셔서 막혔을 때 질문하러 갈 수가 없다.. 그래서 웬만한 건 모두 스스로의 힘으로 해결하려고 하고 있다. 튜터님 기다리는 시간이 길다 보니 이래저래 혼자서 문제 원인 유추하고, 이런저런 시도를 해보다 보면 해결이 돼서 다시 튜터님들 계신 자리에서 벗어나서 내 자리로 가기 일쑤다..

 

기획은 꽤 봐주시긴 했지만, 이번 주엔 거의 쭉 바쁘셔서, 거의 수료하고 나서 개인 프로젝트 하는 듯한 느낌도 든다. 그래도 어차피 경험할 거 미리 경험해 보니 좋은 것이라고 생각하고 있다. 맞긴 해 혼자 하는 게 내 실력이지

 

앞으로도 의존하거나 의지하기보단 내 힘으로 해결하려고 뇌를 많이 써보자