에바니네

React { useRef }

useRef 밑에는 요소의 아이디를 강제해서 해당 요소가 랜더딩되면 focus가 되게 하게 끔 만들었다. 이걸를 useRef를 사용하면 const rootElement = document.getElementById('root'); const App = () => { React.useEffect(() => { document.getElementById("input").focus() },[]); return( ); }; ReactDOM.render(, document.getElementById("root")); 밑에 같은 코드로 바뀐다. useRef()로 만들어진 무언가를 inputRef라는 변수에 넣어주고, 원하는 요소에 ref라는 속성에 변수를 넣어주고, useEffect에 Input.current.fo..

$(document).ready() 는 바닐라 자바스크립트로 ?

Jquery $( document ).ready(function() { console.log( "ready!" ); }); Vanila JS document.addEventListener('DOMContentLoaded', () => { console.log('document's ready'); }); addEventListner에 저런 속성이 있는줄 몰랐서.. 잊지않기위해 이런 배운거를 써넣어갈 생각이다.

React { Element props }

Element style 입히기 const element = ( Green Blue Red Gray Black ); ReactDOM.render(element, document.getElementById("root")); 위에 코드는 그냥 'JSX'를 이용해서 button 5개를 element라는 변수에 넣어주고, 랜더를 돌린것이다. css는 첨부는 안하였다. 하지만 리액트에서는 저런 class라는 속성이름과, 아무래도 저런 반복적인 요소들은 컴포넌트로 만들어서 관리하는게 편하기 때문에 바꿔준다. // Button Component를 만들고, props를 받아온다. // ...props안에는 해당 컴포넌트 태그안에 모든 속성값들이 들어있는데 // 그런데 저기 className처럼 따로 props와 따로 ..

React { Hook }

Custom Hook 일단 Custom Hook은 만들때 앞에 "use"를 붙이고 뒤에 이름을 CamelCase로 붙여준다. ex) useFetch 앞서서 배운 Element가 반복되는 경우는 함수로 대체하고 Hook 들이 반복이 되면 Custom Hook으로 대체한다. 한번 JSONPlaceholder 서비스를 가짜 데이터를 fetch하여 todo 아이템 p태그 요소를 만드는 코드이다. 기존 코드 import { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; const Home = () => { const [data, setData] = useState(null); useEffect(() => { fetch("h..

React { useState, useEffect }

Component State Control by useState // 실습 코드 const rootElement = document.getElementById("root") const App = () => { const [keyword, setKeyword] = React.useState(""); const [result, setResult] = React.useState(""); const [typing, setTyping] = React.useState(false); function handleChange(event){ setKeyword(event.target.value); setTyping(true); } function handleClick(){ setTyping(false); setResult..

React { Rerendering, EventHandler }

React의 Rerendering // 일반적인 자바스크립트 const rootElement = document.getElementById("root") function random() { const number = Math.floor(Math.random() * (10-1) + 1); const element = `${number}`; rootElement.innerHTML = element; }; setInterval(random, 1000); // JSX를 이용한 React const rootElement = document.getElementById("root") function random(){ const number = Math.floor(Math.random() * (10-1) + 1); c..

React { JSX, Fragment, Interpolation }

JSX - React.createElement 표현식 - JSX의 사용을 위해 javascript compiler인 Babel이 필요하다. - Spread 연산자 응용가능 const element = Hello, world! // 간단한 JSX // Spread 연산자를 이용한 속성 삽입 const props = { className: titleClassName, children:text}; const custom = ; const element = custom; ReactDOM.render(element, rootElement); React.Fragment 를 이용한 멀티 Element 생성 이런식으로 빈태그로 감싸줘도 적용이된다. 이때 의문이다 왜 React.Fragment를 쓰게되는가? const ..

Git Flow

git checkout git checkout 이라는 명령어는 해당 브랜치로 이동 혹은 변경사항 취소해버리는 기능을 수행한다. 그래서 Git 측에서 최신 버젼에서 switch랑 restore 명령어를 만들어 두 기능을 확실히 갈라놨다. 하지만 여전히 checkout을 쓰는 경우가 많다. git conflict 필요없는 내용물과 구분선을 지우고 다시 해보면 된다. vscode 상에서 에러가 나면 기존 사항과 변경사항중 어떤걸 살릴지 사용자에게 딱 보여준다. git push -u origin 여기서 -u 는 -upstreamset 을 뜻하며 로컬에서 브랜치를 만들고 원격저장소에 없을 경우, 원격 저장소에 해당 브랜치를 만들어주면서 로컬의 해당 브랜치를 Tracking 하게끔 동기화를 시켜는 것이다. 안붙이면..