[4주차 기본/심화/공유 과제] API 통신 #8
Conversation
| <Router> | ||
| <Routes> | ||
| <Route path="/" element={<Login />} /> | ||
| <Route path="/signin" element={<SignIn />} /> | ||
| <Route path="/mypage" element={<MyPage />} /> | ||
| </Routes> | ||
| </Router> |
There was a problem hiding this comment.
<BrowserRouter>를 사용해서 라우팅을 구현해주셨네요!
그런데, 이 방식 대신 createBrowserRouter를 사용하는 것을 더 추천드리고 싶어요!
결론부터 말씀드리면, createBrowserRouter는 라우트 설정을 보다 명시적이고 구조적으로 작성할 수 있도록 도와주는 최신 API입니다.
또한, 코드가 더 직관적이고 관리하기 쉬워지는 장점이 있어요.
문제점
-
라우트 설정의 명시성 부족
<BrowserRouter>방식은 라우트와 컴포넌트들을 JSX 안에서 설정해야 하기 때문에, 라우트 구조가 복잡해질수록 관리가 어려워질 수 있습니다. -
코드의 확장성과 유지보수
createBrowserRouter는 라우트를 객체 형태로 정의하여 별도 파일로 분리하거나 재사용하기 쉬운 구조를 제공합니다. 이런 방식은 코드 확장성과 유지보수에 유리합니다.
따라서, createBrowserRouter를 활용하면 아래와 같은 방식으로 작성할 수 있어요:
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: '/',
element: <Home />,
children: [
{ path: 'about', element: <About /> },
{ path: 'contact', element: <Contact /> },
],
},
]);
<RouterProvider router={router} />;위와 같은 방식은 라우트 구성과 UI 구성이 분리되기 때문에 코드의 가독성과 확장성이 더 좋아집니다!
관련 공식 문서 한 번 읽어보시는 것도 추천드려요 😊
| <> | ||
| <LoginInput/> | ||
| </> |
There was a problem hiding this comment.
| <> | |
| <LoginInput/> | |
| </> | |
| <LoginInput/> |
요렇게만 해주셔도 될 것 같아요!
| &:hover { | ||
| background-color: #D1A1E0; | ||
| } |
There was a problem hiding this comment.
themeProvider를 이용해서 프로젝트에서 사용하는 color값들을 지정해놨기 때문에, theme에서 가져다 쓰는것이 좋습니다.
그래야 나중에 유지보수도 쉽고, 일관성이나 가독성 측면에서도 더 좋습니다!
| <Link to="/signin" css={{ width: '100%' }}> | ||
| <button css={signInBtn}>회원가입</button> | ||
| </Link> |
There was a problem hiding this comment.
여기도 inline-style도 스타일링 하기보다는 다른 곳처럼 일관성있게 css객체 따로 선언해서 넣어주면 더 좋을 것 같아요~
| const response = await fetch("http://211.188.53.75:8080/user", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ | ||
| username: userData.username, | ||
| password: userData.password, | ||
| hobby: userData.hobby, | ||
| }), | ||
| }); |
There was a problem hiding this comment.
요기는 왜 axios가 아니라 fetch함수를 사용하셨나요?
다른 부분을 보니 axios를 사용하셨던데, 일관성있게 요기도 axios로 통일해주는 것이 더 좋아보여요!
axios가 이런저런 기능을 많이 제공해주기도하고, 쓰기도 더 간단하구요!
| const response = await axios.get("http://211.188.53.75:8080/user/my-hobby", { | ||
| headers: { | ||
| token: token, |
There was a problem hiding this comment.
api를 호출할 때마다, baseUrl을 입력하고, headers를 set해주는것이 중복이 많으니 axios의 instance를 사용해보는 것도 좋은 방법일 것 같습니다!
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (token) getMyHobby(); |
There was a problem hiding this comment.
getMyHobby 함수내에서도 token 유무를 확인하고 있어서, 둘 중 한군데에서만 체크해도 괜찮을 것 같습니다
| export const myMent = css` | ||
| `; |
| export const myhobby = css` | ||
| font-family: "NanumB"; | ||
| color: blueviolet; | ||
| `; | ||
| export const myhobbycontent = css` | ||
| font-family: "NanumR"; | ||
| color: purple; | ||
| margin-bottom: 2rem; | ||
| `; | ||
| export const other = css` | ||
| font-family: "NanumB"; | ||
| color: blueviolet; | ||
| `; |
There was a problem hiding this comment.
myhobby와 other이 아예 똑같은 코드인데, css객체의 재사용을 고려해보는 것도 좋을 것 같습니다!
| import MyProfile from "../../components/mypage/myprofile"; | ||
|
|
||
| const MyPage = () => { | ||
| const [currentTab, setCurrentTab] = useState("hobby"); |
There was a problem hiding this comment.
| const [currentTab, setCurrentTab] = useState("hobby"); | |
| const [currentTab, setCurrentTab] = useState<"hobby" | "profile">("hobby"); |
와 같은 방식으로 특정 문자열만 올 수 있는 state의 경우 타입을 조금 더 구체적으로 지정해주면 더 안전한 코드를 작성할 수 있을 것 같아요!
✨ 구현 기능 명세
💡 기본 과제
취미,내 정보메뉴 탭로그아웃버튼취미,내 정보취미 페이지, 내 정보 페이지 출력 (1개의 페이지로 구현해도 되고, url 달라도 됨)🔥 심화 과제
공유과제
제목: TypeScript의 .d.ts 파일 🧐
링크 첨부 : https://wave-web.tistory.com/123
❗️ 내가 새로 알게 된 점
❓ 구현 과정에서의 어려웠던/고민했던 부분
useEffect(() => { const storedToken = localStorage.getItem("token"); setToken(storedToken); }, []);useEffect(() => { if (token) getMyHobby(); }, [token]);해당 코드를 추가해서 새로고침 없이도 지금 로그인한 사용자의 취미가 불러와지는 것을 확인했습니다!
🥲 소요 시간
19h🖼️ 구현 결과물
week4.1.mp4
week4.2.mp4
week4.3.mp4