전체 글 (282) 썸네일형 리스트형 #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); 리액트 8강 props : propertise의 준말, 컴포넌트에 어떤 값을 전달할때 사용하는 것코드 중간에 중괄호가 있으면 자바스크립트 표현식이 들어간 것컴포넌트에 어떤 값을 전달하려면 반드시 어떤 어트리뷰트에 값을 넣어주고, props를 이용해서그 어트리뷰트를 받을 수 있음//app.jsimport React from 'react';import Hello from './Hello';function App() {return ( //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당);}export default App;//Hello.jsimport React from 'react';function Hello(props) {return Hello, {props.name} //hello라는 컴.. 리액트 7강 클래스형 컴포넌트반드시 render()함수가 정의되어야 함render함수는 반드시 JSX를 리턴하는 부분을 포함해야 복잡하고 어려움mport React from "react";class App extends React.Component { //React.Component를 상속받는 App이라는 클래스render() {return Hello, React!;}}export default App;함수형 컴포넌트function키워드, 함수이름, 함수 내부에서 JSX를 리턴하는 부분만 있으면 됨클래스형 컴포넌트보다 훨씬 간결하고 직관적최신 react버전에서는 함수형 컴포넌트 사용을 권장 클래스에서만 사용할 수 있던 state를 react-hook으로 구현가능해져서 함수형 사용 function App() {retu.. #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.. #3.8 CSS in Javascript part Three classList로 클래스 이름을 바꾸는 것이 아닌 classname 목록들 관리하기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked"; if(h1.classList.contains(clickedClass)){ //classList가 clickedClass를 포함하고 있다면 h1.classList.remove(clickedClass); //classList에 clickedClass를 제거 }else{ //포함하고 있지 않다면 h1.classList.add(clickedClass);//classList에 clickedClass를 추가 } } h1.addEventListener.. 이전 1 ··· 30 31 32 33 34 35 36 다음