Light Purple Pointer
MonthPicker 라이브러리 모음
·
FRONTEND/기타
https://www.npmjs.com/package/react-month-picker react-month-pickerMonth-Picker Component offers a popup month selection panel with responsive layouts.. Latest version: 2.2.1, last published: 4 years ago. Start using react-month-picker in your project by running `npm i react-month-picker`. There are 13 other projects in twww.npmjs.com   https://www.react-lite-month-picker.dev/ React Lite Month P..
Input -> type="number" 한글 자음 입력 방지
·
FRONTEND/기타
현재 react-hook-form을 사용해서 폼을 만들고 있는데 ,  분명 number 타입으로 만들었는데 아래와 같이 한글 자음도 입력을 받는것임.    아래의 링크와도 동일한 현상이 발생함.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number - HTML: HyperText Markup Language | MDN" data-og-description=" elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries." data-og-host="developer...
[Typescript] 공부 내용 정리
·
FRONTEND/기타
Typescript - 타입스크립트(Typescript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.- 타입스크립트를 사용하여 컴파일 시점에 에러를 확인할 수 있음1. 타입 애너테이션 기초아래와 같은 형태로 타입을 명시한다.  그 외의 다른 타입의 값을 할당할 때 에러 발생 let myVar: type = value// 문자열 타입 stringlet movieTitle: string = "Apple";movieTitle = "Pie";//movieTitle = 9; // errormovieTitle.toUpperCase();// 숫자 타입 numberlet numCatLives: number = 9;numCatLives += 1;//numCatLives = "zero" //erro..
(API활용) 깃허브 유저찾기 app 2
·
FRONTEND/기타
//유저 이름을 입력창에서 가져오기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..
(API활용) 깃허브 유저찾기 app 1
·
FRONTEND/기타
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 클라이언트 라이브러..
AJAX 기본 개념 및 예제
·
FRONTEND/기타
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 ..
로또 번호 가져오기
·
FRONTEND/기타
로또번호요청.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 에러 메세지..
jQuery 를 활용해 AJAX 사용 load()
·
FRONTEND/기타
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",..
Dom 응용실습
·
FRONTEND/기타
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 - event
·
FRONTEND/기타
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..