분류 전체보기 (127) 썸네일형 리스트형 [react] input 태그 (onChange, onInput) react에서는 onChange() 와 onInput() 같다 function App() { return ( { console.log('Hi') } } /> ); } 이렇게 작성하면 input창에 글자를 입력할 때마다 Hi 가 콘솔창에 출력된다. input에 입력한 값을 state로 저장하여 출력하려면 function App() { let [inputVal, inputChangeVal] = useState(''); return ( {inputVal} {inputChangeVal(e.target.value)} } /> ); } 표시된다. [react] 부모에서 자식 Component 값 전달 function App() { var num = 1; return( ); } function Modal(props) { return( {props.num} ); } 화면에 1 표시 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이렇게 써야한다. [react] return 안에 html 그리기 위한 함수 function App() { return( ); } function Modal() { return( ); } [Javascript] for in / for of 1) for in var obj = { x : 1, y : 2, z : 3 }; for (var i in obj) { console.log(i + " : " + obj[i]); } => x : 1 y : 2 z : 3 2) for of var array = [1, 2, 3]; for (var val of array) { console.log(val); } => 1, 2, 3 [react] map 함수 (+자바스크립트) / 반복문에 key값 map() : array 내의 모든 데이터에 똑같은 작업을 시켜 주고 싶을 때 1) 모든 array 에 2를 모두 곱하고 싶을 때 var array = [2, 3, 4]; var newArray = array.map(function(a) { return a * 2; }); //4, 6, 8 2) div안에서 map 사용 function App (){ return ( { Items.map(function(){ return (안녕) }) } ) } => 안녕 안녕 안녕 3) map 사용 function App (){ var Items = [바나나, 배, 사과]; return ( { Items.map(function(val){ return ({val}) }) } ) } => 바나나 배 사과 4) 반복문으로 d.. [react] onClick {click(true)}}> onClick 안에 ()=>{} 써준다 [react] warning 없애기 /* eslint-disable */ js 코드 젤 위에다가 주석포함하여 그대로 복붙하면 없어진다. 주석포함하여 적용 후 사라짐! 맥북에서 nodejs 설치 1. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 본인은 14.16.1 LTS 설치함 3. 설치 후 터미널에서 node -v 확인 [css] cubic-bezier .box { animation-name: boxKeyframes; -webkit-animation-duration: 170ms; -webkit-animation-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); } @-webkit-keyframes boxKeyframes{ from{ background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.7); } } kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80 CSS : cubic-bezier란? cubic-bezier란? cubic-bezier() function은 CSS에서 transition.. [css] webkit keyframes .box { animation-name: boxKeyframes; -webkit-animation-duration: 170ms; } @-webkit-keyframes boxKeyframes{ from{ background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.7); } } 애니메이션 사용 선언 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음
