displayName 에 대해 질문있습니다.

안녕하세요 부드러운 족제비님!넵 맞습니다! 회원 정보에 닉네임을 추가하고 싶을 때 사용하시면 되겠습니다. ㅎㅎ

onAuthStateChanged 가 가지는 장점에 대해

안녕하세요~ 질문주셔서 감사합니다!onAuthStateChanged 는 단순히 유저의 로그인 상태에 옵저버를 붙이는 기능을 수행합니다.따라서 렌더링 최적화를 위해서라기보다는 단순히 통신과 렌더링의 순서를 변경했다고 이해해 주시면 되겠습니다.자세한 정보는 아래 링크를 참고해주시길 바랍니다.https://firebase.google.com/docs/reference/node/firebase.auth.Auth#onauthstatechanged

context api를 커스텀 후크로 뿌리시는 이유가 궁금해요.

안녕하세요 어쩔티비님!커스텀훅을 만드는 이유가 궁금하시군요!일단 훅을 만드는 이유를 생각해보겠습니다. 우리가 useState를 사용하면 데이터의 상태 관리를 무척 편하게 할 수 있습니다. 그렇다면 이 useState를 우리가 필요할 때마다 선언해서 만들지는 않죠? 리액트 내부적으로 이미 로직이 구현되어 있기 때문에 우리는 필요할 때마다 불러와서 사용할 수 있습니다.이와 마찬가지로 강의에서 context api를 훅으로 만드는 이유는 특정 기능을 훅으로 만들어 두었다가 어떤 컴포넌트에서건 필요할 때마다 불러와서 편하게 사용하고 싶기 때문입니다.마치 바닐라 자바스크립트에서 함수를 만들어 코드의 뭉치를 묶어서 재사용성을 높여주는것과 비슷한 효과가 있다고 할 수 있겠습니다. 만약 훅을 왜 사용해야 하는지 궁금하다면 다음 페이지를 참고하시기 바랍니다.(https://ko.reactjs.org/docs/hooks-intro.html)감사합니다!! :)

next사용하는 프로젝트에 적용하려고 하는데 문제가 생겻습니다.

안녕하세요 malcomex님! 반갑습니다! 우선 getAnalytics(app); 이 부분에서 에러가 나신다고 말씀주셨는데요! 저희 강의에서는 파이어베이스에 에널리틱스를 붙이고 있지 않고 있습니다.그렇다면 혹시 파이어베이스 프로젝트를 처음에 셋업하실 때 에널리틱스 설정을 하셨을까요??일단 이것부터 확인이 필요해 보입니다!만약 설정을 하셨다면 https://stackoverflow.com/questions/69799682/firebase-analytics-with-next-js-window-not-definded혹은https://devsolus.com/2022/09/13/referenceerror-window-is-not-defined-firebase-analytics/위의 링크를 참고해보시기 바랍니다! 둘 다 Next.js 를 이용했을 경우의 레퍼런스가 될 수 있어 보입니다 :)감사합니다!

firebase api key 가 유효하지 않습니다.

안녕하세요 질문 감사합니다 :)우선 유효하지 않은 api key 라는 에러가 나는것은 결국 제공하는 api키가 잘못됐다는 얘기인데요,그대로 복사해온 이상, 에러가 나선 안될 상황인것 같습니다.좀 힘들것 같긴 하지만 ... 만에 하나라도 구글측 에러일 수 있기 때문에, 제 생각에는 새로운 파이어 베이스 프로젝트를 또 생성해보고거기에서 제공하는 api 키를 적용해 보는게 좋을것 같습니다. 만약 또 에러가 난다면 그때는 오타를 의심해 보거나, 오타가 아니라면 파이어베이스 측에 직접 문의해보는 수밖에 없어보입니다. ㅠ감사합니다!

import시키고 npm start시켰을 때, 페이지는 나오는데, login, signup 페이지의 글자가 선생님처럼 나오지 않습니다!

안녕하세요 hm님! 아마도 코드상에 오타가 있을 가능성이 큽니다. 사용한 문법중에 스펠링이 틀렸는지 한번 확인해보시고, 지금까지 작성한 코드를 공유 주시면 저도 살펴보겠습니다 :)감사합니다!

[카드게임] 카드게임 타이틀 부분 질문있습니다.

안녕하세요 뿡치님! 반갑습니다 :) 넵 말씀하신 텍스트를 굳이 작성하면서도 숨겨주는 이유는 웹접근성 때문입니다! 해당 이미지를 img 태그로 작성하지 않고 요소의 백그라운드 이미지로 작업하고 있지요? 백그라운드 이미지로 작업하면 img 태그의 alt 속성처럼 이미지에 대한 설명을 제공할 방법이 없기 때문에 영상과 같은 방법으로 구현한겁니다. 이렇게 하면 스크린리더를 이용하는 사용자들은 해당이미지의 정보를 음성으로 파악할 수 있지요! 좋은 질문 감사합니다! 답변이 도움이 되길 바라겠습니다 :)

git public레포로 코드와 제공해주신 리소스들 올려도되나요?

넵 당연히 괜찮습니다! 얼마든지 활용해주세요 :)감사합니다!

강의상 32번째 줄 질문드립니다

안녕하세요 쏜루시아님! 좋은 질문 감사합니다! 저희도 영상을 확인해봤는데 오타가 있음을 발견했습니다 ㅠㅠ 코드 하단의 for문 안에 return true 가 들어가면서 정산적으로 순환하지 못하고 있어 제대로 작동하지 못하고 있었습니다. return true를 for문 밖으로 빼주셔야 합니다. 해당 강의도 수정했으니 참고 부탁드립니다. 덕분에 중요한 실수를 잡아낼 수 있었습니다. 감사합니다!

const, let

안녕하세요~ 반갑습니다!const 는 상수입니다. 상수는 변하지 않는 수를 의미하며, 상수로 선언하면 상수에 할당된 값을 조작하여 값을 변경할 수 없습니다. 값이 항상 바뀔 수 있는 변수와는 다릅니다 :) let 은 var 처럼 변수입니다. 하지만 그 접근 범위가 중괄호( { } )안에서 한정됩니다. 예를 들어 for(let i=0; i 위와 같은 for문이 존재 할때 변수 i 는 for문의 외부에서 접근 할 수 없습니다. 하지만 var 로 선언하였을 경우는 외부에서 접근이 가능합니다. 감사합니다 :)