3일차

그저 컴포넌트를 만들고 싶었을 뿐인데

오전과 오후에는 제가 맡은 header 컴포넌트를 만들기 위해 열심히 뚝딱거렸습니다.
그런데 별 같잖은 오류에 몇시간을 써버려서 굉장히 후회중입니다.
여기에도 써놓지만, 리액트에서 컴포넌트를 작성할 때

js 파일에 컴포넌트를 진짜 만들어두지 않고 선언만 했을 경우, 모든 컴포넌트가 출력이 되지 않는 오류가 일어난다는 것을 명심해야 합니다.

오류 로그는 대략 이렇습니다.

react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

The above error occurred in the <Location.Provider> component:

DB구조 확정하기,데이터 넣기

전날 피드백 받은 사항을 참고하여, DB구조를 변경해야했습니다.
기존의 다이어그램에는 메인 상품 카테고리/ 서브 상품 카테고리에 대한 명확한 명시가 없었기 때문에 팀원분께서 분리해주셨습니다.
아래는 확정된 DB 구조입니다.

이거 짜는데 약 3시간정도 걸림

그리고 이 구조를 prisma schema로 변환하는 데만도 1~2시간정도 걸린 듯한 기억이..

prisma와 싸우는 우리의 모습이다.

이어서 성공적으로 스키마를 적용하여 임시 데이터를 작성했습니다.
데이터는 sql문으로 작성해 mysql로 바로 꽂아주었어요.
이제 이 스키마와 sql문들을 github 레포지토리에 넣어줘야 합니다.
단순한 작업임에도 불구하고 자잘한 오류로 인해 여기서 또 몇 시간을 소요하여 작업 과정은 아래의 짤로 대체합니다.

이 과정을 마치니 어느새 하루가 지나있더라고요.

4일차

github에 올라온 스키마 내려받아 적용하기

그저 파일들을 pull받아서 마이그레이션을 하고 싶었을 뿐인데, 오전부터 오류가 나서 다들 충격에 빠졌습니다.
오류 코드는 이렇습니다.

Error: P3006

Migration `20220330141930_create_all_tables` failed to apply cleanly to the shadow database. 
Error code: P3018
Error:
A migration failed to apply. New migrations cannot be applied before the error is recovered from. Read more about how to resolve migration issues in a production database: https://pris.ly/d/migrate-resolve

Migration name: 20220330141930_create_all_tables

Database error code: 1050

Database error:
Table 'one_sub_categories' already exists

Please check the query number 1 from the migration file.

에러 코드가 무려 1개도 아니고 3개입니다.
심지어 2개는 프리즈마 오류고, 나머지 하나는 SQL 쪽 오류네요..
마지막에 마이그레이션 한 파일에서 무언가 잘못되어 이게 해결되기 전까지는 마이그레이션을 해줄수 없다는 프리즈마의 입장입니다.
설상가상으로 mySQL에서도 이 테이블은 있는 테이블인데 왜 또 만들어?나가.라고 말하는 듯한데,
정작 데이터베이스를 확인해보면 아무 테이블도 없습니다.

최후의 수단으로 멘토님들께 도움을 요청했습니다.
생각외로 간단하게, 문제가 되는 마이그레이션 폴더(파일)을 삭제하고 다시 스키마를 넣으라고 알려주셨습니다.

이후에는 프리즈마 마이그레이션을 리셋해줍니다.

npx prisma migrate reset
Yes

다행히 이 방법으로 해결되어, 팀원들 모두가 성공적으로 스키마와 데이터들을 적용할 수 있었습니다.

nav 컴포넌트 완성!

급한 오류가 해결되고 다시 nav 컴포넌트를 제작했습니다.
간단해보여서 빨리 끝날 줄 알았는데, 생각보다 자잘한 디자인 요소가 많아 오래 걸려서 기분이 나쁩니다.
카테고리 데이터를 끌고 오는 useEffect 함수 작성에서도 몇 번의 시행착오를 거쳐, 오후가 되서야 겨우 끝났습니다.

완료된 헤더의 모습입니다. 로고는 대충 본래 사이트에서 본따 저렴하게 벡터 그래픽 툴로 제작.


제품카테고리 버튼을 누르면 하위 메뉴가 내려옴

프로젝트 4일차인데 이제 겨우 하나 컴포넌트를 만들었다니..조금 슬퍼졌습니다.

마무리

그래도 제일 어려운 초기 세팅과 DB구조 협의가 끝나 한결 후련해졌습니다.
이제부턴 컴포넌트와 API의 싸움일까요?
사실 그것보다 git이나 DB에서 또 오류날까봐 그게 무섭습니다.