App.js import "./App.css"; function App() { return ( ); } function OurHeader() { return 처음 앱; } function TimeArea() { return 현재 시간 : {new Date().toLocaleString()}.; } function Footer() { return Copyright Footer Text; } export default App; 재 사용 가능한 컴포넌트로 됨. index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(docume..

https://nodejs.org/en/download Download | Node.js LTS Recommended For Most Users nodejs.org 다 next해서 설치하면됨 설치 됐는지 확인하기 npm은 node.js를 설치하면 패키지로 생성되는 프로그램임 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ef8a840bd on 10/25/2023. chrome.google.com 에러..

https://ko.legacy.reactjs.org/docs/hello-world.html Hello World – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 자바스크립트 라이브러리인 리액트 리액트 홈페이지의 문서 소개를 따라서 코드펜에서 실습해봄 https://codepen.io/pen/ Create a New Pen ... codepen.io Babel react, react dom 선택 자바스크립트로 가상의 dom를 만들어서 헬로우 월드! 를 랜더링 한다. https://codepen.io/hrrhhaff-the-bold/pen/abXLyZL 카멜 케이스로 적용이 됨 ( 두 번째 단어의 첫 글자는 대문..

//유저 이름을 입력창에서 가져오기function 유저카드내용입력(user) { const userID = user.name || user.login; //name이 있으면 name OR login id const userBio = user.bio ? `${user.bio}` : ""; const cardHTML = ` ${userID} ${userBio} ${user.followers} Followers ${user.following} Following ${user.public_repos} Repos `; main.innerHTML = cardHTML;} a..

https://docs.github.com/en/rest?apiVersion=2022-11-28 GitHub REST API documentation - GitHub DocsTo create integrations, retrieve data, and automate your workflows, build with the GitHub REST API.docs.github.com github에서 제공하는 api 목록들임    제일 하단에 Users api를 활용할 예정     한 명의 유저를 찾아옴      이 api를 요청 할 때 fetch api  Axios 사용해볼거임https://axios-http.com/kr/ Axios브라우저와 node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러..

https://www.youtube.com/watch?v=w077w7FN-pg&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q index.html AJAX 연습 HTML CSS JavaScript WEB Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo alias labore aliquid illum pariatur tempora temporibus impedit, odit voluptatibus delectus, eos tenetur quis, ipsam deleniti eaque. Neque voluptatum id nihil! Lorem ipsum dolor sit amet consectetur adipisicing ..

로또번호요청.html 생성 https://kadosholy.tistory.com/23 로또 api를 이용하여 로또번호 가져오기 로또 api를 이용하여 로또번호 가져오기 로또 관련 앱이나 프로그램을 만드려고 하면 로또 당첨번호를 알 필요가 있는데 현재 복권 판매 홈페이지나 관련 웹 사이트를 찾아봐도 공식적으로 로또 kadosholy.tistory.com CORS 에러 보안에러임 https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F 🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏 악명 높은 CORS 에러 메세지..

TEXT. HTML 파일 가져오기 load() 제이쿼리파일가져오기.html 생성 text.html html 문서입니다. 화면 출력 html,txt 등 파일을 load()를 통해 가져올 수 있음 만약 잘못된 파일 ( 없는 파일) 을 가져오려고 시도 했을 경우 오류 발생하도록 코드 작성할 수 있음. 상태가 성공이면 이상없음 alert창 출력 에러면 에러 내용 alert창 출력 그래서 만약 text.html 이 아닌 text11.html (없는 파일) 을 가져온다고 시도하면 위와 같은 alert창이 발생한다. JSON 타입 가져오기 위의 제이쿼리파일가져오기.html 복사해서 제이쿼리JSON가져오기.html 생성 가져올 user.json 생성 [ { "id": 1, "first_name": "Jeanette",..

jQuery Dom 사용 버튼 1 첫번째 문장입니다. 두번째 문장입니다. script 만약 p태그의 para1의 color와 background color을 바꾸자고 한다면 $("p.para1").css("color", "red"); $("p.para1").css("background", "yellowgreen"); 이렇게 작성했을 것이다. 위의 두 줄을 한줄로 줄여서 아래와 같이 사용가능하다. // css를 여러개 입력 시 객체형식으로 가능{키:'값',....} $("p.para1").css({ color: "red", background: "yellowgreean" }); 그리고 아예 css를 따로 만들어서 원하는 태그를 선택하여 클래스를 추가해 줄 수 있음. 예) .myclass 추가 .myclas..

jQuery cdn head에 넣음 셀렉터 html 복사해서 수정 jQuery 이벤트 Mouse Events Button 1 Button 2 $("#btn1").click(function(){ alert('Button Clicked!"); }); = id btn1을 클릭하면 alert함수가 실행된다. 실행 결과 button1를 클릭하면 alert 창이 뜸 button2를 클릭하면 아무런 이벤트가 발생하지 않음. 원래 script 는 body태그 제일 하단에 쓰는데 , 아래와 같이 코드를 작성하면 script를 어디에 작성하던 HTML이 준비되면 해당 내용 실행함 button1을 누르면 해당 내용을 숨기고 button 2를 누르면 숨겨놓은 내용을 다시 보이게 만들어 보기 Mouse Events Button..