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

정보를 입력 후 회원가입 버튼을 클릭하면

콘솔창에 제로초님 화면처럼

정보들이 나열되지않습니다!

-백 콘솔창

Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'ChannelMembers' AND TABLE_SCHEMA = 'sleact'

Executing (default): SHOW INDEX FROM ChannelMembers FROM sleact

DB 연결 성공

GET /api/users 304 24.697 ms - -

GET /api/users 200 4.038 ms - 5

GET /api/users 304 2.241 ms - -

GET /api/users 304 3.459 ms - -

GET /api/users 304 2.637 ms - -

GET /api/users 304 2.528 ms - -

-회원가입 index

import useInput from '@hooks/useInput';
import { Header, Form, Label, Input,Error, Success, LinkContainer, Button } from "./style";
import fetcher from '@utils/fetcher';
import axios from 'axios';
import React, { useCallback, useState } from "react";
import { Redirect } from "react-router-dom";
import useSWR from 'swr';

const Signup = () => {
    const [email, setEmail] = useState('');
    const [nickname, setNickname] = useState('');
    const [password, setPassword] = useState('');
    const [passwordCheck,  setPasswordCheck] = useState('');
    const {data: userData} = useSWR('/api/users', fetcher);
    const [signupError, setSignUpError] = useState(false);
    const [signUpSuccess, setSignUpSuccess] = useState(false);
    const [mismatchError, setMismatchError] = useState(false);
    
    const onChangeEmail = useCallback (
        (e) => {
            setEmail(e.target.value);
        }, []);

    const onChangeNickname = useCallback (
        (e) => {
            setNickname(e.target.value);
        }, []);

    const onChangePassword = useCallback (
        (e) => {
            setPassword(e.target.value);
            setMismatchError(passwordCheck !== e.target.value);
        },
        [passwordCheck, setPassword],
    );

    const onChangePasswordCheck = useCallback(
        (e) => {
            setPasswordCheck(e.target.value);
            setMismatchError(password !== e.target.value);
        },
        [password, setPasswordCheck],
    );

    const onSubmit = useCallback(
        (e) => {
            e.preventDefault();
            if(!nickname || nickname.trim()) {
                return;
            }
            if(! mismatchError) {
                setSignUpError(false);
                setSignUpSuccess(false);
                axios
                    .post('/api/users', {email, nickname, password })
                    .then(() => {
                        setSignUpSuccess(true);
                    })
                    .catch((error) => {
                        console.log(error.response?.data);
                        setSignUpError(error.response?.data?.code ===403);
                    });
            }
        },
        [email, nickname, password, mismatchError],
    );

    if (userData) {
        return <Redirect to ="/workspace/sleact"/>;
    }

    return (
        <div id="container">
            <Header>Sleact</Header>
            <Form onSubmit={onSubmit}>
                <Label id="email-label">
                    <span>이메일 주소</span>
                    <div>
                        <Input type="email" id="email" name="email" value={email}
                        onChange={onChangeEmail}/>
                    </div>
                </Label>
                <Label id="nickname-label">
                    <span>닉네임</span>
                    <div>
                        <Input type="text" id="nickname" name="nickname" value={nickname}
                        onChange={onChangeNickname}/>
                    </div>
                </Label>
                <Label id="password-label">
                    <span>비밀번호</span>
                    <div>
                        <Input type="password" id="password" name="password" value={password}
                        onChange={onChangePassword}/>
                    </div>
                </Label>
                <Label id="password-check-label">
                    <span>비밀번호 확인</span>
                    <div>
                        <Input type="password" id="password-check" name="password-check" value={passwordCheck}
                        onChange={onChangePasswordCheck}/>
                    </div>
               
                    {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
                    {!nickname && <Error>닉네임을 입력해주세요</Error>}
                    {signupError && <Error>이미 가입된 이메일입니다.</Error>}
                    {signUpSuccess && <Success>회원 가입되었습니다! 로그인해주세요.</Success>}
                </Label>
                <Button type="submit">회원가입</Button>
                </Form>
                <LinkContainer>
                    이미 회원이신가요?&nbsp;
                    <a href="/login">로그인 하러 가기</a>
                </LinkContainer>
        </div>
    );
};


export default Signup;

-개발자도구 콘솔창

-개발자도구 네트워크

1. 요청 URL:

   http://localhost:3090/api/users

2. 요청 메서드:

   GET

3. 상태 코드:

   304 Not Modified

4. 원격 주소:

   [::1]:3090

5. 리퍼러 정책:

   strict-origin-when-cross-origin

6. 응답 헤더소스 보기

   1. access-control-allow-credentials:

      true

   2. connection:

      close

   3. date:

      Wed, 26 Apr 2023 05:29:10 GMT

   4. etag:

      W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"

   5. vary:

      Origin

   6. x-powered-by:

      Express

7. 요청 헤더소스 보기

   1. Accept:

      application/json, text/plain, /

   2. Accept-Encoding:

      gzip, deflate, br

   3. Accept-Language:

      ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

   4. Connection:

      keep-alive

   5. Host:

      localhost:3090

   6. If-None-Match:

      W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"

   7. Referer:

      http://localhost:3090/signup

   8. sec-ch-ua:

      "Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"

   9. sec-ch-ua-mobile:

      ?0

   10. sec-ch-ua-platform:

       "Windows"

   11. Sec-Fetch-Dest:

       empty

   12. Sec-Fetch-Mode:

       cors

   13. Sec-Fetch-Site:

       same-origin

   14. User-Agent:

       Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36