🥞 오늘 한 일

• 최종 프로젝트
  • 공구템 상세 페이지
    • 하단에 인기순 공구템 2개 가져오기 (현재 게시물 제외)
    • 목록으로 돌아가기 버튼 제작
  • 결제 관련
    • 결제 폼 페이지 제작 완료
    • 결제 완료 페이지 제작 완료
    • 결제 관련 supabase 테이블 구조 제작
    • 결제 응답 값 토대로 supabase 등록 완료

🍽️ 트러블 슈팅

.env.local 내 파일 client component에서 사용하기

문제

결제 관련하여 보안 상의 이유로 .env.local 파일에 넣어야할 정보가 있어서 아래와 같이 추가를 했는데, client component에서 사용이 되지 않았다.

// .env.local
NEXT_PUBLIC_SUPABASE_URL=https://???.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=???
PORTONE_API_KEY=???	

여기서 PORTONE_API_KEY으로 사용을 했는데 적용이 되지 않는 것이다. 다른 NEXT_PUBLIC_SUPABASE_URL이나 NEXT_PUBLIC_SUPABASE_ANON_KEY는 console로 찍어 봤을 때 잘 작동되었다. 때문에 뭔가 더 설정을 해줘야할 것 같다고 생각했고, 해당 부분에 대해 검색을 해보았다.

해결

next.js에서 client에서도 .env.local 내에 설정한 값을 사용하려면, NEXT_PUBLIC_을 앞에 꼭 붙여줘야한다는 걸 알아냈다. 때문에 파일을 아래와 같이 수정했다.

// .env.local
NEXT_PUBLIC_SUPABASE_URL=https://???.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=???
NEXT_PUBLIC_PORTONE_API_KEY=???	

괜히 위에 두 개가 NEXT_PUBLIC_이 붙어있는 게 아니었다... 이렇게 수정을 하니 client component에서도 잘 가져올 수 있었다.

🍴 돌아보기

이 공간에 할 말을 썼다 지웠다 하는 날이다. 그 만큼 여러가지 감정을 느꼈지만, 부정적 영향이 있을 것 같아 적지 않고 그냥 좋은 것만 생각하려고 한다. 어떤 환경 속에서도 나는 변치 않고 열심히 하자! 요즘 내 중심을 살짝 잃어가는 느낌이다. 캠프 간 계속 유지했던 마인드를 다시 붙잡자!

🍳 내일 목표

• 최종 프로젝트
  • 결제 관련
    • 현재 짜여진 로직 route handler로 바꿀 부분 변경
    • 마이 페이지에 결제 내역 추가
    • 한 번 구매한 사람은 다시 구매할 수 없도록 설정