flatwhite01 님의 블로그

리덕스(Redux)의 동작 순서도는 상태 관리의 흐름을 단계별로 나타냅니다.이를 통해 dispatch, action, reducer, 그리고 store 간의 상호작용을 명확하게 이해할 수 있습니다. 아래에 Redux의 기본 흐름을 순서도 형태로 설명할게요.Redux의 동작 순서도사용자 이벤트 발생예를 들어, 버튼 클릭, 텍스트 입력 등과 같은 이벤트가 발생합니다. 이 이벤트는 리덕스 상태를 변경할 필요가 있는 동작을 유발합니다.컴포넌트에서 dispatch 호출사용자가 상호작용을 하면, React 컴포넌트 내에서 dispatch를 호출합니다.dispatch는 액션 객체를 리덕스 스토어로 전달합니다.버튼을 눌렀을때 액션이 발생되기 때문에  그 액션을 전달해주는 함수 dispatch를 사용한다{dispatch..

import { createSlice } from '@reduxjs/toolkit';//자바스크립트 영역 toolkit 내부에 지원해준다const initialState = {    count: 0,};export const counterSlice = createSlice({    name: 'counter',    initialState,    reducers: {        increment: (state, action) => {            // action.payload => UI 디자인에서 값을 넘긴것을 받기            //state.키 =>initialState 에 초기변수 연결            state.count += 1;        },        decremen..

React와 Next.js의 차이React (라이브러리)Next.js (프레임워크)UI만 담당, 뷰를 구성하기 위한 라이브러리React 기반으로, 추가적인 기능(SSR, SSG 등)을 포함한 프레임워크라우팅 설정 필요 (React Router 사용 등)파일 기반 라우팅 제공SEO 기능 직접 구현 필요SEO 최적화 기본 제공 (SSR/SSG)전적으로 클라이언트 렌더링클라이언트/서버 렌더링 모두 가능 라이브러리와 프레임워크의 차이라이브러리: 필요한 기능만 가져다 사용. 사용자가 애플리케이션 흐름을 제어. (React)프레임워크: 전체적인 애플리케이션 구조와 흐름을 제어. 사용자가 프레임워크의 규칙에 따라 개발. (Next.js, Angular)

1. 프로젝트 생성 : yarn create vite2. 프로젝트명 입력 ( 예: day01 )3. React 선택4. Javascript 선택 5. cd 프로젝트명6. yarn 또는 npm i : node_modules 생성​추가설치 (복사)yarn add react-redux @reduxjs/toolkit react-router-dom styled-components styled-reset react-icons sass swiper axiosnpm i react-redux @reduxjs/toolkit react-router-dom styled-components styled-reset react-icons sass swiper axios

Vercel을 통한 배포 방법을 단계별로 설명해드리겠습니다:Vercel 계정 설정vercel.com에서 회원가입GitHub/GitLab/Bitbucket 계정으로 로그인 가능프로젝트 준비프로젝트가 Git 저장소에 있어야 함package.json이 있는지 확인build 명령어 설정 확인배포 방법방법 1: Vercel 대시보드를 통한 배포# 프로젝트를 Git에 push 후 1. vercel.com 대시보드 접속 2. 'New Project' 클릭 3. Git 저장소 import 4. 프로젝트 설정 확인 (빌드 명령어, 환경 변수 등) 5. 'Deploy' 클릭 방법 2: CLI를 통한 배포# Vercel CLI 설치 npm i -g vercel # 로그인 vercel login # 프로젝트 배포 verc..