프론트엔드14 리액트 에러 노트 : Warning: Cannot update a component (`UserDataProvider`) while rendering a different component 에러 : index.jsx:23 Warning: Cannot update a component (`UserDataProvider`) while rendering a different component (`LoginPage`). To locate the bad setState() call inside `LoginPage`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at LoginPage (http://localhost:5173/src/pages/login-page/index.jsx?t=1712222271893:22:24) at RenderedRoute (http://localhost:5173/node.. 2024. 4. 4. 자바스크립트 기본 자바스크립트를 쓰는 이유 알기 자바스크립트 (naver.com) 자바스크립트 우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS terms.naver.com 웹페이지에서 자바스크립트의 역할 1. 마우스와 키보드의 입력 등의 이벤트 처리 2. 동적으로 웹페이지 내용, 모습을 제어 3. 브라우저 창 제어 4. 웹서버와 통신 자바스크립트와 ajax 의 관계 Ajax 에이작스란 '비동기식 자바스크립트 XML' 의 약자로 , 자바스크립트를 활용한 비동기 통신으로 클라이언트와 서버간에 XML 데이.. 2022. 7. 3. Swiper 라이브러리를 사용하여 js 스와이프 구현하기 cdn 형식으로 Swiper 를 불러와 사용 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 공식문서 Swiper - The Most Modern Mobile Touch Slider (swiperjs.com) 2022. 4. 20. HTTP 상태 코드 - 오류 메시지 파악하기 클라이언트측에서 서버에서 응답온 오류를 처리하기 위해선 404 200 등 상태코드를 파악할 필요가 있다. 아래 내용을 참고하자 HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2022. 1. 29. 인풋태그 패스워드 타입 "눈" 감추기 input 태그의 password 타입에서 나오는 요 눈 버튼을 감추는 방법 css 설정에 아래 내용을 추가하면 된다 input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } 참고: html - How to hide the eye from a password input in MS Edge and IE - Stack Overflow How to hide the eye from a password input in MS Edge and IE I now found an answer: It just works when I add display: none !important;. I dont know, what ex.. 2022. 1. 17. Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) 유알엘의 데이터가 response 로 들어와 찍힘 json 데이터라면 GET 방식으로 할떄 $.ajax({ type: "GET", url: "json 데이터 유알엘", data: {}, success: function(response){ console.log(response['객체이름']['엘레멘트이름'][0]) } }) 이런식으로 계속 [참조]하여 사용 (data: {}) 부분은 POST 방식에서만 씀 jQuery+Ajax의 조합을 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모.. 2021. 8. 8. [웹 프론트엔드] 부트 스트랩 부트 스트랩 시작 템플릿 이걸로 시작입니다 부트 스트랩 컴포넌트(4.0) https://getbootstrap.com/docs/4.0/components/alerts/ 2021. 8. 7. jQuery 자바스크립트의 생산성을 향상시켜주는 라이브러리 파생 라이브러리 존재 jQuery UI, jQuery Mobile는 jQuery기반의 GUI 라이브러리 라이브러리를 다운받아 서버에 적용하기도 하지만 이렇게 패쓰를 추가 해 사용하는것이 편함 제이쿼리 wrapper $ 로 또는 jQuery 로 시작 ( '#클래스 엘리먼트 ')등 안에 CSS 셀레트 문법으로 객체들을 찾고 한번에 css 적용 jQuery 로 쓰면 다른 라이브러리와 충돌을 방지 안전하게 사용하는 방법--- API .으로 연결해 api 계속 적용 - html('출력 스트링') - css("속성","값") - live('이벤트',처리함수) 이벤트 api -ramoveClass('삭제할클래스명') (this) 이벤트 객체인듯 -addClass('클래스.. 2021. 8. 2. 웹 개발환경 오류 노트 : 자바스크립트 ALert 창 한글깨짐 문제 스크립트 태그에 charset 을 넣어 해결 2021. 6. 19. javaScript 태그 갯수 세기 getElementsByTagName 함수 사용 !DOCTYPE html> 1 2 3 4 5 getElementsByTagName 함수에 인자로 태그를 넣어서 배열로 반환받는다 배열의 갯수가 태그의 갯수 2020. 11. 29. 이전 1 2 다음
