쇼핑몰만들기 1일차 회고

인프런에 있는 정재남님의 강의 "풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기" 를 듣기 시작했다.

처음 보는 라이브러리나 vite 혹은 dev 환경으로 키고, 등등 새로운 부분이 너무 많아서 제대로 이해하기 힘들었고,

따라가기 급급했다. 

 

오늘 1일차의 목표는 개발환경에 대해 완벽히는 아니더라도, 어떤걸 사용하고 어떤걸 이용하는지 대략적인 그림을

이해하는것으로 목표를 잡았다. 

 

일단 첫째로 vite 를 사용했다. 

vite 는 일단 프론트엔드 개발 경험을 향상시켜줄 툴이다.

$ npm create vite@latest

를 입력하면 이름을 짓고, 개발환경 세팅을 선택할 수 있게 해주고, 바로 만들어준다.

확실히 편리함을 느꼈고, 기존에는 create-react-app 의 노예였는데, 이런 방법도 있다는것에 놀랐고 흥미로웠다. 

 

두번재는 react-router-dom 이다

사실 기존부터 쭉 사용해 오던 모듈이다. 

이번 강의에서는 vite-plug-router를 사용하는데, window 에서는 약간의 이슈가 있다고 한다. 

그래서 나는 기존에 자주 쓰던 react-router-dom 을 사용하였고, 

새로 배운 부분은 이렇게도 사용할 수 있구나를 알게되어 간단하게 정리해본다. 

 

export const routes = [
  {
    path: "/",
    element: <GlobalLayout />,
    children: [
      { path: "/", element: <Index />, index: true },
      { path: "/products", element: <ProductsIndex />, index: true },
      { path: "/products/:id", element: <ProductsId /> },
    ],
  },
];

자식요소를 이렇게 정리해서 보니 한눈에 확들어와 보기가 좋았다.

그리고 GlobalLayout 이라는 컴포넌트에는 Outlet 걸 사용했는데,

Outlet 은 자식요소가 랜더링될 때 중첩된 UI 가 표시된다고 한다. 자식요소가 중첩된 UI가 되게 하려면

Outlet 은 부모요소에 적용을 시켜줘야 한다. ( 컴포넌트처럼 사용함. )

 

세번째는 react-query 이다. 

솔직히 어떤 라이브러리인지 잘 몰랐다. 듣기만 했지 검색조차 안해보았고, 이번에 사용하게 되어 참 다행이라는 생각이든다. 기존에 프로젝트에서 aws의 프리티어단계로 개발을 할 때, 서버에 의존도가 높아서 자꾸만 서버가 터지는 상황이 발생하였었다. 물론 과금을 하면 해결되는 문제이지만 이번에 공부하면서 기존에 프로젝트에도 도입을 해볼 생각이다. 

 

react-query의 장점은 데이터를 업데이트 하는데 용이하다는 것이다. 데이터를 캐싱하고, 캐싱된 데이터를 통해 API콜을 줄여주며 서버 부담을 줄여줄 수 있다는 장점이 있어 앞으로도 자주 사용하겠구나 생각이 들었다. 

 

라이브러리를 설치하고 몇가지 인스턴스를 변수에 할당 후 통신하는 함수를 만드는 작업까지 진행하였다. 

 

 

프로젝트 1일차 느낀점.

이전 코드스테이츠에서 수료하면서 수료생들에게 조언해주었던 내용이 생각이 났었다.

좋은 코드를 많이 보고, 많이 치고, 내것으로 만들라.

오늘 재남님의 강의 영상을 보면서 피부로 느꼈다. 중간중간 만약 나라면 어떻게 작성할까를 생각해보았는데

이렇게 깔끔하고, 보기좋고, 필요한 부분만 작성할 수 있을까 라는 생각이 들었다.

수료 당시에 느끼지 못했던 조언의 깊이를 느끼게 되는 순간이였다. 

조언을 목표로 삼아 좋은 코드를 개발할 수 있는 개발자로 더 성장해 나가야 겠다. 느낀점 끝.