서론
나도 이제는 firebase에 대한 이해가 아주 조금은 있다고 볼 수 있을꺼 같다. 먼저 지난 시간 이해를 하지 못하였던 getInitialProps에 대한 이해와 함께 어떻게 해결하였는지 알아보자.
코드
export async function getStaticProps() {
const coffees = [];
await fire.firestore()
.collection("COFFEE")
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
coffees.push(doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
console.log(coffees);
return {props: {coffees,}};}
먼저 getStaticProps에 대한 이해부터 하고 가야하는데,
공식 문서를 읽어보면 이렇게 적혀있다.
Note: You should not use fetch() to call an API route in getStaticProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.
대략적으로 해석하면 API 경로를 호출하는데 사용해서는 안되고, 사용되는 로직을 들고 오라는 것인데, 이를 해석함에 있어서 값을 불러오는데 있어서 경로를 들고 오는 것이 아닌 값을 들고오라는 것으로 해석하였다. 또한, 이전에 있었던 getInitialProps와 계념은 동일해 보였는데, server와 client둘 다 만족하는 값을 들고 오는 것 같다, 이 뜻은 localhost:8080처럼 각 영역에서만 만족하는 값을 들고 오게 되면 문제가 생긴다는 점인데 ,이를 고려해서 값을 들고 와야한다고 생각 하였다.
출처: https://nextjs.org/docs/basic-features/data-fetching
결론
firebase를 통해서 값을 들고오는 것과 값을 저장하는 것은 안정적으로 마치게 되었다. 하지만 고려해야할 문제들이 아직 많이 남았는데, 첫번째로 값을 저장하는데 있어서 인덱스를 어떻게 저장을 할 것인지, 로딩창을 띄운뒤, 끝났을때 로딩창을 제거 하는 방식, lazyloading 방식을 통해서 값을 일부만 들고오게 만드는것 등등등 아직 구현해야할 파트가 많이 남아있다는 것을 알 수 있었다.
