프론트엔드 개발자라는 꿈을 정하고 난 후, 최근에 제대로 된 첫번째 팀프로젝트를 완성하였다.
리액트와 Redux-toolkit, thunk를 사용하여 프로젝트를 만들었는데, 이 프로젝트를 통해 얻을 수 있는 점이 많았다.
1. React는 CSR 방식이기 때문에 초기 구동속도가 느리다.
2. 더해서 SEO에 좋지않다..
이 문제점을 해결하고자, 프로젝트에서는 react-helmet-async라이브러리를 사용하여 페이지별로 meta태그를 설정해 주었고, 초기 구동속도를 개선하기 위하여 React.lazy()를 이용한 코드분할을 시도했었다. (하지만, 개인적으로 만든 Private,Public라우터와 꼬여서 (?) 실패하긴 했다. 이 부분은 틈틈히 생각해보는걸로....)
하지만 , 이러한 문제점을 해결하기위해 찾아볼때 마다 나오는 녀석인 Next.js , 그리고 추가적으로 알아보니 Gatsby라는 리액트 기반 프레임워크들을 알게 되었다.
오늘은 Next.js와 Gatsby에 대해 알아보고 곧 새로 시작할 개인 프로젝트에 어떤것을 적용시킬지 생각해보는 글을 작성하겠다.
먼저 Next.js와 Gatsby의 공통된 장점
1. SEO에 최적화 되어있다.
두 프레임워크 모드 SSG(static site generation) 또는 SSR등의 방식으로 렌더링 되기 때문에 SEO측면에서 좋다고 볼 수 있다.
2. 개발 속도가 빨라지고, 웹 개발이 단순화된다.
CRA와 비교했을때 , 더 자세한 document , 쉬운 프로젝트 세팅, 더 편한 개발환경 및 배포방식이 장점이라고 한다.
(이건 직접 경험해봐야 알 것같다.)
그렇다면 단점은 ?
서비스를 쉽게 만들기 위해 만들어진 프레임워크이기 때문에 , 사용자가 제어할 수 없는 영역들이 생기거나 기존의 개발 방식으로 구현하지 못하는 것들이 생겨난다.
예를들어 Next.js의 Hydrate (서버단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에 보내고, 클라이언트에서 HTML코드와 React인 JS코드를 매칭시키는 과정) , 또는 SSR,SSG 빌드단계에서 Window객체 사용의 제약 (Node환경에서 빌드되기 때문)이 걸리는 상황 등이 있다.
Next.js와 Gatsby의 차이점은?
구글링을 해보니 두 프레임워크의 가장 큰 차이점중 하나는 data를 가져올때 발생한다고 한다.
Next.js는 data를 불러오는 방법에 있어서 agnostic하다. 그래서 REST API ,GraphQL API , 등 원하는 것으로 정의하고 사용할 수 있다.
여기서 agnostic 뭐냐 ?
'someone who does not know'와 같은 의미, 어떠한 운영체제나 프로세서의 조합인지에 대한 아무런 지식이 없더라도 상관없이 기능을 수행할 수 있는 SW기술
하지만, Gatsby는 GraphQL을 선호한다. 왜냐 ? 이미지를 자동으로 최적화하고 이미지가 사용되는 동일한 위치에 데이터를 로드할 수 있게 하는 것과 같이 GraphQL을 사용함으로써 얻을 수 있는 다양한 이점이 있기 때문이다. Gatsby공식문서에는 다음과 같이 나와있다.
GraphQL은 페이지 구축 및 최적화 프로세스를 단순화 합니다.
그렇다면 !! 나의 선택은?
나는 Next.js를 사용하여 프로젝트를 진행하기로 결정했다.
그 이유는 일단 첫번째로, GraphQL를 알지 못한다.. Next.js와 TypeScript를 처음 접해보기에 GraphQL까지 공부하려면 시간이 오래걸릴것 같기 때문이다.
두번째로는, Gatsby는 플러그인과 다른 사람의 작업에 의존할 수 있고, 오픈 소스 커뮤니티에서 활발히 활동하거나 , 수정사항이 발표되도 신경쓰지 않는 (?) 분들에게 적합하다는 글을 보았기때문이다.
세번째로는 , 내가 진행하려는 프로젝트의 특성때문이다.
현재 시작하는 프로젝트는 쇼핑몰이다. 쇼핑몰의 특성상 유저에 따라 보여줘야 할 정보가 다르고 , 데이터가 수시로 변경되기 때문에 Next.js를 사용하는 것이 더 알맞다는 생각을 하였다.
(동적인 데이터를 SSG로 하나하나 대응하기 힘들고, 데이터가 수시로 빌드되었을때 매번 빌드하는것과 빌드 속도를 고려해서...)
Next.js와 TypeScript... 그렇게 극찬을 (?) 하던데 나도 드디어 사용해보는구나 하여 설렌다 ^_^
열심히 배워봐야징~~
참고자료
https://prismic.io/blog/compare-nextjs-vs-gatsby
'FE' 카테고리의 다른 글
| [Clean Code] React에서의 클린코드 (0) | 2023.10.10 |
|---|---|
| [Electron] 일렉트론이란? (0) | 2022.11.14 |
| [디자인패턴] 아토믹패턴이란? (2) | 2022.07.04 |
| SSR , CSR이 무엇일까 ? (0) | 2022.06.22 |
| [JS] 최적화 (Optimization) (0) | 2022.05.19 |