일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- ㅡ
- react
- 함수형프로그래밍
- 서초구보건소 #무료CPR교육
- ignore padding
- es6
- tailwindCSS
- 제어컴포넌트
- 부모패딩
- createPortal
- twoarrow
- 부모요소의 패딩 무시
- useQueryClient
- vite
- accordian
- DOM
- parent padding
- BlockFormattingContext
- Carousel
- 리액트
- debouncing
- BFC
- CustomHook
- 조건부스타일
- alias설정
- transition
- 화살표2개
- 문제해결
- ?? #null병합연산자
- QueryClient
- Today
- Total
목록개발 공부 (168)
프론트엔드 첫걸음
background-clip text : 백그라운드 이미지를 텍스트에만 border-box : border까지 padding-box : padding까지 context-box : content내에서 background-position: 배경화면 위치 background-position: left 20px; /* 0% 20px; */ background-position: 50% 50%; /* center; */ background-position: bottom 50px right 100px; /*아래로부터 50px, 오른쪽으로부터 100px*/ background-position: 100px 50px; /* 왼쪽으로부터 100px, 위로부터 50px */ background-size /* Keyword v..
설치 npm install @react-oauth/google@latest npm install jwt-decode index.html /*중략*/ Sandwich 코드 function App() { //구글 로그인 const [user, setUser] = useState({}); function handleCallbackResponse(response) { console.log('Encoded JWT ID token : ' + response.credential); var userObject = jwt_decode(response.credential); console.log(userObject); setUser((prev) => { return { ...prev, userObject }; }); co..
[생활코딩] https://youtu.be/bNqOHnsJm-w function outter(){ var title = 'coding everybody'; function inner(){ alert(title); } inner(); } outter(); // alert('coding everybody') 내부함수에서 외부함수의 지역변수에 접근할 수 있는 것을 클로저라고 함 function outter(){ var title = 'coding everybody'; return function(){ alert(title); } } var inner = outter(); inner(); // alert('coding everybody') inner(); 로 outter를 호출하면 function() 리턴 리턴..
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN The white-space CSS property sets how white space inside an element is handled. developer.mozilla.org 텍스트의 여백 그대로 사용할 때 태그 안에 넣어주면 여백을 그대로 살릴수있는데, 이때 줄바꿈이 필요할때 white-space: pre-wrap (공백 있는 그대로 표시) 또는 white-space: pre-line(공백 1개만 표시) 사용할 수 있다. [참고] https://aboooks.tistory.com/187
코딩애플 강의 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 ( ..
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..