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

늦은 시간인데도 답변 달아주셔서 정말 감사합니다 ㅠㅠㅠㅠ


기존 slack에 있는 Login.tsx부분에서 /api/users get요청시 data가 없을 경우 
로딩중이라는 텍스트는 return하는 코드에서 나와요

아래는 Login.tsx입니다

import React, { useCallback, useState } from 'react';
import {
  Button,
  ButtonGroup,
  FillButton,
  Form,
  Header,
  Input,
  Label,
  LoginContainer,
  LoginContents,
  SignUpContainer,
  Error,
} from './styles';
import useSWR from 'swr';
import useInput from '@hooks/useInput';
import fetcher from '@utils/fetcher';
import axios from 'axios';
import { Link, Navigate, useNavigate } from 'react-router-dom';
import defines from '@constants/defines';

const Login = () => {
  const { data, error, revalidate, mutate } = useSWR(`${defines.server.url}/api/users`, fetcher);
  const [logInError, setLogInError] = useState(false);
  const [email, onChangeEmail] = useInput('');
  const [password, onChangePassword] = useInput('');
  const navigate = useNavigate();

  const onSubmit = useCallback(
    (e) => {
      e.preventDefault();
      setLogInError(false);
      axios
        .post(
          `${defines.server.url}/api/users/login`,
          { email, password },
          {
            withCredentials: true,
          },
        )
        .then((response) => {
          revalidate();
        })
        .catch((error) => {
          setLogInError(error.response?.status === 401);
        });
    },
    [email, password],
  );

  if (data === undefined) {
    return <div>로딩중...</div>;
  }

  if (data) {
    // return <Navigate to="/stock-record"></Navigate>;
    console.log('여기', data);
    navigate('/stock-record');
  } else {
    console.log('여기2', data);
  }

  return (
    <LoginContainer>
      <Header>주식 캘린더</Header>
      <Form onSubmit={onSubmit}>
        <Label>
          <span>이메일 주소</span>
          <div>
            <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
          </div>
        </Label>
        <Label>
          <span>비밀번호</span>
          <div>
            <Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
          </div>
          {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>}
        </Label>
        <FillButton type="submit" color="#60d6bf" marginBottom="20px">
          로그인
        </FillButton>
      </Form>
      <SignUpContainer>
        아직 회원이 아니신가요?&nbsp;
        <Link to="/signup">회원가입</Link>
      </SignUpContainer>
    </LoginContainer>
  );
};

export default Login;

아래는 router코드인데 말씀해주신 거처럼 주소가 index.html이여서

npm run dev로 실행하면 localhost:3090/ 이런식으로 주소가 되었는데

index.html이 localhost:3090부분이 아니거군요.. 그럼 이 부분을 어떻게 고쳐야하는지 알 수 있을까요...

s3에 있는 엔드포인트로 접속하면 흰화면만 나와서 저 주소를 들어가면 index.html을 클릭한거랑 같을거라 생각해서 지금 로컬에서 index.html을 실행해보고 있었거든요

  s3 엔드포인트로 접속했을 때 화면이미지는 코드 다음 이미지에 있습니다.

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import StockRecord from '@pages/StockRecord';
import loadable from '@loadable/component';
import Interest from '@pages/Interest';
import Category from '@pages/Category';
import MyPage from '@pages/MyPage';
import Test from '@pages/Test/Test';
import CategoryEdit from '@pages/CategoryEdit';
const SignUp = loadable(() => import('@pages/SignUp'));
const Login = loadable(() => import('@pages/Login'));
const Router = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/login"></Navigate>}></Route>
      <Route path="/login" element={<Login />} />
      <Route path="/signup" element={<SignUp />} />
      <Route path="/stock-record" element={<StockRecord />} />
      <Route path="/interest" element={<Interest />} />
      <Route path="/category-view" element={<Category />} />
      <Route path="/category-edit" element={<CategoryEdit />} />

      <Route path="/my-page" element={<MyPage />} />
      <Route path="/test" element={<Test />} />
    </Routes>
  );
};

export { Router };

애초에 리액트 라우터는 html 파일을 실행해서는 되지 않습니다. 웹팩데브서버나 vite같은 개발 서버 통해서 localhost 주소로 접속해야 제대로 동작합니다. 그렇게 한 뒤에 다시 해보세요.

그리고 s3쪽은 네트워크 탭도 한 번 봐보세요. Router상 /login으로 바로 넘어가야할 것 같은데 안 되고 있으면 뭔가 네트워크탭이나 콘솔탭에 에러가 있을 것 같은데요.

로컬에선 npm run dev일 경우에만 되는거였군요

npm run dev로 한 경우엔 정상으로 동작합니다

아래는 네트워크탭 스샷찍은 것인데 에러같은 건 보이지가 않아서 ... 제가 정말 지금 막막해서

제 스스로 답 찾기가 너무 막막해서요 ㅠㅠ 바로 화면만 보여드리게 되는거같습니다 ㅠㅠㅠ

아래엔 추가로 s3 파일 업로드 스샷화면입니다ㅠㅠ