[리액트 심화] Redux Toolkit 사용하기 (리덕스와 다른점 비교)

1. 리덕스 툴킷이란? - 리덕스를 개량한 것 => 리덕스의 구조와 패러다임은 동일 (새로운 개념 x) - 차이 : 설정 부분 & 모듈 파일! 2. 리덕스 툴킷 설치 방법 (1) 터미널에 yarn으로 추가하기 yarn add @reduxjs/toolkit 3. 코드 비교 (1) configStore.js 비교 [일반 리덕스] import { createStore } from "redux"; import { combineReducers } from "redux"; import counter from "../modules/counter"; const rootReducer = combineReducers({ counter, }); const store = createStore(rootReducer); expo..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

React : 리덕스로 todolist만들기

0. export default 와 export 차이점 (1) export default 1) 하나의 모듈에서 단 하나의 default 2) import 할때, {중괄호}없이 직접 지정 가능 3) 주요 또는 가장 중요한 기능이나 컴포넌트 보낼때 사용 * export default Home * import Home from './pages' (2) export 1) 하나의 모듈에서 여러개의 named export 가능 2) import할때 {중괄호}에 명시해야함 3) 여러 기능이나 컴포넌트를 하나의 모듈에서 보낼때 사용 * export const myFunction = ()=>{} * import {myFunction} from './pages' 1. 리덕스 설정 (3가지) (1) [Redux - Conf..

• format_list_bulleted React
• · 2023. 11. 25.
• textsms

#01 React와 Firebase로 구현하는 로그인 및 게시글 작성

#문제 ▶ 이미지를 첨부하고 [등록하기] 버튼을 누르면 fireStorage에 사진을 저장 & FireStore DB에 url 저장 기능 구현을 하고 싶은데 FireStore DB에 image_url이 저장되기 전에, 동기 부분이 완료되서 image_url 저장이 안됨. #해결 ▶ FireStore에 데이터가 저장되기 전에 이미지 파일 업로드가 우선 실행되도록 위치로 조정 ▶ 이미지 저장이 끝나고 FireStore에 데이터 저장되도록 async + await 코드로 수정 [Inputform.jsx] //이미지 파일 업로드 const handleUpload = async () => { const imageRef = ref(storage, `${auth.currentUser.uid}/${selectedFil..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 23.
• textsms

리액트 : Modal 모달 팝업 만들기 (+ Div태그 contentEditable : 이미지 넣기)

사용한 component 1) InputformLayout.jsx : 메인페이지 레이아웃 > 모달팝업 실행 2) Modal.jsx : 모달 팝업 3) Inputform.jsx : 모달팝업 내부의 데이터 내용 Div태그 contentEditable : 속성을 true를 사용시 글 + 이미지 작성 가능 1. InputformLayout.jsx : 메인페이지 레이아웃 > 모달팝업 실행 import React, { useState } from 'react'; import Modal from 'components/UI/Modal'; import styled from 'styled-components'; function InputformLayout() { const [modalOpen, setModalOpen] =..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 22.
• textsms

#02 React 프로젝트에서 Firebase 환경 설정하기

FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) 1. FireBase 개념 (1) 구글이 제공하는 서버리스(serverless) 플랫폼 ▶ 서버리스 : Firebase가 웹 서버 개발에 필요한 인프라 제공 => 개발자는 서버 관리 안해도 됨! : 서버 있음! : [사용 이유] 백엔드의 지 zerotonine2da.tistory.com (1) Firebase 프로젝트 추가 1. Firebase console 검색 후 로그인: https://console.firebase.google.com/ 2. 프로젝트 추가 - 프로젝트 이름 지정 - 애널리틱스 미사용 클릭 - 프로젝트 만들기 3. : 웹 클릭 - 앱 등록 (호스팅은 미체크 : 다른거 쓸 예정) -..

• format_list_bulleted Database
• · 2023. 11. 21.
• textsms

#05 리액트를 사용한 팬레터 웹사이트 개발 : 상세화면 UI 구현 및 공통 컴포넌트 & 공통 함수 적용

#04 리액트를 사용한 팬레터 웹사이트 개발 ▼: 팬레터 등록 기능 구현 및 유효성 검사 , 글자수 제한 방법▼ React#04 리액트를 사용한 팬레터 웹사이트 개발 : 팬레터 등록 기능 구현 및 유효성 검사 , 글자수 #03 리액트를 사용한 팬레터 웹사이트 개발 ▼: DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기 ▼ #03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈화면 팬레터 클릭시 상세페이지로 이동 (useNavigate 사용) 상세화면 UI 구현 공통 컴포넌트 적용 + 조건부 스타일 공통 함수 적용 홈버튼 (Link ..

• format_list_bulleted React
• · 2023. 11. 20.
• textsms