Database
[DB 모델링] 3차 정규화 실습 | 데이터 논리 모델링
3차 정규화 실습1. 도서, 대출도서수량, 대출, 회원 ✅ 3차 정규화 실습2. 회원, 등급, 게시판, 게시판별댓글 ✅ ❗ 1차 정규화 실습 문제 참고 1차 정규화까지 마쳤던 데 대해 3차 정규화를 진행한 예시이다. 회원 속성으로 있던 등급, 적립퍼센트에 대해서 별도의 등급 엔티티로 도출해냈다.
분류 전체보기
Database
[DB 모델링] 2차 정규화 실습 | 데이터 논리 모델링
2차 정규화 실습1. 강사, 온라인강의, 과목 ❎✅ 과목설명, 과목카테고리 속성은 과목명만으로 알 수 있다. 이들처럼 종속되는 속성들은 부모 엔티티로 따로 뽑아낼 수 있게 된다. 하지만 개강일 및 강의료는 A강사가 담당할 때와 B강사가 가르칠 때 다를 수 있다. 카디널리티를 따질 때 없거나 한 개이거나 많거나로 설정해봤지만, 답안에서는 없거나 많거나로 채택되었다. 2차 정규화 실습2. 회원, 날짜별회원섭취량, 음식 ✅ 음식번호만으로 알 수 있는 속성들에 대해 음식 엔티티로 별도 추출한다. 섭취량이라는 속성은 날짜에 따라 다를 것이기에 해당 엔티티에 남겨놓았다.
Database
[DB 모델링] 1차 정규화 실습 | 데이터 논리 모델링
1차 정규화 실습1. 연극, 연극출연자별급여 ✅ 주어진 문제의 엔티티에서 반복되는 내용들을 지워가도록 한다. 동명이인이 있을 가능성에 대비하여 출연진번호라는 별도의 주식별자를 세운다. 한 연극에는 최소 1명~여러 명의 출연진이 있을 수 있으므로 부모-자식 관계를 가진다. 또, 해당 출연진이 또 다른 연극에 추가 출연하고 있기에 두 엔티티를 식별관계로 둔다. 1차 정규화 실습2. 요리, 요리재료별수량 ✅ 요리재료별수량 엔티티에서 주식별자를 찾는다. 예시에서는 재료명을 택했으나, 마땅한 속성이 없다면 '재료번호'를 별도로 추가할 수도 있다. 1차 정규화 실습3. 회원, 게시판, 게시판별댓글 ❎✅ 댓글이 달릴 때마다 새로운 댓글번호가 할당돼 구별되도록 인위적 주식별자 '댓글번호'를 추가한다. 이때 게시판별댓글..
Database
[DB 모델링] 엔티티 도출 실습 | 개념적 모델링
엔티티 도출 실습1. 사원, 출결사항 ❎✅ 1일~n일치 출결 자료가 쌓여갈 것이므로 일대다 관계로 정의되어야 한다. 엔티티 도출 실습2. 고객, 상담일지, 반품목록 ❎✅ 상담일지-반품목록이 일대일 관계를 띄고 있다. 이런 경우는 사실 상담일지 엔티티에 속성으로서 반품내용 하나만 집어넣어도 문제는 없다. 단, 상담내용이 수리 요청 또는 반품 요청으로 나뉜다고 했다. 따라서 반품내용이 속성으로서 자리 잡을 경우 수리 요청/반품 요청 발생 시마다 다른 한 쪽은 null 값으로 채워지게 마련이다. 이런 경우는 별도로 반품목록 엔티티, 수리목록 엔티티로 나누어 일대일 관계로 봄이 적합하다. 이를 아크관계라고 한다. 엔티티 도출 실습3. 강사, 과정, 학생 ❎✅ 한 강사는 여러 개의 과정을 수업할 수 있다. 일대엔..
Frontend/JavaScript
[JavaScript] 마우스 이벤트 | 키보드 이벤트 | 스크롤 이벤트 | 폼 이벤트
목차 마우스 이벤트 1-1. 마우스 이벤트 종류 1-2. 마우스 이벤트 관련 속성 1-3. 마우스 이벤트 예시 키보드 이벤트 2-1. 키보드 이벤트 종류 2-2. 키보드 이벤트 관련 속성 2-3. 키보드 이벤트 예시 스크롤 이벤트 3-1. 스크롤 이벤트 종류 3-2. 스크롤 이벤트 관련 속성 3-3. 스크롤 이벤트 예시 폼 이벤트 4-1. 폼 이벤트 종류 4-2. 폼 이벤트 관련 속성 4-3. 폼 이벤트 예시 1. 마우스 이벤트 1-1. 마우스 이벤트 종류 mousedown 요소 위에서 마우스 버튼을 누를 때 mouseup 요소 위에서 마우스 버튼을 누르고 있다가 뗄 때 mouseover 마우스 커서가 요소 바깥으로부터 안으로 움직일 때 mouseout 마우스 커서가 요소 위에 있다가 요소 밖으로 움직일..
Frontend/JavaScript
[JavaScript] DOM 이벤트 | 이벤트 핸들러 | addEventListener | 버블링
목차 이벤트 이벤트 핸들러 2-1. HTML 속성 핸들러 1개 할당 가능 2-2. DOM 프로퍼티 핸들러 1개 할당 가능 2-3. addEventListener 표준 이벤트 모델, 핸들러 n개 할당 가능 이벤트 객체 버블링과 캡쳐링 이벤트 전달/차단 4-1. 버블링 4-2. 버블링 차단 event.stopPropagation() 4-3. 캡쳐링 true 기본 이벤트 제거 5-1. event.preventDefault() 5-2. return false; 1. 이벤트 DOM 이벤트(Document Object Model event)는 마우스 이벤트(click, mouseover, mouseout, mousemove), 폼 요소 이벤트(submit, focus), 키보드 이벤트(keydown, keyup),..
Frontend/JavaScript
[JavaScript] BOM | window | setInterval | 타이머 메소드
목차 window 객체 1-1. window.open('주소', '이름 또는 open 방식', '형태'); 1-2. window 객체 타이머 메소드 1-3. window 객체 메소드 1-4. window.onload 속성 BOM 2-1. location 객체 2-2. navigator 객체 2-3. history 객체 2-4. screen 객체 1. window 객체 ❗ alert, prompt 등 현재까지 자바스크립트에서 사용해온 메소드들은 사실 window 객체에 속한 것들이다. 이들을 사용할 때 window.메소드명처럼 접근하진 않았지만, 그 최상위에는 window 객체가 있음을 짚어보자. window 객체는 자바스크립트(JavaScript)의 최상위 객체이며, BOM(Browser Object M..
Frontend/JavaScript
[JavaScript] 문서 수정 | 노드 메소드 | insertAdjacentHTML | classList
목차 노드 생성/복제 메소드 1-1. document.createElement(tag) 1-2. document.createTextNode(value) 1-3. element.cloneNode(deep) 1-4. 텍스트가 있는 노드 생성 예시 1-5. 텍스트가 없는 노드 생성 예시 1-6. 노드 복제 예시 cloneNode(deep) 노드 삽입 메소드 append/prepend, before/after 2-1. 요소 위치 바꾸기 잘라내기 → 붙여넣기와 같은 효과 노드 대체/삭제 메소드 3-1. 노드 대체 예시 replaceWith(노드 또는 텍스트 문자열) *인자에 HTML 문자열 취급X 3-2. 노드 삭제 예시 remove() 추가 HTML 삽입 메소드 4-1. 노드 대체 수정 insertAdjacen..
Frontend/JavaScript
[JavaScript] 주요 노드 프로퍼티 | innerHTML | textContent | value
목차 주요 노드 프로퍼티 1-1. innerHTML 읽기 가능, 변경 가능 1-2. outerHTML 읽기 가능 1-3. textContent 태그 제외 텍스트만 추출, 일반 텍스트 취급 1-4. hidden 숨김 처리 1-5. value input, select, textarea 값 저장 DOM 프로퍼티와 HTML 속성 2-1. 비표준 속성 메소드 2-2. 사용 예시 1. 주요 노드 프로퍼티 innerHTML 요소 안 HTML을 문자열 형태로 반환 또는 요소 안 HTML을 수정 outerHTML 요소 전체 HTML을 문자열 형태로 반환 ※ innerHTML에 요소 자체를 더한 것 textContent 요소 안 태그 제외 텍스트만 추출하여 반환 또는 요소 안 텍스트만 추출하여 설정 hidden 요소를 보..
Frontend/JavaScript
[JavaScript] 요소 검색 메소드 | querySelector | NodeList
목차 요소 검색 메소드 1-1. document.getElementById(id) 1-2. getElementById(id) 사용 예시 버튼 클릭 시마다 색상 변경 1-3. document.getElementsByTagName(태그명) querySelector(선택자)로 대체 1-4. document.getElementsByClassName(클래스명) querySelector(선택자)로 대체 1-5. document.getElementsByName(name) querySelector(선택자)로 대체 요소 검색 메소드 2-1. document.querySelector(선택자)/querySelectorAll(선택자) 2-2. element.querySelector(선택자)/querySelectorAll(선택..
