be special ✨

React Element에 style 적용하기 css로 적용하기 (className) className을 사용하는 것을 추천(HTML에서 이미 사용하는 이름은 React에서 지양) 문자열 inline style 로 적용 props로 전달되어 사용된다. style은 객체로 적용, 카멜케이스로 작성할 것(예 : backgroundColor) const element = ( 버튼 ) ref로 DOM다루기 useRef를 사용 스스로 최적화하는 React DOM조작을 하게 되면, 이를 벗어나게 된다. const inputRef = React.useRef(); const Input = () => { return () } inputRef.current.focus();로 해당 input 요소에 focus DOM? El..

Object 정적메소드(static method) Object.assign()과 같이 prototype이 없는 경우(Object.prototype.assign이 아님) {}.assign()과 같이 사용할 수 없음. Object.assign() mdn: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); source에서 속성이 target으로 복사되어 들어간다. target또한 변경되고 re..

npm 프로젝트 버전 일치시키기 package.json : 수동 모듈 관리 package-lock.json : 수동 모듈과 연결된 다른 외부 모듈 두 파일이 필요하다. 두 파일을 프로젝트 디렉토리의 루트경로에 이동시키고 npm i 명령어를 통해 설치한다. node.js https://nodejs.org/ko/ chrome V8 자바스크립트 엔진으로 만들어진 JavaScript런타임 기존 main.js에 연결한 js(import)한 것들을 한 파일로 만듦 parcel bundler는 웹브라우저에서 동작하는 것x 개발용으로만 사용하므로 "devdependency"로 설치 유의적 버전 Semantic Versioning, SemVer node --version 으로 node 버전을 확인할 수 있다. npm -..

순차적 애니메이션 동작하도록 만들기(GSAP) elments.forEach((element, idx) => { gsap.to(element, 1, { delay: (idx + 1) * 0.7, opacity: 1, }); }); idx는 0부터 시작하므로 +1 해주어 0.7, 1.4, 2.1, 2.7 .... 과 같은 delay(지연시간)을 두고 동작하게 된다. 요소가 최대한 줄어들어있을때 최대 크기를 가지도록 설정 부모요소가 flex이고, 대상요소가 width 값이 따로 없을 때에는 최대한 줄어들어 화면에 표시되지 않게 되는데, 이 경우 flex-grow 속성으로 최대한의 width를 차지하도록 설정할 수 있다. (flex-grow:1;) flex내 높이는 최대한 늘어나려고 한다(align-items ..

파비콘(favicon, favorite icon) 티스토리에서도 확인할 수 있는 파비콘은 따로 설정없이도 화면에 표시된다. 프로젝트의 루트(/)경로에 favicon.ico 라는 이름으로 파비콘으로 설정되길 원하는 아이콘을 저장해 두면 해당 아이콘이 위 티스토리 파비콘처럼 실제로 표시되게 된다. 파비콘을 고해상도(PNG)로 제공하기 위해서는 link 태그로 제공가능하다. (내부에 삽입) 브라우저 스타일 초기화 jsdeliver, cdnjs등에서 link태그로 reset.css를 연결해서 사용할 수 있다. (Eric Meyer's CSS reset.) 오픈 그래프 소셜미디어로 웹페이지를 공유할때 보여지는 정보 여기서 og란 open graph를 뜻한다. 트위터 카드 트위터의 개발자 문서(https://dev..