프론트엔드 첫걸음

https://stackoverflow.com/questions/41121982/strange-behavior-of-an-array-filled-by-array-prototype-fill Strange behavior of an array filled by Array.prototype.fill() I face something I don't understand with an array. Indeed, I created an array I have filled with empty subArrays to obtain a 2D Matrix. But when I manipulate the array it doesn't behave as I expect... stackoverflow.com fill이라는걸 알게됐..

Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (localhost) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab. https://stackoverflow.com/questions/37344066/firebase-this-domain-is-not-authorized [Firebase: This dom..

설치 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 ( ..

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' 액션타입은 대문자로 정의하고, 문자열 내용은 '모듈이름/액션이름'과 같은 형태로 작성한다. 문자열 안에 모듈 이름을 넣음으로써 프로젝트가 커졌..