- React
- Redux
- Typescript
- Styled-components
- Vite
- All(1~5)
1.
2.
3.
4.
5. Vite
- 비트 소개
Vite(비-트)를 소개합니다
더 이상 CRA로 돌아갈 수 없어
velog.io
https://velog.io/@sehyunny/is-it-time-to-say-goodbye-to-webpack
(번역) 이제는 웹팩과 작별할 때일까?
이 중요한 질문에 답변하기 전에, 왜 우리가 이것을 고려하고 있는지를 살펴봅시다. 2021년 bestofJS 데이터를 살펴보면 빌드 도구 영역의 인기도 부분에서 웹팩(Webpack)을 제치고 Vite가 급부상하고
velog.io
참고) webpack이라는 기술도 존재
리액트 웹팩으로 개발 환경 구축하기(without CRA)
지인의 블로그를 보다가 충격적인 사실을 발견했다."내가 회사에 가서도 CRA를 통해 개발할까? " 🤔에 대한 답변이 X(아니?) 라는 사실이였다. 몇개월 뿐이지만 리액트를 공부한 시점부터 현재까
velog.io
- Vite + React 프로젝트 생성하기
[WASITMS] Vite + React 프로젝트 생성하기
KUSITMS 리액트 스터디에서 진행할 개인프로젝트로 WASITMS이라는 서비스를 만들어보려고 합니다.WASITMS은 NETFLIX나 WATCHA같은 OTT서비스처럼 영화/TV프로그램을 제공하는 사이트입니다.프론트 스터디
velog.io
- 생성하고 활용하기
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite
How To Set Up a React Project with Vite | DigitalOcean
www.digitalocean.com
- d
- d
6. All(1~5)
<공통>
(0) | npm install -g create-vite | ||
1 | npx create-vite my-app --template react-ts (cd my-app) (npx create vite [wasitms] --template react-ts) ( npm npm dev ) vs <Now we are done with the installing ReactJs with Typescript> npm create vite(cd project-name) npm install(npm run dev) <> npm install styled-components <> npm install @reduxjs/toolkit react-redux |
<구체적으로 세팅 하는 방법> https://velog.io/@tkdals0978/WASITMS-Vite-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 참고 vite.config.ts react-router-dom, styled-components 패키지를 설치 yarn add react-router-dom styled-components @types/styled-components tsconfig.json, vite.config.js 파일을 설정해주면 된다.
|
|
2 | Step 2: Install and configure Styled Components. | npm install styled-components @types/styled-components (Run the following command to install Styled Components and its TypeScript typings) vs npm install react-redux redux @types/react-redux @types/react-redux redux-thunk @types/redux-thunk styled-components @types/styled-components |
|
(@) | styled-components | (npm install styled-components) We will be creating components & theme.ts, global.ts pages and a styles of src. main.ts(에 추가된다. => index.js(ts)) => reudx에서 main.tsx로 변경! Remember to update the theme interface in styled.d.ts with your desired theme properties to enable theme-based styling. (styled.d.ts file will provide type definitions for Styled Components.) (App.tsx => Update your React components with Styled Components.) |
|
(@) | redux | Create a Redux store in "store" folder Create a Redux reducer: In "store" folder in "reducers" folder .... .... (redux-toolkit 많이 나오기도해서 주의해두자!) @reduxjs/toolkit react-redux creating another store folder inside src, so our new src store/index.ts(this store is going to contain the code related to state management of the web application.) main.tsx (위의 styled-components 마지막 부분에 App.tsx에 넣는 것과 동일하다.) |
|
- chatGPT한테 물어봄: Redux를 제외한 나머지 결과
https://webapp.chatgpt4google.com/s/Mzk1MTI1
Shared Conversation
webapp.chatgpt4google.com
- Reudex를 포함한 결과(위의 redux를 제외한 결과는 styled-components가 자세하게 설정이 나와있다.)
https://webapp.chatgpt4google.com/s/MTU2MTI3
Shared Conversation
webapp.chatgpt4google.com
- 추가로 vite상태에서 styled-components가 뭘해야할지 모르겠다면 아래 글을 참고해, 중반부를 읽어보면된다.
Create react app using vite, styled components and react router.
React Vite is a build tool that is specifically designed to be used with React applications. It is an alternative to create-react-app, the…
medium.com
- 전문 블로그 참고(대신 다 나와있음!)
https://dev.to/shubhamku044/setup-reactjs-ts-styled-componets-redux-580d
Setup ReactJs + TS + Styled-Componets + Redux
Intro In this blog tutorial, we will see how we can setup a ReactJs project with...
dev.to
- e
- template처럼 사용가능할 것 같아 확인 바란다.
https://github.com/zomeru/vrst-boilerplate
GitHub - zomeru/vrst-boilerplate: A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript with Styling reset.
A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript with Styling reset. - GitHub - zomeru/vrst-boilerplate: A boilerplate for Vite.js, React.js, Styled-Components, & TypeSc...
github.com
https://reactjsexample.com/a-boilerplate-for-vite-js-react-js-styled-components-typescript/
A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript
Vrst stands for Vite, React, Styed-Components, TypeScript.
reactjsexample.com
- 해당 소스코드참고 가능: 좋은 코드를 보고 공부
https://github.com/meitung473/e-commerce-product-page/blob/main/package.json
GitHub - meitung473/e-commerce-product-page: e-commerce-product-page from frontend mentor challenge
e-commerce-product-page from frontend mentor challenge - GitHub - meitung473/e-commerce-product-page: e-commerce-product-page from frontend mentor challenge
github.com
- ㅇ
- ㅇ
- ㅇ