자바스크립트기초 (32) 썸네일형 리스트형 #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.. 리액트 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.. #4.3 Events part Two addEventListener안에 있는 함수는 직접 실행하지 않음, 브라우저가 실행시켜 주는 것, 실행하면서 event에 관한 정보도 담아줌 정보를 담아줄수 있는 파라미터를 만들고, 그 파라미터는 preventDefault처럼 몇가지 함수도 실행가능함 const link = document.querySelector("a"); function onLinkClick(event){ event.preventDefault(); //링크를 클릭하면 해당사이트로 이동하는 기본동작을 막음 console.dir(event); } link.addEventListener("click",onLinkClick); #4.2 Events 모든 EventListener function의 첫번째 파라미터는 항상 방금 발생한 event들에 관한 정보임 submit되면 페이지 전체가 새로고침되는 기본 동작 막기 기본행동 : 어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작 const loginForm = document.querySelector(".login-form"); const loginInput = document.querySelector(".login-form input"); function onLoginSubmit(event){ //함수의 파라미터를 명시해주면(어떤이름이든 상관x) 자바스크립트에서 event를 채워줌 event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않게 막는 것 //form을 s.. #4.1 Form Submission js로 username의 유효성 검사 function LoginButtonClick(){ const username = loninInput.value; if(username === ""){ //username이 공백이라면 alert("이름을 입력해 주세요."); }else if(username.length > 15){ //username의 길이가 15를 넘는다면 alert("이름이 너무 길어요"); } } html을 활용해서 username의 유효성 검사 -> input의 유효성을 검사하려면 input은 form안에 위치해야 함 form안에서 enter를 누르고 input이 더이상 존재하지 않으면 submit form안에 있는 버튼을 눌렀을 때도 form은 자동으로 submit -> 더 이상 click에.. #4.0 Input Values 요소 찾기 const loginForm = document.getElementById("login-form"); //html에서 login-form(html element)을 찾음 const loninInput = loginForm.querySelector("input"); const loninButton = loginForm.querySelector("button"); 로그인버튼 눌러서 값 가져오기 Log In const loninInput = document.querySelector(".login-form input"); //왜 .으로 해야 에러가 안뜨지 const loninButton = document.querySelector(".login-form button"); function LoginBu.. 이전 1 2 3 4 다음