SubBrain

ECMA ECMAScript (또는 ES) 는 ECMA 인터네셔널에 의해 표준화 된 범용 프로그래밍 언어로써, 서로 다른 웹 브라우저들에서 웹 페이지의 상호운용성을 보장하기 위한 Javscript 표준입니다. 즉, ECMA-262 는 표준의 이름이고, ECMAScript (또는 ES) 는 ECMA-262라는 표준에서 정의된 프로그래밍 언어입니다. ES6 (2015) Shorthand property names (단축속성명) key와 value명이 같을 경우 하나로 생략이 가능합니다. Destructuring assignment (구조분해할당) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 합니다. Spread syntax (전개구문) 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠..

모듈 코드를 모아둔 하나의 파일을 말합니다. 재사용성이나 유지보수성 등을 위해 사용되며, 궁극적으로 큰 목적을 달성을 하기 위해서 관련된 함수나 조각 코드를 모아서 만듭니다. 간단히 하나의 자바스크립트 파일이다라고 이해할 수 있습니다. Export / Import 함수, 객체 값을 보낼 때(export), 보낸 값을 받을 때(import) 사용합니다. export방식에는 기본 내보내기 방식과 이름이 정의된 내보내기 방식이 존재합니다. 기존 내보내기 방식은 모듈에서 하나의 함수나 객체를 기본으로 내보내고자 할 때사용하며 이를 Default Exports라고 합니다. 그리고 선언 키워드 앞에다가 export를 붙여서 사용하는 방법을 Named Exports라고 합니다. 먼저 Named Exports 예시는 ..

EventListener 이벤트 리스너는 DOM 객체에서 이벤트(사용자의 반응)가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. addEventListener 이벤트 리스너를 등록하는 방법입니다. 예시는 간단하게 클릭 시, 이모지를 출력하는 예시입니다. querySelector로 'button'를 선택하고, 첫 번째 인자에는 이벤트의 종류를 문자로 지정합니다. 두 번째 인자에는 이벤트가 발생했을 때, 핸들러 함수를 전달해야 합니다. removeEventListener 이벤트 리스너를 삭제하는 방법입니다. 아까 추가한 클릭버튼 옆에 이벤트 삭제 버튼인 remove_btn을 추가하여 이제 클릭 시, 이모지가 나오는 이벤트를 사용하다 이벤트 삭제 버튼을 누를 시, 이모지가 나오지 않는 ..

DOM (Document Object Model) 문서 객체 모델이라고 하며, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 1. 요소 선택하기 getElement 요소를 선택하는 방법은 먼저 예시로 HTML에 body에 다음 태그를 추가했습니다. id값으로 출력 p태그의 id값으로 해당 값을 출력하면 다음과 같이 나옵니다. 아이디값은 고유하여 이를 타깃 해서 가져올 수 있습니다. class값으로 출력 그렇다면 class값으로 가져올 경우 이런 식으로 가져옵니다. 해당 Elemet뒤에 s가 붙습니다. 이유는 class는 중복해서 다수로 쓸 수 있기 때문에, 배열로 리턴됩니다. tag값으로 출력..

구조분해할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 1. 배열구조분해 할당 배열을 변수로 지정할 때 이런 식으로 표현합니다. 해당식을 구조분해할당 표현식으로 한다면 다음과 같습니다. 2. 객체구조분해 할당 객체를 변수로 지정할 때 이런 식으로 표현합니다. 해당식을 구조분해할당 표현식으로 한다면 다음과 같습니다. 3. 객체의 중첩 구조분해할당 객체를 변수로 지정할때, 중첩 구조이라면 이렇게 표현합니다. 해당식을 구조분해할당으로 표현할 때는 다음과 같습니다. 4. 함수와 구조분해할당 함수에 대한 결과값을 출력할 때, 이렇게 표현합니다. 만약 함수에 들어갈 obj의 키값을 알고 있다면 이를 다음과 같이 표현할 수 있습니다. 예제로 알아보는 구..

SSL 인증서 보안서버 SSL인증서는 사용자의 인터넷 브라우저와 사이트의 웹서버 상의 암호화 통신을 지원하여 해킹을 당하더라도 고객의 개인정보를 소중하게 지켜 줍니다. SSL 인증서는 웹서버와 웹사이트에서 이루어지는 모든 정보전송을 https 암호화프로토콜을 통해 안전하게 전송되도록 하는 인증서 입니다. SSL을 사용하면 로그인, 회원가입, 예약 등의 개인정보를 입력하더라도 스니핑(sniffing)에 고객의 개인정보를 소중하게 지켜 줍니다 또한 SSL 인증서는 전자상거래 기업 또는 공공기관의 신원을 확인하여 고객의 신뢰를 얻을 수 있습니다. 개발을 하다보면 로컬환경에서 https 같은 보안접속환경을 구성해야하는 경우가 있습니다. 원래라면 인증서 적용 도메인을 인증기관에 신청한 후 발급받아 사용해야하지만,..

Java에서도 웹 크롤링을 통해 meta tag를 가져오는 방법이 있습니다. 저는 Jsoup 라이브러리를 사용하여 meta tag 값을 가져오겠습니다. 먼저 Jsoup 라이브러리를 적용해야합니다. 해당 사이트에서 다운로드 받거나, Maven으로 관리할 경우 pom에 있는 내용을 복사해서 붙여 넣으면 됩니다. https://jsoup.org/download Download and install jsoup Download and install jsoup jsoup is available as a downloadable .jar java library. The current release version is 1.15.4. What's new See the 1.15.4 release announcement fo..

카카오톡에서 인터넷기사나 또는 웹페이지 링크를 보내면 썸네일 형식의 대표 이미지와 타이틀과 간략한 내용을 가져오는기능이 있습니다. 오늘은 이 기능을 구현해보겠습니다. *관련이슈: 크로스도메인(Cross Domain), 동일 출처 정책(Same Origin Policy) 일단 구현하고자 하는 기능이 카카오톡에 있는 기능과 유사하여 관련 문서를 찾아봤습니다. https://developers.kakao.com/tool/debugger/sharing 카카오계정 accounts.kakao.com 저는 Open Graph를 이용해서 meta tag를 가져올 계획이라 일단 카카오 관리자 페이지에서 공유 디버거 페이지에 검색했습니다. 제가 가져오고자하는 페이지에서는 다음과 같은 Open Graph 정보가 제공되는지 ..