📚금일 학습 내용

프로젝트 초기 세팅

🚀로고 설정

루키!
능력 있는 여러 팀원들의 도움으로 디자인을 진행하고 있다. 특히 로고와 favicon은 그 중 하나인데 오늘 여러 시안 중 한 가지 로고를 정했고 위 이미지이다. 팀원분께서 여러 시안을 가지고 오셨고, 개인적으로 모두 만족스러웠지만 취향에 따른 한 가지 로고를 각자 골랐는데, 우리 팀원이 4명이여서 그런지 동률이 발생했다.

그래서 매니저님한테 투표를 부탁드렸고 결과적으로 채택된 것이 위 이미지이다! 개인적으로 정말 마음에 든다ㅎㅎ 그리고 귀여운 favicon도 있다!

🚀라우팅 설정, API 설정

✨ 라우팅 설정

react-router와 react-router-dom이 있는데 우리는 조금 더 확장된 개념의 react-router-dom을 채택했다.

여러 프로젝트 기초 세팅이 있지만 동시다발적으로 빠르게 개발해야 하는 상황에서 기본적인 url 페이지 세팅이 가장 중요했고, 그래서 우리 팀원들과 함께 라우팅 작업을 페어코딩으로 먼저 진행했다.

아래와 같이 createBrowserRouter을 통해서 생성했다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <SplashPage />,
  },
  {
    path: "/home",
    element: <App />,
  },
  {
    path: "/login",
    element: <LoginPage />,
  },
  ...중략

다만 react-router-dom이 v6로 업데이트 되면서 useRoutes를 더 많이 사용하는 것 같은데 일단 관련 내용에 집중할 시간은 없어서 createBrowserRouter으로 생성 구현했다. 방법의 차이는 거의 없는 것 같은데 내부적인 차이가 있나보다
관련 포스팅

✨ API 설정

여러 API 세팅들이 있고 라이브러리가 있지만 우리는 팀원 중 한명의 방식을 채택하기로 했다.
그 이유로는 추상화와 사용이 편리하다는 것이였는데 사용 흐름을 보면 다음과 같다.
기본적인 axios를 create하는 함수 -> 각 http 메서드별 axios 함수 -> 앞선 함수들을 이용하여 생성, 사용하는 API 로직들의 순서로 잘 추상화 되어있었고, 결국 추후 사용할 때는 앞선 함수들을 이용하여 생성, 사용하는 API 로직만 잘 개발해서 사용하면 되어서 채택했다.

📖소회

Velog가 잘 업데이트되는 것 같아서 좋은데 자꾸 포스팅이 날아간다... ㅡㅡ
빠른 속도로 개발을 시작했고, 그래서 중간중간 정해야 하는 부분도 많을 것 같은데, 팀원들 모두 소통이나 개발에 있어서 잘 해주셔서 너무 감사하다. 이제 본격적인 개발 시작인데 나도 개발에 정말 열중해야겠다!
내일도 화이팅🔥🔥🔥
TIL 작성 소요 시간 약 20분