본문 바로가기
728x90

전체 글156

[Javascript] Promise 와 Callback 의 차이 자바스크립트에서 비동기 처리를 위해 Promise와 Callback 함수가 자주 등장하는데, Promise의 사용을 Callback 사용보다 더 권장하는 이유는 코드가 훨씬 간결해져 가독성이 좋아지기 때문이다. 샘플 예제 ↓ 샘플 예제로 간단한 로그인을 구현하는 스크립트 예제를 만들어 보았다. 간단하게 아이디, 비밀번호를 물어보고, 아이디와 비밀번호가 맞으면, 회원등급을 조회 후 메일을 발송하는 예제이다. 서버 측 처리는 setTimeOut을 통해 딜레이를 설정하였다. [Javascript : Callback함수 사용] //사용자 로그인 예제 :by Callback class Login { //로그인 객체 logUser(id,pw,onSuccess,onError){ setTimeout(() => { //.. 2021. 2. 8.
[Html] 시멘틱 태그 semantic tag Html 에서 Semantic tag란 ? 태그의 이름 자체에 의미가 담겨있는 태그를 뜻한다. Header , Main, Footer 이라는 이름의 태그를 보면 어떤 용도의 태그인지 대충 상상이 된다. 사용 용도↓ 규모가 되는 홈페이지의 Html 소스를 보면, 시멘틱 태그만으로 해당 구조를 파악하기 위해서 사용한다. 시멘틱 태그 목록↓ 태그 이름 사용 용도 header Html 텍스트 상단 부를 의미 main Main 섹션 의미 footer Html 텍스트 하단 부를 의미 section 문서의 섹션을 구분 (서로 관계 있는 문서 분리) nav 내부 링크 리스트가 있는 경우 사용 article 하나의 컨텐츠를 구분짓기 위해 사용 (예 : 뉴스기사, 블로그 글, 포럼 글) aside 위 모든 섹션에 해당 되.. 2021. 2. 6.
[vsCode] 비주얼 스튜디오 코드 한글 설정 비주얼 스튜디오 코드 (Visual Studio Code) 설치시 기본 언어는 영어. 1. 비주얼 스튜디오를 켠다. 2. 왼쪽 네번째 정사각형 4개 모여있는 아이콘을 클릭한다 (Extensions 버튼) 3. 검색 창에 korean을 입력하고 Korean Language Pack for Visual Studio Code를 선택한다. 4. 설치하고 비주얼 스튜디오 코드를 끄고 재실행하고 한글버전으로 코딩을 시작한다. 5. 이 글 마지막에 공감 버튼 ♥ 을 클릭한다. 샘플 예제 ↓ 영어에서 한글로 바꾸는 방법 1. vsCode를 켠다. 2. 왼쪽 다섯번째 네모 4개 모여있는 아이콘을 클릭한다. (Extensions 버튼) 3. 검색 창에 korean을 입력하고 Korean Language Pack for V.. 2021. 2. 5.
[Javascript] Class 클래스 [get,set 구문 오류 필독] 자바스크립트에서의 클래스의 선언 및 활용 샘플 예제 ↓ class Person { //Class 내 생성자 constructor(name,age){ //this를 통한 내부 프로퍼티 초기화 this.name = name; this.age = age; } //static 변수 static blog = 'good-memory'; //static 함수 static speak = function (){ console.log('hello~'); } //getter get name (){ return this._name; } //setter set name (value){ this._name = value; } //Class 내 메소드 information(){ console.log(`my name is ${thi.. 2021. 2. 4.
[Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element Html은 HyperTextMarkupLanguage 의 약자로 프로그래밍 언어가 아닌 웹 개발시 웹페이지의 구조를 표현 하는 마크업 언어이다. 쉽게말해서, 웹개발자와 브라우저 사이에 의사 소통할수 있는 언어이다. 웹개발자 브라우저 우선 html을 출력부터 해보자. 메모장을 새로 만들기 하여, 다른 이름으로 저장하기를 누르고, 파일 이름을 index.html로 저장한다. index.html 파일을 만들었다면, 아래 예제를 실행해보기를 권장한다. 샘플 예제 ↓ 웹 개발자가 "메모를 메모하다"라는 문장을 브라우저에게 문장이라고 이야기해주려면, 아래와 같은 소스를 작성해야한다. 사용 태그 : p 메모를 메모하다 소스 작성을 완료 하였다면, 파일을 저장하고 더블클릭하여 실행하여, 웹페이지에서 출력 결과를 확인한.. 2021. 2. 3.
[Javascript] 이벤트 전파 방지 stopPropagation() 자바스크립트 부모로의 이벤트 전파 방지 Event.stopPropagation(); 간단 설명 ↓ 자바스크립트에서 자식 엘리먼트에서 이벤트 발생시, 부모 엘리먼트에 같은 이벤트가 설정되어있다면, 해당 이벤트에 할당된 기능도 함께 실행된다. 이는 이벤트 전파 현상으로 인한 건데, 상단의 그림과 같이 이벤트가 전파되어진다. 위와 같은 현상을 방지하기 위해서는 Event.stopPropagation()을 사용해야하는데, 아래 예제를 참고하도록 한다. 샘플 예제↓ [Html] [Javascript] let secElem = document.querySelector('#section-sample'); let divElem = document.querySelector('#div-sample'); let btn = .. 2021. 2. 3.
[Javascript] 이벤트의 추가 addEventListener() 자바 스크립트에서 이벤트의 추가 AddEventListener EventTarget.addEventListner(이벤트문자열 , 콜백함수); 간단 설명 ↓ 자바스크립트에서 이벤트의 추가 방법에는 여러가지가 있다. 사실 어떤 방법이 가장 좋다라는 정답은 없지만, 향후 유지보수 까지 생각한다면, 가독성이 좋고 같은 요소에 같은 여러개의 이벤트 등록이 가능한 addEventListener()의 사용을 권장한다. 이벤트는 상당히 많으나 하단의 예제에서는 쉬운 예를 위해 'Click' 이벤트로 작성해 보았다. 샘플 예제 ↓ [Html] [Javascript] let examBtn = document.querySelector('#exam-btn'); //클릭 이벤트 추가! addEventListener(이벤트명,콜.. 2021. 2. 2.
[Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() Javascript - 이벤트 트리거 (event Trigger) .dispathEvent() 브라우저마다 기본 UI 스타일이 다른 엘리먼트가 존재한다. 예를들어 태그 같은 경우에도 Chorme과 IE10 에서의 출력 디자인이 다르다. 공통된 style의 제공을 위해 Input 태그가 아닌, 다른 버튼을 추가로 만들어 해당 버튼을 클릭시, 클릭 이벤트를 원하는 태그에 연결해주는 방식을 현업에서 많이 사용하고 있는데, 해당 방식을 Event Trigger 라고 한다. 샘플 예제 ↓ [HTML] [결과 출력 (트리거 적용 전)] [Javascript] let fileElem = document.querySelector('#file-element'); let fileBtn = document.querySele.. 2021. 2. 2.
[Javascript] 기본 이벤트 삭제 event.preventDefault() Javascript - preventDefault 자바스크립트에서는 편의를 위해 이벤트가 기본 설정되어 있는 태그가 존재한다. (예: a태그 클릭시, href 주소로 자동 이동 or 새로고침) 프로그램 작성자가 해당 기본 설정 기능의 사용을 원치 않는 경우에는 다음과 같은 명령어가 필요하다. event.preventDefault(); 샘플 예제 ↓ [Html] 기본 설정 이벤트 기능 삭제 예제 클릭! [Javascript] let aTag = document.querySelector('body>a'); aTag.addEventListener('click',function(e){ alert('클릭!'); }); [결과] 당연한 결과이지만, 아래 스크립트 추가를 통해 a태그의 기본 설정된 디폴트 이벤트를 없.. 2021. 2. 1.
[Javascript] 노드복사 importNode 노드의 복사 var node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부); 반환 : [True인경우 : 자식 포함], [False인 경우 : 자식 미포함] 샘플 예제 ↓ [HTML] 번호 제목 내용 [Javascript] let temp = document.querySelector('template'); let tbody = document.querySelector('tbody'); //데이터 SET let db = [ {'id':'1','title':'title1','content':'content1'}, {'id':'2','title':'title2','content':'content2'}, {'id':'3','title':'title3','.. 2021. 2. 1.
728x90

티스토리툴바