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

용용님의 프로필 이미지
용용

작성한 질문수

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

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

dispatch 오류가 났습니다.

작성

·

505

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
nodejsreact

답변 2

1

John Ahn님의 프로필 이미지
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

용용님의 프로필 이미지
용용
질문자

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

용용님의 프로필 이미지
용용

작성한 질문수

전체 Q&A
질문하기