728x90

js 7

[React]조건부로 입력필드에 focus하기

예제 import { useState, useRef, useEffect } from 'react'; import './App.css'; import MyInput from './Myinput'; export default function App() { //초기값 설정 const [firstName, setFirstName] = useState('테일러'); const [lastName, setLastName] = useState('스위프트'); const [toggleForm, setToggleForm] = useState(true); function handleFirstName(e) { setFirstName(e.target.value); } function handleLastName(e) { setL..

Coding/React 2024.03.25

jsx마크업,jsx안에서 자바스크립트 사용하기

컴포넌트에서 렌더링 로직과 마크업을 한번에 표현하여 return 하나의 부모 태그로 감싸야하며 부모태그를 쓰지않을 경우 프레그먼트 사용 jsx내부에서 여러 객체를 하나의 배열로 감싸서 return하는 것과 같음 self closing 태그도 형태로 닫아야함 태그 속성명은 카멜케이스이며 예약어인 경우 className, htmlFor 사용 예제) html을 jsx로 변환하여 TodoList컴포넌트 만들기 Hedy Lamarr's Todos 새로운 신호등 발명 영화 장면 리허설 스펙트럼 기술 개선 체크박스 => 이 html을 jsx로 변환하면? import './App.css'; export default function TodoList() { return ( Hedy Lamarr's Todos 새로운 신호..

Coding/React 2024.03.05

addEventListener 이벤트리스너 ('click' 사용해보기)

document.getElementById('close').addEventListener('click', function(){ }); => 해석 : getElementById안의 요소가 클릭되면 괄호 안의 코드 실행시킨다 +여기서 'click'을 event라고 한다. Alert 박스 X 버튼1 버튼2 function 알림창1열기(구멍) { document.getElementById('title').innerHTML= 구멍; document.getElementById('alert').style.display = 'block'; } document.getElementById('close').addEventListener('click', function(){ document.getElementById('ale..

Coding/Javascript 2024.03.03

alert박스와 function()함수 콜라보

목표 -버튼1 / 버튼2 를 누르면 각 '아이디입력해라' / '비번입력해라' 가 적힌 alert 박스가 나오게 하기 코드 Alert 박스 버튼1 버튼2 function 알림창1열기(구멍) { document.getElementById('title').innerHTML= 구멍; document.getElementById('alert').style.display = 'block'; } => button onClick="" 안에 function함수를 넣는다. function() 의 () 안의 파라미터를 입력하여 편리하게 코드를 작성한다. 1. '알림창1열기'라는 function함수를 만들어서 식을 넣는다. document.getElementById('id명').innerHTML => 요소에 포함된 HTML을 ..

Coding/Javascript 2024.03.03

Alert 창 만들기

Window.alert() -확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄우는 메서드 구문 -window.alert([message]); Alert UI만드는 법 - 미리 디자인 해놓고 숨김(display:none) - css로 - 버튼 누르면 보여줌 (버튼 누를 시 display:block 으로 바뀌게 함) 예제1 Hello box 버튼 => id가 hello인 요소 가져와서 display 속성을 block으로 변경 예제2 닫기 버튼 => 닫기 버튼 만들기

Coding/Javascript 2024.03.01

ES5/ES6 차이

ES5 -오른쪽값을 변수공간(=저장공간)에 "대입연산자"로 하여 초기화 -var은 변수선언 전에 사용이 가능한 문제가 있음(변수호이스팅) + 호이스팅 : 인터프리터가 코드를 실행하기 전에 함수,변수,클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상 (메모리 공간을 선언하기 전에 미리 할당하는 것) -var없이도 변수선언이 가능하며 전역에 생성됨 -반복문에서 변수선언시 전역변수가 만들어짐 -var 함수스코프이므로 함수내부가 아닐 경우 전역변수가 되어버림 for (var i = 0; i

Coding/Javascript 2024.03.01