처음부터 시작하는 Java

아래의 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법 const element = Hello, world!; JSX 규칙 태그는 꼭 닫혀야 한다. 두개 이상의 태그가 존재하면 하나의 태그로 감싸줘야 한다. return()부분에서의 두개 이상의 태그 시 javascript 값 에는 {} 사용 주석은 {/* */} 이렇게 달자 { } 빼먹으면 /* 내용 */ 이렇게 출력됨 import './App.css'; import Hello from "./Hello"; function App() { const name = { title: 'my name is...', name: 'Lee soju' }; return ( //두개 이상의 태그에 하나로 감싸기 //Fragment..

Hello 라는 컴포넌트를 생성해보자 Hello.js // 컴포넌트 생성시 react 호출 import React from "react"; function Hello() { return Hello, React!; } // 다른 컴포넌트에도 사용이 가능하도록 export default Hello; App.js 에서 컴포넌트 호출 import './App.css'; import Hello from "./Hello"; function App() { return ( ); } export default App; 결과 컴포넌트의 재사용 import './App.css'; import Hello from "./Hello"; function App() { return ( ); } export default App; 결과

데이터를 랜더링을 해보고 map을 써서 데이터를 효율적으로 작성해보자 일단 기초 테이블 생성 import "./App.css"; function App() { return ( 품목 가격 사과 1000원 감귤 2000원 ); } export default App; 객체 생성, 랜더링 후의 코드 import './App.css'; function App() { const obj = { header: ["품종", "가격","수량(개)"], data: [ {fruit: "사과", price: "1000원", ea: "5"}, {fruit: "감귤", price: "2000원", ea: "3"} ] }; return ( {obj.header[0]} {obj.header[1]} {obj.data[0].fruit} ..

https://newline.tistory.com/117 React - 인텔리제이로 리액트 프로젝트 만들기 * React 사용에 앞서 NodeJS가 설치되어 있어야 한다. 설치는 https://nodejs.org/en 에서 안정적인 LTS 버전으로 설치하자. 1. New Project - JavaScript - React App - Next 2. 프로젝트명과 경로 입력 후 Next.. newline.tistory.com

https://codingapple.com/unit/react1-install-create-react-app-npx/ 리액트 React 설치와 개발환경 셋팅 (2022 ver) - 코딩애플 온라인 강좌 0:00 개발환경 셋팅 0:42 리액트프로젝트 생성은 2:38 이제 에디터에서 오픈해서 코드짜십쇼 4:04 뭐했는지 설명 개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 13 codingapple.com

아래와 같은 onclick 함수가 있다고 치자 이걸 바꾸려고 할땐 onclick 속성 삭제 $("#onclickChange").removeAttr("onclick"); onclick 속성 추가 $("#onclickChange").attr("onclick", "funtionName()"); 이렇게 된다.

.prop() 는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다. html 의 attr 이 아닌 js 에서 prorperty를 가져오는것, .prop( propertyName ) 속성값을 가져온다. .prop( propertyName, value ) 속성값을 추가한다. https://www.codingfactory.net/10341 jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드 .prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니 www.codingfacto..

.serialize()메서드는 표준 URL 인코딩 표기법으로 텍스트 문자열을 생성한다. 보통 form 에서 submit을 해줘도 되지만, 이런 방법도 있다. 아래는 기본 $( "form" ).on( "submit", function( event ) { event.preventDefault(); console.log( $( this ).serialize() ); }); 아래 처럼만 해줘도 해당 폼의 name 과 value를 가져와준다.. let testData = $("form#testForm").serializeArray(); let testData11 = $("form#testForm").serialize(); 이렇게 하고 ajax를 사용하여 요청! 그러면 아래처럼... 보내준다. 너무 사랑스럽고..ㅎ..

뭐 이런식의 radio 가 있다고 하자.. 그럴때 raido 를 필수 선택하기 위해선 아래의 jQuery를 사용하자 if (! $('input[name="radioOptions"]:checked').val()) { alert("사과나 배 둘중 하나를 골라주세요."); return false; } 이렇게하면 체크가 안되어 있을 시, alert 가 뜨면서 선택하게 만든다 ㅇㅇ..

https://yejip.com/web/2020-12-14-ajax1/ Ajax 데이터 주고받기 ◇ Ajax 포스팅 시리즈 ◇ yejip.com 설명이 매우 잘 되어 있다.ㄱㄱ