hooney.log

1. useMemo() 리액트 Hook 에서 useEffect()와 비슷하게 불필요한 동작을 막기 위해 useMemo()라는 것을 사용한다. 예를 들면, Lifecycle이 시작될 때 배열을 서버로부터 받아와서 useState()로 데이터를 상태를 유지한다고 하면, const [data, setData] = useState([]); const getData = async () => { const response = await fetch("url") .then((res) => res.json()); setData(response); } useEffect(() => { getData(); }, []) 이런 코드를 작성할 수 있다. 여기서 Data 안에 있는 내용을 화면에 보여준다고 하면, const getD..

리액트를 함수형 컴포넌트를 사용하면서 unMount는 어떻게 잡는지 제대로 알지 못했는데, 이번에 공부하면서 알게 되었다. 먼저 Lifecycle이란 화면에 있는 컴포넌트들이 생성될 때 발생하는 과정을 말한다. 이런 과정 제어하는데, Hooks를 사용하면서 클래스형보다 좀 더 편하고 안전하게 사용할 수 있게 됐다. 간단하게 생성 수정 제거 3단계로 나눠서 생성은 화면에 나타나는 것 - Mount 수정은 말 그대로 업데이트(re-render) - Update 제거는 화면에서 사라지는 것 - UnMount 이를 코드로 나타내면 // 생성 & 제거 useEffect(() => { console.log("Mount!"); return () => { console.log("UnMount!"); } }, []); ..

리액트를 사용하면서 DOM에 접근할 땐 useRef()를 사용한다. const nameInput = useRef(); const [state, setState] = useState({ name: "", email: "", password: "", }); const dataSubmit = () => { if (state.name.length < 1) { alert("빈값이면 안돼요."); return nameInput.current.focus(); } } return ( ... 제출 ) nameInput을 console.log로 확인해보면 jQuery나 바닐라JS 사용할 때 보던 화면을 보게 된다. 위에서 만든 nameInput 안에 current가 있고, 그 안에 value, style 등등이 있다. 리..

리액트를 사용하면서 state가 여러개 일 때 각각 해줬었는데, 왜 공통화할 생각을 한번도 안했는지 반성했다. 내가 평소 사용하던 코드 const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( { setName(e.target.value); }} /> ... ) 이렇게 해왔는데, 이러한 코드를 공통화 하면, // const [name, setName] = useState(""); // const [email, setEmail] = useState(""); // const [password, setPassword] = useSt..

내가 헷갈려서 한 번 정리하는 포스팅 array.forEach() vs array.map() 을 간단하게 비교해서 정리하려한다. 1. map() - 콜백함수의 반환값들로 구성된 새로운 배열을 반환 - 원본배열을 변경하지 않음 const arr = [1,2,3,4,5]; const newArr = arr.map(i => { return i * 3; }); console.log(newArr) // [3, 6, 9, 12, 15] 2. forEach() - 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하는 프로그래밍 - 단순 반복문을 대체하기 위함 const arr =[1, 2, 3, 4, 5]; const newArr = arr.forEach((num, index) => { return n..

- 지난번에 radar 차트를 만들었었다. - 차트 종류가 매우 많은데, 하나씩 만들어보려 한다. - 그 중에 이번엔 bar 차트를 만들어본다. - 나는 thymeleaf를 사용 중이기 때문에 th:src="@{~~}" 이런 문법이 들어가 있지만, 보통은 src="~~" 이렇게 코드를 넣어주면 된다. - th:block도 필요 없다. - 라벨은 x축 눈금에 표시될 문자를 말한다. - 데이터는 10년 동안 이탈리아 프로 축구 리그 Seria A의 우승팀과 횟수이다. const ctx = document.getElementById('chart').getContext('2d'); const chart = new Chart(ctx, { type: 'bar', data: { labels: ['AC Milan','..

전 포스팅에서 Chart.js 사용기를 적었는데, 작업하다가 서버에서 Map형태로 보내준 데이터(Javascript에서는 Object로)를 배열로 변환해서 차트의 라벨과 데이터로 사용했다. 단순히 for문을 돌려서 배열로 만들었었는데, 훨씬 효율적인 방법이 있었다. let obj = { A : 'Apple', B : 'Banana', C : 'Coconut' }; let arr = []; let vArr = []; for (let k in obj) { arr.push(k); vArr.push(obj[k]); } console.log(arr); // ['A', 'B', 'C'] console.log(vArr); // ['Apple', 'Banana', 'Coconut'] for ... in 으로 key에 ..

C#코드를 Java로 Converting 작업 중 차트가 있는데, radarChart.aspx로 만들어져 있었다. 나는 화면 쪽은 Javascript로 작업을 하고 있었기 때문에, 저 라이브러리를 사용할 수 없었다. 예전 회사에서 D3.js를 해봤지만, 복잡했던 기억이 있다.(공부를 제대로 안했다..) 그래서 간단하고 사용하기 편한 Chart.js를 사용했다. 일단 공홈에서 라이브러리를 다운받았다. https://www.chartjs.org/docs/latest/ Chart.js | Chart.js Chart.js (opens new window) Installation You can get the latest version of Chart.js from npm (opens new window), the..

모던 자바스크립트 Deep Dive 정리 1. 배열의 생성 1.1 배열 리터럴 // 배열 선언1 const emptyArr = []; console.log(emptyArr[1]); // undefined console.log(emptyArr.length); // 0 // 배열 선언2 const arr = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; - 자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함 가능함. const arr = [ 'string', 10, true, null, undefined, NaN, Infinity, ['nested array'], { object: true }, fun..

모던 자바스크립트 Deep Dive 정리 - 자바스크립트의 함수는 호출될 때, 매개변수로 인수, arguments 객체, this를 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); - 자바스크립트는 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수 호출 방식과 this 바인딩 - 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. - 함수의 호출 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bin..