4: 48 mutate 대신 revalidate를 사용하셨는데revalidate가 지금은 사용하지 않는 단어라서 지금까지 mutate로 대체해서 사용했어요제로초님처럼 로그인 했을 때 에러가 나진 않는데 바꾸지 않아도 되나요??

안녕하세요.개정 3판 Node.js 교과서 8-6 몽구스 실전 프로젝트에서 처음 프로젝트를 시작할 시, cd ch8/8.6/learn-mongoose 하여 폴더에 들어간 이후 npm start 에서 막혔습니다. terminal 상으로는 돌아가지만, localhost:3002로 접속했을때, 제대로 접속되지 않고 로딩창만 뜹니다. 저는 현재, intel MAC, Vertura 13.1 버전 쓰고 있으며, 노드 JS는 v18.12.1, mongodb는 6.0.4버전 쓰고있습니다.에러 메세지는 다음과 같습니다.몽고디비 연결 에러 MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 at Connection.openUri (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/connection.js:825:32) at /Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:409:10 at promiseOrCallback (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/helpers/promiseOrCallback.js:11:14) at Mongoose._promiseOrCallback (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:1262:10) at Mongoose.connect (/Users/jisu/Downloads/nodejs-book-master/node_modules/mongoose/lib/index.js:408:20) at connect (/Users/jisu/Downloads/nodejs-book-master/ch8/8.6/learn-mongoose/schemas/index.js:7:12) at Object.<anonymous> (/Users/jisu/Downloads/nodejs-book-master/ch8/8.6/learn-mongoose/app.js:18:1) at Module._compile (node:internal/modules/cjs/loader:1159:14) at Module._extensions..js (node:internal/modules/cjs/loader:1213:10) at Module.load (node:internal/modules/cjs/loader:1037:32) { reason: TopologyDescription { type: 'Unknown', servers: Map(1) { 'localhost:27017' => [ServerDescription] }, stale: false, compatible: true, heartbeatFrequencyMS: 10000, localThresholdMS: 15, setName: null, maxElectionId: null, maxSetVersion: null, commonWireVersion: 0, logicalSessionTimeoutMinutes: null }, code: undefined } MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 를 구글링하여 몇가지를 시도해봤는데,1번째, MONGO_URI=mongodb://localhost:27017/blog 를 MONGO_URI=mongodb://127.0.0.1:27017/blog 로 바꾸어 해결한 사례가 있어 ch8/8.6/learn-mongoose/schemas 폴더의 index.js에서mongoose.connect('mongodb://root:1234@localhost:27017/admin' 를 mongoose.connect('mongodb://root:1234@127.0.0.1:27017/admin', 로 바꾸었지만, → 해결되지 않았습니다.2번째, terminal에 mongod를 쳐서 error가 난 부분을 살펴보니,{"t":{"$date":"2023-02-07T00:55:42.260+09:00"},"s":"I", "c":"CONTROL", "id":23285, "ctx":"-","msg":"Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'"} {"t":{"$date":"2023-02-07T00:55:42.263+09:00"},"s":"I", "c":"NETWORK", "id":4915701, "ctx":"-","msg":"Initialized wire specification","attr":{"spec":{"incomingExternalClient":{"minWireVersion":0,"maxWireVersion":17},"incomingInternalClient":{"minWireVersion":0,"maxWireVersion":17},"outgoing":{"minWireVersion":6,"maxWireVersion":17},"isInternalClient":true}}} {"t":{"$date":"2023-02-07T00:55:42.280+09:00"},"s":"I", "c":"NETWORK", "id":4648602, "ctx":"thread1","msg":"Implicit TCP FastOpen in use."} {"t":{"$date":"2023-02-07T00:55:42.285+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"TenantMigrationDonorService","namespace":"config.tenantMigrationDonors"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"TenantMigrationRecipientService","namespace":"config.tenantMigrationRecipients"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"REPL", "id":5123008, "ctx":"thread1","msg":"Successfully registered PrimaryOnlyService","attr":{"service":"ShardSplitDonorService","namespace":"config.tenantSplitDonors"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":5945603, "ctx":"thread1","msg":"Multi threading initialized"} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":4615611, "ctx":"initandlisten","msg":"MongoDB starting","attr":{"pid":64400,"port":27017,"dbPath":"/data/db","architecture":"64-bit","host":"iMac.local"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":23403, "ctx":"initandlisten","msg":"Build Info","attr":{"buildInfo":{"version":"6.0.4","gitVersion":"44ff59461c1353638a71e710f385a566bcd2f547","modules":[],"allocator":"system","environment":{"distarch":"x86_64","target_arch":"x86_64"}}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":51765, "ctx":"initandlisten","msg":"Operating System","attr":{"os":{"name":"Mac OS X","version":"22.2.0"}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"I", "c":"CONTROL", "id":21951, "ctx":"initandlisten","msg":"Options set by command line","attr":{"options":{}}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"E", "c":"NETWORK", "id":23024, "ctx":"initandlisten","msg":"Failed to unlink socket file","attr":{"path":"/tmp/mongodb-27017.sock","error":"Permission denied"}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"F", "c":"ASSERT", "id":23091, "ctx":"initandlisten","msg":"Fatal assertion","attr":{"msgid":40486,"file":"src/mongo/transport/transport_layer_asio.cpp","line":1126}} {"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"F", "c":"ASSERT", "id":23092, "ctx":"initandlisten","msg":"\n\n***aborting after fassert() failure\n\n"}이 부분에서, 에러인 부분인{"t":{"$date":"2023-02-07T00:55:42.286+09:00"},"s":"E", "c":"NETWORK", "id":23024, "ctx":"initandlisten","msg":"Failed to unlink socket file","attr":{"path":"/tmp/mongodb-27017.sock","error":"Permission denied"}}이 부분이 에러일 것같다는 생각에, 구글링을 하던 중/tmp/mongodb-27017.sock 파일의 접근권한을 변경하거나 파일 삭제 후 서비스를 재시작하면 정상적으로 mongodb가 부팅된다.는 글을 보고, sudo rm -rf /tmp/mongodb-27017.sock로 sock 파일을 삭제해봤지만, 똑같은 결과였습니다.ls -l /tmp/mongodb-27017.sock로 확인했을때, 삭제된 것도 확인했습니다.3번째, terminal에 brew services list 로 mongodb상태를 확인해보려고 하였습니다.Name              Status     User File mongodb-community error  512 jisu ~/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist mysql             none             postgresql@14     none    로 나오는 것을 보아 mongodb가 제대로 작동되지 않고 있어서 에러가 발생하는 것으로 추측했습니다. brew services start mongodb-community의 결과로,Bootstrap failed: 5: Input/output error Try re-running the command as root for richer errors. Error: Failure while executing; `/bin/launchctl bootstrap gui/502 /Users/jisu/Library/LaunchAgents/homebrew.mxcl.mongodb-community.plist` exited with 5.가 나와서, 이를 해결하기 위해 mongodb-community를 완전히 지우고, brew cleanup까지 한 다음 다시 깔아봤지만 달라진 바는 없었습니다. 이전 강좌까지 mongodb에서 데이터베이스 생성하는 CRUD 실습할때까지만 해도 문제없었는데, 갑자기 에러를 벹어내네요.. 3일동안 이 문제를 해결하려 힘써봤는데 도저히 감이 안잡혀서 질문드립니다. 

