본문 바로가기

전체 글

 (185)
#5.2 PadStart PadStart : 문자열 길이를 정해진 수로 조정해줌, String을 현재보다 길게 만들어야 할 때 사용 function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2,0); //문자열로 변환 후, const minutes = String(date.getMinutes()).padStart(2,0);//문자열을 2개로 맞춰주고 문자열이 2보다 작다면 앞에 0붙임 const seconds = String(date.getSeconds()).padStart(2,0); clock.innerText = `${hours}:${minutes}:${seconds}`; }
#5.1 Timeouts and Dates setTimeout(sayHello, 5000); //5초 후에 함수가 실행됨 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}` } getClock(); //즉시 호출해서 바로 시간을 볼 수 있게 setInterval(getClock, 1000);
#5.0 Intervals Interval '매번'일어나야 하는 무언가 2초마다 무슨 일이 일어나게 하고 싶다-> 이럴때 Interval을 사용 1초 === 1000ms const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello,5000)//실행하고자 하는 함수, 함수가 호출되는 간격(ms)
#4.6 Loading Username 반복되는 string은 변수로 저장 Username을 기억해두고 새로고침해도 사라지지 않도록 저장하기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기 const USERNAME_KEY = "username"; function onLoginSubmit(event){ const userNameType = loginInput.value; ev..
리액트 10강 state일반 JavaScript 객체, 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨사용자와의 상호작용을 통해 화면이 바뀌는 경우에 useState 를 사용 하여 "상태 관리"를 가능하게 하는 객체 import React, { useState } from "react"; // import useState//useState라는 것을 통해서 react의 state라는 것을 만들 수 있음function Counter() { const [number, setNumber] = useState(0); //숫자의 값을 만드는 부분, useState함수 사용 //기본값을 입력으로 받음, 이 기본값은 state가 가지게 될 기본값 //기본값을..
리액트 9강 hello.js에 있는 name을 아무리 바꿔도 app.js에 있는 name은 바뀌지 않음props는 “부모 컴포넌트”에서 “자식 컴포넌트”로 보내주는 값이기에 자식 컴포넌트를 바꿔도 부모 컴포넌트는 바뀌지 않음 함수의 파라미터로 변수를 전달해주는 것이기에 app에 있는 name의 값이 복사alt + shift + f -> 코드정리우리가 만든 컴포넌트로 다른 컴포넌트를 감싸주려면 반드시 감싸는 컴포넌트가 프롭스로 children을 받아온 후 자신의 jsx표현식 안에 넣어줘야 함 import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';function App() { return ( ..
#4.5 Saving Username username을 키벨류로 해서 브라우저에 저장하기 function onLoginSubmit(event){ event.preventDefault(); //새로고침되는 기본 동작을 막음 loginForm.classList.add(HIDDEN_CLASSNAME); //로그인 폼 클래스리스트에 hidden클래스 추가해서 가리기 const username = loginInput.value; //입력받은 값을 username에 대입 localStorage.setItem("username",username); //localStorage를 이용하여 키벨류로 입력받은 username저장 greeting.innerText = `Hello ${username}`; //greeting(h1) 클래스리스트에 HELLO uae..
#4.4 Getting Username string과 변수를 합치는 방법 두번째 방법은 ``(백틱)기호로 묶어주고 변수를 ${}로 묶어줘야 함 greeting.innerText = "Hello " + username; //greeting.innerText = `Hello ${username}`; 똑같음 string과 변수를 하나로 합쳐줌 로그인 버튼을 누르면 로그인폼을 제거하고 사용자이름과 함께 hello메시지 출력하기 Log In const loginForm = document.querySelector(".login-form"); const loginInput = document.querySelector(".login-form input"); const greeting = document.querySelector("#greeting"); c..

티스토리툴바