1119 FE 회의록

오늘 할 일 🥚

• 멘토링 피드백
  • 로그인쪽 흐름 설계 (컴포넌트, 메소드)
  • 프로젝트 폴더 구조
• 이슈 정리

프로젝트 폴더구조

[Feature-Sliced Design: The Best Frontend Architecture

# 프로젝트 구조 FSD 적용
.
├── ...config (package.json, vite.config.ts)
├── public
└── src/
    ├── app/
    │   ├── App.tsx
    │   └── Router.tsx
    ├── pages/
    │   ├── home/
    │   │   ├── index.ts
    │   │   ├── ui
    │   │   └── model
    │   └── landing/
    │       ├── index.ts
    │       ├── ui
    │       └── model
    ├── widgets/
    │   ├── galaxy/
    │   │   ├── index.ts
    │   │   ├── ui
    │   │   ├── lib
    │   │   └── model
    │   ├── login/
    │   │   ├── index.ts
    │   │   ├── ui/
    │   │   │   ├── LoginModal.tsx
    │   │   │   └── index.ts
    │   │   ├── model/
    │   │   │   ├── verification.ts
    │   │   │   └── index.ts
    │   │   └── api/
    │   │       ├── login.ts
    │   │       └── index.ts
    │   └── signup/
    │       ├── index.ts
    │       ├── ui/
    │       │   ├── SignUpModal.tsx
    │       │   └── index.ts
    │       ├── model/
    │       │   ├── verification.ts
    │       │   └── index.ts
    │       └── api/
    │           ├── signUp.ts
    │           ├── duplicateCheck.ts
    │           └── index.ts
    ├── features/
    │   ├── backgroundStar/
    │   │   ├── index.ts
    │   │   ├── ui
    │   │   └── model
    │   └── entities/
    │       └── postStar/
    │           ├── index.ts
    │           ├── ui
    │           └── model
    └── shared/
        ├── api
        ├── config/
        │   └── constant.ts
        ├── lib/
        │   ├── hooks
        │   └── constant
        └── ui/
            ├── input/
            │   ├── Input.tsx
            │   └── index.ts
            ├── button/
            │   ├── Button.tsx
            │   └── index.ts
            └── modal/
                ├── Modal.tsx
                └── index.ts

리액트 라우터 v6를 이용해 쉽게 모달 만들기

• 모달 라우팅

  네, 페이지가 2개뿐이고 모든 동작이 모달에서 이루어지더라도 React Router를 사용하여 각 모달에 대한 라우팅을 설정할 수 있습니다. 이를 통해 사용자가 브라우저의 뒤로 가기 버튼을 클릭하면 이전 모달로 돌아갈 수 있게 하거나, 특정 URL을 통해 특정 모달을 직접 열 수 있게 할 수 있습니다. 아래는 React Router를 사용하여 모달 라우팅을 설정하는 간단한 예제입니다:

  jsx
  
  import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';
  import { useState } from 'react';
  
  function App() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/login" render={() => <ModalPage modalType="login" />} />
          <Route path="/signup" render={() => <ModalPage modalType="signup" />} />
        </Switch>
      </Router>
    );
  }
  
  function HomePage() {
    const history = useHistory();
  
    const openLoginModal = () => {
      history.push('/login');
    };
  
    const openSignupModal = () => {
      history.push('/signup');
    };
  
  // ...
  }
  
  function ModalPage({ modalType }) {
    const [isOpen, setIsOpen] = useState(true);
    const history = useHistory();
  
    const closeModal = () => {
      setIsOpen(false);
      history.push('/');
    };
  
    return (
      <>
        {isOpen && (
          <Modal onClose={closeModal}>
            {modalType === 'login' && <LoginForm />}
            {modalType === 'signup' && <SignupForm />}
          </Modal>
        )}
      </>
    );
  }

  위의 예제에서 HomePage 컴포넌트에서 로그인 또는 회원가입 모달을 열기 위해 history.push를 사용하여 라우트를 변경합니다. 그리고 ModalPage 컴포넌트에서는 modalType prop을 기반으로 어떤 모달을 표시할지 결정하고, 모달이 닫힐 때 루트 URL(/)로 라우트를 변경하여 모달을 닫습니다. 이렇게 하면 각 모달에 대한 URL을 가지게 되며, 사용자는 브라우저의 뒤로 가기 버튼을 사용하여 이전 모달로 돌아갈 수 있습니다.

useFetch 커스텀 훅

import { useState, useEffect } from 'react';
import axios from 'axios';

const BASE_URL = 'wow'; // import 해올 base url

export const useFetch = (api: string) => {
	const [data, setData] = useState<any>(null);
	const [loading, setLoading] = useState<boolean>(true);
	const [error, setError] = useState<any>(null);

	useEffect(() => {
		const fetchData = async () => {
			try {
				const res = await axios.get(BASE_URL + api);
				setData(res.data);
				setLoading(false);
			} catch (err) {
				setError(err);
				setLoading(false);
			}
		};
		fetchData();
	}, [api]);

	const refetch = async () => {
		setLoading(true);
		try {
			const res = await axios.get(BASE_URL + api);
			setData(res.data);
			setLoading(false);
		} catch (err) {
			setError(err);
			setLoading(false);
		}
	};

	return { data, loading, error, refetch }; // 원하는것만 구조분해할당으로 꺼내쓰기!
};