inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

노드 리액트 기초 강의 #30 로그인 페이지 (2)

dispatch 오류가 났습니다.

599

용용

작성한 질문수 2

0

안녕하세요 강사님^^

제가 아래와 같이 코드를 작성했는데 이런 오류가 났습니다

오타도 다른 부분에서 다 확인했는데 제가 보기엔 없는것같습니다ㅠㅠ

그리고 Vs에서는 이런 에러 문구가 뜹니다.

일단 제 github 주소입니다.

https://github.com/yeonn0501/boiler-plate-ko

> boiler-plate@1.0.0 dev C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate

> concurrently "npm run backend" "npm run start --prefix client"

[0]

[0] > boiler-plate@1.0.0 backend C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate

[0] > nodemon index.js

[0]

[1]

[1] > client@0.1.0 start C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client

[1] > react-scripts start

[1]

[0] [nodemon] 2.0.4

[0] [nodemon] to restart at any time, enter `rs`

[0] [nodemon] watching path(s): *.*

[0] [nodemon] watching extensions: js,mjs,json

[0] [nodemon] starting `node index.js index.js`

[0] internal/modules/cjs/loader.js:969

[0]   throw err;

[0]   ^

[0]

[0] Error: Cannot find module 'C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\index.js'

[0]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)

[0]     at Function.Module._load (internal/modules/cjs/loader.js:842:27)

[0]     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

[0]     at internal/main/run_main_module.js:17:47 {

[0]   code: 'MODULE_NOT_FOUND',

[0]   requireStack: []

[0] }

[0] [nodemon] app crashed - waiting for file changes before starting...

[1] [HPM] Proxy created: /  -> http://localhost:3000

[1] i 「wds」: Project is running at http://192.168.0.14/

[1] i 「wds」: webpack output is served from

[1] i 「wds」: Content not from webpack is served from C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기

본강의\boiler-plate\client\public

[1] i 「wds」: 404s will fallback to /

[1] Starting the development server...

[1]

[1] Compiled with warnings.

[1]

[1] ./src/components/views/LoginPage/LoginPage.js

[1]   Line 2:8:  'Axios' is defined but never used  no-unused-vars

[1]

[1] ./src/_actions/user_action.js

[1]   Line 3:5:  'LOGIN_USER' is defined but never used  no-unused-vars

[1]

[1] ./src/App.js

[1]   Line 6:3:  'Link' is defined but never used  no-unused-vars

[1]

[1] C:/Users/Yeonji Kim/Desktop/개발자공부/따라하며 배우는 노드, 리액트 시리즈 - 기본강의/Boiler-plate/client/node_modules/process/browser.js

[1] There are multiple modules with names that only differ in casing.

[1] This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

[1] Use equal casing. Compare these module identifiers:

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\process\browser.js

[1]     Used by 2 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\react-error-overlay\lib\index.js

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\process\browser.js

[1]     Used by 1 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\axios\lib\defaults.js

[1]

[1] (webpack)/buildin/global.js

[1] There are multiple modules with names that only differ in casing.

[1] This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

[1] Use equal casing. Compare these module identifiers:

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\webpack\buildin\global.js

[1]     Used by 1 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\node-libs-browser\node_modules\punycode\punycode.js

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\webpack\buildin\global.js

[1]     Used by 3 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\symbol-observable\es\index.js

[1]

[1] (webpack)/buildin/module.js

[1] There are multiple modules with names that only differ in casing.

[1] This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

[1] Use equal casing. Compare these module identifiers:

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\webpack\buildin\module.js

[1]     Used by 2 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\node-libs-browser\node_modules\punycode\punycode.js

[1] * C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\webpack\buildin\module.js

[1]     Used by 1 module(s), i. e.

[1]     C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\Boiler-plate\client\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\Yeonji Kim\Desktop\개발자공부\따라하며 배우는 노드, 리액트 시리즈 - 기본강의\boiler-plate\client\node_modules\lodash\lodash.js[1]

[1] Search for the keywords to learn more about each warning.

[1] To ignore, add // eslint-disable-next-line to the line before.

[1]

[1] [HPM] Error occurred while trying to proxy request /api/users/login from localhost:3000 to http://localhost:3000 (EADDRINUSE) (https://nodejs.org/api/errors.html#errors_common_system_errors)

