반응형 Web23 [Html] form 태그와 input 요소들, GET / POST 방식 ⚡️ form html의 요소 중 하나인 form은 데이터를 주고 받음에 있어서 많이 사용하는 요소 중 하나입니다. form 태그 안에 삽입한 submit 이벤트가 발동되면, 정의된 method 속성 type으로 action을 통해 목적지에 데이터가 전송됩니다. 데이터는 다양한 타입의 input 요소를 이용해 사용자로부터 입력을 받을 수 있습니다. 전송된 데이터는 웹 서버에서 처리하고, 정해준대로 페이지를 이동하거나 알림을 주기도 합니다. ⚡️ action 속성 action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시해야합니다. submit이 이루어지게 되면 입력받은 데이터와 함께 명시한 주소의 위치로 이동합니다. ⚡️ method 속성 method 속성을 통해 form 요소의.. 2022. 2. 8. [Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 innerHTML innerHtml은 마크업 태그를 핸들링할 수 있기 때문에 태그(div, img, script...)들을 삽입 가능합니다. 각종 태그들을 삽일할 수 있다보니 input 태그에 악성 스크립트를 삽입하는 XSS 공격의 가능성이 존재합니다. Login input으로 위와 같이 스크립트 태그를 넣으니 정상적으로 작동되는 것을 볼 수 있습니다. 저는 간단히 alert를 사용했지만 충분히 악의적으로 사용할만 합니다. 이에 최대한 innerHTML 사용을 지양하는 편이 좋습니다. innerText, textContent innerText 프로퍼티는 textContent와 기능이 유사하지만 중요한 차이점이 존재합니다. 이는 반환하는 값과 성능 두가지 측면에서 알아보겠습니다. 반환 값 innerText.. 2022. 2. 7. [Javascript/자바스크립트] CSS 선택자를 사용하는 querySelector, querySelectorAll를 통해 요소 선택하기 CSS 선택자 종류 document.querySelector(선택자) document.querySelectorAll(선택자) CSS 선택자를 사용하는 querySelector를 알아보기 위해 먼저 CSS 선택자의 종류부터 알아보겠습니다. 다음 표와 같은 키워드를 사용해 특정 요소들을 가져올 수 있습니다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소를 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소를 추출 클래스 선택자 .클래스 특정 class 속성을 가진 요소를 추출 속성 선택자 [속성 = 값] 특정 속성 값을 갖고 있는 요소를 추출 후손 선택자 선택자1 선택자2 선택자1 아래에 있는 선택자2를 선택 querySelector querySelector는 위와 같은 css 선택자.. 2022. 2. 4. [Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) 매개변수와 전달인자는 아래와 같이 다른 프로그래밍 언어에서도 흔히 사용되는 개념입니다. function sum(a, b) { // a, b는 매개변수 return a+b } let calc = sum(1, 10) // 1, 2는 전달인자 자바스크립트에서도 이러한 개념은 동일하지만 특이한 점이 있습니다. console.log(sum(1)) // NaN console.log(sum(1, 10, 100)) // 11 함수에 정해둔 매개변수의 개수보다 전달인자를 적게 혹은 더 넣어주어도 오류가 나지 않는다는 점입니다. 위 sum 함수에 1개의 매개변수를 넣어주면 나머지 매개변수를 undefined로 할당해 NaN이 출력되고, 더 넣어주면 왼쪽부터 순서대로 정해둔 매개변수만 사용해 출력을 내어줍니다. 그리고 추가.. 2022. 2. 3. [Javascript/자바스크립트] 데이터 타입(Data Type) 자바스크립트의 데이터 타입에는 다음과 같은 7가지 타입이 존재합니다. Number String boolean null undefined Symbol Object 이번 글에서는 7가지 타입에 대해 가볍게 알아보겠습니다. Number let num = 1 console.log(typeof num) // number let pInf = 10/0 // 양의 무한대 console.log(pInf) // Infinity let nInf = 10 / -0 // 음의 무한대 console.log(nInf); // -Infinity Number 타입은 흔히 알고 있는 그 숫자 타입과 동일합니다. 각종 수에 대한 연산이 가능하며 부등호를 이용하여 크고 작음을 비교할 수 있습니다. String let str = "abcde.. 2022. 2. 1. [Javascript] 변수 선언 var, let, const 차이점과 호이스팅 원래 자바스크립트의 변수 선언이 가능한 키워드는 var 밖에 없었습니다. var의 각종 문제점들이 대두되고, ES6부터 변수 선언 키워드로 let과 const가 추가되어 사용되고 있습니다. 그럼 변수 선언 방식에 대한 var, let, const의 차이점을 알아보겠습니다. javascript 변수 선언 중복 선언 var : 중복 선언 가능 var str = "var입니다" // 선언 O, 초기화 O console.log(str) // var입니다 var str = "다시 선언했습니다" // 선언 O, 초기화 O console.log(str) // 다시 선언했습니다 var str // 선언 O, 초기화 X console.log(str) // 다시 선언했습니다 var은 변수를 다시 선언할 수 있다는 치명적인.. 2022. 1. 29. [맥/이클립스/톰캣] Error: Could not find or load main class, java.lang.ClassNotFoundException 해결법 [m1 맥/이클립스] 톰캣 설치 후 Dynamic Web Project에 연결 [m1 맥/이클립스/톰캣] 8080 포트 오류 해결방법 [맥/이클립스/톰캣] the selection cannot be run on any server 오류 [맥/이클립스/톰캣] Error: Could not find or load main class, java.lang.ClassNotFoundException Dynamic Web Project, java 오류 Dynamic Web Project에서 간단한 자바 코드를 실행시키는데 Error: Could not find or load main class, java.lang.ClassNotFoundException 오류가 발생했습니다. Build Path 설정이 잘못되어서 이러.. 2022. 1. 22. [맥/이클립스/톰캣] the selection cannot be run on any server 오류 [Web] - [m1 맥/이클립스] 톰캣 설치 후 Dynamic Web Project에 연결 [m1 맥/이클립스/톰캣] 8080 포트 오류 해결방법 [맥/이클립스/톰캣] the selection cannot be run on any server 오류 [맥/이클립스/톰캣] Error: Could not find or load main class, java.lang.ClassNotFoundException ⚡️ Eclipse-Tomcat Server Error 톰캣 서버를 연동한 후 웹프로젝트의 파일을 실행하려 했더니 the selection cannot be run on any server 오류가 떴습니다. 해결방법은 굉장히 간단했습니다. 프로젝트를 우클릭 한 뒤 Properties를 클릭합니다. 검색창에.. 2022. 1. 21. [m1 맥/이클립스/톰캣] 8080 포트 오류 해결방법 [m1 맥/이클립스] 톰캣 설치 후 Dynamic Web Project에 연결 [m1 맥/이클립스/톰캣] 8080 포트 오류 해결방법 [맥/이클립스/톰캣] the selection cannot be run on any server 오류 [맥/이클립스/톰캣] Error: Could not find or load main class, java.lang.ClassNotFoundException ⚡️ Eclipes-Tomcat 8080 port error 이클립스에서 프로젝트를 만들고 톰캣을 연결한 뒤 실행을 했는데 8080 포트에 충돌이 일어나 오류가 발생했습니다. 찾아보니 오라클이나 다른 프로그램이 8080 포트를 사용중이면 충돌 오류가 발생한다고 합니다. 기본적인 해결법은 8080 포트를 사용하고 있는 프.. 2022. 1. 21. 반응형 이전 1 2 3 다음
오픈 채팅
