안녕하세요~ totally 개발자입니다. 오늘은 태그와 셀 병합하는 방법에 대해 살펴보겠습니다. 아래처럼 3x3 3행3열의 테이블이 있다고 가정합니다. 1 2 3 4 5 6 7 8 9 테이블을 이렇게만 구성한다면 위 방법만 알고 계셔도 충분하지만 데이터를 출력할 때 row(행)끼리, column(열)끼리 병합하는 경우가 빈번합니다. 이런 경우, rowspan과 colspan 속성을 사용해주셔야 합니다. 아래 예제를 통해 1,4,7의 row(행)를 병합하는 방법과 5,6의 column(열)을 병합해보는 실습을 해보도록 하겠습니다. 1 2 3 4 5 6 rowspan과 colspan의 원리는 간단하지만 처음에는 헷갈릴 수 있기 때문에 다양한 예제를 통한 실습이 중요합니다. 핵심적으로 알아두실 것은 병합이 시..

안녕하세요~ totally 개발자입니다. 오늘은 자주 사용하는 HTML의 태그들을 살펴보도록 하겠습니다. 태그명 사용 목적 참고 사항 하이퍼링크 지정 target="_blank" 속성을 사용하여 새 탭에서 열 수 있는 옵션을 지정 가능 버튼 만들기 onclick 등의 속성 사용하여 함수 지정 가능 문서의 섹션을 지정 (컨테이너 공간을 만든다고 생각하시면 됩니다) 이미지 삽입 alt 속성을 사용하여 이미지가 출력되지 않을 때 대체 텍스트로 표시 가능합니다. 리스트 아이템 생성 또는 로 감싸줍니다. 네비게이션(메뉴) 링크 Ordered List의 약자(순서 리스트) Unordered List의 약자(순서 미지정 리스트) Client-side 스크립트를 지정 문서의 섹션을 지정 div는 박스 컨테이너 개념, ..

안녕하세요~ totally 개발자입니다. 오늘은 Delete(remove) 즉 데이터를 삭제하는 방법에 대해서 살펴보겠습니다. 사실 데이터를 삭제하는 방법은 매우 간단합니다. 바로 예제를 살펴보도록 하겠습니다. 아래처럼 ref 함수 사용해준다음, remove() 함수만 호출해주시면 데이터를 삭제할 수 있습니다. // 파이어베이스 변수 초기화 firebase.initializeApp(firebaseConfig); // 데이터베이스 변수 const database = firebase.database(); // 데이터 삭제 database.ref("students").remove(); 실행했을 때 저번 시간에 있었던 데이터가 사라지고 아래처럼 null로 표현되는 것을 알 수 있습니다. 다음 시간에는 Fires..

안녕하세요~ totally 개발자입니다. async, await 오늘 다룰 부분은 async, await입니다. 저번 시간에는 Promise 객체에 대해 살펴보았는데 Promise가 다소 복잡한 단점이 있는데 이를 더 용이하게 사용할 수 있도록 도와주는 비동기 처리 패턴이라고 간주하시면 됩니다. await는 반드시 async 함수 안에서 동작하도록 되어 있고, async 함수 안에는 await가 포함되어 있지 않아도 되지만 반환될 때는 Promise 객체로 반환되는 특징이 있습니다. 아래 간단한 예제를 확인해보면 testFunc를 async로 선언하여 true를 반환하는 함수가 있을 때 console에서 확인해보면, Promise 객체 형태로 true가 반환되었음을 보실 수 있습니다. const test..

안녕하세요~ totally 개발자입니다. Promise 오늘 다룰 부분은 Promise입니다. 이 Promise는 비동기 프로그래밍에서 사용되는 객체로 비동기 연산이 종료된 후에 결과 값을 반환할 수 있도록 하는 약속을 위한 객체입니다. 즉 동기 메소드처럼 값을 반환합니다. 이 Pormise에는 3가지 상태가 존재합니다. 1) Pending (대기): 초기 상태 2) Fulfilled (이행): 성공적으로 이행됨. 3) Rejected (거부): 이행 실패. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래..

안녕하세요~ totally 개발자입니다. Reduce 오늘 다룰 부분은 reduce 함수입니다. reduce 함수는 배열에 사용되며 callback function, initialValue(생략 가능)를 가질 수 있으며 accummulator, currentValue를 주로 인자로 전달하게 됩니다. 이 accmulator는 콜백 함수가 실행되며 return된 반환값을 계속 누적합니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce Array.prototype.reduce() - JavaScript | MDN The reduce() method executes a user-supplie..