https://github.com/acdlite/react-fiber-architecture 이 문서를 참고하였습니다.1. React Fiber란 무엇인가요?React Fiber는 React의 핵심 알고리즘(reconciler)을 완전히 새로 구현한 것입니다. 애니메이션, 레이아웃, 제스처와 같은 사용자 경험 중심 작업을 더 잘 처리하려고 설계되었습니다. 기존에는 어떤 문제가 있었던 걸까요?React 15까지는 재귀호출기반 동기 렌더링이였습니다. 즉 한번 렌더링이 시작되면 중단 없이 끝까지 실행되어야했습니다. 결과적으로 렌더링이 길어지면 에니메이션이 끊기고 사용자 입력이 무시되며 전체 앱이 멈춘듯한 느낌이 들었습니다. 그렇기때문에 React 팀은 다음과 같은 목표를 가지고 Fiber를 설계했습니다. Fi..

컴포넌트를 분리하던중 깨닳은것을 적고자한다import React from "react";import Pagenation from "../common/Pagenation";import SearchBox from "../common/SearchBox";import heart from "../../images/icon/heart.svg";import "./../css/ProductList.css";import { Link } from "react-router-dom";const Product = ({ productLists }) => { return ( {productLists?.map((data) => ( ..

싱글페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미이다. 이를 이해하기위해선 싱글페이지 애플리케이션이란 개념이 생기기전에 사용되던 멀티 페이지 애플리케이션이 어떻게 작동하는지 살펴봐야한다. 멀티페이지 애플리케이션에서는 사용자가 다른페이지로 이동할때마다 새로운 html을 받아오고, 페이지를 로딩할때마다 서버에서 CSS,JS, 이미지 파일등의 리소스를 전달받아 브라우저의 화면에 보여주었다. 각페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도했다. 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않..

브릿지란? 브릿지란 안드로이드와 웹뷰의 통신을 위해 만들어지는 javascript 용 인터페이스다. 웹뷰에서는 안드로이드의 메서드를 직접 호출하는 것이 불가능하기 때문에 브릿지라는 통로를 통해 호출해야한다. 브릿지는 웹뷰에 붙는 인터페이스의 구현체이다.

1. 리덕스로 폼 상태 관리하기 auth 모듈을 수정해준다. /* * * @title auth.js * @desc auth 모듈생성 (redux toolkit적용 ), counterSlice api사용 * * * @author yunrap * @since 2022.07.17 17:27:11 * @version 0.1.0 * @see =================== 변경 내역 ================== * 날짜 변경자 내용 * 2022.07.17. yunrap 최초생성 */ import { createSlice } from "@reduxjs/toolkit"; const initialState = { register: { username: "", password: "", passwordConfir..

1. UI 구현하기 1. AuthForm.js 화면 import styled from "styled-components"; /* * * @title AuthForm.js * @desc 회원가입폼 * * * @author yunrap * @since 2022.07.18 20:18:22 * @version 0.1.0 * @see =================== 변경 내역 ================== * 날짜 변경자 내용 * 2022.07.18. yunrap 최초작성 */ const AuthFormBlock = styled.div``; export default function AuthForm() { return AuthForm; } 회원가입을 위한 폼이다. src/components/auth/ Au..