프론트엔드 첫걸음

datalist와 option의 차이 datalist는 추천하는 선택지를 나타내는 option 여러개를 보여줄 수 있으면서 input으로 자유롭게 입력할 수 있다. datalist 사용방법 datalist에 id 주고, 그 id를 input의 list속성에 value로 제공한다. img1 img2 img3 예시 See the Pen html datalist by JEONG (@cona) on CodePen.

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..

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 함수로 시작됨 롤업방식은 그냥 전역으로 선언하고, 파일명$함수명 으로 함수명을 바꿔서 이름충돌 방지함 롤업방식..