44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
스켈레톤 컴포넌트가 화면에 나타나지 않네요 . ㅠ
..설마 다 문제없이 되는 건가요? https://github.com/suwanie/inflearn 혹시 몰라 저의 깃헙 주소를 남겨봅니다.. 아.. 그리고 혹시 suwan 이라는 계정에서는 dm에 상대방 이름이 나오는데 suwan1에서는 상대방 이름이 나오지 않는데.. 이 문제도 알 수 있을까요?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
2분쯤에~
그리고 2분쯤에 src={message.user.image} 잖아요, firebase row 이름은 messages.user.image인데 s를 굳이 안붙혀도 되나요 ?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
error가 왜 errorFormSubmit으로 뜰까요?..
ㅠ_ㅠ 뭐죠 ㅠㅠㅠㅠ
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
파이어베이스 v7,v8과 v9의 차이
선생님 안녕하세요 강의를 듣는 도중 firebase config 설정부터 database에 data를 넣는 과정까지 지속적으로 끊임없이 오류가 나서 이렇게 질문을 드리게됬습니다. 제가 지금 강의를 듣고있는 9월 26일 기준으로 npm install firebase를 하게되면 firebase의 버전이 ^9.1.0이 설치가 되는데요 선생님꺼 소스코드의 package.json을 보니 firebase가 7버전대이고 다른 오류가 나지않은 분들 버전을 보면 8버전대인것을 확인했습니다. 9버전부터 SDK로 바뀌면서 좀 더 용량도 작고 효율성이 증가된 버전으로 변화되어있다라고 공식문서를 통해 알게되었습니다. 9버전대부터는 7,8버전대에 사용하던 방법이 아예 먹지를 않는것 같습니다. 그래서 공식문서를 통해 9버전의 코드를 사용하여 해결을 해왔었는데요 근데 이게 1강 1강 진행할때마다 지속적으로 선생님이 강의해주시는 코드랑 모두 달라서 firebase에 익숙하지 않은 제가 더이상 강의를 진행할수 없을정도 까지 오게 된것같습니다. 구글링을 통해서 버전9의 다양한 예제들을 찾아보았지만 마땅한 자료도 찾지를 못했는데요 그냥 강의를 firebase 8버전대를 사용하여 진행을 해야할까요?? 아니면 9버전이 7.8버전까지 모두 호환을 해주고 있는데 제가 해결방법을 못찾고있는건지를 여쭤보고싶습니다!! 제가 9버전 코드를 참고한 곳은 https://firebase.google.com/docs/reference/js?authuser=0 여기 이며, 제 레포지토리 주소는 https://github.com/godtaehee/Chat 여기 입니다. RegisterPage.js에 제가 이제 해결하지 못한 Database에 Data를 저장하기 부분을 주석처리를 해놓았습니다. 긴 질문 읽어주셔서 감사합니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
함수에서 {} 의 유무 차이
제가 초보라서 그러는데 renderChatRooms 함수에서 (chatRooms)를 인자로 받고 => { } 이렇게 중괄호를 쓰지 않고 바로 => 다음에 처리를 해주는건 어떤 이유에서 인가요? {} 사용하면 함수가 처리가 안되던데 어떤 차이때문인지 궁금합니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
질문드립니다!
안녕하세요. 강의 너무 잘 듣고 있습니다. 다름이 아니라 메세지 렌더링 부분에 여쭙고 싶은게 있어서요. MainPanel.js/ addMessageListner 부분입니다 let messagesArray = []; this.state.messagesRef .child(chatRoomId) .on("child_added", (DataSnapshot) => { console.log("added"); messagesArray.push(DataSnapshot.val()); // this.props.dispatch(setLoadMessges(messagesArray)); this.setState({ messages: messagesArray, messagesLoading: false }); }); 제가 생각한 흐름대로라면, 현재 채팅방 1과 2가 있는 상태에서 1. 나는 현재 채팅방 1을 킨 상태이다. 2. 상대방이 채팅방 2에서 채팅을 친다. 3. 'child-added'로 인해 채팅방2의 새 메세지가 messageArray로 push된다. 4. setState로 인해 채팅방 2의 내용으로 리렌더링된다. 5.채팅방 1에 있던 사용자가 채팅방 2로 바뀐 현상이 나타난다. 인데 강사님의 코드를 사용하니 이런 문제가 발생하지 않더라구요. 다만 주석의 코드처럼 따로 리덕스 state에 messges를 만들어서 관리하니까 제가 말한 현상이 발생하구요. 혹시 강사님의 코드가 위의 저 흐름처럼 진행되지 않는 이유를 알 수 있을까요?? 귀한 시간 내주셔서 감사합니다
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
_firebase__WEBPACK_IMPORTED_MODULE_4__.default.auth is not a function
위 애러가 나오고 해결이 되지 않습니다._firebase__WEBPACK_IMPORTED_MODULE_4__.default.auth is not a function
- 해결됨따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
분해구조 할당자에 이상한 값이 들어오네요
case types.SET_PHOTO_URL: return { ...state, currentUser: { ...state.currentUser, photoURL: action.payload } }강의에 나온 코드로 처리를 하면 기존 currentUser스키마가 아닌 _delegate, multifactor가 들어가면서 이상하게 출력됩니다. 그래서 아래와 같이 JSON.parse, JSON.stringify를 통해 처리를 하면 원하는대로 동작을 하게 되는것을 확인했는데 정확한 이유를 모르겠네요 case types.SET_PHOTO_URL: return { ...state, currentUser: { ...JSON.parse(JSON.stringify(state.currentUser)), photoURL: action.payload } } user_reducer에서 console.log(`before state currentUser: ${JSON.stringify(state.currentUser)}`); console.log(`before state currentUser2: ${JSON.stringify({ ...state.currentUser } 요렇게 출력했을 때 두 값이 다르게 출력되었습니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
새로고침 문의
프로필 사진 변경 후 새로고침이 자동으로 되지 않아서 직접 새로고침을 해야 변경된 사항들이 처리가 되는데 useEffect를 사용해야 하나요? 아니면 원래 자동으로 되는데 제가 처리를 못한건가요?
- 해결됨따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
안녕하세요 수업 중에 막히는 부분이 있어서 질문 남겨요
자꾸 이런 오류가 떠서 수업 진행이 안되서 남깁니다. 확인하려 firebase.auth()를 콘솔로 찍어보니 이런 오류가 또 뜨더라고요... auth를 import 제대로 했고, 노드 모듈을 삭제하고 다시 실행해보라는 말도 있어서 해봤는데 똑같네요ㅠㅠ 구글링을 해도 별 소득이 없네요... 질 좋은 수업 열심히 듣고 있습니다!! 바쁘시지만 답변해주시면 더 열심히 하겠습니다!!
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
redux 에 조금 다른부분이 있습니다.
안녕하세요 redux 설치하는 영상편에서 저랑 조금 다른부분이 있습니다. 설치를 제가 잘못한건지 import * as 이게 저한테는 안보입니다. 어떻게 해야될까요? 저부분이 빠져 있는 상태에서 import를 쓰게되면 해당 내용이 다릅니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
질문드립니다
안녕하세요. 우선 강의 너무 잘 듣고 있습니다. password.current = watch("Password"); 강의를 통해 위 방법을 익히기 전엔 혼자서 onChange를 통해 ref.current값을 바꾸려고 시도하였는데요 input에 onChange를 걸어줘도 Change이벤트가 작동을 안하더라구요.. react hook form 공식 문서를 뒤져봐도 위 방법으로만 사용하라는 말은 따로 없고 태그에 onChange이벤트를 사용하는 예제도 있는데 왜 이러는걸까요?? 단순히 버그인지 뭐가 잘못된건지 모르겠습니다 ㅜㅜ
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
질문있어요~ 꼭 봐주세요 퓨ㅠㅠ
제가 지금 여기까지 잘 따라 오고 있는데 갑자기 오류가 잘 해결이 안되요.. 뭐가 잘못 된 것인지... .9 분15초까지 따라왔는데!! 메세지가 나와야하는데 안나옵니다.. 혹시나 해서 콘솔로 다찍어 봤는데. 디비에 있는 메세지 잘불러오고 깃허브 한번 확인 부탁드려도 될까요? https://github.com/SHT-3756/practice/blob/master/react/react-firebase-chat-app/src/components/ChatPage/MainPanel/MainPanelF.js const renderMessage = (messages) => { messages.length > 0 && messages.map((message) => ( console.log("message" , message) // map() 함수도 잘되고 console.log("message.timestamp", message.timestamp) // console.log("message", message ) // 잘나오고 console.log("user", user) // 잘나오고 <Message key={message.timestamp} message={message} user={user} /> )); }; // <Message /> 여기로 잘안넘어가는 거 같아요.. Message.js 가서 콘손찍어보니 아예 안넘어오는데.. 뭔문제죠? import 도 두번세번 확인했어요.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
firebase database에서 데이터 읽기&불러오기에 관한 내용
const messageRef = firebase.database().ref("messages") messageRef.child(roomId).on("child_added", DataSnapshot => messageArray.push(DataSnapshot.val())) 여기 각 chatRoom에 담긴 메시지를 불러오는 코드에서 안 풀리는 부분이 있어서 질문 드립니다. 컴포넌트 처음 시작될때 chatRoom까지는 첫번째 chatRoom을 선택하는 것 까지는 되는데, 그 이후에 Messages 데이터가 읽어지지 않습니다. 그래서 해결책을 찾아보다가 어려움을 겪어서 질문을 드리게 되었습니다. console로 체크하면서 코드를 체크해 보니, 두가지 정도로 원인이 발견되었습니다. 첫번째는, database를 불러오는 on()메소드에 관련된 원인입니다. on메소드에서 첫번째 인자를 'child_added'를 넣었는데, 이게 공식사이트 설명을 보니까, 지정된 경로의 하위 항목에 데이터가 새로 추가 때 데이터를 읽어내는 것 같거든요. 데이터가 추가될 때만 읽혀지고, 처음 컴포넌트 로딩때는 하위 항목을 다 읽어내지 않는 것 같습니다. 두번째는 setState에서의 문제입니다. database에서 불러온 내용을 다시 변수에 담기 위해 setState를 사용할 때, state에 데이터가 담겨지는 시점과 컴포넌트에 데이터가 바인딩 되는 시점 간의 시간 간격이나 순서에 대한 문제입니다. 콘솔로 확인을 해보니 state에 데이터가 다 담겨지지 못하고, 컴포넌트가 렌더링이 시작되는 것 같았습니다. 제 나름대로 스스로 여러 구글링 검색을 해 보았지만 답을 찾지 못해서 도움을 요청드리고자 질문을 올리게 되었습니다. 혹여나 답변을 주실 수 있다면 부탁드리고 싶습니다. 감사합니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
error대신 setError 를 써야할까요?
안녕하세요 강의 들으며 Register 만들다가 궁금증이 생겨 질문드립니다. 안녕하세요! 강사님은 errors를 쓰셨던데... 이렇게 쓰니 오류가 뜹니다 const {register, watch, setError, handlesubmit} 이렇게 두었습니다. 버전업이 되면서 이렇게 바꼈는지 질문 드립니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
현재는 클래스컴포넌트를 함수형컴포넌트로 바꿀수 없는건가요?
안녕하세요. 저도 react+firebase로 쇼핑몰을 만들 일이 있어서 만드는데 함수형 컴포넌트로 하면 실시간으로 데이터베이스에서 조회할때 setState가 바로 안먹고 한번더 클릭을 하거나해서 트리거시키면 먹더라고요,, 제가 잘 못 짠건가 버근가 아직도 잘 모르겠네요.. 함수형 컴포넌트에서 클래스 컴포넌트로 바꿨던 이유에 대한 오류를 해결하셨다면 공유 부탁드립니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
react-hook-forms @7 버전 오류 질문
2021.04.13 일 기준으로 react-hook-forms 라이브러리가 7 버전으로 업데이트 되면서, <label>Email</label> <input name="email" type="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} /> {errors.email && <p>This email field is required</p>} 와 같이 작성했던 ref 속성을 사용 시에 TypeError: path.split is not a function 와 같은 오류가 발생하는 것을 발견했습니다. 구글링을 통해 https://velog.io/@yeum0523/Day-2-think-logger {...register("email",({ required: true, ...}))} 와 같은 속성으로 작성하면 해당 오류는 사라지는데, onSubmit 시에useForms를 통해 참조하는 handleSubmit() 함수가 실행되지 않습니다. 일단 기존 강의 json 파일을 보고 @6버전으로 낮춰 사용하니, 오류가 뜨지 않고 정상적으로 작동하는데 이에 대한 작업이 업데이트되면 좋겠네요!
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
갑자기.. 궁금해져서요!
userRef.on("child_add" , (snap)=>{})이 부분에서요 userArray를 별도로 만드는 이유가 있나요 바로 저렇게 아래에서 setState를 해주는 거면 동일한게 아닌가요?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
파이어베이스 규칙 변경
안녕하세요. 강의 잘 들었습니다. 제가 파이어베이스 규칙 변경을 1달 내에 해주지 않아서 접속이 안되는 경우인데 강의대로 규칙 부분을 수정해도 되지 않습니다 이런 경우에 복구 해결책이 무엇이 있을까요? 그리고 동일 코드로 1달 내에 규칙 변경할 경우 계정을 막히지 않고 계속 사용이 가능한 건가요? 답변해주시면 감사하겠습니다
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
각각 다른아이디로 로그인이 안되는데요..!!
안녕하세요 강사님!! 로컬호스트:3000으로 브라우저 두개 띄우고 알림테스트 하고 싶은데 한쪽에서 로그아웃하면 다른쪽에서도 로그아웃되고 다시 한쪽에서 로그인하면 다른쪽에서 또 로그인 되어서 강사님처럼 안되는데 무슨 차이가 있어서 안되는 것일까요..?