• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.12.20 00:54 작성 조회수 435

0

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

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

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

답변 9

·

답변을 작성해보세요.

1

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

0

세리님의 프로필

세리

질문자

2021.12.21

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

0

세리님의 프로필

세리

질문자

2021.12.21

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

 

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

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

0

세리님의 프로필

세리

질문자

2021.12.21

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

 

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

0

세리님의 프로필

세리

질문자

2021.12.21

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

 

0

세리님의 프로필

세리

질문자

2021.12.21

아죄송합니다 ..

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 만 하시면 됩니다. 일일이 따로 설치할 필요 없습니다.

0

세리님의 프로필

세리

질문자

2021.12.21

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

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

}, 

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

0

세리님의 프로필

세리

질문자

2021.12.21

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

0

세리님의 프로필

세리

질문자

2021.12.20

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

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