목록2025/01 (4)
flatwhite01 님의 블로그
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..