안녕하세요! 웹팩설정에서 질문이있습니다. 알거같다가도 헷갈려서 질문드려요! "webpack.config.ts 파일 내에서 const require 방식이 아닌 Import를 사용가능한 이유"가 어느부분때문인가요? tsconfig.json 에서 module을 esnext로 최신으로 쓰겠다고 설정했으므로 tsconfig를 웹팩이 먼저 읽어서, 웹팩 파일내부에서도 commonjs방식이아닌 import 방식이 가능한것이라고 이해하면 맞을지 궁금합니다. 그런데 이렇게 이해하면 tsconfig-for-webpack-config 파일에서는 또 module을 commonJs 로 해주기때문에 조금 헷갈립니다,,
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
안녕하세요! 먼저 강의 잘 들었습니다 강의보고 따라해보니 CRUD 프로그램 개발에는 조금이나마 이해가 됩니다 그런데 socket을 이용하여 tcp 통신을 해야하는 프로젝트를 진행중인데 nest.js 공식 문서를 보니 @SubscribeMessage('event_name') 을 이용하여 데이터를 받고 emit을 이용하여 event_name으로 주는 환경이더라고요?? 현재 서버를 nest.js 기반으로 개발하고 개발해 놓은 클라이언트(c++작성)에서 tcp 통신을 하기 위해서는 c++ 클라이언트에서도 socket.io를 활용하여 event_name 을 통하여 통신을 해야하는 것인가요? 아니면 event_name 없이 단순 tcp 통신을 통해 binary 데이터를 주고 받을 수 있는 서버 nest.js 환경이 있을까요?? 제가 socket.io에 대해 이해한 내용이 맞는건지도 잘 모르겠지만 답변 부탁드리겠습니다!
채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..
안녕하세요. 현재 "DM채팅하기" 강의를 진행하기 전에도 시크릿모드로 두개를 띄워서 해보면 지금도 채팅 통신이 가능한데 이상태에선 계속 서버로 보냈다가 다시 가져오고 그런 상태이기 때문에 소켓통신으로 바꾸려고 socket.on 을 추가하는 것인가요? 그러니까 useEffect(()=>socket?.on('dm', onMessage) 이부분을 하는 이유가 http프로토콜을 소켓 프로토콜로 바꾸는 개념인가요? 동작 방식이 좀 헷갈리네요.. 제가 이해한 부분이 맞을까요?
App 파트에서 workspace다음 와일드카드/* 를 표시해주셔야 합니다 workspace 안에서는 path에 /workspace/:workspace를 쓰면 App에서 workspace/:workspace/* 가 있어서 두개가 중복되기때문에 바로 /channel/: channel 로 path를 작성하시면 됩니다.
안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다. 해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
강의에서, setShowCreateChannelModal props의 타입을 (flag:boolean)=>void;라고 지정하셨는데, setState의 경우 기본적으로는 Dispatch<setStateAction<S>> 이런식이었던 것 같은데 이렇게 안쓰고 그냥 저렇게 쓸 수 있는 건가요?
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate : revalidateMembers } = useSWR ( userData ? `/api/workspaces/ ${ workspace } /channels/ ${ channel } /members` : null , fetcher , ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace , channel } = useParams (); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. < Switch > < Route path = "/workspace/:workspace/channel/:channel" component = { Channel } /> < Route path = "/workspace/:workspace/dm/:id" component = { DirectMessage } /> </ Switch >
안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
양질의 강의 정말 잘 보고 있습니다 하지만 에러로 진행을 하지 못하고 있습니다 첫 강의부터 코드를 따라서 타이핑한 결과 > sleact-ts-front@1.0.0 build > cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack [webpack-cli] Unable load 'C:\Users\nogo0\#code\LearnSlackClone\front\webpack.config.ts' [webpack-cli] Unable to use specified module loaders for ".ts". [webpack-cli] ⨯ Unable to compile TypeScript: error TS5083: Cannot read file 'C:\tsconfig-for-webpack-config.json'. [webpack-cli] Cannot find module 'typescript-node/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'typescript-require' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module 'sucrase/register/ts' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Cannot find module '@babel/register' from 'C:\Users\nogo0\#code\LearnSlackClone\front' [webpack-cli] Please install one of them npm ERR! code 2 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=\tsconfig-for-webpack-config.json\ NODE_ENV=production webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_10_13_340Z-debug.log C:\Users\nogo0\#code\LearnSlackClone\front>npm run build > front@1.0.0 build > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack asset app.js 4.13 KiB [emitted] (name: app) ../../../#code/LearnSlackClone/front/client.tsx 39 bytes [not cacheable] [built] [code generated] [1 error] ERROR in ../../../#code/LearnSlackClone/front/client.tsx Module build failed (from ../../../#code/LearnSlackClone/front/node_modules/babel-loader/lib/index.js): Error: Cannot find module 'C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\babel-loader\lib\index.js' Require stack: - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModuleFactory.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compiler.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\webpack.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\index.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\webpack-cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\lib\bootstrap.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack-cli\bin\cli.js - C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15) at Function.Module._load (node:internal/modules/cjs/loader:769:27) at Module.require (node:internal/modules/cjs/loader:997:19) at require (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\loadLoader.js:19:17) at iteratePitchingLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:182:2) at runLoaders (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\loader-runner\lib\LoaderRunner.js:397:2) at NormalModule.doBuild (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:646:3) at NormalModule.build (C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\NormalModule.js:791:15) at C:\Users\nogo0\#code\LearnSlackClone\front\node_modules\webpack\lib\Compilation.js:1242:12 front (webpack 5.24.2) compiled with 1 error in 67 ms npm ERR! code 1 npm ERR! path C:\Users\nogo0\#code\LearnSlackClone\front npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c cross-env TS_NODE_PROJECT=tsconfig-for-webpack-config.json webpack npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nogo0\AppData\Local\npm-cache\_logs\2021-06-22T08_11_20_386Z-debug.log ------------------------------------------------------- 위와 같은 에러가 발생하였고 갈피를 잡을수없어서 제로초님 깃허브를 참고하여 setting/ts폴더를 통쨰로 복붙하고 기존에 있던 node_modules, package-lcok.json을 삭제하고 npm i로 모두 재설치 했습니다 그럼에도 불구하고 아래같은 에러가 뜨는데 혹시 제가 빠뜨린 부분이 있을까요?
