본문 바로가기

전체 글142

firebase - next.js getInitialProps login next.js 의 장점은 ssr(server side rendering)이다. page를 렌더하기전에 미리 필요한 데이터를 받아와서 page를 렌더링할 때, 데이터와 함께 렌더링을 해준다. 이러한 장점을 가지고 있어서 페이지를 렌더링 할 때, login이 정보를 빨리 받아와서 login 여부에 따라서 페이지 기능을 다양하게 이용할 수 있는 페이지들이 많다. firebase의 oAuth 기능을 활용해서 login 정보를 받아오고 싶지만, 매번 useEffect를 호출할 수 있다. 하지만, next js 장점을 활용하지 못하고 사용하는것 같다. useEffect(() => { auth.onAuthStateChanged((user: any) => { if (user) { dispatch(signin(user... 2021. 5. 8.
React - Next.js environment variable 설정하기 javascript는 node.js라는 환경에서 run time이 된다. 그래서 node.js에서 제공하는 process 라는 기능을 사용할 수 있다. 보안을 위해 root 디렉토리에 .env 파일을 만들고, 중요한 apikey, privatekey 등... 보안에 필요한 값들을 넣어주고, git push를 할 때, .env를 gitignore 설정하여 보안을 지킬 수 있다. #object *next.js env 값 설정 ## React environment variable(env)(기존방식) next js를 사용하게 되면 조금 설정이 필요한 부분이 있다. 이렇게 .env 사용할 값들을 설정해 놓고, 필요한 부분에 process.env.REACT_APP_API_KEY를 사용하게 되면, browser에서 .. 2021. 5. 6.
FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists firebase-typescript-next.js 같이 사용을 했을 때, 하기와 같이 initializeApp만 설정하면 error를 발생하게된다. const fbase = firebase.initializeApp(firebaseConfig); firebase를 한번 초기화를 하고 page에서 firebase가 호출이 되었을 떄, 초기화 한 값이 있기 때문에 중복되어서 중복 error가 발생했다. 이 중복을 피하기 위해서 stackoverflow에 나와 있는 방식을 활용해서 해결 할 수 있었다. 이미 firebase에 초기값이 있다면 firebase.app() 반환하는 방식을 사용 const fbase = !firebase.apps.length ? firebase.initializeApp(firebase.. 2021. 5. 5.
Redux- search page Scroll 제어하기(무한 scroll down) Redux를 활용하여 Scroll을 일정 위치를 도달 했을 때, api call을 하면서 data를 받아와 render 시켜주는 기능을 구현했다. scroll이 최종하단에 도달했을 때, api call을 요청 하도록 했다. (search api는 github api docs를 활용 link: docs.github.com/en/rest/reference/search) search를 하는 곳에 useEffect를 걸어서 window.innerHeight + documen.documentElement.scrollTo 값이 document.documentElement.offsetHeight 값이 같을 때, dispatch를 이용하여 addPage() 함수가 실행이 된다. *innerHeight은 화면의 크기를 .. 2021. 4. 4.
반응형

티스토리툴바