소켓이 연결 되어 DM 메시지에 초록 동그라미도 보이는데,12:44 초에 네트워크 창 보시면?EIO 라고 시작되는 네트워크 네임이 없고, 프로토콜도 http/1.1 만 나오고 websocket이라는 단어가 뜨는 부분이 없어요이건 연결이 안된건가요....??? 5:35초 부터 네트워크에 빨간 에러도 안뜨고 저 네임이 안들어갔었습니다.소켓 연결이 된 것 같은데 안떠서 헷갈리네요

안녕하세요개발환경으로 code-server을 사용하고 있는데, 문제를 도대체 알 수 없어서 질문 올립니다 ㅜㅜㅜㅜㅜㅜcode-server은 실행시 도메인/proxy/port로 실행 주소가 설정됩니다.그래서 hot-reload 웹소켓 연결을 설정하기위해서 webpack.config.ts에client: { webSocketURL: 'ws://0.0.0.0:443/proxy/3090/ws', },를 추가했습니다.index.html에서 src = "./dist/app.js"로 했습니다다른 모든 코드는 setting/ts를 그대로 npm i 했습니다.(여기까지 사전 참고내용)  이전 강의에서 App.tsx에 <div>코드어쩌구저쩌구</div>는 잘 나타났습니다.이번 강의에서 react-router-dom을 도입해서 code-server에서 실행을 하게되면 브라우저에 아무런 화면이 나오지 않습니다. 그러나, code-server가 아닌 구름ide에서 같은 파일을 실행할 경우(서버 주소가 proxy가 아니게됨)정상적으로 동작합니다.  react-router-dom을 사용했더니 화면이 안보이기때문에 react-router-dom 과 관련된 문제라고 추측합니다.code-server에서 실행주소뒤에 'proxy/3090'이 붙었을때 문제가 생겼기 때문에 code-server 관련 문제로 추측됩니다.code-server사용시 가져온 파일이랑 구름ide사용시 가져온 파일 비교해보면, code-server에서 파일2개를 못 가져온것 같은데, 이게 문제인거 같기도 합니다.  또한, App.tsx에서 react-router을 빼고 다음과 같이 입력후 실행해보았습니다.import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import SignUp from '@pages/SignUp'; const App = () => { return <SignUp />; }; export default App;  가져온 파일 목록은 다음과 같고, 정상적으로 signup화면이 나타납니다.이번에는 loadable/component가 문제인가 싶어서, 이걸빼고 다음과 같이 App.tsx를 입력했습니다.import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; import LogIn from '@pages/LogIn'; import SignUp from '@pages/SignUp'; const App = () => { return ( <Switch> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App;그랬더니 이전과 같이 화면에 아무것도 안나옵니다. 도대체 뭐가 문제인지를 모르겠네요 ㅜㅜㅜ

NavLink 사용시, onClick에서 에러가 발생합니다(property) onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefinedType 'void' is not assignable to type 'MouseEventHandler<HTMLAnchorElement> | undefined'.ts(2322)index.d.ts(1448, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & NavLinkProps<unknown> & RefAttributes<HTMLAnchorElement>'이런 에러가 발생하였습니다.그래서 인터넷에 검색하니까onClick={()=>resetCount(member.id)}이렇게 바꿔주면 된다고 해서 바꿔줬더니 오류가 사라졌습니다.제로초님께서는 에러가 없었는데 저만 이 오류가 나타나는 이유가 뭘까요??// import EachDM from '@components/EachDM'; // import useSocket from '@hooks/useSocket'; import { CollapseButton } from '@components/DMList/styles'; import { IDM, IUser, IUserWithOnline } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { NavLink } from 'react-router-dom'; import useSWR from 'swr'; interface Props { userData?: IUser; } const DMList: FC<Props> = ({ userData }) => { const { workspace } = useParams<{ workspace?: string }>(); const { data: memberData } = useSWR<IUserWithOnline[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // const [socket] = useSocket(workspace); const [channelCollapse, setChannelCollapse] = useState(false); const [countList, setCountList] = useState<{ [key: string]: number }>({}); const [onlineList, setOnlineList] = useState<number[]>([]); const toggleChannelCollapse = useCallback(() => { setChannelCollapse((prev) => !prev); }, []); const resetCount = useCallback((id) => { setCountList((list) => { return { ...list, [id]: 0, }; }); }, []); const onMessage = (data: IDM) => { console.log('dm왔다', data); setCountList((list) => { return { ...list, [data.SenderId]: list[data.SenderId] ? list[data.SenderId] + 1 : 1, }; }); }; useEffect(() => { console.log('DMList: workspace 바꼈다', workspace); setOnlineList([]); }, [workspace]); // useEffect(() => { // socket?.on('onlineList', (data: number[]) => { // setOnlineList(data); // }); // console.log('socket on dm', socket?.hasListeners('dm'), socket); // return () => { // console.log('socket off dm', socket?.hasListeners('dm')); // socket?.off('onlineList'); // }; // }, [socket]); return ( <> <h2> <CollapseButton collapse={channelCollapse} onClick={toggleChannelCollapse}> <i className="c-icon p-channel_sidebar__section_heading_expand p-channel_sidebar__section_heading_expand--show_more_feature c-icon--caret-right c-icon--inherit c-icon--inline" data-qa="channel-section-collapse" aria-hidden="true" /> </CollapseButton> <span>Direct Messages</span> </h2> <div> {!channelCollapse && memberData?.map((member) => { const isOnline = onlineList.includes(member.id); const count = countList[member.id] || 0; return ( <NavLink key={member.id} activeClassName="selected" to={`/workspace/${workspace}/dm/${member.id}`} onClick={resetCount(member.id)} > <i className={`c-icon p-channel_sidebar__presence_icon p-channel_sidebar__presence_icon--dim_enabled c-presence ${ isOnline ? 'c-presence--active c-icon--presence-online' : 'c-icon--presence-offline' }`} aria-hidden="true" data-qa="presence_indicator" data-qa-presence-self="false" data-qa-presence-active="false" data-qa-presence-dnd="false" /> <span className={count > 0 ? 'bold' : undefined}>{member.nickname}</span> {member.id === userData?.id && <span> (나)</span>} {count > 0 && <span className="count">{count}</span>} </NavLink> ); // return <EachDM key={member.id} member={member} isOnline={isOnline} />; })} </div> </> ); }; export default DMList;  +)그리고 강의 코드와 깃헙에 있는 코드가 부분적으로 다른 부분이 있는데 븥여넣을 때마다 동영상을 정지시키고 코드를 다시 작성해야해서 조금 번거로운 부분이 있는 것 같아요ㅜㅜ 

Workspace에서 {channelData?.map((v) => ( <div>{v.name}</div> ))}콘솔에서 이 부분 때문에 key prop 에러가 나는 것 같은데 나중에 ChannelList로 바꿀꺼라서 신경 쓰지 않아도 되는 부분인가요??

제로초님, 코드를 따라치는 중에'Date' 형식은 'ReactNode' 형식에 할당할 수 없습니다.라는 오류 메세지가 떴습니다. 그래서 index.d.ts에 들어가서type ReactNode에 Date 타입을 적어주었는데, 오류 메세지는 사라졌지만, 화면에 에러는 그대로 있습니다. 이 에러는 어떻게 해결하나요?? typescript는 v 18입니다! 

안녕하세요. 질문 있습니다.강의에서는 SWR을 쓰시는데 공부할때는 react-query를 쓰려고 합니다. 이유는 생태계가 더 큰 라이브러리를 사용할 목적이었는데 알려주신 npm trends에 검색해보니 둘 다 비슷비슷하더라고요.SWR도 아직 많이 쓰이는 추세인가요??? 궁금한 이유는 react-query 외에도 추가로 하나의 라이브러리를 동시에 더 써볼 생각이라 추천해주시면 감사합니다. 추가로 수업 외 질문으로 유틸리티 라이브러리?를 하나 써보려고 합니다. 기존에는 fxjs를 사용 중이었습니다. npm trends를 보니 가장 많이 사용하는 라이브러리는 lodash, rxjs인 것 같고 lamda도 많이 쓰는거 같고 타입스크립트로 된 fp-ts도 있는거 같은데 fp-ts를 제외한 것들 중 추천해주시는게 있을까요? 감사합니다!!

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

다른분들의 질문들을 보면서 수정을 해보았지만 해결되지 않아 질문 올립니다. -react-router-dom 버전으로 인해 swtch는 Routes로 바꾸었으며 worspace뒤에 *을 붙였습니다.//App.ts <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/:workspace/*" element={<Workspace />} /> </Routes>workspace.tsx 에서는 밑에 코드로 바꾸었습니다. //Workspace.tsx <Routes> <Route path="channel/:channel" element={<Channel />} /> <Route path="dm/:id" element={<DirectMessage />} /> </Routes>  그리고 나서 login 은 잘 되고 쿠키도 잘 저장되지만 http://localhost:3090/workspace/sleact/channel/%EC%9D%BC%EB%B0%98 이 주소로 가면 아래 같은 에러가 뜨면서 창이 뜨지 않습니다. 어떤게 잘못된 걸까요 ㅠ TypeErrorCannot read properties of undefined (reading 'match')Call Stack useParams  alecture/./node_modules/react-router/esm/react-router.js:760:34 ChannelList  alecture/./components/ChannelList/index.tsx:40:75 renderWithHooks  alecture/./node_modules/react-dom/cjs/react-dom.development.js:14985:18 mountIndeterminateComponent  alecture/./node_modules/react-dom/cjs/react-dom.development.js:17811:13 beginWork  alecture/./node_modules/react-dom/cjs/react-dom.development.js:19049:16 HTMLUnknownElement.callCallback  alecture/./node_modules/react-dom/cjs/react-dom.development.js:3945:14 Object.invokeGuardedCallbackDev  alecture/./node_modules/react-dom/cjs/react-dom.development.js:3994:16 invokeGuardedCallback  alecture/./node_modules/react-dom/cjs/react-dom.development.js:4056:31 beginWork$1  alecture/./node_modules/react-dom/cjs/react-dom.development.js:23959:7 performUnitOfWork  alecture/./node_modules/react-dom/cjs/react-dom.development.js:22771:12 

안녕하세요 제로초님, 현재 react-router-dom v6.6.2로 강의를 수강하고 있습니다. 앞부분에서 잘 따라하다가 어느 부분에서 잘못된 것인지 로그인을 했을 때 흰 화면과 함께 아래 첨부한 사진과 같은 에러가 발생하했습니다.API를 받아올 때 사용하는 params에 문제가 있나 싶었지만, http://localhost:3095/api/workspaces/sleact/channels 이 주소로 들어갔을 때 아래와 같은 데이터를 받아오는 것을 확인할 수 있었습니다.[ { "id": 1, "name": "일반", "private": false, "createdAt": "2023-01-26T08:07:33.000Z", "updatedAt": "2023-01-26T08:07:33.000Z", "WorkspaceId": 1, "Members": [ { "id": 2, "ChannelMembers": { "UserId": 2 } } ] } ] 데이터가 문제인가 싶어서 테이블도 삭제했다가 다시 만들어봤지만 해결할 수 없었습니다ㅠㅠ 어떻게 해결할 수 있을까요?? 혹시 몰라 코드는 모두 첨부하겠습니다! // App/index.tsx import React from 'react'; import loadable from '@loadable/component'; import { Routes, Route, Navigate } from 'react-router-dom'; const Login = loadable(() => import('@pages/Login')); const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate to="/login" />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/:workspace" element={<Workspace />} /> </Routes> ); }; export default App;// Workspace/index.tsx import React, { useCallback, useEffect, useState } from 'react'; import useSWR from 'swr'; import axios from 'axios'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; import { Navigate, Route, Routes } from 'react-router'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from './styles'; import loadable from '@loadable/component'; import Menu from '@components/Menu'; import { Link } from 'react-router-dom'; import { IChannel, IUser } from '@typings/db'; import Modal from '@components/Modal'; import { Button, Input, Label } from '@pages/SignUp/styles'; import useInput from '@hooks/useInput'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/CreateChannelModal'; import { useParams } from 'react-router'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace = () => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const params = useParams<{ workspace?: string }>(); const { workspace } = params; const { data: userData, error, mutate } = useSWR<IUser | false>('http://localhost:3095/api/users', fetcher); const { data: channelData } = useSWR<IChannel[]>( userData ? `http://localhost:3095/api/workspaces/${workspace}/channels` : null, fetcher, ); const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then(() => { mutate(false, false); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); const onCloseUserProfile = useCallback((e: React.MouseEvent) => { e.stopPropagation(); setShowUserMenu(false); }, []); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal((prev) => !prev); }, []); const onCreateWorkspace = useCallback( (e: React.FormEvent) => { e.preventDefault(); // 필수 값이 들어있는지 검사 if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; axios .post( 'http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true }, ) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); }, []); const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal((prev) => !prev); }, []); if (!userData) { return <Navigate to="/login" />; } return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.email} /> <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onCloseUserProfile}> <ProfileModal> <img src={gravatar.url(userData.email, { s: '36px', d: 'retro' })} alt={userData.email} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu> </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces?.map((ws) => { return ( <Link key={ws.id} to={`${ws.url}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton>; </Workspaces> <Channels> <WorkspaceName onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu style={{ top: 95, left: 80 }} show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal}> <WorkspaceModal> <h2>Sleact</h2> <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> {channelData?.map((v) => ( <div>{v.name}</div> ))} </MenuScroll> </Channels> <Chats> <Routes> <Route path="/:workspace/channel/:channel" element={<Channel />} /> <Route path="/:workspace/dm/:id" element={<DirectMessage />} /> </Routes> </Chats> </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-name"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-label"> <span>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> </div> ); }; export default Workspace; // CreateChannel/index.tsx import Modal from '@components/Modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/SignUp/styles'; import { IChannel, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback } from 'react'; import { useParams } from 'react-router'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: React.FC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { const [newChannel, onChangeNewChannel, setNewChannel] = useInput(''); const params = useParams<{ workspace?: string }>(); const { workspace } = params; const { data: userData, error, mutate } = useSWR<IUser | false>('http://localhost:3095/api/users', fetcher); const { mutate: mutateChannel } = useSWR<IChannel[]>( userData ? `http://localhost:3095/api/workspaces/${workspace}/channels` : null, fetcher, ); const onCreateChannel = useCallback( (e: React.FormEvent) => { e.preventDefault(); axios .post( `http://localhost:3095/api/workspaces/${workspace}/channels`, { name: newChannel, }, { withCredentials: true }, ) .then(() => { setShowCreateChannelModal(false); mutateChannel(); setNewChannel(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newChannel, workspace], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onCreateChannel}> <Label id="channel-label"> <span>채널 이름</span> <Input id="workspace" value={newChannel} onChange={onChangeNewChannel} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> ); }; export default CreateChannelModal;

안녕하세요, 제로초 스쿨 커뮤니티 에 들어갈 수 없는데..... 이제 슬랙을 운영하시지 않으시는건가요 ??

백엔드에 배포하려고 파일 넘기기 전에,,빌드가 잘 되었는지 테스트해보려고 (백엔드 먼저 켜두고)index.html을 그냥 브라우저로 열면 백엔드와 잘 연동될줄 알았는데, 첫 화면부터 보이지가 않아서요. 그 이유가 궁금합니다.이유가 혹시,,, 웹펙에서devServer: { historyApiFallback: true, // react router(원래 SPA에서는 3090/ 주소밖에 모른다. 뒤에 /login같은 경로는 우리가 가짜로 만들어낸건데 History api(History 기본함수)가 가짜주소를 만들어주는 거다.) port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { //프론트에서 /api/로 보내는 요청은 주소를 3095로 바꿔서 보내겠다 target: 'http://localhost:3095', changeOrigin: true, }, }, },위와 같이 dev모드일때는 3090포트 개발서버를 항상 켜두는데, 이처럼 뭔가 서버가 계속 켜있어야 프론트가 잘 작동 가능한건가요?? (그래서 배포할때 백엔드서버는 항상 켜있으니까 그냥 넘겨주면 된다는게 이해가 되는거 같아서요) 만약 그렇다면 프론트인데 빌드 결과물이 있는데 왜 계속 프론트만을 위한 서버가 켜있어야 하는지 궁금합니다,,저는 배포파일이 실행파일마냥 그냥 index.html 실행하면 (백엔드 켜져있어서 통신할 수 있다는 가정하에) 알아서 잘 되는줄 알았거든요,,

제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다.그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다.근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다..Workspace/index.tsximport axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; return( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu>} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace;Modal/index.tsximport React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal;swr2.0 버전, react v18, typescript v18swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.

제로초님 영상을 보고 따라하는 도중 Menu의 index.tsx작성 후에 Workspace로 옮겼는데, Module을 찾을 수 없다고 뜨는데, 어디가 잘못 된건지 모르겠습니다... components/Menu/index.tsximport React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; Workspace/index.tsximport React, { FC } from 'react'; import { CreateMenu } from './style'; const Menu: FC<React.PropsWithChildren<{}>> = ({ children }) => { return ( <CreateMenu> <div>menu</div> {children} </CreateMenu> ); }; export default Menu; 에러메세지입니다.혹시 몰라서 터미널에 뜬 에러메세지도 첨부하겠습니다

제로초님, layouts폴더에 App.tsx에서import React from "react"; import loadable from '@loadable/component'; import { Routes, Route, Navigate } from "react-router-dom"; const LogIn = loadable(() => import("@pages/Login")); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App = () => { return ( <Routes> <Route path="/" element={<Navigate replace to="/login" />} /> <Route path="/login" element={<LogIn />} /> <Route path="/signup" element={<SignUp />} /> <Route path="/workspace/channel" element={<Channel />} /> </Routes> ) } export default App;Route의 4번째줄 path에 /workspace로 하면 로그아웃 할 때 제대로 작동하는데 저렇게 workspace/channel로 코드를 작성하면 로그아웃 할 때, 아래처럼 뜹니다/를 하나만 붙여야 되는건가요?나머지 코드들은 변경하지 않았습니다.Login 폴더 index.tsximport useInput from "@hooks/useInput"; import axios from "axios"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles'; import {Link, Navigate} from 'react-router-dom'; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; const LogIn = () => { const {data, error, mutate} = useSWR('/api/users', fetcher); const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback((e: any) => { e.preventDefault(); setLogInError(false); axios .post( '/api/users/login', {email, password}, {withCredentials: true}, ) .then((response) => { mutate(response.data, false); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }) }, [email, password, mutate]); if(data === undefined) { return <div>로딩중...</div> } if(data) { return <Navigate to="/workspace/channel" /> } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>} </Label> <Button type="submit">로그인</Button> </Form> <LinkContainer> 아직 회원이 아니신가요?&nbsp; <Link to="/signup">회원가입 하러가기</Link> </LinkContainer> </div> ); }; export default LogIn; workspace.tsximport axios from "axios"; import React, { FC, useCallback } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate } from "react-router-dom"; const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data, error, mutate} = useSWR('/api/users', fetcher); const onLogout = useCallback(() => { axios.post('api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); if(data === false) { return <Navigate to="/login" /> } return( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ) } export default Workspace;swr은 2버전입니다.

제로초님, 전 강의 듣고 할 때만 해도 잘 됐는데 오늘 쉬고 다시 해보니까 이런 오류 메세지가 뜹니다.해결해보려고 해도 잘 안되네요..Cannot read properties of undefined (reading 'data')SignUp 폴더에서 index.tsx에 문제가 있다고 떠서 코드 올립니다import useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error, Success} from './styles' import axios from "axios"; import {Link} from 'react-router-dom'; // 타입스크립트는 간단하게 말하면 변수, 매개변수, 리턴 값에 타입을 붙여줌 // 변수에는 딱히 타입을 붙여주지 않아도 된다 타입스크립트가 알아서 추론하기 때문에(리턴값도 마찬가지) 그러나 매개변수에는 붙여주어야됨 const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const [signUpError, setSignUpError] = useState(''); const [signUpSuccess, setSignUpSuccess] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback( (e: any) => { e.preventDefault(); if (!mismatchError && nickname) { console.log('서버로 회원가입하기'); setSignUpError(''); setSignUpSuccess(false); axios .post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); setSignUpSuccess(true); }) .catch((error) => { console.log(error.response); //여기가 문제가 있다고 뜹니다. setSignUpError(error.response.data); }) .finally(() => {}); } }, [email, nickname, password, passwordCheck, mismatchError], ); return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} /> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickName} /> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} /> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck} /> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요.</Error>} {signUpError && <Error>{signUpError}</Error>} {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <Link to="/login">로그인 하러가기</Link> </LinkContainer> </div> ); }; export default SignUp; 

https://github.com/ZeroCho/sleact에서 code로 가서 zip파일을 다운 받았습니다.이후 git clone https://github.com/zerocho/sleact 명령어를 입력한 후, back 폴더에서 npm i까지 마쳤는데, 저는 강의 내용과 다르게 config 폴더가 비어 있습니다.어떤 부분에서 잘못 따라 하였는이해를 못해서 깃 관련 구글링을 해보다가 결국 질문 드립니다.

tsconfig.json(ts -> js)로 바꿔주고,그 후에 webpack.config.ts가 js,css,html들을 하나로 번들링해주는 순서가 맞나요??$webpack 실행하면 웹팩 프로그램이 그냥 알아서 tsconfig.json이 있으면 먼저 적용한후 webpack.config.ts를 적용하는건가요?