어떤 프레임워크를 사용하여 리액트 실습할까?

[publdaze]

• CRA
• Next.js
• Remix
• Gatsby
• Expo

[publdaze]

CSR vs SSR

• CSR와 SSR이 무엇이고 각 프레임워크가 어떤 것에 해당되는 지
• @publdaze

[publdaze]

이후 진행할 게임 프로젝트와의 호환성

• 기존 프로젝트에서는 CRA 사용중인데 다른 프레임워크를 사용하고 해당 프로젝트에 삽입 가능한 지
• @jasper200207, @KimHaejoong1

[publdaze]

각 프레임워크 사용도

• 어떤 상황에서 어떤 프레임워크를 사용하면 좋을지
• @sososo0, @wns1826

[publdaze]

** 짧은 시간 조사로 인한 잘못된 정보가 있을 수 있다는 점 양해 부탁드립니다.

CSR(Client-Side Rendering)

: 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 보여주는 방식

장점

• 서버와 클라이언트 간의 데이터 양의 트래픽 감소
• 한 번의 렌더링만 있으므로 페이지 이동 빠름 단점
• SEO(Search Engine Optimization)에 대한 추가 보완 작업 필요
• 초기 렌더링이 느림

➡️ CSR 언제 사용할까? 1) SEO가 우선순위가 아닌 경우 2) 사이트에 풍부한 상호 작용이 있는 경우(CSR은 빠른 라우팅으로 강력한 사용자 경험을 제공) 3) 웹 애플리케이션을 제작하는 경우(CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공)

SSR(Server-Side Rendering)

: 클라이언트가 서버로 request를 보내면 서버에서 페이지를 렌더링해서 클라이언트로 보내는 방식

장점

• 초기 렌더링이 빠름 단점
• 페이지 이동시 마다 데이터를 요청하므로 초기 로딩 이후 페이지 이동 시 속도가 다소 느림

각 프레임워크별 사용

(잘 모르게써여... CSR 사용하는 곳도 SSR로 확장 가능, SSR 사용하는 곳도 CSR로 확장 가능인듯 합니다..!) CRA - CSR Next.js - SSR Remix - SSR Gatsby - SSR? Expo - CSR?

[jasper200207]

다른 프레임워크에서 CRA로 바꾸는 작업은 힘들듯 함

CRA → Next.js

가능

직접 바꾸거나 comandmode 가능

tailwind 적용 가능

폴더 구조 라우팅

CRA → Remix

가능

직접 파일을 바꿔야 함

tailwind 적용 가능

react-router 지원

CRS → getsby

가능

직접 파일을 바꿔야 함

tailwind 적용 가능

폴더 구조 라우팅

CRS → Expo

검색 결과 없음…

예전에 앱만들어 봤을 때, 태그들이 거의다 달랐음….

tailwind 적용 가능

tailwind도 적용이 가능하니 만들어둔 컴포넌트를 가져다 쓸수는 있을듯 하다

Expo는 react-native 기반이라 불가능 할거 같다

[KimHaejoong1]

https://resilient-tilapia-077.notion.site/CRA-d9db884afadd411eb2f31d8d1064f94f

[sososo0]

참고 블로그 https://velog.io/@bbbb_0221/Next.js-React.js-%EC%99%80-Next.js%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[yessjun]

https://fuchsia-tabletop-6fc.notion.site/React-ff8244decedf463da4a16bd3d02eb9e0

참고 자료(Gatsby vs. Next.js vs. Remix) : https://satellytes.com/blog/post/getting-started-gatsby-next-remix/

[publdaze]

일단 CRA로 해보자!!