본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 개인적으로 이해한 내용이 들어가있어 부정확한 내용이 적힐 수 있습니다. 지적 바랍니다. 이제 우리는 React에서 Redux를 사용하고자 한다. Redux에서는 기존에 제공하는 Redux 라이브러리에 react-redux라는 라이브러리를 추가로 제공해준다. npm install react-redux 더보기 import React from "react"; import ReactDOM from "react-dom"; import App from "./conponents/App"; ReactDOM.render( , document.getElementById("root") ); index.js import React from "r..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Dataless System To DOs ADD const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const toDos = []; const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li); }; const onSubmit = (e) => { e.preventDefault(); const toDo =..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Redux의 Store를 출력해보면 다음과 같은 함수들이 나온다. getState()는 store 내부의 현재 state값을 반환해주는 함수이고 dispatch()는 action에게 메세지를 보내기 위해 사용하는 함수라는 것을 우리는 배웠다. 그러면 subscribe() 함수는 어떤 함수일까? subscribe import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); c..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 더보기 Add minus Actions import { createStore } from "redux"; const coountModifier = (count = 0, action) => { return count; }; const countStore = createStore(coountModifier); redux에서 function을 부르기 위해 사용하는 2번째 파라미터이다. (첫번째 파라미터는 state) reducer는 store에 저장된 파라미터를 업데이트하지만 +1을 할지 -1을 할지는 우리가 말해주어야한다. 이렇게 reducer에게 말할 수 있는 방법이 action이다. dispatch import { crea..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 개인적으로 이해한 내용이 들어가있어 부정확한 내용이 적힐 수 있습니다. 지적 바랍니다. npm install redux Redux 왜 쓸까? 사실 RTK까지 강의를 듣고 나서도 Redux를 왜 쓰는지 어렴풋이는 알겠는데 정말 어렴풋이만 알았다. Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 라고 하는데 예측 가능한게 뭔데요? 몰?루 이러고 있으니까 당연히 이해가 안됐다. 그러다 새벽에 React 연습하다가 유튜브에서 괜찮은 영상을 봐서 가장 첫 글인 이 글에 가장 첫 부분, 즉 쓰는 이유를 알았어야 하는 타이밍인 이 곳에 이제야 정리해두려고 한다. Redux를 쓰는 이유는 크게 2가지이다. props..
본 글은 노마더 코더의 실전형 리액트 Hooks 10개 강의를 들으며 작성한 글입니다. React Hook이란? Functional Component에서 State를 가질 수 있게 해주는 기능. 기존의 React에서는 class로 component를 선언하고 그 안에서만 state를 사용할 수 있었다. 더보기 리액트에는 2가지 component가 있는데 바로 Function Component와 Class Component이다. (2021년 강의 버전에 따르면 useState, useEffect와 같은 Hook을 통해 Function Component로 통합할 수 있다.) Function Component import React from "react"; function App() { return ( I m..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. filter 함수를 통해 특정 성분을 제외한 배열을 만들 수 있다. const arr = [1, 2, 3, 4, 5]; function myFilter(item){ if(item > 3) return false; } arr.filter(myFilter); filter는 myFilter 함수에 arr의 각 성분을 파라미터(item)로 던져주며 myFilter를 실행한다. (map 함수 역시 비슷하게 동작한다) myFilter는 리턴값으로 true, false를 보내는데 true이면 배열에 포함되고 false이면 배열에서 제외된다. (정확히는 false값이 return된 배열 값을 제외하고 새로운 배열을 만들어준..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. Interval, Timeout function sayHello() { console.log("hello"); } setInterval(sayHello, 2000); setTimeout(sayHello, 5000); 2초마다 sayHello 함수를 실행(반복) 5초 후에 sayHello 함수를 실행(1회) padStart, padEnd String에 padding을 추가할 때 사용 padStart는 string의 처음에 padding을 추가 padEnd는 string의 끝에 padding을 추가 string.padStart(길이, "문자열"); string의 길이가 지정된 길이보다 작아면 "문자열"로 빈 칸을..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. LocalStorage - MDN 유튜브에서 볼륨을 지정했거나 유저의 이름을 기억해야하는 등 (브라우저 단위로) 저장해두어야하는 값이 있다. 이런 값을 저장할 수 있는 저장소를 브라우저에서 기본 API로 제공해주는데 이를 로컬 스토리지(local storage)라고 한다. setItem getItem removeItem JSON.stringify local storage에는 text만 저장할 수 있고 배열은 저장할 수 없다. 예를 들어 ["a", "b", "c"]라는 배열을 local storage에 저장하면 a, b, c라는 text로 저장된다. 이를 해결하기 위해 JSON.stringify라는 함수를 사용..
노마더코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 필요해보이는 것만 대충 적은 글입니다. const link = document.querySelector("a"); function handleLinkClick(event) { event.preventDefault(); console.log(event); } link.addEventListener("click", handleLinkClick); link에서 click 이벤트를 감시하는 EventListener를 붙여주면 click 이벤트가 발생시 handleLinkClick함수가 실행된다. handleLinkClick 함수가 실행 시 실행되는 event를 담은 객체를 handleLinkClick 함수의 파라미터로 주게 된다. +) array.forE..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. React Router React에서 페이지 이동시 사용하는 라이브러리 Route "스크린" 단위로 생각 = "route" 별로 생각 화면에 표시되는 하나의 Screen을 하나의 Route라 본다. Router router는 URL을 보고있는 component Browser Router : URL이 평소 보는 URL이랑 똑같다. Hash Router : localhost.com/#/movie붙인다. Swtich Route를 찾는 역할, 현재는 사용되지 않고 Routes로 대체되었다. 한번에 하나의 Route만을 렌더링하기 위해 사용 (원래 Router에서는 한번에 2개의 Route를 렌더링도 가능) 여기서 R..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. prev current처럼 state를 가져오는 함수 import {useState, useEffect} from "react" useState 등 사용할 때 import useEffect(effect, dependency) 특정 코드가 실행 시기를 설정하고 싶다. ex ) API 로딩 - Component의 첫 로딩 시만 코드 실행 이 경우에는 useEffect를 사용한다. React는 State가 변할 때 마다 리렌더링한다. 이는 UI관점에서는 좋을 수 있지만 특정 시점에만 실행하고 싶은 코드가 있을 수 있다. 특정 시점에만 코드를 리렌더링(실행)하고 싶을 때 사용한다. dependency = []안에 k..
