inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 게임을 만들며 배우는 React

2-3. 웹팩 설치하기

안녕하세요! 몇번씩 확인을 했는데도 hello webpack 이 출력이안되는데 어떻게해결을해야할까요ㅠㅠ 유튜브에서 메일을 찾아서 보냈었는데 없는 메일이라더라구요 흑흑

824

세리

작성한 질문수 2

0

[제로초 강좌 질문 필독 사항입니다]
질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.
도움이 되는 질문을 하는 방법을 알려드립니다.

https://www.youtube.com/watch?v=PUKOWrOuC0c

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

react

답변 9

1

제로초(조현영)

3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.

0

세리

복붙해서 하나하나 비교해봤는데 ("") 가 ('')로 되어서 안되던거였네요 감사합니다 해결 되었습니다ㅠㅠ

0

세리

네 client.jsx 파일 test파일 안에 있습니다!

 

0

제로초(조현영)

https://github.com/ZeroCho/react-webgame/blob/master/2.%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0

여기 파일들 전부 복사해서 쓰세요. 오타가 있는게 확실한 데 찾지를 못하겠습니다.

0

세리

ERROR in app

Module not found: Error: Can't resolve './client' in '/Users/alice/project/test'

resolve './client' in '/Users/alice/project/test'

  using description file: /Users/alice/project/test/package.json (relative path: .)

    Field 'browser' doesn't contain a valid alias configuration

    using description file: /Users/alice/project/test/package.json (relative path: ./client)

      no extension

        Field 'browser' doesn't contain a valid alias configuration

        /Users/alice/project/test/client doesn't exist

      js

        Field 'browser' doesn't contain a valid alias configuration

        /Users/alice/project/test/clientjs doesn't exist

      jsx

        Field 'browser' doesn't contain a valid alias configuration

        /Users/alice/project/test/clientjsx doesn't exist

      as directory

        /Users/alice/project/test/client doesn't exist

 

wordrelay-setting (webpack 5.65.0) compiled with 1 error in 70 ms

alice@MacBook-Pro test % 

 

 

npx webpack 했을때 오류나네요,,

 

0

제로초(조현영)

코드에 오타가 있을겁니다. client.jsx는 test폴더 안에 존재하나요?

0

세리

감사합니다!! 오류는 안나는데 출력은 여전히 안되네요근데..

 

0

세리

아죄송합니다 ..

npm ERR! code EINVALIDTAGNAME

npm ERR! Invalid tag name "@babel-loader": Tags may not have any characters that encodeURIComponent encodes.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/alice/.npm/_logs/2021-12-21T02_01_16_181Z-debug.log

alice@MacBook-Pro test % npm i -D @babel-loader

npm ERR! code EINVALIDTAGNAME

npm ERR! Invalid tag name "@babel-loader": Tags may not have any characters that encodeURIComponent encodes.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/alice/.npm/_logs/2021-12-21T02_06_35_284Z-debug.log

0

제로초(조현영)

npm i babel-loader입니다. 앞에 @ 없습니다.

0

제로초(조현영)

그리고 버전을 제 깃헙 소스랑 맞춘 뒤 npm i 만 하시면 됩니다. 일일이 따로 설치할 필요 없습니다.

0

세리

@babel-loader에서 잘못된 태그이름이라고 오류가났는데 코드상 문제가있을까요..

module: {
rules: [{
test:/\.jsx?/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
}],

}, 

0

제로초(조현영)

제발 에러메시지 그대로 올려주세요. ㅠㅠ

0

세리

Uncaught SyntaxError: app.js:1

Cannot use import statement outside a module

index.html:40 Live reload enabled.개발자도구에선 이 에러가뜨고 , 웹팩 강좌이후 안됩니다ㅜㅜ

 

0

제로초(조현영)

버전 문제인데요. 제 깃헙 버전과 맞춘 후 npm i로 설치해서 다시 실행해보세요.

https://github.com/ZeroCho/react-webgame/blob/master/2.%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0/package.json

0

세리

index부분은 아닌거같은데 

const path = require("path");

module.exports = {
name:'wordrelay-setting',
mode:'development',//실서비스에선 production
devtool:'eval',
resolve: {
extensions:['js','jsx']
},
entry: {
app:['./client'],
},//입략

module: {
rules: [{
test:/\.jsx?/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
}],
},

output: {
path:path.join(__dirname, 'dist'),
filename:'app.js'
},//출력
};
아마 여기가 아닐까 싶습니다ㅜㅜ
웹팩다운중 잘못된건지 app.js도 강사님처럼 안뜨고
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/
/******/
/******/ })()
;이렇게만 뜹니다ㅜㅜ

0

제로초(조현영)

개발자도구를 켰을 때 에러는 없나요? 웹팩 강좌 들어온 이후 아예 안 되는 건가요?

npm run dev 실행 시 포트가 안뜨는 문제

0

235

2

timeouts.current를 useEffect 의 input값으로 넣었을때

0

95

2

렌더링 테스트 코드 (Hooks)

0

92

1

Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

0

164

1

해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

1

204

1

강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ

0

105

1

useMemo와 useCallback 사용 시기

0

217

2

onRightClickTd가 작동을 하지 않습니다.

0

233

1

action.type 불러오는 방식

0

225

2

onClickRedo 질문

0

176

1

const Try = require(./Try) 빨간줄

0

258

1

npx webpack 실행시

0

323

1

지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.

0

240

1

강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?

0

318

1

react devtool이 enable 않됩니다.

0

544

2

React 랜더링이 되지 않습니다.

0

421

2

비동기로 동작하는 setState에 대해서

0

337

1

npm run dev 할 때 에러발생

0

494

2

memo, PureComponenet, shouldComponentUpdate 관련 질문

0

210

1

devMiddleware의 필요성

0

357

1

리액트에서 화살표 함수를 사용해야하는 이유

0

946

2

path.join관련질문

0

287

2

2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러

0

384

1

next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니

1

502

4