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

inflearn1

작성한 질문수

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

Q&A(CRA를 안 쓰는 이유)

프리티어와 린트가 먹히질 않습니다. 그리고 웹팩 돌린후 dist 폴더가 생성되지 않습니다.(깃 주소첨부)

작성

353

1. 이상하게 프리티어랑 린트가 먹히질 않는 것 같습니다..

vscode쓰는데 설정파일 같이 첨부드립니다.. (setting.json)

{
    "workbench.colorTheme": "Atom One Dark",
    "workbench.iconTheme": "material-icon-theme",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [
        {"mode": "auto"}
    ],
    "eslint.validate": [
        "javascript",
        "typescript"
    ],
    "explorer.confirmDelete": false,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.shellArgs.windows": [
        "--login"
    ],
}

2. 그리고 웹팩 번들링 작업후 /dist 폴더가 생성이 안되는데 에러는 딱히 안나는것 같은데 이유를 잘 모르겠습니다.

https://github.com/SeokSuMin/slaectSumin/tree/master

react babel Socket.io 웹팩 typescript 클론코딩

답변 1

제로초(조현영)

지식공유자

1. vs code는 제가 안 써서 잘 모르겠습니다. node_modules 안에 설치된 것은 맞죠?

2. dist 폴더는 개발시에는 안 생깁니다. 배포 시에만 생깁니다.

inflearn1

질문자

1. 네, node_modules에 설치했는데, 좀더 알아봐야겠네요

2. 아 dev서버를 쓰면 dist폴더가 생성이 안되는건가요? 근데, npm run dev하고 브라우저 실행하면 아무런 화면이 안나오는 현상은 왜 그런걸까요? 현재 올린 url의 깃 프로젝트가 지금 그렇거든요...

답변감사합니다.

제로초(조현영)

지식공유자

브라우저나 터미널 콘솔에 에러 메시지 없으신가요?

inflearn1

질문자

혹시 이 경고가 화면에 아무런 컴포넌트가 안나오는 원인일까요?

http://localhost:3090/(여기에 아무url을쳐도 반응이 같음)

웹웹팩결과

````

$ npm run dev

> sleact-front@1.0.0 dev C:\Users\user\Desktop\sumin\sleact-front

> cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack serve --env devalopment

i ｢wds｣: Project is running at http://localhost:3090/

i ｢wds｣: webpack output is served from /dist/

i ｢wds｣: Content not from webpack is served from C:\Users\user\Desktop\sumin\sleact-front

i ｢wds｣: 404s will fallback to /index.html

@babel/preset-env: `DEBUG` option

Using targets:

{

"chrome": "89"

}

Using modules transform: auto

Using plugins:

syntax-class-properties

syntax-numeric-separator

syntax-nullish-coalescing-operator

proposal-optional-chaining { chrome }

syntax-json-strings

syntax-optional-catch-binding

syntax-async-generators

syntax-object-rest-spread

syntax-dynamic-import

proposal-export-namespace-from { }

syntax-top-level-await

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.

i ｢wdm｣: asset app.js 1.66 MiB [emitted] (name: app)

asset vendors-node_modules_emotion_styled_base_dist_emotion-styled-base_browser_esm_js.js 104 KiB [emitted] (id hint: vendors)

asset pages_SignUp_index_tsx.js 48.8 KiB [emitted]

asset pages_Login_index_tsx.js 4.74 KiB [emitted]

runtime modules 30.4 KiB 16 modules

orphan modules 10.1 KiB [orphan] 2 modules

modules by path ./node_modules/ 1.56 MiB 82 modules

modules by path ./pages/ 48.3 KiB

./pages/Login/index.tsx 2.74 KiB [built] [code generated]

./pages/SignUp/index.tsx 5.19 KiB [built] [code generated]

./pages/SignUp/styles.tsx 40.4 KiB [built] [code generated]

./client.tsx 2.82 KiB [built] [code generated]

./layout/App.tsx 3.38 KiB [built] [code generated]

sleact (webpack 5.37.0) compiled successfully in 3467 ms

i ｢wdm｣: Compiled successfully.

````

제로초(조현영)

지식공유자

일단 devalopment 오타 있고요. 네트워크탭 켠 채로 새로고침해서 빨간 색 있는지 확인해주세요

inflearn1

질문자

와.. 진짜 감사합니다. 저기에 오타가 하나 있었군요... 네트워크 탭에선 별도 빨간색은 나타나지 않았었습니다.. 다시한번 감사드립니다.

inflearn1

작성한 질문수

전체 Q&A

질문하기