-----------------------------------------------------------------------------------------------------------------

화면에 뜬 에러입니다.

-------------------------------------------------------------------------------------------

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { loginUser } from '../../../_actions/user_action';

function LoginPage(props) {
    const dispatch = useDispatch();
    
    const [Email, setEmail] = useState("")
    const [Password, setPassword] = useState("")

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }

    const onSubmitHandler = (event) => {
        event.preventDefault();

        console.log('Email', Email)
        console.log('Password', Password)

        let body = {
            email: Email,
            password: Password
        }

        dispatch(loginUser(body))
            .then(response => {
                if(response.payload.loginSuccess){
                    props.history.push('/')
                }else{
                    alert('Error')
                }
            })

       
    }
    return (
        <div style={{ display:'flex', justifyContent:'center', alignItems:'center'
        ,width: '100%', height: '100vh', fontFamily: 'noto sans kr, sans-serif', fontWeight: '500', fontSize: '18px'
        }}>
            <form style={{display:'flex', flexDirection:'column'}}
                onSubmit={onSubmitHandler}
            >
                <label>Email</label>
                <input type="email" value={Email} onChange={onEmailHandler} />
                <label>Password</label>
                <input type="password" value={Password} onChange={onPasswordHandler} />
                <br/>
                <button type="submit">
                    Login
                </button>
            </form>
        </div>
    )
}

export default LoginPage

nodejs react

답변 2

1

John Ahn

안녕하세요 연지씨 !  
답이 좀 늦어서 죄송합니다 ^^ ! 

우선   package.json 보시면 

index.js를 처음에 못찾는다고 나오더라구요 그래서  

 "start": "node server/index.js",

    "backend": "nodemon server/index.js",

이렇게  server 디렉토리안에  index.js를 바라보게 바꿔주시구요 ^^ 

그리고  react 가 기본적으로 3000번 포트에서 뜨기 떄문에 

노드 서버는 다른 포트로 주시는게 더 좋아보입니다 ~ ! 

const port = 5000

우선 저는 5000으로 줄게요 ~ ! 

그리고  user_action 에서  

타입 줄떄는 ~ 

return{

        type: "LOGIN_USER",

        paylaod: request

    }

이거 에서요 ~ 

 return{

        type: LOGIN_USER,

        paylaod: request

    }

이렇게 해주세요 ^^ 

그리고 

setupProxy.js에서도     
target 부분은   

target: 'http://localhost:5000',

이렇게 5000번 으로 바꿔주세요 ~ 


그리고 마지막으로는 

거의 1시간 넘게 찾았네요 ㅠㅠ 

paylaod  를    payload 로 바꿔주세요 ^^;;;;  !      

수고하세요 ~ ! 

0

용용

앗 오타도 있었군요,, ㅠㅠ알려주신대로 수정하여 잘 해결됐습니다 감사합니다 강사님!!!

깃 이메일이랑 비번이 필요하다고 하네요

0

35

1

404 에러

0

102

1

34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.

0

119

1

로그인, 로그아웃, 토근 작동 안 함

0

239

0

9강 오류 어떻게 해결하나요?

0

194

1

localhost 에서 연결을 거부했습니다.

0

1927

4

포스트맨에서 true가 안떠요

0

150

1

왜 안되나요

0

129

1

몽고db 연결 오류가 납니다 위에껀 입력한 코드, 아래껀 터미널이에요

0

243

1

로그아웃 401 에러(Unauthorized)

0

504

2

암호가 해싱되지 않고 입력값 그대로 db에 저장되는 문제

0

149

1

7강중에서

0

162

2

User.findByToken is not a function

0

211

1

루트 디렉토리

0

270

1

useState

0

560

1

프록시 잘 설정했는데도 404 오류 뜨는 분들

5

875

6

webpack 관련 에러 질문

0

219

1

리액트 관련 질문

0

272

1

14강 로그아웃 안됨

0

318

1

mongoDB 데이터 확인하는 법

0

408

1

postman 에러

0

291

1

선생님 리덕스를 사용하면 어떠한 부분이 좋은지 알 수 있을까요?

0

234

1

다음과 같은 에러들이 발생합니다.

0

273

1

14강 로그아웃 기능 구현시 postman에서 Cannot POST 오류가 뜹니다.

0

379

1