이것저것 해보기🌼

vite는 기본으로 dotenv를 사용해 환경변수 파일 (.env.local, .env.prod 등)을 가져오기 때문에,import dotenv/config 등을 선언할 필요가 없다. Vite에서 주의할 점은 보통의 node.js 나 create-react-app으로 만들어진 프로젝트처럼process.env를 사용하지 않고,import.meta.env 를 사용하는 것이다.또 변수명은 꼭 VITE_ 로 시작해야한다.(그렇지 않으려면 별도의 dotenv 설정을 해야함)위의 것들이 지켜지지 않으면 process not found 오류가 발생한다. https://ko.vitejs.dev/guide/env-and-mode ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev  firebase con..

1. 설치creat-react-app 으로 시작하기npm create-react-app my-redux-project typescriptnpm install redux --save 2. 간단한 덧셈, 뺄셈 기능 만들기- index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore } from 'redux';import counter from './reducers';const root = ReactDOM.createRoot(  doc..

SSR (서버 사이드 렌더링) 과 CSR (클라이언트 사이드 렌더링) SSR표시되어야할 html 파일을 브라우저가 다운 받고, javascript 파일도 다운 받는다.javascript 를 다운 받는 동안 이미 html 렌더링을 시작하기 때문에 웹페이지 표시가 빠르다.사용자가 페이지를 이동했을때 해당 페이지의 html 파일을 다운받고, javascirpt 파일을 다운받는 과정이 반복된다.렌더링은 빠르지만, 페이지 이동 시 마다 화면 깜박임이 생긴다. CSR사용자가 url 요청시 웹문서가 가지고 있는 모든 정보, 링크 페이지까지 한번에 다 받아온다.초기 화면 로드가 느리지만, 그 뒤로 사이트를 돌아다닐때는 로드 과정이 없어 사용성이 좋다.보통 로드가 될때 loading 임을 알려주는 화면이 먼저 표시되게 ..