# React에서 Next로 전환 경험 공유

## 프로젝트 시작하며.

### 1. 배경

신규 프로젝트의 기술 스택을 결정하는 시점에서 기존의 ReactJS가 아니라 Framework를 도입하면서 가져올 수 있는 이점과 러닝커브에 대한 이야기를 나누게 되었고 경험을 공유하는 세미나를 통해 팀원들을 설득할 시간을 부여받게 되었다.

### 2.  기술 선정 기준

다음과 같은 평가 기준으로 검토한 후 각 부분에 대해서 의견을 공유하였다.

1. Learning Curve(학습 비용) : 초심자가 쉽게 학습할 수 있는가?
2. Community size(커뮤니티 활성도) : 이슈가 발생했을 때, 커뮤니티에서 답을 찾을 수 있는가?
3. Compatibility(호환성) : 기존 코드에 같이 쓸 수 있는가?<br>

* `NextJS` vs `SvelteJS` vs `Remix`

|                    | NextJS | SvelteJS | Remix |
| ------------------ | ------ | -------- | ----- |
| **Learning Curve** | Low    | High     | Low   |
| **Community size** | Big    | Small    | Small |
| **Compatibility**  | High   | Low      | High  |

모든 부분에서 NextJS가 현재 팀에는 잘 맞았다.

기본적으로 React를 쓰는 팀이라 기존 코드를 쓸 수 있으며 커뮤니티 크기가 큰 부분이 주된 요인인 것 같다

### 3. React에서 대두된 문제

* 첫 페이지 로딩시간
* 공통 라우팅 파일 관리
* 최적화
* 렌더링 지원
* 3rd party 의존도

NextJS로 일부 해결이 가능하지만 ReactJS에서 해결하지 못하는 문제는 아니다

-> 한정된 리소스에서 DX(개발자 경험)를 올려주는 것만은 분명하다

## 프로젝트를 마치며.

프로세스를 개선하기 위한 많은 도구와 라이브러리들이 있다. 기술 제안을 하기위해 다시 정리하며 해당 기술의 본질에 대해 한 번 더 생각해보았다.

{% file src="<https://2477703702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0zNEVFEcc7Tv0qxrOi2Y%2Fuploads%2FG9JikywQFOrAozXupZUs%2F%E1%84%87%E1%85%A9%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%B5%20%E1%84%8B%E1%85%A1%E1%86%AD%E1%84%82%E1%85%B3%E1%86%AB%20%E1%84%80%E1%85%A2%E1%84%89%E1%85%A5%E1%86%AB-%20ReactJS%E1%84%8B%E1%85%A6%E1%84%89%E1%85%A5%20NextJS%20%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%92%E1%85%AA%E1%86%AB%20%E1%84%80%E1%85%A7%E1%86%BC%E1%84%92%E1%85%A5%E1%86%B7%20%E1%84%80%E1%85%A9%E1%86%BC%E1%84%8B%E1%85%B2_2315_%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%89%E1%85%B3%E1%86%BC%E1%84%83%E1%85%A5%E1%86%A8.pdf?alt=media&token=ad20e42e-34f5-4356-b9a4-28af1c420e62>" %}
발표자료
{% endfile %}

## Next Step.

신규 프로젝트의 기술 스택을 결정하는 시점에서 NextJS를 팀원들에게 설득할 수 있는 시간이었다.\
NextJS보다는 ReactJS의 Framework라는 방향으로 진행을 했었는데 NextJS가 제공해주는 기능을 잘 활용할 수 있도록 보너스 세션을 진행해보는 것도 좋을 것 같다.
