공부기록용

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴form 🔴preventDefault() 🔴classList.add() Log In > HTML에서 끌어오기 // app.js // 1. const loginForm = document.getElementById("login-form"); // 에서 input 가져온 것 // html문서를 의미하는 document를 하지 않은 이유는 loginForm에서 이미 정해서 loginForm을 끌어왔기 떄문 const loginInput = loginForm.querySele..

1. 본론에 들어가기전 에 대해 간략하게 설명하자면, 은 사용자로부터 값을 입력을 받는 양식을 만들기 위해서 사용한다. , , , 등과 같은 다양한 입력 요소들을 포함할 수 있다. 닉네임 : 이메일 : 비밀번호 : 제출 const signupForm = document.querySelector('form'); signupForm.addEventListener('submit', event => { event.preventDefault(); // * console.log('제출이 완료되었습니다.'); }); 주요 속성 action: form 데이터를 제출할 서버의 URL을 지정합니다. method: form 데이터를 서버로 전송하는 방식을 지정합니다. 주로 GET 또는 POST 방식을 사용합니다. encty..

import import React from "react"; 여기서 `React`는 React 라이브러리에서 내보내는 기본 모듈입니다. 대부분의 경우, React 라이브러리에서 `React` 객체를 사용하여 React 컴포넌트를 생성하고 JSX를 렌더링하는 데 필요한 기능을 사용할 수 있습니다. 또 구조 분해 할당을 사용하여 필요한 기능을 선택적으로 가져올 수도 있습니다. 예를 들어, `useState`와 `useEffect` 훅을 가져오려면 다음과 같이 작성할 수 있습니다: import React, { useState, useEffect } from "react"; > `React`와 함께 `useState`와 `useEffect`를 현재 파일에서 사용할 수 있도록 가져옵니다. 이렇게 하면 `React..

🔴컴포넌트 분리(같은 파일내에서) 🔴컴포넌트 분리(파일 분리로) 삭제기능 분리 import React, { useState } from "react"; // useState를 import해주는 것 확인 import './App.css'; const App = () => { const [users, setUsers] = useState([ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]); // 아래 return에서 받아 오는, input안에 입력되는 값들이 바로바로 셋팅되는 것 // 이름 const [name, set..

🔴state 생성, 연결 🔴입력 값 추가하기 🔻코드뜯어보기 🔴입력 값 삭제하기 // ./src/App.js import React from "react"; import './App.css'; const App = () => { // Javascript를 쓸 수 있는 영역 // 함수가 시작되는 부분 바로 밑 // return문 위에 const arr = ['감자', '고구마', '오이', '가지', '옥수수']; return( // retur문 바로 밑은(return문 안에 쓰는 것) html 같이 생긴 부분을 작성하는 부분 // html같이 생겼지만 JSX문법 이라고 함 // JSX : Javascritp와 XML(html이라고 생각)의 합성어 // Javascript적인 요소를 쓰고 싶다면{ }안에 작..

// src/App.js import "./App.css"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const minusBtnClickHandler = () => { const newminusCount = count -1; setCount(newminusCount); } const plusBtnClickHandler = () => { const newPlusCount = count +1; setCount(newPlusCount); } return ( {count} -1 +1 ); } export default App; // src/App.js import "./App.css"; imp..