์ ์ฒด ๊ธ(20)
-
React (2) - TypeScript ์์ setState props๋ก ๋๊ธธ ๋ Type ์ง์ ํ๋ ๋ฒ
์์ ์ปดํฌ๋ํธ์์ useState ํจ์๋ฅผ ๋๊ธธ ๋ ์๋ ์ฒ๋ผ ๊ธฐ์กด์ ํด์๋ ๊ฒ์ฒ๋ผ void๋ก ๋๊ฒผ๋๋ฐ, react ์์ ๋ ์ ์ ํ ํ์ ์ ์ ๊ณตํ๊ณ ์์๋ค interface ITestProps{ setTest: () => void } SetStateAction ๊ณผ Dispatch ์ด๋ค. import React, { SetStateAction, Dispatch } from 'react' interface Props { setTest: Dispatch } ์์ ์ฝ๋์ฒ๋ผ ํ์ ์ ์์ฑํ๊ฒ ๋๋ฉด ์ด๋ค ํ์ ์ ๊ฐ์ ๋ฃ์ด์ผํ๋์ง ํจ์ฌ ์ฝ๊ฒ ์ ์ ์๋ค. https://newbedev.com/passing-usestate-as-props-in-typescript Passing useState as props in typ..
2022.04.04 -
React (1) - redux-saga
redux-thunk ๋์ redux-saga ๋ฅผ ์ฌ์ฉํ๋ ์ด์ thunk ๋ dispatch ๋ฅผ ์ฌ๋ฌ๋ฒ ๋ถ๋ฌ์ค๋ ๊ธฐ๋ฅ๋ง ๊ฐ์ง๊ณ ์๋ค. npm i redux-saga npm i next-redux-saga redux-saga ์ก์ ์ ๋ชจ๋ํฐ๋งํ๊ณ ์๋ค๊ฐ, ํน์ ์ก์ ์ด ๋ฐ์ํ๋ฉด ์ด์ ๋ฐ๋ผ ํน์ ์์ ์ ํ๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํฉ๋๋ค. ์ฌ๊ธฐ์ ํน์ ์์ ์ด๋, ํน์ฅ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๋ ๊ฒ ์ผ์๋ ์๊ณ , ๋ค๋ฅธ ์ก์ ์ ๋์คํจ์น ํ๋ ๊ฒ ์ผ์๋ ์๊ณ , ํ์ฌ ์ํ๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ ์ผ์๋ ์์ต๋๋ค. redux-saga๋ redux-thunk๋ก ๋ชปํ๋ ๋ค์ํ ์์ ๋ค์ ์ฒ๋ฆฌ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์๋ฉด.. ๋น๋๊ธฐ ์์ ์ ํ ๋ ๊ธฐ์กด ์์ฒญ์ ์ทจ์ ์ฒ๋ฆฌ ํ ์ ์์ต๋๋ค. ํน์ ์ก์ ์ด ๋ฐ์ํ์ ๋ ์ด์ ๋ฐ๋ผ ๋ค๋ฅธ ์ก์ ์ด ๋์คํจ์น๋๊ฒ..
2022.04.03 -
JavaScript (4) - getElementById vs querySelecter
getElementById let element = document.getElementById(id); // id passwd ์ธ element ๋ฅผ ๊ฐ์ง๊ณ ์ฌ ๋ let passwd = document.getElementById("passwd"); querySelecter let element = document.querySelecter(selectors); // id passwd ์ธ element ๋ฅผ ๊ฐ์ง๊ณ ์ฌ ๋ let passwd = document.querySelecter("#passwd");
2022.04.03 -
JavaScript (3) - Window Size, Window.scrollTo, Window.scrollBy, Window Load ์ค๋ช
Global Object ex) innerWidth โ Window ์์ innerWidth ๋ฅผ ๊ฐ์ ธ์จ๋ค. DOM - Document Object Model BOM - Browsers Object Model JavaScript Window Size window.screen ๋ชจ๋ํฐ ์ฌ์ด์ฆ - ๋ธ๋ผ์ฐ์ ์ฌ์ด์ฆ๊ฐ ๋ณ๊ฒฝ๋์ด๋ ์ฌ์ด์ฆ๋ฅผ ์ ์งํ๋ค. window.outer ๋ธ๋ผ์ฐ์ ์ ์๋ url ์๋จ,ํญ๊น์ง์ ์ฌ์ด์ฆ window.inner ์นํ์ด์ง(์คํฌ๋กค๋ฐ ํฌํจ) documentElement.clientWidth ์นํ์ด์ง(์คํฌ๋กค๋ฐ ์ ์ธ) page x,y (๋ฌธ์์ ์์์ ) client x,y (๋ธ๋ผ์ฐ์ ์์์ ) Window Coordinates scroll_to.addEventListener('click', event..
2022.04.03 -
JavaScript (2) - find() , filter() ํจ์ ์ค๋ช
find() ํจ์๊ฐ ํน์ ์กฐ๊ฑด์ ๋ถํฉํ๋ ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ๊ฐ๋ง์ ๋ฆฌํดํ๋ค๊ณ ํ๋ค๋ฉด, filter() ํจ์๋ ํน์ ์กฐ๊ฑด์ ๋ถํฉํ๋ ๋ฐฐ์ด์ ๋ชจ๋ ๊ฐ์ ๋ฐฐ์ด ํํ๋ก ๋ฆฌํดํฉ๋๋ค. find() const arr = [ {name: 'apple', price : 1000}, {name: 'banana', price : 2000}, {name: 'apple', price: 3000} ]; arr.find((item)=>item.name === 'apple'); // {name: "apple", price: 3000} filter() const arr = [ {name: 'apple', price : 1000}, {name: 'banana', price : 2000}, {name: 'apple', price: 3000}..
2022.04.03 -
npm install ์ network timeout ์๋ฌ ๋ฐ์
ubuntu linux ์ ํ์ผ์ ์ฌ๋ฆฌ๊ณ npm install ์ ์คํ ํ์์ผ๋ network timeout error ๊ฐ ๋ฐ์ํ์์ต๋๋ค. `network timeout at : [https://registery](https://registery).npmjs.org/semver/-/semver-6.3.0.tgz` npm ์ด ์๋ชป ์ค์น๋ ๊ฒ ๊ฐ์์ node -v //๋ ธ๋ ๋ฒ์ ํ์ธ ๋ ธ๋ ๋ฒ์ ์ ํ์ธํด๋ณด๋ v10.19.0 ์ผ๋ก ๊ต์ฅํ ๋ฎ์์ต๋๋ค. ๊ทธ๋์ ์ญ์ ํ ๋ ธ๋ ๋ฒ์ ์ ์ต์ ๋ฒ์ ์ผ๋ก ์ค์น ํ์์ผ๋ ๊ณ์ํด์ v10.19.0 ์ผ๋ก๋ง ์ค์น๊ฐ ๋์์ต๋๋ค. ์ํ๋ ๋ฒ์ ์ ์ค์นํ๊ธฐ์ํด curl ์ ์ฐ์ ์ค์นํ์์ต๋๋ค. apt-get install curl - curl ์ค์น $ curl -sL []() | sudo ..
2022.04.02