inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

setting/ts폴더 복붙해도 에러가 납니다

미해결

Slack 클론 코딩[실시간 채팅 with React]

양질의 강의 정말 잘 보고 있습니다 하지만 에러로 진행을 하지 못하고 있습니다 첫 강의부터 코드를 따라서 타이핑한 결과 > 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로 모두 재설치 했습니다 그럼에도 불구하고 아래같은 에러가 뜨는데 혹시 제가 빠뜨린 부분이 있을까요?

  • react
  • typescript
  • Socket.io
  • babel
  • 웹팩
  • 클론코딩
angryduck 댓글 2 좋아요 1 조회수 611

회원가입할때 500 에러가납니다.. cannot read property 'addMembers' of null

미해결

Slack 클론 코딩[실시간 채팅 with React]

이렇게 요청 보냈는데 500 에러가나네요.. back 파일이 잘못된걸까요 axios . post ( 'http://localhost:3095/api/users' , { email , nickname , password , }) . then (( response ) => { console . log ( response ); }) . catch (( error ) => { console . log ( error . response ); })

  • babel
  • 웹팩
  • typescript
  • react
  • Socket.io
  • 클론코딩
댓글 2 좋아요 0 조회수 360

InviteChannelModal 에 관해서 여쭤볼게 있습니다!

해결됨

Slack 클론 코딩[실시간 채팅 with React]

먼저 좋은 강의 감사드립니다 제로초님! 도움 많이 되고 있습니다. 여기서 위 그림과 같이 console을 찍어서 useParams를 통해 받아온 channel이 잘 들어오는지 확인을 하려했는데.. workspace는 잘 들어오는 반면 channel은 undefined로 나옵니다. 그래서 InviteChannelModal에서 SWR로 요청을 보낼 때 콘솔에 에러가 발생하구요! 제 생각에는 아래 그림과 같이 '일반'으로 라고 콘솔에 떠야할 것 같은데.. 이유를 잘 모르겠습니다.

  • 웹팩
  • Socket.io
  • react
  • babel
  • typescript
  • 클론코딩
댓글 1 좋아요 0 조회수 238

SPA에서 e.preventDefault()를 사용해야하는 이유가 뭔가요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault - 위의 링크에서 e.preventDefault() 함수가, 이벤트가 취소 가능한 경우 이벤트의 전파를 막지 않고 이벤트를 취소한다고 되어 있는데, 설명중에서 SPA에서 e.preventDefault() 사용해야한다고 하셨는데 이유가 궁금합니다.

  • react
  • babel
  • typescript
  • Socket.io
  • 웹팩
  • 클론코딩
넉리 댓글 1 좋아요 1 조회수 396

socket.io-client typescript 모듈 에러 관련

미해결

Slack 클론 코딩[실시간 채팅 with React]

현재 시점으로 npm i @types/socket.io-client하면 3.0.0 버전으로 설치가되어 2버전과 맞지 않아 에러가 나옵니다. 저 같은 경우는 제로초님의 깃헙에 올라와있는 json을 보고 1.4.35 버전으로 명시하여 설치하여 문제를 해결하였습니다. 혹시 문제 있으신 분 확인해보세요. npm i -D @types/socket.io-client@1.4.35

  • babel
  • Socket.io
  • 웹팩
  • react
  • typescript
  • 클론코딩
NOAH 댓글 11 좋아요 31 조회수 1924

dedupingInterval에 관련해서 질문드립니다!

미해결

Slack 클론 코딩[실시간 채팅 with React]

제가 이 강의를 듣고 이해한게 맞는지 궁금해서 질문올립니다! dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것이 맞는지 궁금합니다!

  • Socket.io
  • typescript
  • 웹팩
  • babel
  • react
  • 클론코딩
우동이 댓글 1 좋아요 2 조회수 730

안녕하세요! 타입스크립트 관련 질문있습니다. ㅎㅎ

미해결

Slack 클론 코딩[실시간 채팅 with React]

타입스크립트에서 함수컴포넌트를 만들때 const Test: React.FC = () => {} 이런식으로 작성하는것을 많이 보았는데 const Test = () => {} 이런식으로 React.FC을 생략해주는것이 좋은방식인가요???

  • 타입스크립트
  • babel
  • react
  • typescript
  • Socket.io
  • 웹팩
  • 클론코딩
댓글 2 좋아요 0 조회수 348

Login에서 mutate 대신 revalidate를 써야 하네요.

미해결

Slack 클론 코딩[실시간 채팅 with React]

