본문 바로가기

전체 글301

(터미널) 기본 템플릿 복사 명령어 [window]입니다. 다이렉토리 ^ xcopy ^ /e ^ 복제폴더 ^ 새로운 폴더 2022. 8. 2.
함수의 매개변수(parameter) 종류 ■ 디폴트 매개변수 (default parameter)- 디폴트 매개변수란 매개변수에 const, let, var 로 값을 할당하듯이 기본이될 값을 할당하는 것 이다. const log = console.log;function test(x, y = "값없음"){ console.log(x, y);}test(7); // 7 "값없음" 출력test(7, 7); // 7 7 출력  ■ 나머지 매개변수 (rest parameter) - 매개변수 자리에 "..." 와 매개변수명을 선언한다. 이 매개변수는 함수를 호출했을때 넣은 인자를 모두 배열 안에 담아 가져올 수 있다. function test(x,y,...z){ console.log(x); // 3출력 console.log(y); // .. 2022. 7. 14.
VSC 확장: ES7+ React/Redux/React-Native snippets https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md 2022. 7. 14.
onClick 이벤트와 parameter 1. inline으로 표현 { 실행코드 } }> Click - 간단한 코드일 경우 효과적이지만 코드의 길이가 길어질수록 가독성이 좋지 않다. 2. 함수 표현식const handleClick = ( ) => { 실행코드 }     2-1. { handleClick( ) } }> Click **인자가 필요할 경우 코드블럭(화살표함수)를 깜싸야한다.    2-2. handleClick }> Click     2-3. handleClick( param ) }> Click **render되면서 즉시 실행(함수를 호출하는 방식) 3. 이벤트 객체를 인자로 사용할때const handleClick = ( e ) => { 실행코드 } e.target.value로 "데이터"에 접근 가능     3-1. e  => {.. 2022. 7. 13.
Class Component: React.PureComponent state 또는 props가 변경될때 마다 전체적으로 render함수가 호출된다. 그럼에도 성능이 좋은 이유는 바로 React는 Vertual DOM을 사용하기 때문이다. 메모리상에 있는 DOM 안에서 이전 데이터와 새로운 데이터와 비교를 해 수정된 부분만 찾아내어 실제 DOM에 render되기 때문이다. React.PureComponent는 컴포넌트를 업데이트 해야하는지 안해야하는지 판단해준다. 이때 비교는 shallow comparison. (오브잭트의 레프런스만 비교하는 수준. 레프런스의 데이터까지는 비교하지 않는다. ← deep comparison) - Shallow comparison ex1: const data = { name: "chanki", age: "33" } const newData .. 2022. 7. 13.
FOIT (Flash of Invisible Text), FOUT (Flash of Unstyled Text)의 특징 FOIT (Flash of Invisible Text) 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작이다. FOUT (Flash of Unstyled Text) 웹폰트가 로드될때까지 시스템의 기본 폰트를 보여주고 이후 reflow 해서 글꼴을 대체하는 방식 https://www.malthemilthers.com/wp-content/uploads/2017/06/foit-fout-animation.gif FOUC (Flash of Unstyled Content) 웹 폰트 최적화 하기 https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 해결.. 2022. 7. 11.