본문 바로가기

프로젝트

[기술 습득에 필요한 정보 얻은 것(삭제될 수 있음)] Web FE

 

  1. React
  2. Redux
  3. Typescript
  4. Styled-components
  5. Vite
  6. All(1~5)

 

1. 

 

2. 

 

3. 

 

4. 

 

5. Vite

  • 비트 소개

https://velog.io/@yena1025/Vite%EB%B9%84-%ED%8A%B8%EB%A5%BC-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4

 

Vite(비-트)를 소개합니다

더 이상 CRA로 돌아갈 수 없어

velog.io

https://velog.io/@sehyunny/is-it-time-to-say-goodbye-to-webpack

 

(번역) 이제는 웹팩과 작별할 때일까?

이 중요한 질문에 답변하기 전에, 왜 우리가 이것을 고려하고 있는지를 살펴봅시다. 2021년 bestofJS 데이터를 살펴보면 빌드 도구 영역의 인기도 부분에서 웹팩(Webpack)을 제치고 Vite가 급부상하고

velog.io

 

참고) webpack이라는 기술도 존재

https://velog.io/@_uchanlee/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0without-CRA

 

리액트 웹팩으로 개발 환경 구축하기(without CRA)

지인의 블로그를 보다가 충격적인 사실을 발견했다."내가 회사에 가서도 CRA를 통해 개발할까? " 🤔에 대한 답변이 X(아니?) 라는 사실이였다. 몇개월 뿐이지만 리액트를 공부한 시점부터 현재까

velog.io

 

 

  • Vite + React 프로젝트 생성하기

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

 

[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 파일을 설정해주면 된다.
  • tsconfig.json


tsconfig.json에서 compilerOptions에 baseUrl과 paths를 설정해준다
  • vite.config.ts



tsconfig.json에서 compilerOptions에 baseUrl과 paths를 설정해준다
  • vite.config.ts


App.tsx에서는 Reset CSS를 적용한 GlobalStyle과 페이지 라우팅 컴포넌트인 Router를 추가합니다
  • Router.tsx



    • pages/Home.tsx
    • components/Navber.tsx
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가 뭘해야할지 모르겠다면 아래 글을 참고해, 중반부를 읽어보면된다.

https://medium.com/@allroydave/create-react-app-using-vite-styled-components-and-react-router-ba94c53de66

 

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