fe `내 정보 조회`시 프론트에서 데이터 불러오지 못합니다.

조현영님 안녕하세요. 프론트, 백엔드 강좌를 잘 보고있습니다! 현영님의 강좌에서 useSwr를 사용하는법을 배우고, 백엔드도 구현해보고자 하여, 백엔드도 수강하게 되었습니다. 회원가입과 로그인을 하였을경우 정상적으로 작동하여, 로그인을 하였을경우, 프론트에게 쿠키값을 제대로 넘겨주고있지만, response 데이터를 받지 못하고있는데 원인을 알 수가 없습니다.

front에서 로그인 하였을시 나오는 콘솔

data user: {data: '', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
installHook.js:342 data user: {data: '', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
fetcher.ts:6 response: {data: '', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
index.tsx:91

back에서 로그인 request받았을때, 응답하는 콘솔

[Nest] 69849  - 06/28/2023, 10:09:06 AM     LOG [HTTP] GET /api/users 200 undefined - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ::1
query: SELECT DISTINCT `distinctAlias`.`Users_id` AS `ids_Users_id` FROM (SELECT `Users`.`id` AS `Users_id`, `Users`.`email` AS `Users_email`, `Users`.`nickname` AS `Users_nickname`, `Users__Users_Workspaces`.`id` AS `Users__Users_Workspaces_id`, `Users__Users_Workspaces`.`name` AS `Users__Users_Workspaces_name`, `Users__Users_Workspaces`.`url` AS `Users__Users_Workspaces_url`, `Users__Users_Workspaces`.`createdAt` AS `Users__Users_Workspaces_createdAt`, `Users__Users_Workspaces`.`updatedAt` AS `Users__Users_Workspaces_updatedAt`, `Users__Users_Workspaces`.`deletedAt` AS `Users__Users_Workspaces_deletedAt`, `Users__Users_Workspaces`.`OwnerId` AS `Users__Users_Workspaces_OwnerId` FROM `users` `Users` LEFT JOIN `workspacemembers` `Users_Users__Users_Workspaces` ON `Users_Users__Users_Workspaces`.`UserId`=`Users`.`id` LEFT JOIN `workspaces` `Users__Users_Workspaces` ON `Users__Users_Workspaces`.`id`=`Users_Users__Users_Workspaces`.`WorkspaceId` AND (`Users__Users_Workspaces`.`deletedAt` IS NULL) WHERE ( (`Users`.`id` = ?) ) AND ( `Users`.`deletedAt` IS NULL )) `distinctAlias` ORDER BY `Users_id` ASC LIMIT 1 -- PARAMETERS: [9]
query: SELECT `Users`.`id` AS `Users_id`, `Users`.`email` AS `Users_email`, `Users`.`nickname` AS `Users_nickname`, `Users__Users_Workspaces`.`id` AS `Users__Users_Workspaces_id`, `Users__Users_Workspaces`.`name` AS `Users__Users_Workspaces_name`, `Users__Users_Workspaces`.`url` AS `Users__Users_Workspaces_url`, `Users__Users_Workspaces`.`createdAt` AS `Users__Users_Workspaces_createdAt`, `Users__Users_Workspaces`.`updatedAt` AS `Users__Users_Workspaces_updatedAt`, `Users__Users_Workspaces`.`deletedAt` AS `Users__Users_Workspaces_deletedAt`, `Users__Users_Workspaces`.`OwnerId` AS `Users__Users_Workspaces_OwnerId` FROM `users` `Users` LEFT JOIN `workspacemembers` `Users_Users__Users_Workspaces` ON `Users_Users__Users_Workspaces`.`UserId`=`Users`.`id` LEFT JOIN `workspaces` `Users__Users_Workspaces` ON `Users__Users_Workspaces`.`id`=`Users_Users__Users_Workspaces`.`WorkspaceId` AND (`Users__Users_Workspaces`.`deletedAt` IS NULL) WHERE ( (`Users`.`id` = ?) ) AND ( `Users`.`deletedAt` IS NULL ) AND ( `Users`.`id` IN (9) ) -- PARAMETERS: [9]
getUsers user: Users {
  id: 9,
  email: 'sinde530@naver.com',
  nickname: '이카자',
  Workspaces: []
}
[Nest] 69849  - 06/28/2023, 10:09:18 AM     LOG [HTTP] GET /api/users 200 undefined - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ::1

코드들

// user.controller.ts

import {
  Body,
  Controller,
  Get,
  Post,
  Req,
  Res,
  UseGuards,
  UseInterceptors,
} from '@nestjs/common';

import {
  ApiCookieAuth,
  ApiOperation,
  ApiResponse,
  ApiTags,
} from '@nestjs/swagger';
import { LocalAuthGuard } from 'src/auth/local-auth.guard';
import { LoggedInGuard } from 'src/auth/logged-in.guard';
import { NotLoggedInGuard } from 'src/auth/not-logged-in.guard';
import { User } from 'src/common/decoraters/users.decorater';
import { UserDto } from 'src/common/dto/user.dto';
import { UndefinedToNullInterceptor } from 'src/common/interceptors/undefinedToNull.interceptor';
import { Users } from 'src/entities/Users';
import { SignUpRequestDto } from './dto/signup.request.dto';
import { UsersService } from './users.service';

@UseInterceptors(UndefinedToNullInterceptor)
@ApiTags('Users')
@Controller('api/users')
export class UsersController {
  constructor(private usersService: UsersService) {}

  @ApiResponse({
    status: 200,
    description: '성공',
    type: UserDto,
  })
  @ApiResponse({
    status: 500,
    description: '서버 에러',
  })
  @ApiCookieAuth('connect.sid')
  @ApiOperation({ summary: '내 정보 조회' })
  @Get()
  async getUsers(@User() user: Users) {
    console.log('getUsers user:', user);
    return user || false;
  }

  @ApiOperation({ summary: '회원가입' })
  @UseGuards(NotLoggedInGuard)
  @Post('signup')
  async signup(@Body() data: SignUpRequestDto) {
    await this.usersService.postUsers(data.email, data.nickname, data.password);
  }

  @ApiResponse({
    status: 200,
    description: '로그인 성공',
    type: UserDto,
  })
  @ApiResponse({
    status: 500,
    description: '서버 에러',
  })
  @ApiOperation({ summary: '로그인' })
  @UseGuards(LocalAuthGuard)
  @Post('signin')
  async signin(@User() user: Users) {
    return user;
  }

  @ApiOperation({ summary: '로그아웃' })
  @UseGuards(LoggedInGuard)
  @Post('logout')
  logOut(@Req() request, @Res() response) {
    request.logOut();
    response.clearCookie('connect.sid', { httpOnly: true });
    response.send('ok');
  }
}

// SignIn.tsx
import axios from 'axios';
import { useCallback, useState } from 'react';

import useInput from 'src/hooks/useInput';

import fetcher from 'src/utils/fetcher';
import useSWR from 'swr';
import {
    Button,
    Container,
    Form,
    InfoBox,
    Input,
    LoginInfoBox,
    LoginLink,
    LoginText,
    Logo,
    RegisterBox,
    RegisterErrorText,
    RegisterText,
    SubContainer,
    WelcomeBox,
    WelcomeText,
    WrapperImageLogo,
} from './styled';

export default function SignIn() {
    const { data, error, mutate } = useSWR(
        'http://localhost:3090/api/users',
        fetcher,
    );

    const [email, onChangeEmail] = useInput('');
    const [password, onChangePassword] = useInput('');

    const emailRegex = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    const [errors, setErrors] = useState({
        email: false,
        password: false,
        invalidEmail: false,
    });

    const [presentEmail, setPresentEmailError] = useState(false);
    const [loginError, setLoginError] = useState(false);

    const Image = 'https://dummyimage.com/600x400/000/fff';

    const handleSubmit = useCallback(
        async (e: any) => {
            e.preventDefault();

            const newErrors = {
                email: !email,
                password: !password,
                invalidEmail: !!(email && !emailRegex.test(email)),
            };

            setPresentEmailError(false);
            setErrors(newErrors);
            setLoginError(false);

            if (Object.values(newErrors).some((error) => error)) {
                return;
            }

            try {
                await axios
                    .post(
                        'http://localhost:3090/api/users/signin',
                        {
                            email,
                            password,
                        },
                        { withCredentials: true },
                    )
                    .then(() => {
                        mutate();
                    })
                    .catch((error) => {
                        setPresentEmailError(error.response?.data);
                        setLoginError(error);
                    });
            } catch (error) {
                console.error(error);
            }
        },
        [email, password, mutate],
    );

    console.log('data user:', data);

    if (error) console.log('error:', error);

    // if (!error && userData) {
    //     console.log('로그인됨', userData);
    //     return <Navigate to="/workspace/purrfect-chat/channel/general" />;
    // }

    return (
        <Container>
            <SubContainer>
                <WrapperImageLogo>
                    <Logo src={Image} alt="error" />
                </WrapperImageLogo>
                <RegisterBox>
                    <WelcomeBox>
                        <WelcomeText>Welcome to Purrfect Chat!</WelcomeText>
                    </WelcomeBox>
                    <Form>
                        <InfoBox>
                            {errors.email && (
                                <RegisterErrorText>
                                    이메일을 입력해 주세요.
                                </RegisterErrorText>
                            )}
                            {errors.invalidEmail && (
                                <RegisterErrorText>
                                    이메일 형식을 입력해 주세요.
                                </RegisterErrorText>
                            )}
                            {loginError && (
                                <RegisterErrorText>
                                    이메일 또는 비밀번호가 일치하지 않습니다.
                                </RegisterErrorText>
                            )}
                            {!errors.email &&
                                !errors.invalidEmail &&
                                !presentEmail && (
                                    <RegisterText>이메일</RegisterText>
                                )}
                            <Input
                                name="email"
                                type="text"
                                value={email}
                                onChange={onChangeEmail}
                            />
                        </InfoBox>

                        <InfoBox>
                            {errors.password && (
                                <RegisterErrorText>
                                    비밀번호를 입력해 주세요.
                                </RegisterErrorText>
                            )}
                            {loginError && (
                                <RegisterErrorText>
                                    이메일 또는 비밀번호가 일치하지 않습니다.
                                </RegisterErrorText>
                            )}
                            {!errors.password && !loginError && (
                                <RegisterText>비밀번호</RegisterText>
                            )}
                            <Input
                                name="password"
                                type="password"
                                autoComplete="true"
                                value={password}
                                onChange={onChangePassword}
                            />
                        </InfoBox>
                        <InfoBox>
                            <Button type="button" onClick={handleSubmit}>
                                로그인
                            </Button>
                        </InfoBox>
                        <LoginInfoBox>
                            <LoginText>아직 회원이 아니신가요?</LoginText>
                            <LoginLink to="/signup">
                                회원가입 하러가기
                            </LoginLink>
                        </LoginInfoBox>
                    </Form>
                </RegisterBox>
            </SubContainer>
        </Container>
    );
}

// fetcher.ts
import axios from 'axios';

const fetcher = async (url: string) => {
    try {
        const response = await axios.get(url, { withCredentials: true });
        console.log('response:', response);
        return response;
    } catch (error: any) {
        throw new Error(error.response?.data);
    }
};

export default fetcher;

back/main.ts

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import cookieParser from 'cookie-parser';
import session from 'express-session';
import passport from 'passport';
import { AppModule } from './app.module';
import { HttpExceptionFilter } from './httpException.filter';

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.useGlobalFilters(new HttpExceptionFilter());
  app.useGlobalPipes(
    new ValidationPipe({
      transform: true,
    }),
  );
  app.enableCors({
    origin: true,
    credentials: true,
  });
  const config = new DocumentBuilder()
    .setTitle('HTTP API ')
    .setDescription('개발 API 문서입니다.')
    .setVersion('1.0')
    .addCookieAuth('connect.sid')
    .build();

  const documnet = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, documnet);

  app.use(cookieParser());
  app.use(
    session({
      resave: false,
      saveUninitialized: false,
      secret: process.env.COOKIE_SECRET,
      cookie: {
        httpOnly: true,
      },
    }),
  );
  app.use(passport.initialize());
  app.use(passport.session());

  const port = process.env.PORT || 3090;
  await app.listen(port);
  console.log(`listening on port ${port}`);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();

async signin(@User() user: Users) {
    console.log('user', user);
    return user;
  }

user: { id: 9, email: 'sinde530@naver.com'}

import axios from 'axios';

const fetcher = async (url: string) => {
    try {
        const response = await axios.get(url, { withCredentials: true });
        console.log('response:', response);
        return response.data;
    } catch (error: any) {
        throw new Error(error.response?.data);
    }
};

export default fetcher;