12.08 TIL

아름·2023년 12월 8일

아웃소싱 프로젝트

목록 보기

4/5

알고리즘 코드카타

알고리즘 풀이1

아웃소싱 프로젝트

오늘 진행한 것

UI 완성

로그아웃 상태에서는 회원가입, 로그인 버튼으로 전환
로그인 상태에서는 마이페이지, 게시물 올리기, 로그아웃 버튼으로 전환
삼항연산자로 로그인 상태를 반영해주기

import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { logout } from '../../redux/modules/authSlice';

<Stbutton>
          {isLogin ? (
            <>
              <Link to="/profile">
                <button>마이페이지</button>
              </Link>
              <Link to="/Write">
                <button>게시물 올리기</button>
              </Link>
              <button
                onClick={() => {
                  alert('정말 로그아웃 하시겠습니까?');
                  dispatch(logout());
                }}
              >
                로그아웃
              </button>
            </>
          ) : (
            <>
              <Link to="/register">
                <button>회원가입</button>
              </Link>
              <Link to="/login">
                <button>로그인</button>
              </Link>
            </>
          )}
        </Stbutton>

Header.jsx, styles.js 리팩토링

팀 프로젝트 rules에 따라 styled-components 분리하여 관리

// Common 폴더
// Header.jsx
import {
  StHeader,
  StLogo,
  StBtnInputWrapper,
  Stbutton,
  SearchContainer,
  SearchInput,
  SearchImage
} from './styles';

// styles.js
import styled from 'styled-components';

export const StBtnInputWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  gap: 50px;
`;
.
.

오류 발생

문제

상황
pages 폴더 > Login.jsx, Register.jsx에서 작업
component 폴더 > Register 폴더 > Signin.jsx, Signup.jsx로 리팩토링

기존에는 Login.jsx와 Register.jsx에서 쭉 작업을 해주고 있었다. 어느 정도 기술 구현 돼서 컴포넌트 분리를 위해 리팩토링을 하고 있던 와중 오류 발생..!

어제 발생 했던 오류 메시지와 굉장히 흡사했다. 어제도 결국엔 해결을 하지 못해서 코드를 다시 짰었는데 오늘도 또 똑같은 오류ㅠㅠ 이 상태로는 다른 페이지에서 로직을 짜도 계속 같은 문제가 발생 할 거 같아서 팀원분들께 도움을 요청해봤다.

해결

node_modules 폴더도 지우고 재설치하고 export, import의 경로 문제는 아닌지 오타는 없는지 일일히 모든 코드를 다 확인해봤는데 전혀 문제가 없었다. 팀원이 보시길 공통적으로 modules/authSlice의 경로 문제라고 하셨다. 경로를 잘 읽지 못하는 거 같아서 모든 파일의 import 경로를 하나하나 제대로 명시를 해줬다.

// signin.jsx
import { login } from 'redux/modules/authSlice';
↓
import { login } from '../../redux/modules/authSlice';

// configStore.js
import authSlice from 'redux/modules/authSlice';
↓
import authSlice from '../modules/authSlice';