[Project] Lesson - 프로젝트 구성

Project

Lesson 프로젝트

클론 코딩 사이트

etsy로 하기로 했다.

일단 UI가 깔끔하고, 호버 이벤트도 다양하다.

또한, 쇼핑몰이므로 기능도 페이보릿 기능, 장바구니 기능이 있다.

카드 또한 재사용될만한 요소가 충분하여 리액트를 연습하기 좋을 것이라고 생각한다.

프로젝트 구성

ts cra boilerplate는 멘토님이 만들어서 주셨다.

아직 페이지를 구현하지 못했지만, 페이지 구성도 대강 흐름을 배웠다.

pages에는 페이지만 들어가고, 그 페이지에서 작은 단위의 컴포넌트가 필요하면 그 폴더 안에서 components 폴더를 생성해서 하위에 tsx를 생성한다.

이래야 컴포넌트를 사용할 페이지가 가까워서 경로 적기도 쉽고, 관리가 용이하다.

만약 공통 컴포넌트가 있을 시 pages와 같은 레벨에 components를 생성하고, 그 안에 common한 컴포넌트들을 만든다.

template을 사용하기도 한다. 재사용하기 위해 template을 만들어 그 안에 요소 children을 받아 사용한다.

기술 스택

일단 언어는 TS를 사용하기로 했다.

공부가 필요하고, 프로젝트를 진행하면서도 공부가 병행되어야 할 듯 하다.

데이터 페칭은 swr을 사용하기로 했다.

요새는 현업에서 전역 상태 관리 툴을 빼는 추세이기 때문에 전역 상태가 필요하면 context api를 사용하고, 데이터 fetching은 swr이나 react-query를 이용한다.

하지만, 내가 진행하는 프로젝트는 db가 없기 때문에 전역 상태 관리를 해야하므로 recoil을 사용하기로 한다.

추가 라이브러리로는 스와이프를 구현할 때 swiper 라이브러리를 사용하기로 했다.

실제로 현업에서도 메인 기능이 아닌 경우에 생산성을 위해서 라이브러리를 많이 사용한다. 따라서, 라이브러리도 적절한 것을 찾아 적절히 사용할 줄 아는 안목과 능력이 있어야 한다.

그래도 여러 기능도 구현하는 연습을 하면 좋다.

만약 패키지를 설치하고 사용하다가 오류나면 @types/라이브러리 를 설치하여 사용한다.

ex) yarn add @types/swr

etc

pr 추가할 때 Resolves #이슈 번호하면 머지됐을 때 이슈 자동으로 닫힘

rebase 사용! 내가 작업하고 있다가 다른 사람이 develope branch에 머지 했을 때 내가 새로운 버전을 다운받아야 하므로 다시 develope으로 checkout 해서 pull을 받은 다음(pull은 무조건 같은 branch에서만 한다.), 다시 원래 작업하던 branch로 checkout 해서 git rebase develope 해주면 내가 작업하던 커밋을 새로운 버전에 갖가 붙여주는 것이라고 보면 된다.

rebase하고 나서 confilct가 있으면 해결한다. 보통 incoming accept하면 된다. 수정사항을 적용해야 하는 것이므로.

다만 rebase하면 remote에 있는 것보다 항상 앞서 있기 때문에? push가 되지 않는다. 따라서 강제 push 해주면 된다.

해야할 일

2월 3일 부터 프로젝트를 진행하기로 했다.

그 전까지 타입스크립트를 공부하고 있어야 한다.

1시간 정도 타입스크립트 리액트 사용하는 방법을 대강 레슨 받기로 했다.

1주차 시작하고 나서는 main 페이지 ui 완성, 페이보렛 기능 등이 있다.

의문점

PR의 단위가 아직 와닿지 않는다. 한번 사용해보면서 느껴야 할 것 같다.

1주에 두 번 PR을 올리는데, 그럼 나는 일주일에 두 브랜치만 생성하면 되는 것일까?

배포는 아직 이야기를 못해보았다.