JiSoo's Devlog

react-router-dom 버전 6부터라면Route를 Routes로 감싸줘야 한다Router > Routes > Route component 속성이 없어졌다대신 element 속성 사용 } /> } />   store은 변경사항을 우리에게 알려줬었다어떤 변화가 일어났을  우리 애플리케이션을 다시 render 하고 싶다면  ProviderReact Redux에는 Provider 컴포넌트를 통해 다른 컴포넌트에서 Redux store를 사용할 수 있다const root = ReactDOM.createRoot(document.getElementById("root"));root.render( );index에 연결  connectconnect는 컴포넌트들을 store에 연결시켜 준..

Vanilla JS로 ToDoList 만들기 To Dos Add const form = document.querySelector("form");const input = document.querySelector("input");const ul = document.querySelector("ul");const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li);};const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; createTo..

ReduxRedux는 기본적으로 JavaScript Application들의 상태를 관리하는 방법Redux가 React와 많이 사용하면서 유명해졌지만 React에 의존하는 라이브러리는 아니다!!Angular, Vue.js, Vanilla JS에서도 모두 쓸 수 있다 Redux 설치npm install reduxoryarn add redux  Vanilla JS로 카운터 만들기const add = document.getElementById("add");const minus = document.getElementById("minus");const number = document.querySelector("span");let count = 0;number.innerText = count;const update..

타입스크립트는 자바스크립트의 '슈퍼셋' 언어자바스크립트를 기반으로 하되 더 확장된 프로그래밍 언어 타입스크립트는 리액트와 달리 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다가장 중요한 건 정적 타입의 특징을 갖는다는 것 !!런타임에 오류의 원인을 찾을 필요 없이 코드를 작성할 때 바로 오류가 표시된다 TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up you..

Math.random()에 10을 곱하면 0에서 10 사이의 숫자 얻을 수 있다 floor 내림 ceil 올림 const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; quote.innerText = todaysQuote.quote; author.innerText = todaysQuote.author; 이렇게 html로 만들어야 하는 것을 const images = ["0.jpg", "1.jpg", "2.jpg"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElement("img"); consol..

interval은 매번 일어나야 하는 무언가 const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setInterval은 호출하려는 함수의 이름, 매 호출 사이의 시간을 인자로 써주면 된다 설정한 시간마다 반복된다 setTimeout(sayHello, 5000); setTimeout은 설정한 시간만큼 기다렸다가 한 번만 실행 function getClock() { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}..

querySelector 사용할 때는 대상이 id 인지 명확히 해줘야 한다 → querySelector("#login-form") 왜냐면 classname, tagname 모두 검색 가능하기 때문에 Log In const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick() { console.log(loginInput.value); } loginButton.addEventListener("click", onLoginBtnClick); input의 유효성 검사를 작동시키기 위해서는 input이..

자바스크립트는 모든 브라우저에 내장되어 있고 프론트엔드 개발자가 사용할 수 있는 유일한 프로그래밍 언어 ! 브라우저가 HTML을 열고 HTML은 CSS와 자바스크립트를 가져오는 것 자바스크립트는 위에서 아래로 읽는다 VSCode에서 [파일] -> [폴더 열기] ->[MOMENTUM] 폴더 열기 ** 파일 생성 시 오류가 뜬다면 VSCode 속성을 관리자 권한으로 변경 두 엔진 동시 실행(CSS, JavaScript) alert("hi"); 자바스크립트에는 type이 있고 알아서 이해한다 Number : 정수(Integer), 실수(float) String : 처음부터 끝까지 문자로 이루어져 있다 "hello " + "my name is jisoo"→ "hello my name is jisoo" conso..