[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 프로젝트 1주차 시작

프로젝트 1주차 시작

팀배정을 받고 프로젝트 팀원들을 만났다. 

멘토님과 온라인 멘토링을 통해 주차별 가이드라인을 잡았다. 

 

우선 1주차는 

- 깃 레포 생성

- 라우터 설정

 들을 진행했다. 

 

1. 깃 레포 생성

이전까지는 다른 분이 생성한 팀 레포에서 클론받아 사용하기만 해봤는데

처음으로 팀 레포를 생성해봤다. 

다들 깃을 잘 다뤄보셔서 도움을 많이 받았다. 

 

우리는 react, tailwind, zustand 와 react-icons 등의 패키지등의 의존성과 패키지들을 설치하고 

이상태로 팀 레포에 올렸다. 

 

main브랜치를 단독으로 사용할 경우에는

잘못된 커밋시 되돌리기 어렵고, 코드 유지보수와 안정성 측면에서 위험할 수 있다고 판단했다. 

 

그래서 코드 안정성을 높이고자 main브랜치와 dev브랜치를 분리하였다. 

각 팀원들이 로컬 dev브랜치에서 작업 후 -> 개인 원격 dev브랜치로 커밋하고 

-> 팀 레포 dev브랜치로 머지

이 순서대로 진행하기로 했다. 

 

느낀 점

이 부분이 시간이 생각보다 오래 걸렸다. 

오프라인 미팅으로 만나서 하루종일 깃 레포 생성만 했던 것 같다. 

다행히 깃을 잘 아시는 팀원분이 계셔서 약간 챗지피티(?)처럼 도움을 받았던 것 같다. ㅋㅋㅋ

 

어쨋든 지금까지는 팀원이나 회사에서 클론만 받아서 사용을 했었는데

처음으로 팀 레포도 생성해보고 여러 깃 명령어도 사용해보면서

좋은 경험을 한 것 같다. 

 

 

2. 라우터 설정

react-router-dom을 설치해서 라우터설정을 하기로했다. 

이것도 따로 설치하면 packjson.json에 아래처럼 잘 설치됨을 확인할 수 있다. 

"react-router-dom": "^6.26.1",

 

그리고 router폴더에 index.tsx파일을 생성해서

경로들을 지정해줬다. 

 

코드 일부분을 갖고왔는데 아래처럼 지정해줬다. 

그리고 각 path에 따라 해당 컴포넌트가 나오도록 설정해주었다. 

export const router = createBrowserRouter([

    {

        path: "/",

        element: <Nav />,

        children: [

            {

                path: "/",

                element: <MainPage />,

            },

            {

                path: "/ktwiz/about",

                element: <KtWizAbout />,

            },

            {

                path: "/ktwiz/history",

                element: <KtWizHistory />,

            }

       ],

    },

]);

 

---

파트 분배

우선 멘토링에 따라 작업이 필요한 파트를 쪼갰다. 

그리고 각자 원하는 파트로 분배를 했고, 나의 경우는 아래 Player파트를 맡게 되었다. 

 

코칭스텝/투수/타자/응원단 파트의 경우 다 비슷한 구조로 되어있다. 

아래는 투수 페이지인데 이런식으로 선수별로 간단한 구조로 되어있고, 해당 선수를 클릭하면 상세페이지로 넘어가게 된다. 

 

 

그리고 각 페이지는 탭구조로 아래 동영상처럼 구성되어있다. 

화면 녹화 중 2024-09-10 115829.mp4

0.81MB

 

 

이 부분은 분석하고 2주차부터 개발에 들어갈 예정이다. 

 

---

메인페이지 파트분배 및 개발

1주차 금요일에 2번째 오프라인 팀미팅을 가졌다. 

여기에서 메인페이지를 우선적으로 개발하자는 이야기가 나왔고, 각자 파트를 나눠서 주말동안 개발하기로 했다. 

 

내가 맡은 파트는 하단의 공식 온라인 스토어 & 이달의 선수 이다.

 

 

우선 각각을 컴포넌트로 만들고, 기본 구조가 동일하므로 하나를 먼저 개발하고 

그 틀을 받아 다른 한쪽도 개발하기로 했다. 

 

1. 공식 온라인 스토어 컴포넌트

이 부분은 고정된거라 따로 api요청을 받을 필요가 없었다. 

그래서 배경이미지를 깔고, ktwiz 로고 이미지와 이외 설명들을 css처리를 해주었다. 

바로가기를 클릭하면 온라인스토어로 연결되도록 처리해주었다. 

 

2. 이달의 선수 컴포넌트

이 부분은 선수이미지, 선수번호, 선수이름을 api로 받아와야 했다. 

그래서 async-await를 이용하여 api요청코드를 작성하였고 잘 받아오는 것을 확인하였다. 

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.