코딩 맛집

1. 시맨틱 태그 시맨틱 태그는 사용자가 아닌 브라우저와 개발자에게 그 태그의 의미를 전달 하는 것 입니다. 시맨틱 태그 중 태그는 그 영역이 웹사이트에서 헤더라는 의미를 전달 합니다. 태그는 웹사이트에서 하단 영역 이라는 의미 합니다. 대표적인 non-semanitc 태그는 , 태그 입니다. , 태그 대신에 를 사용해도 웹 사이트를 이용하는 사용자들은 전혀 차이점을 느낄 수 없습니다. 시맨틱 태그의 종류는 - article - aside - details - figcaption - figure - footer - header - main - mark - nav - section - summary - time 이렇게 존재 합니다. 1. figure 시맨틱 태그 figure 시맨틱 태그는 img 태그와 그..

JavaScript 는 동적 타입 언어 입니다. 동적 타입은 타입 (자료형) 이 컴파일 시에 정해 지는 것이 아니라, 실행 시에 정해 집니다. 따라서 자바스크립트 에서는 (==) 동등 비교 연산자(형변환 비교) 뿐만 아니라, (===) 일치 비교 연산자(엄격한 비교) 가 존재 합니다. 1. (==)동등 연산자와 (===)일치 연산자 (===) 일치 연산자는 두 피연산자가 같은 자료형, 같은 값 일 경우에 true 를 반환 합니다. (==) 동등 연산자는 두 피연산자를 같은 자료형으로 형변환 후에 값이 같은 경우 true 를 반환 합니다. console.log(1 == 1); // true 출력 console.log('1' == 1); // true 출력 console.log(1 === 1); // tru..

JavaScript 의 원시 타입(primitive 타입) 은 다음과 같습니다. - string - number - bigint - boolean - null - undefined - symbol 총 7가지의 원시 타입이 존재 합니다. 1. undefined 타입 이 중에서도 undefined 타입은 자바스크립트에서 많이 등장하면서도 가장 헷갈리는 타입 입니다. 특히나 undefined 은 null 타입과 가장 혼란스러운데요. 다른 프로그래밍 언어 에서는 null 타입은 있지만 undefined 라는 개념이 없는 언어가 많기 때문 입니다. javaScript 의 undefined 타입은 1. 특정 변수의 값을 할당 하지 않았다면, 그 변수는 undefined 자료형 입니다. 2. 함수가 값을 명시적으로 ..

1. oninput 우리는 input 태그와 textarea 태그의 데이터를 입력 할 때가 많이 있습니다. 이 태그들은 사용자로 데이터를 입력 받구 서버에 데이터를 전송 하는 경우가 많습니다. 그런데 사용자가 데이터를 입력 할 때마다 바로바로 데이터를 확인 하거나, 특정 이벤트를 주고 싶다면 oninput 이벤트를 사용 하시면 됩니다. 이런 이벤트를 우리는 주로 '리스너' 라고 합니다. 유효성 검사를 할때에도 많이 쓰입니다. id 가 myInput 인 input 태그의 어떤 입력이 들어오면 myFunction 함수를 실행 합니다. 그리고 id 가 demo 인 p 태그의 "You wrote: (입력값)" 을 넣어 줍니다. oninput 이벤트와 굉장히 비슷한 onchange 이벤트가 있습니다. 호환성은 다..

1. input 태그의 유효성 검사 데이터를 서버에 전송 하기 위해서 input 태그를 사용합니다. 그런데 서버에 보내기 전에 이 데이터가 서버에서 원하는 포맷과 일치 하는지 유효성 검사가 필요 합니다. 유효성 검사를 하는 방법은 여러 가지가 있습니다. javaScript 로도 많이 하지만, 이번에는 html5의 input 속성을 이용해서 해보려고 합니다. 2. required 속성 input 태그의 required 속성을 입력해 주면 submit 버튼을 누르기 전에 어떤 데이터가 입력되어 있어야 합니다. Username: 만약 데이터를 입력 하지 않고 submit 을 누르면 다음과 같이 출력 됩니다. 우리에게 생소한 속성인 만큼 크로스 브라우저를 확인해 봐야겠죠! Chrome - 5.0 IE - 10...

html에서 사용자 데이터를 입력 받을 때 input 태그를 사용 합니다. 1. input 속성들 type="text" : 문자를 입력 type="password" : 비밀번호 입력 type="button" : 버튼 type="submit" : form 데이터를 제출시 type="reset" : form 데이터 초기화 type="radio" : 라디오 버튼 입력시 type="checkbox" : 체크박스 입력시 type="file" : 파일 업로드 시 type="hidden" : 화면에 보이지 않는 숨겨진 요소 2. name 속성 name 속성은 서버로 보내질 이름을 입력 합니다. 3. input 태그와 함께 쓰이는 label 태그 input 태그는 label 태그와 함께 쓰여 input 의 설명을 보충..

1. public key retrieval is not allowed 에러 Spring + mysql 8.0.12 조합으로 운영을 하고 있었는데, 어느날 'public key retrieval is not allowd' 에러가 발생 했습니다. mysql 8.x 버전 이후에는 이러한 에러가 떳을때 jdbc 프로퍼티에 allowPublicKeyRetrieval=true 를 추가 해 주어 해결 할 수 있습니다.

1. JSON 전역 객체 자바스크립트 에는 JSON 이라는 전역 객체가 존재 합니다. JSON 전역 객체에 대표적인 함수는 JSON.stringify(Object) JSON.parse(String) 2. JSON.stringify() JSON.stringify(Object) 는 '자바스크립트 객체' -> 'json 문자열' 로 변환 시켜주는 함수 입니다. 여기서 여기서 우리가 흔히들 얘기 하는 json 이라는것이 이 'json 문자열'을 의미 합니다. '자바스크립트 객체' 와 구조는 같지만 객체가 아닌 문자열로서 존재 하는 것입니다. const person = { name: 'taein', age: 21 }; console.log(person); Chrome의 개발자 도구에서 __proto__ : Obj..

1. json 이란? json 은 클라이언트와 서버와 같이 서로 다른 프로그램에서 데이터를 읽거나 쓸수 있도록 만들어진 데이터 포맷을 의미 합니다. 이런 데이터 포맷에는 XML 이라는 포맷도 있습니다. 이런 HTTP 상에서 데이터 포맷을 HTTP Content-Type 이라고 합니다. HTTP Content-Type 종류 에는 1. Text 2. JSON (application/json) 3. JavaScript (application/JavaScript) 4. XML (application/xml) 5. XML (text/xml) 6. HTML (text/html) 등 이 있습니다. 특히나 json 은 JavaScript Object Notation 의 약자 입니다. 한글로 해석 하면 '자바스크립트 객..

1. JavaScript를 이용하여 ajax 사용하기 javaScript를 이용해서 ajax를 사용하려면 대체로 코드가 길어집니다. 또한 request 오픈 -> 데이터 전송 -> 콜백 / 응답 이 따로 존재 하기 때문에 캡슐화를 제대로 하지 못하면 로직이 분리 되거나 유지보수 하기 힘들어 질 수 있습니다. // XMLHttpRequest 객체의 생성 const xhr = new XMLHttpRequest(); // 비동기 방식으로 Request를 오픈한다 xhr.open('GET', 'data/data.html'); // Request를 전송한다 xhr.send(); // Event Handler xhr.onreadystatechange = function () { // 서버 응답 완료 && 정상 응답..