44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
redux, reducer 정의/왜 사용하는지 등등 간단한 설명이라도 있으면 좋겠습니다.
왜 이 라이브러리를 사용하는지 사용목적과 이유를 간단하게라도 설명해주시는게 좋을 것 같습니다.처음 듣는 사람도 있으니까요
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
리액트 버전업데이트에 관해 문의드립니다.
안녕하세요 리액트로 웹개발 시작한 6개월차 신입개발자 입니다. 강의 정말 잘 보고있는데 너무 감사하게도 우연히 저희 안건과 개발환경이 많이 겹쳐서 큰 도움받고있습니다! 현재 안건에서 쓰는 리액트버전이 15.6.1인데 이번에 최신버전 v18.2.0로 업데이트하는 미션이 떨어졌는데어떻게 헤쳐나가야할지 너무 답답해서 고민끝에 질문드립니다...현재 안건의 스펙입니다. ・안건종류: 데이트 매칭 어플・메인언어: react・상태관리: redux・프레임워크 : koa・미들웨어: redux-thunk ======== 개요 ======== 일단 검색으로는 잘 정리된곳 찾기가 어려워서 리액트공식문서와 책 위주로 참고해서 정리중인데요, 우선 큰 틀을 짜고 문제점들을 세분화하면서 틀을 좁혀가려고합니다.. react, react-dom 최신버전 인스톨후 에러를 우선순위별로 리스트화 하기・ReactDOM.render is no longer supported in React 18. Use createRoot instead.・Warning: componentWillMount has been renamed, and is not recommended for use.・componentWillReceiveProps has been renamed・You have triggered an unhandledRejection, you may have forgotten to catch a Promise rejection공동작업을 위한 규칙 리스트화 하기 ・class 컴포넌트 → function 컴포넌트로 변경・life cycle → useEffect 로 처리, 또는 커스텀 hook・react-redux 의 connect 함수 → useSelector, useDispatch Hooks로 리덕스와 컴포넌트 연동・state 업데이트시 불변성을위한 spread 연산자, immer 사용・코드 스플리팅: 라우팅에 React.lazy or Suspense 적용・react-redux 디렉토리 구조: 일반구조(component, container, reducer)-> ducks 패턴 사용해서 파일 모듈화의존중인 라이브러리및 패키지 업데이트 2와 3을 진행하며 기타 에러를 해결 ======== 질문 ========3번의 [공동작업을 위한 규칙 리스트화]의 경우, 검색과 에러기준으로 만들고있는데 너무 부족한것같습니다. 프로젝트 버전 업그레이드시, 기준이 되는 컨텐츠가 있는지 궁금합니다.현재 리액트 구버전 15부터 16,17,18 최신버전까지의 모든 업데이트 변경점을 체크해서 일일이 적용해야하는지(←React공식문서블로그에서), 단순히 15->18로 점프해서 바뀐사항만 적용해도되는지 현재 구버전에서 사용중인 각종 패키지, 라이브러리 업데이트는 어떤 방향으로 진행해야할지-> 이부분이 제일 손대기 어려울정도로 막막합니다. 리액트버전업뎃처럼 똑같이 최신버전인스톨, 에러체크, 버전별 변경점 체크후 적용및 수정 하면 될까요? 입사 3개월차에 선배나 가이드없이 진행중이라 정말 고민끝에 질문드립니다…혹시 시간나실때 답변이나 조언해주시면 정말 감사하겠습니다……(살려주세요…..)잘부탁드려요 ! (제발 구원의 손길을 ㅠㅠㅠ) package.json (react만 최신인스톨)"dependencies": { "@paypal/paypal-js": "4.1.0", "babel-runtime": "^6.25.0", "chart.js": "^2.6.0", "classnames": "^2.2.3", "es6-promise": "^4.1.1", "exif-js": "^2.2.1", "firebase": "^7.7.0", "history": "^3.3.0", "koa": "^1.2.0", "koa-static": "^2.0.0", "lodash.reverse": "^4.0.1", "lodash.sortby": "^4.5.0", "lodash.throttle": "^4.0.0", "lodash.uniqby": "^4.5.0", "moment": "^2.17.0", "moment-timezone": "^0.5.13", "node-fetch": "^2.6.6", "normalizr": "^2.3.0", "object-assign": "^4.0.1", "pm2": "^2.6.1", "prop-types": "^15.5.10", "react": "^18.2.0", "react-chartjs-2": "^2.5.6", "react-dom": "^18.2.0", "react-ga": "^2.1.2", "react-helmet": "^5.1.3", "react-infinite-scroller": "^1.2.4", "react-redux": "^5.0.2", "react-router": "^3.0.5", "react-router-redux": "^4.0.1", "react-router-scroll": "^0.4.1", "react-scroll": "1.5.4", "react-slick": "^0.14.5", "react-swipeable": "^4.0.1", "react-textarea-autosize": "^5.0.6", "redux": "^3.7.2", "redux-actions": "^2.2.1", "redux-api-middleware": "^1.0.3", "redux-logger": "^3.0.6", "redux-thunk": "^2.4.0" }, "devDependencies": { "babel-cli": "^6.7.5", "babel-eslint": "^8.2.3", "babel-plugin-espower": "^2.3.1", "babel-plugin-module-resolver": "^4.1.0", "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-plugin-transform-class-properties": "^6.6.0", "babel-plugin-transform-export-extensions": "^6.22.0", "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.3.13", "babel-register": "^6.7.2", "babelify": "^7.3.0", "browserify": "^13.0.0", "css-mqpacker": "^6.0.1", "csswring": "^6.0.0", "envify": "^4.1.0", "eslint": "^4.19.1", "eslint-config-tapplint": "^2.0.1", "eslint-config-tapplint-react": "^1.0.0", "eslint-plugin-react": "7.4.0", "gulp": "^3.9.0", "gulp-consolidate": "^0.2.0", "gulp-htmlmin": "^3.0.0", "gulp-iconfont": "^8.0.0", "gulp-imagemin": "^3.3.0", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.0.1", "gulp-postcss": "^6.4.0", "gulp-rename": "^1.2.2", "gulp-sketch": "^1.0.5", "gulp-sourcemaps": "^2.0.0", "husky": "^0.14.3", "karma": "^1.1.0", "karma-browserify": "^5.0.5", "karma-chrome-launcher": "^2.2.0", "karma-mocha": "^1.0.1", "karma-mocha-reporter": "^2.0.3", "lint-staged": "^7.2.2", "lodash": "^4.11.1", "md5-file": "^4.0.0", "mocha": "^3.5.0", "postcss": "^5.2.17", "postcss-cssnext": "^3.1.1", "postcss-import": "^10.0.0", "postcss-media-variables": "^2.0.0", "postcss-nesting": "^2.3.1", "power-assert": "^1.4.4", "react-addons-test-utils": "~15.6.0", "react-prefixr": "^0.1.0", "require-dir": "^0.3.2", "stylelint": "^7.13.0", "stylelint-config-standard": "^16.0.0", "stylelint-order": "^0.5.0", "tapplint": "^0.9.0", "terser": "^4.6.11", "uglifyify": "^5.0.2", "watchify": "^3.7.0", "yargs": "^6.0.0" }
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
firebase 오류
Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).registerPage에서 넘어가지 않고 이런 오류가 계속 뜨는데 아무리 찾아봐도 안 나오네요,,
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Page Not Found가 뜹니다!
deploy해서 호스팅 URL로 들어갔더니 해당 페이지가 뜹니다.firebase.json 코드는{ "hosting": { "public": "./build" }, "database": { "rules": "database.rules.json" }, "storage": { "rules": "storage.rules" } }이러하고 문제없어 보이는데 이런 경우엔 어떻게 해야하죠?
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
6강에서 유저 상태 정보
안녕하세요. 좋은 강의 잘 보고 있습니다. 6강에서 유저 상태 정보(다이렉트 목록의 레드/그린 상태)하신다고 했는데 강의가 없는거 같습니다. 확인 부탁드리겠습니다. 감사합니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
react-hook-form을 이용한 회원가입 유효성 체크에서 오류가 뜨네요
화면이 안뜨고 에러만 뜨네요 뭐가 문제일까요?registerpage입니다
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Typing관련해서 질문 드립니다.
onKeyDown으로 하려고 하니까... 다 지웠을 때 Typing 정보가 firebase에서 사라지지 않고 backspace를 한 번 더 눌러야 사라지더라구요.그래서 찾아보다가 onKeyUp이 있어서 이거로 바꾸니까다 지웠을 때 바로 Typing 정보가 사라지는데...onKeyDown이 아니라 onKeyUp으로 하면 되는게 맞는지 확인 한 번 부탁드려도 될까요??
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
DB관련 문의 드립니다.
안녕하세요, 채팅도 열심히 한번 해 보겠습니다 시작하기전 문의부터 드려서 죄송합니다만 시간되실때 답변 부탁 드립니다. 다름이 아니라 파이어베이스가 아닌 몽고디비를 사용해도 구현이 가능할까요이번 강사님의 강의를 들으면서 몽고디비로 해 보고싶은데 혹시 도움이 될 조언이나 자료등이 있으면 부탁 드리겠습니다.이상입니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
채팅방 생성시 Update쓰는 이유가 궁금합니다.
채팅방 생성시 파이어베이스의 Update말고 set를 쓰면 되는데 Update를 쓴 이유가 궁금합니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
redux 모듈 관련 질문 수정해서 올립니다
현재 회원가입 페이지 UI만들기 강의 영상을 시청하고 있습니다.실습을 진행하는데 아래와 같은 오류가 발생했는데 어떻게 해결해야할 지 모르겠습니다. redux 모듈 설치 문제 같아서 다시 npm install redux를 하면 ㅇ이와 같은 문구가 뜹니다. 혹시 몰라 npm audit fix --force도 하고 다시 설치해 봤지만 계속 반복됩니다 ㅠㅠㅠ해결 방법을 찾아보려고 해도 찾을 수 없어 질문합니다...깃허브 저장소 첨부해서 올립니다! 감사합니다!https://github.com/tejava7177/React-ChattingProgram
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
firebase오류입니다
위와같이 오류가 자꾸 뜨는데 파이어베이스에 저장도 안됩니다. 너무 답답합니다 ㅠㅠ
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
어떤 오류인지 모르겠습니다.
현재 회원가입 페이지 UI만들기 강의 영상을 시청하고 있습니다.실습을 진행하는데 아래와 같은 오류가 발생했는데 어떻게 해결해야할 지 모르겠습니다. redux 모듈 설치 문제 같아서 다시 npm install redux를 하면 ㅇ이와 같은 문구가 뜹니다. 혹시 몰라 npm audit fix --force도 하고 다시 설치해 봤지만 계속 반복됩니다 ㅠㅠㅠ해결 방법을 찾아보려고 해도 찾을 수 없어 질문합니다...깃허브 저장소 첨부해서 올립니다! 감사합니다!https://github.com/tejava7177/React-ChattingProgram/tree/main/src
- 해결됨따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
모듈 설치가 오류인지 잘 모르겠습니다
react-router-dom 모듈을 설치하는 과정에서 Switch문을 사용 할 수 없다는 내용의 오류가 생깁니다... https://github.com/tejava7177/React-ChattingProgram/blob/main/src/App.js 깃허브 주소입니다...감사합니다
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
npm run start 오류
안녕하세요! 어제 npm run start 관련 오류 올렸던 수강생입니다. 깃허브 주소 첨부하겠습니다 감사합니다ㅠ https://github.com/Sumin-Yu-creator/react-test
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
npm run start를 치면 흰 화면만 뜹니다
안녕하세요. 강의를 듣다가 막히는 부분이 생겨 질문 드립니다. VSC상에서 npm install react-router-dom --save를 칠 때부터 이런 종류의 문구가 뜨더니, npm run start를 하면 새로운 포트로 연결이 성공되었다는 문구는 뜨지만, 아무 글씨도 나타나지 않은 흰 배경만 있습니다. 혹시 어떤 점이 문제인지 알 수 있을까요?? 구글링도 해보고 npm audit?? 그것도 시도해봤는데 해결되지 않습니다ㅠㅠㅠ *현재 window쓰고 있고, VSC로 작업하고 있습니다 *App.js 코드 첨부하겠습니다. import React from "react"; import { Routes, Route} from "react-router-dom"; import ChatPage from "./components/ChatPage/ChatPage"; import LoginPage from "./components/LoginPage/LoginPage"; import RegisterPage from "./components/RegisterPage/RegisterPage"; function App(props) { return ( <Routes> <Route path="/" element={<ChatPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<RegisterPage />} /> </Routes> ); } export default App;
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
어떤것이 문제인지 모르겠습니다 라우터 연결하자 화면에 뜨지 않아요
바뀐 코드로 해도 안됩니다 아예 화면이 안떠요 처음에는 버전 문제인줄 알았는데 채팅룸 만드는데도 안뜨네요 import React, { useEffect } from "react"; import { Routes, Route, useNavigate } from "react-router-dom"; import ChatPage from "./components/ChatPage/ChatPage"; import LoginPage from "./components/LoginPage/LoginPage"; import RegisterPage from "./components/RegisterPage/RegisterPage"; import { getAuth, onAuthStateChanged } from "firebase/auth"; import { useDispatch, useSelector } from "react-redux"; import { setUser } from "./redux/actions/user_action"; function App(props) { const navigate = useNavigate(); let dispatch = useDispatch(); const isLoading = useSelector((state) => state.user.isLoading); useEffect(() => { const auth = getAuth(); onAuthStateChanged(auth, (user) => { if (user) { navigate("/"); dispatch(setUser(user)); // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/firebase.User const uid = user.uid; } else { navigate("/login"); //dispatch(clearUser()); // User is signed out } }); }, []); if (isLoading) { return <div>...loading</div>; } else { return ( <Routes> <Route path="/" element={<ChatPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/register" element={<RegisterPage />} /> </Routes> ); } } export default App;
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
회원가입 페이지 firebase 오류?
회원가입 페이지 작성한 후 제출 눌렀는데,, 밑에 저렇게 뜨면서 넘어가질 않고 데이터베이스에도 저장되지 않아요. 어떻게 해결해야 되나요??
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
리덕스 createStore 오류
Redux 초반에 CreateStore를 import 하면 취소선 뜨면서 기능이 안 먹힙니다. 왜 그런거죠?? 해결책 좀 알려주세요
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
리덕스 부분 브라우저 에러
크롬으로 실행시키면 이러한 에러가 뜨면서 그냥 빈 페이지 나옵니다. 리덕스 부분 createStore가 취소선 떠서 configureStore를 써보기도 하고 리덕스 버젼을 4.12로 낮춰보기도 했는데 소용 없네요.. 잘 따라와서 코드 빠진거나 그런건 없는것 같습니다.. import { combineReducers } from "redux"; const rootReducer = combineReducers({ //combineReducers }); export default rootReducer; redux/reducers/index.js의 combineRducers가 undifiend 혹은 null이 되어서 그런것 같습니다. redux 4.1.2로 내리고 위 주석처리 해서 되긴하는데 잘 모르겠습니다.
- 미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
DM 리스트 온/오프라인 상태
안녕하세요 항상 좋은 강의 감사 드립니다. React, Firebase 채팅 어플리케이션 강의 중 DM 사용자 목록에서 온/오프 라인 부분이 강의에 없는데.. 원할 경우 코드 받을 수 있다는 오래전 답변을 봤어요. 가능하다면 코드 받아 볼 수 있을까요?