T_era

submit과 click 둘다 사용자submit과 click 둘다 사용자 인터렉션의 반응하는 이벤트들 이지만 적용대상의 차이가 있다submit은 form태그에서 사용하게 되는데 또는 두 요소가 클릭되거나 엔터를 누르게 되면 이벤트가 발생한다.그리고 이벤트가 발생하고 난 후에는 새로고침을 실행한다그래서 주로 form 데이터가 서버로 전송되는 것을 처리하기 위한 이벤트로 사용한다. form 유효성 검사를 수행하거나, form 전송 전에 특정 작업을 수행하는 데 사용하는 등 이 있다특징은 아래와 같다- form 요소에 이벤트 리스너를 부착해야 한다.- 기본 동작은 form 데이터를 action 속성에 지정된 URL로 전송하고 페이지를 새로고침하는 동작인데- event.preventDefault() 메서드를..

현대 JavaScript 환경에서는 주로 ES Modules 방식을 사용하며, 이전 방식으로는 CommonJS가 있다오늘은 ES Module에 대해 알아보자1. ES Modules (ECMAScript Modules) 내보내기 (Export): 참조될 파일에서 export 키워드를 사용하여 변수, 함수, 클래스 등을 내보냅니다.// moduleA.jsexport const myVariable = 10;export function myFunction() { console.log('Hello from myFunction');}export class MyClass { constructor() { console.log('MyClass instance created'); }}가져오기 (Import): ..

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.위와같은 오류가 떠서 방법을 찾아봤다원인으로는 웹서버를 통하지 않고 파일을 통해 직접 웹사이트를 열었을 때 발생하는데웹사이트 주소가 이런식으로 파일의 형태일 때를 말한다그래서 crossorigin="anonymous"같은 속성도 사용해봐도 효과가 없었고해결하기 위해 github의 page기능을 사용해 배포형태로 하여 웹사이트를 열어서 하니까 해결이 되긴하는데..수정하고..

CORS(Cross-Origin Resource Sharing) 정책은 웹 브라우저에서 실행되는 JavaScript 코드가 다른 도메인의 서버에 리소스를 요청하는 것을 제한하는 보안 메커니즘악의적인 웹사이트가 사용자의 민감한 정보를 탈취하는 것을 방지하기 위해 도입CORS 정책의 작동 방식:Same-Origin Policy (SOP): 웹 브라우저는 기본적으로 동일한 출처(프로토콜, 호스트, 포트가 모두 동일한 URL)의 리소스 간에만 자유로운 접근을 허용하고 다른 출처의 리소스에 접근하려고 하면 브라우저는 이를 차단한다CORS의 역할: CORS는 SOP의 제한을 완화하여, 서버가 특정 출처의 요청을 허용하도록 명시적인 설정을 할 수 있게 한다. 서버는 HTTP 응답 헤더를 통해 어떤 출처의 요청을 허용..

이전 앨범 프로젝트를 사용결과

데이터베이스의 개념  - 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음  - 데이터를 잘 찾기위해 잘 적재하는 것  - index값을 통해 데이터를 찾는 과정없이 바로 가져올 수 있다 관계형 데이터베이스와 비관계형 데이터베이스 * 관계형  - SQL, 정리된 데이터를 다룰 때 사용 ex)은행, 대기업 등 * 비관계형  - NoSQL, 복잡하거나 유연한 정보를 다룰 때 사용 ex)스타트업 등   tmi - index값이 아닌 다른 값으로 찾게 될 경우 규모에 따라 프로그램이 꺼지는 현상이 발생할 수 있다. 이것을 풀스캔이 떴다 또는 DB가 죽었다고 표현 Firestore database  - NoSQL 데이터베이스   *firestore 생성방법(html 기준) 1) firebase 사이트에 접속..

span 태그를 사용하면 태그 안에서 일부분을 묶어 사용할 수 있다현재 서울의 미세먼지 : 나쁨fetch 사용 (서울 미세먼지 오픈API사용)$(document).ready(function () { let url = "http://spartacodingclub.shop/sparta_api/seoulair"; fetch(url).then(res => res.json()).then(data => { let state = data['RealtimeCityAir']['row'][0]['IDEX_NM']; $("#state").text(state); })})결과

서버와 클라이언트 JSON : 데이터를 주고받는 형식 Get : 클라이언트가 서버에 데이터를 요청하는 것 fetch 시작하기 기본 골격 fetch(url).then(res => res.json()).then(data => { console.log(data)})페이지가 전부 불러와졌을 때 호출하는 함수 $(document).ready(function () { //이벤트})

결과

자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 붙이기 사과 귤 감 3. 붙이기 영수는 24살입니다. 세종은 30살입니다. 수영은 20살입니다. 결과