수정 블로그

카카오 로그인 기능 추가하기Kakao Developer 가입https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 내 애플리케이션에 들어가서 애플리케이션 추가 플랫폼 등록 Redirect URI 활성화 및 등록 동의항목 설정 보안에서 시크릿 코드 발급 자세한 사용방법은 다음 웹사이트를 참조한다.https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로..

환경설정하단의 명령어를 입력해 라이브러리들을 설치한다.npm i react-dom react-router-domnpm i react-bootstrap bootstrapnpm i axiosnpm i @tanstack/react-querynpm i @tanstack/react-query-devtoolsnpm install @reduxjs/toolkitnpm install react-reduxnpm install react-cookie index.js 수정import 'bootstrap/dist/css/bootstrap.min.css';import { BrowserRouter } from 'react-router-dom'import { Provider } from 'react-redux'import store..

React QueryReact 앱에서 서버 데이터를 쉽게 가져오고, 캐시 하고, 자동으로 업데이트하는 라이브러리. 서버 상태 관리의 복잡함을 줄여준다.  React Query 설치다음 명령어를 입력해서 React Query를 설치해 준다.npm i @tanstack/react-query 사용법은 다음 링크를 참조한다.https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in mo..

Redux Toolkit으로 쇼핑몰 예제 수정Redux Toolkit을 이용해 이전에 만들었던 쇼핑몰 예제의 로그인 기능을 수정해 보자.로그인 기능은 product와 다르게 동기적인 기능이므로 createAsyncThunk를 사용하지 않아도 된다.  createAsyncThunkRedux Toolkit에서 제공하는 유틸리티 함수로, 비동기 작업을 간단하고 일관되게 관리하기 위한 도구. 이를 통해 비동기 작업(예: API 호출)을 수행하고, 작업의 상태(예: 로딩, 성공, 실패)를 쉽게 처리할 수 있다. Redux 수정authenticateReducer > authenticateSlice 변경import { createSlice } from '@reduxjs/toolkit'let initialState =..

Redux Toolkit Redux Toolkit은 Redux를 사용할 때, 복잡한 설정과 보일러플레이트 코드 작성 부담을 줄여주기 위해 제공되는 공식 라이브러리이다. Redux를 쉽게 사용할 수 있도록 도와주는 도구 모음이며, Redux의 핵심 기능들을 더 간단하고 효율적으로 사용할 수 있게 만들어준다.  Redux Toolkit으로 쇼핑몰 예제 수정Redux Toolkit을 이용해 이전에 만들었던 쇼핑몰 예제를 수정해 보자. Redux Toolkit 설치다음 명령어를 입력해서 Redux Toolkit을 설치한다.npm install @reduxjs/toolkit 사용법은 다음 링크를 참조한다.https://ko.redux.js.org/redux-toolkit/overview/ Redux Toolkit..

쇼핑몰 예제 Redux 적용하기지난번에 만들었던 쇼핑몰 예제에 Redux를 적용해 보자. Redux 설치다음 명령어를 입력해 Redux를 설치한다.npm install redux react-redux index.js 코드를 다음처럼 변경한다.import { BrowserRouter } from 'react-router-dom';import { Provider } from 'react-redux';import store from './redux/store';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); Redux-thunk Redux에서 비동기 작업을 처리하기 위한 미들웨어이다..

Redux 예제사용자 정의 태그와 Redux를 이용해 연락처 등록 예제를 만들어 보자. Redux 설치다음 명령어를 입력해 Redux를 설치한다.npm install redux react-redux index.js 코드를 다음처럼 변경한다.import { Provider } from 'react-redux';import store from './redux/store';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); Redux 생성store.jsimport { createStore } from 'redux'import reducer from './reducer/reducer'let store = ..

Redux JavaScript 애플리케이션의 상태 관리(state management)를 위한 라이브러리. 주로 React와 함께 사용되지만, 프레임워크에 종속되지 않기 때문에 다른 JavaScript 애플리케이션에서도 사용할 수 있다. Redux는 애플리케이션 상태를 예측 가능하고 효율적으로 관리하도록 돕는다.  Redux의 주요 개념Store (스토어)애플리케이션의 상태(state)를 저장하는 객체애플리케이션의 상태는 단일 스토어에서 관리되며, 전역적으로 접근 가능Action (액션)상태를 변경하기 위해 발생하는 이벤트를 설명하는 객체보통 type 속성을 포함하며, 필요에 따라 추가 데이터(payload)를 가질 수 있다.{ type: 'INCREMENT', payload: { amount: 1 } ..

쇼핑몰 사이트 예제사용자 정의 태그와 Router를 이용해 쇼핑몰 사이트 예제를 만들어 보자. Router 설치다음 명령어를 이용해서 Router를 설치한다.npm install react-router-dom@6 # @6 : 6버전 index.js의 코드를 다음처럼 수정해 준다.import * as React from "react";import { createRoot } from "react-dom/client";import { BrowserRouter } from "react-router-dom";const root = createRoot(document.getElementById("root"));root.render( {/* The rest of your app goes here */} )..

Router를 이용한 페이지 예제사용자 정의 태그와 Router를 이용해 페이지를 생성해 보자. RouterReact Router는 React 애플리케이션에서 URL을 기반으로 한 라우팅을 구현할 수 있게 도와주는 라이브러리이다. 이를 통해 페이지 전환이 필요한 SPA(Single Page Application)에서도 페이지 새로고침 없이 동적으로 콘텐츠를 보여줄 수 있다. Router 설치다음 명령어를 이용해서 Router를 설치한다.npm install react-router-dom@6 # @6 : 6버전 index.js의 코드를 다음처럼 수정해 준다.import * as React from "react";import { createRoot } from "react-dom/client";import ..