2023. 4. 19. 00:02ㆍ서버 프로그래밍
최근에 React 웹앱 프로젝트를 하나 시작하면서, 동료들이 더이상 create-react-app은 권장하지 않고 Next.js와 같은 대안을 이용해야 한다고 했다. 그래서 create-next-app을 이용해서 새로운 프로젝트를 생성했는데, 문제는 Next.js가 백엔드까지 붙어있는 프레임워크라서, 클라이언트 사이드 랜더링만 쓰려면 꼼수가 필요한 문제가 있었다.
https://blog.logrocket.com/create-react-app-vs-next-js-performance-differences/
Comparing Create React App vs. Next.js performance differences - LogRocket Blog
In this comparison of Next.js vs. Create React App, we'll settle the question of whether SSR is more performant than CSR.
blog.logrocket.com
Limitations of Next.js
Although Next.js is a great framework, it has a few drawbacks in terms of development.
For example, Next.js has relatively high development complexity on the server side. Some JavaScript plugins and libraries, such as Bootstrap and other libraries that support DOM manipulation, are designed to run only on the client-side requiring extra effort from the developer to handle client- and server-side validations to determine when to import and use such libraries.
Additionally, Next.js requires a Node.js server to run JavaScript on the server side. Thus, you must first set up the server before you can use Next.js to create your app.
처음에는 Next.js 대신 Remix를 이용하여 React 프로젝트를 만들었으나, 제약으로 인해 Next.js로 바꾸었다고.
https://rangle.io/blog/building-a-react-app-using-remix
How to build a React app using Remix (Part 1 of 3)
Remix is a great framework and very easy to learn. If you have any prior knowledge or experience using React + (Gatsby, Next.js, etc.), you will soon realize that Remix is a very similar framework. This three-part series will teach you how to build a React
rangle.io
게다가 pyenv도 귀찮아서 안쓰는 내게 NVM을 쓰게 만든다. ㅠㅠ
기존 프로젝트는 Node.js V14이고 이번 프로젝트는 Node.js V18이라 어쩔 수 없이 NVM 설치 완료
[Window] 윈도우에서 nvm 사용하기(설치 ~ 사용)
* 프로젝트별로 사용하는 Node 버전이 다 제각각 다른데 나는 항상 제일 처음에 설치한 버전 그대로 사용하고있다?? 그래서 버전이 맞지 않아서 에러가 나기도 하고 ... 협업을 하는 것이니 이왕이
aspring.tistory.com
그리고 NPM 안쓰고 YARN을 쓴다고... 허허허
하고 싶은대로 마음껏 하려무나, 이번 기회에 새로운 방식으로 React 개발 하는 방법을 배워볼 생각이니.
npm install -g yarn
가장 기대되는 것은 Storybook을 이용한 컴포넌트 기반 UI 개발이다.
Storybook: Frontend workshop for UI development
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.
storybook.js.org