목록2024/04 (3)
coding etude
ReactJs, NextJs, Recoil을 기반으로 작업중 발생한 에러로 Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching {children} ); 위 코드 처럼 html은 테그 내에 모든 내용이 담겨야 하는데 그 순서가 잘못 되어서 header가 랜더링 되지 못했던 정말 가장 단순하고 멍청한 실수였다.. 그래서 나온 결론은 해당오류가 발생하는 지점의 html 코드에 무언가 분명 실수가 존재한다는 것이다. 예를 들어 이렇게 사용할 수 없는 테그들이 발생하거나 이런식의 테그 내에 공백이 발생 한다거나 하게 ..
firebase config 설정 후 const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_apiKey, authDomain: process.env.NEXT_PUBLIC_FIREBASE_uthDomain, projectId: process.env.NEXT_PUBLIC_FIREBASE_projectId, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_storageBucket, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_messagingSenderId, appId: process.env.NEXT_PUBLIC_FIREBASE_appId, measurement..
react에서 firebase config를 설정하면서 .env에 firebase sdk 설정값을 저장해 두고 사용하려고 하는데 값이 계속 설정이 안되는 문제가 발생 했다. FirebaseError: Firebase: Error (auth/invalid-api-key). 보통 react에서 .env 를 사용할 떄는 REACT_APP 을 꼭 붙여야 인식이 된다고 알고 있지만 NextJs에서는 NEXT_PUBLIC으로 사용해야 한다. //일반 reactJS const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, }; // NextJS 사용 시 const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIRE..