[기술 습득에 필요한 정보 얻은 것(삭제될 수 있음)] 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(비-트)를 소개합니다

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

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

 

참고) 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)

 

 

• 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 프로젝트 생성하기

• 생성하고 활용하기

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

• 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

• Reudex를 포함한 결과(위의 redux를 제외한 결과는 styled-components가 자세하게 설정이 나와있다.)

https://webapp.chatgpt4google.com/s/MTU2MTI3

Shared Conversation

• 추가로 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.

• 전문 블로그 참고(대신 다 나와있음!)

https://dev.to/shubhamku044/setup-reactjs-ts-styled-componets-redux-580d

Setup ReactJs + TS + Styled-Componets + Redux

• 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.

https://reactjsexample.com/a-boilerplate-for-vite-js-react-js-styled-components-typescript/

A boilerplate for Vite.js, React.js, Styled-Components, & TypeScript

• 해당 소스코드참고 가능: 좋은 코드를 보고 공부

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

• ㅇ
• ㅇ
• ㅇ