저번에 mutate를 이용해서 서버에서 가져오는 데이터를 바로 data에 집어 넣는 식으로 했었는데, 그걸 유지했더니 리다이렉트 할때 에러가 나는 군요. .then((response) => { mutate(response.data) }) 리다이렉트를 할 때 워크스페이스 페이지가 열림과 동시에 user를 가져와야 에러가 안 생기는데, mutate를 쓰면 워크스페이스 페이지가 열릴 때 서버에 요청을 안보내네요... 그래서 실습 코드 뒤져보다가 revalidate를 쓴 걸 보고 revalidate를 쓰도록 코드를 수정했더니 workspace 들어가자마자 user 요청을 보내네요. 아직 알쏭달쏭 합니다. swr은 로컬 스토리지를 쓸때 디버깅을 하기가 어려운 것 같아요.

  • typescript
  • Socket.io
  • react
  • 웹팩
  • babel
  • 클론코딩
이상욱 댓글 2 좋아요 2 조회수 358

안녕하세요. 프론트엔드 세팅하기 챕터 질문입니다.

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요 zerocho님. 이번 강의에서 [프론트엔드 세팅하기] 챕터 관련해서 질문드립니다. 강의 후반부에서 babel이 image, css 파일 등을 js파일로 변환한다고 하셨는데 그게 아니라 webpack의 loader(style-loader, file-loader) 가 js파일로 번들링 해주는거 아닌가요? 혹시 제가 모르는 부분이 있나해서 이렇게 문의드립니다. 혹시 참고할만한 문서가 있다면 같이 주시면 도움 될 것 같습니다:) 감사합니다.

  • babel
  • react
  • typescript
  • Socket.io
  • 웹팩
  • 클론코딩
댓글 1 좋아요 0 조회수 233

socket.io 에 대한 간단한 질문

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요 선생님! 강의에서 사용한 socket.io에 대해 문득 궁금한 점이 들어 질문 남기게 되었습니다. 기존에 Websocket API 등장 이전에는 Ajax 통신 등으로 실시간 정보를 받아오기 위해 매번 요청을 보내야 했고, 그 과정에서 좀 더 효율성을 위해 Long Polling 또는 Streaming 방식 등이 등장했다고 이해했습니다. 반면 Websocket 의 경우 한 번 연결을 맺으면 그 연결을 유지하기 때문에 실시간 정보를 다루기 편하고 클라이언트와 서버간 양방향 통신 역시 용이하다고 소개된 것 같습니다, 이때 클라이언트와 서버 간의 통신은 등록한 이벤트 핸들러(?)를 통해 해당 이벤트가 감지되면 데이터를 내보내주는 등의 반응을 한다라고 이해했습니다. 여기서 드는 간단한 의문은 1) 클라이언트의 HTTP 요청 -> 서버가 수신 -> 서버에서 데이터 처리 -> 클라이언트에게 HTTP 응답 -> 연결 해제 2) 클라이언트에서 socket 연결 요청 -> 서버와 연결 -> 클라이언트에서 이벤트 발생 -> 서버가 감지 -> 서버에서 데이터 처리 후 전달 -> 다음 이벤트 대기... 와 같은 과정으로 이해가 되는데 HTTP요청이나 이벤트 발생 시 모두 서버에서 데이터를 처리해서 보내주는 로직은 동일한 것 같은데, 서버에서 매번 HTTP 요청을 받아 응답을 보내주는 것 보다 이벤트 핸들러(사실 이벤트가 맞는지는 확실히 모르겠습니다) 방식으로 처리하는 것이 효율이 더 좋은건가요? 글을 작성하다 보니 내용이 좀 두서가 없는 것 같은데 질문의 요지는, 클라이언트에서 서버로 요청을 보내고 이에 서버가 데이터를 보내주는 것은 둘 모두 동일한 로직인 듯 한데 이 요청이 HTTP 요청인가 아닌가에 따라 서버에 걸리는 부하의 차이가 꽤 큰 것 인지 궁금합니다. 번외) 아 그리고 선생님이 사용하시는 에디터에서 주로 함수의 인자에 음영처리되어 자동으로 데이터 타입이 표시가 되던데, 이는 Webstorm 에디터만의 기능인가요? 아니면 VSCode에서도 이를 적용할 수 있는 Extension이 있을까요? 감사합니다.

  • websocket
  • react
  • socket.io
  • Socket.io
  • 웹팩
  • typescript
  • babel
  • 클론코딩
KGinS 댓글 2 좋아요 0 조회수 441

인기 태그

인프런 TOP Writers

주간 인기글