안녕하세요! 몇번씩 확인을 했는데도 hello webpack 이 ... - 인프런

웹 게임을 만들며 배우는 React

2-3. 웹팩 설치하기

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

작성

636

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

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

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

react

답변 9

제로초(조현영)

지식공유자

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

세리

질문자

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

세리

질문자

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

제로초(조현영)

지식공유자

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

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

세리

질문자

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

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 했을때 오류나네요,,

제로초(조현영)

지식공유자

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

세리

질문자

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

세리

질문자

아죄송합니다 ..

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

제로초(조현영)

지식공유자

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

제로초(조현영)

지식공유자

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

세리

질문자

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

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

제로초(조현영)

지식공유자

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

세리

질문자

Uncaught SyntaxError: app.js:1

Cannot use import statement outside a module

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

제로초(조현영)

지식공유자

버전 문제인데요. 제 깃헙 버전과 맞춘 후 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

세리

질문자

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";
/******/ 
/******/ 
/******/ })()
;이렇게만 뜹니다ㅜㅜ

제로초(조현영)

지식공유자

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

인프런 커뮤니티 질문&답변

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