일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 화살표2개
- twoarrow
- CustomHook
- debouncing
- createPortal
- 서초구보건소 #무료CPR교육
- 부모요소의 패딩 무시
- react
- ?? #null병합연산자
- ignore padding
- useQueryClient
- transition
- 부모패딩
- es6
- alias설정
- 문제해결
- tailwindCSS
- Carousel
- accordian
- DOM
- BFC
- parent padding
- ㅡ
- 조건부스타일
- BlockFormattingContext
- QueryClient
- 제어컴포넌트
- 리액트
- 함수형프로그래밍
- vite
- Today
- Total
목록전체 글 (182)
프론트엔드 첫걸음
코딩애플 강의 38강 batch - setState함수 맨 마지막것만 실행되는것 리액트 17에서는 ajax나 setTimeout 내부는 batch 없이 (맨마지막 setState만 실행되는것 없이) 모든 setStatet실행됐음 리액트 18에서는 ajax나 setTimeout 내부에서도 setState batch useTransition , useDeferredValue import {useState, useTransition, useDeferredValue } from 'react'; let a = new Array(7000).fill(0) function App() { let [name, setName] = useState('') let [isPending, startTransition] = useT..
리액트로 개발된 페이지는 기본적으로 SPA ~ 하나의 js ~ 처음 로딩 느림 로딩이 오래걸리는 페이지는 lazy import 하면 필요할때 import되어 처음 로딩속도를 줄일 수 있음 const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 임포트 된 컴포넌트는 별도의 js 파일로 발행됨 lazy 임포트 된 컴포넌트 로딩 시 보여줄 UI를 Suspense로 설정할 수 있음 import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( ..
https://dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2 What is module bundler and how does it work? understand how module bundler works dev.to Http 요청 5번 보다 번들파일 1번의 요청이 더 효율적이다 이렇게 자바스크립트 파일을 번들링하는 데에는 몇가지 문제가 따른다. 1. 파일 순서 2. 이름충돌 방지 3. 사용되지 않은 파일 확인 번들링은 웹팩방식과 롤업방식이 있는데,, 웹팩방식은 파일명으로 맵핑, 함수로 모듈을 감쌈 . webpackStart 함수로 시작됨 롤업방식은 그냥 전역으로 선언하고, 파일명$함수명 으로 함수명을 바꿔서 이름충돌 방지함 롤업방식..
import Counter from '../components/Counter'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ({ number, increase, decrease }) => { return ( ); }; const mapStateToProps = (state) => ({ number: state.counter.number, }); const mapDispatchToProps = (dispatch) => ({ increase: () => dispatch(increase()), decrease: () => { dispatch(decrease()); }, }); export default co..
리액트를 다루는 기술 17장 기본 리덕스 코드 작성하기 리덕스 코드는 1.액션타입, 2. 액션생성함수, 3.리듀서 코드를 작성해야한다. 코드를 작성하는 방법은 대표적으로 두가지가 있는데, 첫번째는 constants(액션타입), actions(액션생성함수),reducers(리듀서코드) 폴더 아래 각각의 기능별로 다른 파일을 만들어서 작성하는 방법이다. 두번째는 액션타입, 액션생성함수, 리듀서 코드를 기능별로 파일 하나에 몰아서 다 작성하는 방식이다. 이를 Ducks패턴이라고 한다. - 액션타입 정의하기 const INCREASE = 'counter/INCREASE' 액션타입은 대문자로 정의하고, 문자열 내용은 '모듈이름/액션이름'과 같은 형태로 작성한다. 문자열 안에 모듈 이름을 넣음으로써 프로젝트가 커졌..
https://youtu.be/0awA5Uw6SJE Redux Toolkit Tutorial 9강 //import redux from 'redux'; const redux = require('redux'); const createStore = redux.createStore; const bindActionCreators = redux.bindActionCreators; const combineReducers = redux.combineReducers; //상수를 만들어 놓으면 액션 재사용시 오타 방지할 수 있다. //액션 정의 const CAKE_ORDERED = 'CAKE_ORDERED'; const CAKE_RESTOCKED = 'CAKE_RESTOCKED'; const ICECREAM_ORDERED..
https://youtu.be/0awA5Uw6SJE Redux Toolkit Tutorial 2-4강 npm init -y package.json 파일 생성 npm install redux redux package 설치 이 강의에서는 케잌샵 시나리오를 리덕스에 비유한다. Entities Activities 샵 - 선반에 케이크를 저장 주인 - 카운터에 있음 손님 - 매장 입구에 있음 손님 - 케이크를 주문함 주인 - 선반에서 박스를 포장함 (케이크 재고 파악등을 위해 ) 영수증을 만든다 리덕스 핵심개념 리덕스의 핵심개념을 케잌샵 시나리오에 비유하여 설명한다. 케이크 샵 시나리오 Redux 목적 샵 - 케이크를 안전하게 보관 Store - 애플리케이션의 State를 안전하게 유지한다. 애플리케이션의 Sta..
See the Pen overflow : hidden by JEONG (@cona) on CodePen. 부모요소와 자식요소의 border 가 겹쳤을때 자식요소의 margin이 작동하지 않는다. -margin collapse 이 때 margin collapse를 피하는 방법은 여러가지가 있다. 대표적으로 부모요소에 padding : 1px; 을 주거나 border: 1px solid black; 을 주는것이다. 그외에도 새로운 블록서식컨텍스트를 생성하는 방법이 있다. BFC가 생기는 조건 html root 태그 (body 태그는 만들어지지 않는다) none을 제외한 float position: fixed, absolute display: inline-block, table, table-cell, tabl..
https://youtu.be/0awA5Uw6SJE - Redux is for Javascript applications 리덕스는 리액트에 국한되는 것이 아니다. 앵귤러나 뷰, 자바스크립트에도 사용할 수 있는 자바스크립트 애플리케이션을 위한 라이브러리다. -Redux is a state container State는 앱의 모든 각각의 컴포넌트들이 공유하는 상태를 의미한다. 리덕스는 앱의 State를 저장하고 관리한다. -Redux is Predictalble 리덕스는 애플리케이션이 업데이트 될 때 State 관리를 쉽게 한다. 예측가능하고 테스트 가능한 코드를 작성하도록 돕는다. -Redux Toolkit Redux의 구성이 복잡하고, 코드를 작성하기 위한 코드(boilerplate code)가 많이 필..
() => { return } 의 생략은 () => 이다. 옳은 코드 {value => {value.color} } 잘못된 코드 {value => { {value.color} } } immer의 produce 함수는 return 반환하지 않는 void 함수이다. 옳은 코드 const onChange = useCallback( (e) => { const { name, value } = e.target; setForm( //immer+useState함수형 업데이트 produce((form) => { form[name] = value; }) ); }, // [form] [] //상태 form대신 함수받으니까 의존성배열에 form 넣을 필요 없음 ); 잘못된 코드 const onChange = useCallba..