월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키파서 기능
쿠키파서가 없어도 쿠키가 보내지고 데이터를 받을 때 원본이 오는데 쿠키파서 미들웨어가 필수인건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
index.js 오류
post/user/등 강좌 되돌려 보면서 틀린 곳이 있나 확인했는데,어디서 부터 고쳐야 될지 모르겠습니다. index.jsimport React from 'react'; import { useSelector } from 'react-redux'; import PostForm from '../components/PostForm'; import PostCard from '../components/PostCard'; import AppLayout from '../components/AppLayout' const Home = () => { const { isLoggedIn } = useSelector((state) => state.user); const { mainPosts } = useSelector((state) => state.post); return ( <AppLayout> {isLoggedIn && <PostForm/>} {mainPosts.map((post)=><PostCard key={post.id} post={post}/>)} </AppLayout> ); } export default Home;
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
8:24분경 코드 오류나서 수정하셨는데!
8분 20초경 오류나서 코드를 수정하셨는데,case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, };코드 주석부분 왜 추가하신건가요..?const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], });dummy데이터 구조를 보면Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
ADD_COMMENT_SUCCESS 새로운 post에서만 작동 안 하는 문제
안녕하세요 제로초 님,redux saga immer, faker 까지만 들었구요, 백엔드는 안 만들었고요.faker가 문제가 있다길래,import { faker } from '@faker-js/faker';이거를 대신해서 설치해서 했는데, 이거의 문제는 아닌거 같고요. ADD_COMMENT_SUCCESS가기존의 post에서는 작동을 하는데, 새로운 post에서만 작동 안 하는 문제가 있습니다. 새로운 post.id가 동작을 안 하나 싶어const post = draft.mainPosts.find((post)=> { console.log(post.id == action.data.postId); return post.id == action.data.postId; });를 해봤는데 역시 true가 나옵니다.아래는 브라우저 결과 사진들 입니다.로그인 안 했을 때,로그인 하고 기존의 post에 comment를 달았을 때 -> 정상적으로 동작 함. 로그인 하고 새로운 post을 하나 추가 -> 정상적으로 동작 함. username이 바뀌는 건 faker를 썼고, userId만 그래도 컴포넌트에서 받아서 써서 지금 ADD_POST_TO_ME 동작해서 1에서 2로 바뀌었구요.그러나새로운 post에 comment를 달았을 때 -> 콘솔로그가 true가 나옴에도 동작을 하지 않음. 기존의 post에도 comment가 안 달리는 거면 제가 실수를 한게 분명한데, 새로운 post에만 동작을 안 하는게 이상합니다.ADD_COMMENT_REQUEST를 보냈을 때에도, 갑자기 mainPosts가 초기화 되거나 그런 것도 아니었습니다. 만약 그랬다면 콘솔로그가 false가 나왔어야 합니다. 감사합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
VsCode : Import하지 않은 컴포넌트 경고표시X(설정?)
현재 버전 정보들입니다 "next": "^11.1.4", "prop-types": "^15.8.1", "eslint": "^8.33.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0"TypeScript와 React를 사용해서 프로젝트 했을 때는 VsCode에서(웹스톰만의 기능은 아니라고 생각합니다.) import하지 않은 컴포넌트에 대한 경고문이 나와서, 맥북 기준 커맨드+.을 하면 Code Action으로 import을 시켜줄 수 있었습니다.그런데강의를 진행하면서 컴포넌트를 import하지 않은 상황인데도 불구하고, 따로 경고문이 나타나지 않는데, 이게 어떤 설정을 해야하는건지 잘 모르겠습니다.<Menu /> , <Col /> , <UserProfile /> 같은 컴포넌트들입니다.(코드는 이 정도만 첨부하겠습니다.)import PropTypes from "prop-types"; import Link from "next/link"; import { Menu, Input, Row, Col } from "antd"; ... <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile /> : <LoginForm />} </Col> <Col xs={24} md={12}> {children} </Col> <Col xs={24} md={6}> <a href="https://velog.io/" target="_blank" rel="noreferrer noopener">Velog</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout;Import되지 않은 컴포넌트인 <UserProfile />, <LoginForm /> 경고문이 뜨지 않는 사진도 첨부했습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
제너레이터 함수 안 yield 구문 실행에대해 질문드립니다..
function* test() { yield 1; yield 2;}===============const gen = test()===============gen.next(){ "value": 1, "done": false}보통 제너레이터 함수를 설명할때, 개발자 도구에서 이런식으로 설명을 많이 하는것같은데...설명만 보면 yield 구문실행을 위해선, next() 라는 함수를 사용해야된다는건 알겠습니다..근데 실제코드에서는 next() 함수를 실행하지않는데, 어떻게 yield 구문들이 실행되는지 이해가 안됩니다..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Wsl mysql 질문
오늘 하루 mysql 설정하는거때문에 다 날려먹으면서 혼자서 해보고있는데 우여곡절 끝에 WSL에 mysql까지 실행 성공시켜서 그안에 react-nodebird database가 있는건 확인했는데 윈도우에 깐 mysql-workbench랑 연동을 못하고있는데 크게 상관 없을까요 제로초쌤..?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
우분투에서 작업시 윈도우로 mysql 설치하는 것에 관해서
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
reduxjs/toolkit 에서 loadPost 한번만 가게하기
제로초쌤 강의를 들으면서 redux, redux-saga로 작성하신걸 깃헙 소스코드 참고하고 스스로 해보면서 toolkit으로 변환하면서 해보고 있는데 toolkit에서는 따로 한번만 요청이 가게 할 수 없나요..?제 코드 첨부하겠습니다<pages > index.js> useEffect(() => { function onScroll(){ console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight); if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300){ if(hasMorePosts && !loadPostsLoading){ dispatch(loadPost(10)); console.log(loadPostsLoading); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); } }, [hasMorePosts])<actions > post.js>export const loadPost = createAsyncThunk('post/loadPosts' , async (data , thunkAPI) => { try{ const result = await delay(getDummyPost(data), 1000); return result; } catch(error){ console.log(error); } }); <reducers > postSlice.js> .addCase(loadPost.pending, (state, action) => { state.loadPostsLoading = true; state.loadPostsDone = false; state.loadPostsError = null; }) .addCase(loadPost.fulfilled, (state, action) => { state.loadPostsLoading = false; state.loadPostsDone = true; state.mainPosts = action.payload.concat(state.mainPosts); state.hasMorePosts = action.payload.length < 100; }) .addCase(loadPost.rejected, (state, action) => { state.loadPostsLoading = false; state.loadPostsError = action.error; })
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
DB 연결 성공 후 테이블 까지 만들었습니다.
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
사가 모든 설정 후 로그인시 오류
강사님 모든 코드를 수정한 후 로그인하려고 하는데아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다.콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요.몇개파일의 코드 같이 올려드립니다.아래는 로그인 안되는 화면캡처본입니다.LoginForm.jsimport React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.jsexport const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.jsimport { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.jsimport { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요.
해결 했습니다. 감사합니다. 좋은하루 보내세요. 안녕하세요. 질문 있습니다!제가 react-query(@tanstack/react-query)를 사용하며 useQuery를 병렬처리 하려고 합니다. 그 과정에서 useQuery가 한번에 다 실행되지 않고 부분적으로 실행 되는데 혹시 이유가 뭔지 해결하려면 어떤식으로 검색해 나가면 될지 궁금합니다.현재 문제 상황은 아래와 같이 useQuery를 병렬로 사용 했을 때, 여러개가 한번에 처리되는 것이 아닌 부분적으로 처리되는 상황입니다.코드는 아래와 같습니다.pageimport React from 'react'; import { dehydrate, QueryClient, useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query'; import DefaultLayout from '@layouts/DefaultLayout'; // import InfiniteCarousel from '@components/Commons/InfiniteCarousel'; import { loadStoreAPI, loadSettingsAPI, loadBannersAPI, loadCategoriesAPI } from '@apis/store'; import { GetStaticProps } from 'next'; import { ParsedUrlQuery } from 'querystring'; import { useRouter } from 'next/router'; interface Params extends ParsedUrlQuery { storeId: string; } const Home: React.FC = () => { const router = useRouter(); const { storeId } = router.query as Params; const { data: storeInfo } = useQuery(['storeInfo', storeId], () => loadStoreAPI(storeId), { enabled: !!storeId, // staleTime: 5 * 1000, }); const { data: settings } = useQuery(['settings', storeId], () => loadSettingsAPI(storeId), { enabled: !!storeId, // staleTime: 5 * 1000, }); const { data: banners } = useQuery(['banners', storeId], () => loadBannersAPI(storeId), { enabled: !!storeId, // staleTime: 5 * 1000, }); const { data: categories } = useQuery(['categories', storeId], () => loadCategoriesAPI(storeId), { enabled: !!storeId, // staleTime: 5 * 1000, }); // const result = useQueries({ // queries: [ // { // queryKey: ['storeInfo', storeId], // queryFn: () => loadStoreAPI(storeId), // enabled: !!storeId, // }, // { // queryKey: ['settings', storeId], // queryFn: () => loadSettingsAPI(storeId), // enabled: !!storeId, // }, // ], // }); return ( <DefaultLayout> <h1>home123</h1> {/*<InfiniteCarousel></InfiniteCarousel>*/} </DefaultLayout> ); }; export const getStaticPaths = async () => { return { paths: ['/app/store/[storeId]'], fallback: true, }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { const { storeId } = params as Params; if (!storeId) { return { redirect: { destination: '/', permanent: true, }, }; } const queryClient = new QueryClient(); await queryClient.prefetchQuery(['storeInfo', storeId], () => loadStoreAPI(storeId)); await queryClient.prefetchQuery(['settings', storeId], () => loadSettingsAPI(storeId)); await queryClient.prefetchQuery(['banners', storeId], () => loadBannersAPI(storeId)); await queryClient.prefetchQuery(['categories', storeId], () => loadCategoriesAPI(storeId)); return { props: { dehydratedState: dehydrate(queryClient), }, }; }; export default Home; apisimport axios from 'axios'; import { backUrl } from '../config/config'; axios.defaults.baseURL = backUrl; axios.defaults.withCredentials = true; const [GET, POST] = ['GET', 'POST']; export function loadStoreAPI(data: string) { const options = { method: GET, url: `/store/${data}`, }; return axios(options).then((response) => response.data); } export function loadSettingsAPI(data: string) { const options = { method: GET, url: `/store/${data}/settings`, }; return axios(options).then((response) => response.data); } export function loadBannersAPI(data: string) { const options = { method: GET, url: `/store/${data}/banners`, }; return axios(options).then((response) => response.data); } export function loadCategoriesAPI(data: string) { const options = { method: GET, url: `/store/${data}/categories`, }; return axios(options).then((response) => response.data); } export function loadMenusAPI({ storeId, categoryId }) { const options = { method: GET, url: `/store/${storeId}/category/${categoryId}/menus`, }; return axios(options).then((response) => response.data); } react query 데브툴에서는 fetching에서 stale로 한번에 가지 않고 약 1초 간격으로 하나씩 옮겨지는 상황입니다.처음에는 staleTime을 주어 해결한듯 보였으나 다른 윈도우나 탭으로 포커스를 이동 후 다시 개발중인 웹앱으로 포커스를 이동하면 같은 문제가 발생하는걸 확인했습니다.혹시 몰라 useQueries를 사용해보았는데 같은 상황이 반복됐습니다.getStaticPaths에 있는 코드들은 정상 작동하는 상황이라 한번에 요청을 하여 생기는 문제가 맞을까요?검색해도 이유나 해결 방법을 찾지 못해 도움 청합니다. 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
백엔드 노드 서버 구축하기 건너 뛰어도 되나여?
안녕하세요~ 프론트엔드 개발 공부중입니다.현재 백엔드 노드 서버 구축하기 를 할 차례인데,이부분 강의는 건너뛰고 바로 서버사이드렌더링 강의를 들어도 강사님 영상 따라하는거에 문제가 없을까요..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 질문 있습니다.
안녕하세요 질문 있습니다. 노드 버드 react-query 폴더를 보면서 따라하고 있습니다. 현재 주소에서 storeId를 id 값으로 하여 서버에서 각기 다른 데이터를 받아오고 있습니다.그런데 아래와 같이 router.query로 값을 불러오거나 아래 getStaticProps에서 storeId를 보내도 컴포넌트 내부에서 storeId를 한번 undefined로 인식해서 오류가 나더라고요. 이럴 경우 어떤 방식으로 해결해 나가는게 좋을지 궁금합니다.서버에 요청 보내는 api에서 파라미터의 값이 undefined일 경우 실행을 안시키는 식으로 했는데 좋은 방법이 아닌거 같고 페이지 내부에서 해결해야 할거 같긴 한데 어떤 식으로 접근해야할지 잘 모르겠습니다ㅠ import React from 'react'; import { dehydrate, QueryClient, useInfiniteQuery, useQuery } from 'react-query'; import DefaultLayout from '@layouts/DefaultLayout'; // import InfiniteCarousel from '@components/Commons/InfiniteCarousel'; import { loadStoreAPI } from '@apis/store'; import { GetStaticProps } from 'next'; import { ParsedUrlQuery } from 'querystring'; import { useRouter } from 'next/router'; interface Params extends ParsedUrlQuery { storeId: string; } const Home: React.FC<Params> = () => { const router = useRouter(); const { storeId } = router.query as Params; console.log(storeId); const { data: storeInfo } = useQuery(['storeInfo', storeId], () => loadStoreAPI(storeId)); return ( <DefaultLayout> <h1>home123</h1> {/*<InfiniteCarousel></InfiniteCarousel>*/} </DefaultLayout> ); }; export const getStaticPaths = async () => { return { paths: ['/app/store/[storeId]'], fallback: true, }; }; export const getStaticProps: GetStaticProps = async ({ params }) => { const { storeId } = params as Params; if (!storeId) { return { redirect: { destination: '/', permanent: true, }, }; } console.log(storeId); const queryClient = new QueryClient(); await queryClient.prefetchQuery(['storeInfo', storeId], () => loadStoreAPI(storeId)); return { props: { dehydratedState: dehydrate(queryClient), storeId, }, }; }; export default Home;
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
16분경 onChangeText에 useInput을 사용해도 되지 않나요?
[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리트윗 관련
게시글 마다 좋아요 갯수처럼 리트윗 갯수도 표시해주고 싶은데 어떤식으로 코드를 짜주는게 좋을지 감이 안와서 문의드립니다 항상 좋은 강의 감사합니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react tailwind vs boostrap vs styled-components
CSS 프레임워크 쓸 때 현업에서 bootstrap 대신 tailwind 도 요즘 많이 쓰는 추세인지 궁금합니다!(웹 만들때 CSS프레임워크를 둘다 다루긴 해봤지만 tailwind 를 사용을 많이 했어서 궁금했습니다!) 그리고 styled-components antd 대신에 tailwind, tailwind Component 쓰는 것에도 큰 차이가 없다면 후자로 진행해도 될까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
버젼 다른 것에 관해서
제로초쌤 현재 넥스트 13버젼 ant 5.0버젼인데 이대로 진행해도 괜찮을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
수강문의
강좌를 구매한 상황이라서, 수강전문의에 등록이 안되어 이렇게 질문남깁니다!지금 현재 React.Js,TypeScript만을 공부한 상황이고, Next.js와 Redux에 대해서는 따로 공부한 적이 없습니다. 이 강좌로 Next.js와 Redux도 같이 배울 수 있을까요?아니면 저 2가지를 따로 공부해야하는 부분일까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리액트 버전업데이트에 관해 문의드려요
안녕하세요 리액트로 웹개발 시작한 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" }