[github workflow + Next.js] 빌드 실패 File is not defined 오류 해결하기

문제Next.js 14를 사용한 프로젝트에서 Github Actions로 빌드, 스토리북 테스트를 진행하고 있는데 Github Actions 빌드 환경에서 File을 찾을 수 없다는 에러가 발생했습니다. ReferenceError: File is not definedError: Failed to collect page data for /lectures/[lectureId]/question 로컬 개발 환경이나 빌드 상황에서는 정상적으로 동작하고, CI 환경에서만 발생하는 상황이었습니다. 시도 1 (해결 X)유일하게 prefetch를 하는 페이지였고, File을 서버컴포넌트에서 사용하려는게 문제가 됐나보다 추측하고 서버 환경에서 File을 정의하거나 CI 환경에서 prefetchQuery를 진행하지 않도록..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 6. 2.
• textsms

Zod를 활용한 응답데이터 검증에서 발생한 날짜 형식 검증 해결하기

Next.js 프로젝트에서 프로젝트의 전반적인 데이터 검증에 zod를 활용하고 있습니다.퀴즈 목록을 가져오는 컴포넌트를 구현하는 과정에서 다음과 같은 문제가 발생했습니다. 문제- 네트워크 탭에서는 모킹서버로 정상 요청-응답 확인- 컴포넌트에서는 받아온 응답을 확인할 수 없음 시도네트워크 요청은 기대한 값을 잘 받아오고 있기 때문에 api나 서버 모킹 관련 문제가 있는 건 아니라고 생각이 들었고, 서버 -> 사용자에게 보여지는 컴포넌트 흐름으로 데이터가 잘 전달되는지 확인하고자 가장 먼저 데이터를 fetch하는 함수에 필요한 로그를 추가했습니다.// fetch 함수 내부...if (!response.ok) { console.error(response.statusText); throw new Error(..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 5. 20.
• textsms

[Next.js/TS] 사용성과 안정성을 고려한 Toast 알림 구현 기록

오르미에서 공통적으로 사용할 Toast 시스템을 구현한 기록입니다! 지금까지 라이브러리를 사용해 아주 간단하게 토스트 알림을 사용했지만, 이 프로젝트에서는 구현해야할 디자인 요구사항이 명확하다보니 직접 시스템을 만들어보자 생각이 들었습니다.복잡한 요구사항이 없다면 생각보다 간단하게 구현할 수 있으니 혹시 라이브러리 사용을 고민하며 글을 보신 분이 계시다면 ㅎㅎ 한번 도전해보세요! 개요고려한 점1) 개발자의 사용성- 추후 리액트 경험이 적은 팀원이 백엔드 개발을 마무리한 후 프론트엔드 개발에 합류할 계획이 있습니다. 이에 복잡한 로직을 고려하지 않고 간단하게 토스트 알림을 사용할 수 있도록 만들고자 했고, 코드 가독성과 안정성을 높일 수 있는 설계를 위해 고민했습니다.2) 서비스 사용자의 UX- 너무 많은..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 5. 9.
• textsms

[팀프로젝트] 우리 팀의 협업 효율을 높인 규칙들

안녕하세요! 모바일 청첩장 제작 서비스 '드림카드'를 진행중인 도비팀입니다.내일배움캠프 수강생인 프론트엔드 개발자 5명, 디자이너 1명이 모여 열심히 프로젝트를 만들고있습니다. 드림카드는 내일배움캠프에서의 최종 프로젝트로, 이전보다 규모가 크고 기간이 길어진만큼 팀원 전체가 프로젝트의 흐름을 공유하고 정확한 규칙으로 협업 효율을 높이는 것이 중요하다는 생각이 들었습니다. 당장 기획하고 구현에 돌입하기도 마음이 급한데, 규칙을 정하기 위해 오랜 시간 논의했고 코드리뷰나 PR 작성 등 구현만 하는 것에 비해 시간이 더 소요되는 일들이 많아졌는데요. MVP 집중 구현 기간이 끝난 지금 돌이켜생각해보면 시간을 들여 디테일한 규칙을 정한 것이 오히려 빠른 흐름 속에 중심을 잡고 서로의 코드를 붙여나갈 중심점이 ..

• format_list_bulleted 팀 프로젝트
• · 2024. 11. 11.
• textsms

[트러블슈팅] API key가 올라간 PR 처리하기

팀 프로젝트를 진행하면서 실수로 API 키가 PR에 올라왔다!팀원분이 커밋을 하시고나서 모르고 계시다가 PR을 올린 후 같이 코드리뷰를 하다 발견해서 방법을 찾다가  PR은 지울 수 없다는 것을 알게됐다... 하지만 다같이 방법을 찾았다! 1) 깃허브에 문의해서 PR 지우기2) 로컬 커밋에서 살릴 부분만 살리기 깃허브에 문의해서 PR 지우기https://80000coding.oopy.io/dd8b0614-20b9-4574-a3bd-fb1f181bcaf6 깃허브에서 잘못 올린 PR 완전히 삭제하기 (1)깃허브를 public으로 사용하다보면 실수로 외부에 공개되면 안되는 민감한 내용이 노출되기도 합니다.80000coding.oopy.io위 블로그를 참고해서 문의했다! 생각보다 금새 지워졌다 1시간정도??  ..

• format_list_bulleted 팀 프로젝트
• · 2024. 10. 23.
• textsms

팀프로젝트 트러블슈팅 기록!

지난 팀프로젝트를 진행하면서 일정에 치여 기록을 제대로 남기지 못했다 ㅠㅠ지금도 바로 타입스크립트 + next.js 주차에 들어가면서 해야할 것들이 잔뜩 생겼지만.. 더 지나기전에 간단하게나마 기록해보려한다! dev-note가장 난감했던.. 아무런 에러 메세지도 없던 오류!!!!!!!! 그래서 원인 파악에만 시간이 아주 오래걸렸다.. 결국 발표전까지 해결을 못하고 튜터님들의 도움을 받아도 원인을 파악하기 어려워서 포기할까 싶기도했지만 사소한 오류도 아니고 아예 프로젝트를 사용할 수 없는 문제가 남아있다는게 너무 싫었다 🥹.. 괜한 오기인가 싶기도했지만 프로젝트가 실행되게 하는 것은 너무 당연한 책임인 것 같아 다음 과제 시작을 딱 하루만 미루고 그 날만 이 오류 해결에 투자해보기로 했다. 다행히 성공!..

• format_list_bulleted 팀 프로젝트
• · 2024. 9. 25.
• textsms