yuhun do IT

지금까지 connect( , )()를 사용해서 해야하는 줄 알았는데 알고보니 좋은 Hook이 있었다. store에 접근할 때useSlector() , useDispatch() 를 이용해서 값을 받아오고 수정할 수 있다. 아래와 같이 store를 만들어 두었다고 하고 이 훅들을 이용해서 다음을 해보자 1.name을 받아오는 것 2.name의 값을 userA 에서 userB로 바꾸는 것 import { createStore } from 'redux'; const reducer = (state, action) => { if (state === undefined) { return { name: 'userA', }; } if (action.type === 'CHANGE') { return { ...state, n..

HTML의 태그에는 data- 라는 속성이 존재한다. 이는 미리 선언해두면 함수의 기본 event 인자에서 뽑아 쓸 수 있는데 데이터를 선별할 때 사용할 수가 있다. 먼저 속성의 선언을 살펴보자 // data- 이후에 key는 임의로 정한것 이렇게 선언해두면 JS에서 함수의 기본 event로 불러올 수 있다. event.target.dataset 안에 들어있고 (임의의 이름)으로 data 속성의 값을 가지고 올 수 있다. ​ 다음은 배열에서 선별을 위한 함수이다. function onButtonClick(event, items) { const dataset = event.target.dataset; const key = dataset.key; const value = dataset.value; if (k..

async async는 promise 처럼 함수를 만들어준다. // 1. async 사용하기 // promise 라면! function a(){ // 데이터를 받아오는데 시간이 걸리는 함수. // promise라면 return new Promise((resolve, reject) => { resolve("a"); }) } const exA = a(); // async나 promise를 사용하지 않으면 여기서 시간을 잡아먹는다. console.log(exA); // ---------------------------------------------------------------- // async 라면! // 함수 앞에 async를 붙인다. 그러면 함수 안의 내용을 promise로 바꿔준다. async fu..

promise는 동작을 비동기적으로 처리할 수 있도록 도와주는 역할을 한다. promise를 사용할 때는 producer 와 consumer로 나뉘는데 먼저 producer를 만들어보자. // promise는 클래스로 new를 이용해 선언해 사용할 수 있다. const ex1 = new promise((resolve, reject) => { // 콜백함수로 성공과 실패시의 함수를 인자로 전달한다. // 이 부분은 바로 실행 resolve(value); // 성공시 reject(new Error(“에러 메세지”)); // 실패시 }) consumer는 값을 받아오는데 then / catch / finally를 이용해 받아올 수 있다. // ex1이 정상적으로 수행된다면~ 이라는 뜻의 then // chai..

CLASS 자바 스크립트에서 class라는 object를 사용할 수 있는데 유효성 검사를 위해 get과 set을 사용하게 된다. 이 부분은 c++의 class와 유사하다고 생각된다. class User{ constructor(P1,P2,P3){ // 생성자를 이용해 class에 값 할당이 가능하다. } // 예를 들어 c의 유효성 검사를 위해 get, set 키워드를 사용한다. get c(){ return this._c; // 언더바를 사용하는 이유는 계속해서 자신을 부르기 때문이다. } set c(value){ if(value < 0 ){ // value가 0보다 작으면 에러 메세지를 출력하고 싶음. throw Error(“0보다 큰 값이 아닙니다.”) } this._c = value; } } 상속 e..

Hoisting hoisting은 변수를 선언하기 전에 사용하고 후에 변수를 선언해도 순서상 변수 선언을 위로 끌어올리는 것을 말한다. 간단하지만 중요한 개념이니 꼭 알고 넘어가야 한다고 생각한다. a = 10; consoel.log(a); // 10 let a =0 이런게 가능하다는 것 호이스팅은 함수에서도 일어난다. ​ var VS let​ 전에는 var만 사용했지만 let을 사용하는 것이 코드에 더 좋다. 그 이유는 아래에서 설명되지만 코드를 더 정확히 짤 수있기 때문이다. 지금까지 var를 사용했던 곳이 많은 만큼 두가지 모두 잘 알 필요가 있다. var는 {block scope}를 무시하고 변수를 사용 할 수 있다. let은 { } 안에서 선언되어 진 것은 밖에서 볼 수 없다는 특징을 가지고 있..

"use strict"; "use strict";은 자바 스크립트를 작성할 때 가장 먼저 작성해주면 좋다. 선언하지 않은 변수를 사용하는 것과 같이 다른 언어에서는 비상식적인 코드를 제어하는 역할을 하고 더 효율적인 작동을 하도록 해준다. “use strict”; // 이렇게만 선언해주고 하던대로 하면 된다. // c++ 에서 # progma once 하는 것 처럼 사용 async 와 defer - html 에서 자바스크립트를 불러오는 방법 이렇게 선언하면 js를 병렬적으로 fetch하고 html parsing이 끝난 후에 js를 실행시켜 속도도 빠르고 오류도 없다. 그냥 태그에 넣고 defer 옵션 주자.

localStorage는 배열을 저장할 수 없다. 그래서 string으로 만들어 저장하고 그 string을 다시 배열로 변환해 사용해야 하는데 그 역할을 이 두 내장 함수가 아주 쉽게 하도록 도와주는 역할을 한다. JSON.stringify() 먼저 JSON.stringify()는 배열을 string으로 변환해 주는 역할을 한다. localStorage.setItem(KEY, JSON.stringify(VALUE)); // 배열 모양의 string이 저장됨. => ['a', 'b', 'c'] 자체의 string value가 배열이라면 이런 식으로 저장할 수 있다. 하지만 localStorage.getItem(Key);처럼 사용한다면 배열을 다시 사용할 수 없는 문제가 있다. 그래서 사용하는 것이 다음과 ..

노드 추가 createElement는 요소를 만드는 메서드이고 appendChild는 요소를 연결해주는 메서드이다. 아래 예시 통해 보자 img 태그를 html에 추가하고 싶다면 다음과 같다. const image = document.createElement("img"); document.body.appendChild(image); 하지만 img엔 src와 alt 등의 값이 필요한데 이는 원래 다음과 같지만 const imgSrc = document.createAttribute("src"); imgSrc.value = `./~` ; 더 간단한 방법이 있다. imgSrc.src = `이미지 주소`; 같은 방식으로 가능하다. 그리고 div 나 p 태그 같은 경우는 text 내용이 필요한데 이는 const a..

Math Math는 숫자에 대해 유용한 객체이다. 그중 random은 많이 사용되는데 예시로 알아보자. Math.random()은 기본적으로 0~1사이 값을 반환한다. 즉 1은 절대 나올 수 없음. 그래서 0 ~ 10을 원한다면(0부터 9까지 나옴) Math.random() * 10 이렇게 사용하고 1 ~ 10 의 숫자를 원한다면 Math.random() * 10 + 1 처럼 사용한다. ​ 하지만 이것은 사실 1.xxxxxx 처럼 소수점 아래 값이 나오기에 버림 올림 반올림중 택해야 한다. 일반적으로 버림이 편하다 생각하는데 Math에서는 floor()를 취급한다. 다음과 같이 쓸 수 있다. // 0 ~ 10 사이의 숫자를 원할 때 0,1,2,3,4,5,6,7,8,9 Math.floor( Math.ran..