날이 좀 시원해져서, 등원 길 땀이 덜 날줄 알았는데, 흠~~ 아직은 아님~~
금주는 DB모델링과 웹 Front End 기술 중 HTML, CSS와 JavaScript 기초에 대한 강의/실습이 진행되었다. DB모델링은 실습을 좀 많이 하길 기대했었는데, 아쉬움 많이 남는다. CSS는 크롬 개발자 도구를 보는 방법에 대한 답답함이 좀 해소가 되었다. 향후 개발자도구의 고급적인 부분까지 섭렵될 수 있도록 강의가 진행되길 희망한다. 강의 아쉬운 점은 생각을 정리 할 시간이 없다. 진도에 대한 압박감이 많은 건지... 암튼, 클론 코딩으로 따라가고 있지만, 오타 하나 삐긋해서 오류가 나면, 원인 찾다가 다음 세션을 놓치는 경우 짜증이 밀려온다. 누굴 탓하랴~
HTML 1일, CSS 4일, Javascript 1일
데이터 모델링
추상화, 단순화, 명확화
모델링이란 복잡한 현실 세계를 단순화시켜 표현하는 것임.
- 추상화는 현실 세계를 일정한 형식에 맞추어 표현을 한다는 의미
- 단순화는 복잡한 현실 세계를 약속된 규약에 의해 제한된 표기법이나 언어로 표현
- 명확화는 누구나 이해하기 쉽게 하기 위해 대상에 대한 애매모호함을 제거하고 정확하게 현상을 기술
DB 스키마
- 외부스키마(사용자관점): 책빌리는 사람
- 개념스키마(통합관점): 사서(책관리, 대여관리)
- 내부스키마(물리적저장구조): 도서관장(책을 사고, 버리고, 할 수 있는 사람)
[참고사이트]: https://velog.io/@soohun9909/데이터베이스DB의-스키마Schema
데이터 모델링의 중요한 세가지 개념
- 엔터티: 업무가 관여하는 어떤 것(Things)
- 속성:어떤 것이 가지는 성격(Attributes)
도메인 (Domain)
- 각 속성은 가질 수 있는 값의 범위가 있는데 이를 그 속성의 도메인이라고 함..
- 학생이라는 엔터티가 있을 때 학점이라는 속성의 도메인은 0.0에서 4.5사이의 실수 값이며 주소라는 속성의 도메인은 길이가 20자리 이내인 문자열로 정의할 수 있습니다.
업무가 관여하는 어떤 것 간의 관계(Relationships) : 관계
- 관계명(Membership) : 관계의 이름
- 관계차수(Cardinality) : 일대일(1:1) , 일대다(1:M), 다대다(M:N)
- 관계선택사양(Optionality) : 필수관계, 선택관계
존재에 의한 관계
행위에 의한 관계
관계차수
관계선택사양
- 필수참여(Mandatory Membership)와 선택 참여(Optional Membership)로 나뉜다.
- 그러나 주문은 반드시 고객이 있어야 가능함 (필수관계)
Draw.io를 이용한 개념 모델링
식별자
Reference site: https://hoon93.tistory.com/22
- 식별자는 엔터티 내에서 각각의 인스턴스들을 구분할 수 있는 속성
- 쉽게 생각해서 웹사이트에서 특정 회원을 구분하기 위해 계정명이나 이메일을 사용하는 것
출처:https://hoon93.tistory.com/22
데이터 모델과 성능
성능 데이터 모델링시 고려사항
1) 데이터 모델링을 할 때 정규화를 정확하게 수행
2) 데이터베이스 용량 산정을 수행 - 어떤 엔티티(테이블)에 데이터가 집중되는지**
3) 데이터베이스에 발생되는 트랜잭션의 유형을 파악
4) 용량과 트랜잭션의 유형에 따라 반정규화를 수행
5) 이력모델의 조정, PK/FK 조정, 슈퍼타입/서브타입 조정등을 수행
6) 성능관점에서 데이터 모델을 검증 - 충분하게 성능이 고려되었는지
정규화
정규화는 데이터베이스 설계 과정에서 중복을 최소화하고 효율적인 구조를 갖도록 데이터를 구조화하는 과정. 이 과정은 데이터 중복, 업데이트 이상(Anomalies), 삽입 이상, 삭제 이상을 최소화하는데 도움. 정규화의 궁극적인 목표는 데이터의 무결성과 일관성을 보장하는 것.
- 정규화를 수행하면 입력/수정/삭제의 성능은 무조건 향상됨!!!
- 다만 조회 성능은 향상될수도 있고 저하될수도 있음!!! —> 조인이 늘어날 수 있음. 성능 저하요인.
정규화 유형
- 1NF: 각 열이 원자적인 값을 가져야하고, 각 행은 고유한 키로 식별되어야 합니다.
- 2NF: 1NF를 만족하면서, 모든 비키(non-key) 열이 기본 키에 완전하게 함수적 종속되어야 합니다.
- 3NF: 2NF를 만족하면서, 비키(non-key) 열 간에 함수적 종속성이 없어야 합니다.
- BCNF (Boyce-Codd Normal Form): 3NF를 만족하면서, 모든 결정자가 후보 키(candidate key)가 되는 정규형입니다.
- 4NF: BCNF를 만족하면서, 다치종속(Multivalued Dependency)이 없는 정규형입니다.
- 5NF (or PJ/NF): 투영-조인 정규형(Projection-Join Normal Form)으로, 분해와 조인에 의해 손실되는 정보가 없는 정규형입니다.
대부분의 실무에서는 3정규형을 만족하면 정규화가 어느정도 완료되었다고 봄.
정규화 실습 (개념 모델링)
- 제1정규화(데이터를 원자값으로)
- 제2정규화(부분 함수 종속성 제거) - 복합키 경우 많이 발생
- 제3정규화(이행적 함수 종속 제거) - 비키의 함수 종속성 제거(비키가 키처럼 보이면 제거: 쪼개기)
때론 반정규화(정규화 안하는 거)가 필요할 수도 있다.
논리/물리 모델링
실습툴: erdcloud.com
- 회원가입해야 사용할 수 있음.
START VIEW MODE는 Logical & Physical을 선택한다.
테이블 박스의 왼쪽은 논리명, 오른쪽은 물리명이 표기된다.
HTML
VSCode 개발환경 설정
Live Server 플러그인 설치
수정 사항 저장하면 웹페이지를 자동으로 refresh 해주는 플러그인.
- Open With Live Server(단축키: Alt+L+O)
- 워크스페이스 변경되면, Stop Live Server -> Open With Live Server
| No. | Section | Tag |
|---|---|---|
| 1 | 기초 | 블록요소, 인라인요소 |
| 2 | 콘텐츠태그 | H Tag, Semantic, ul/ol/li tag |
| 3 | 인라인텍스트 | a, abbr/mark/em/strong/b/span tag |
| 4 | 멀티미디어 | img,audio,video,iframe(youtube) |
| 5 | 표 | table,tr,th,td |
| 6 | 입력양식 | form,input, label,fieldset,select,option |
| 7 | 전역속성 | class, id, 특수기호(     " < >) |
CSS(Cascading Style Sheet)
내부스타일
head 블럭안에 style
<!-- 내부스타일 -->
<style>
h1,
div {
font-style: italic;
}
</style>인라인 스타일 - 미권장
<!-- 인라인 스타일 -->
<span style="color: blue"> HELLO span !!!</span>외부스타일
<!-- 외부 스타일 -->
<link rel="stylesheet" href="./main.css" />CSS 파일끼리 import 할 수 있음.
/*
다른 스타일 시트에서 또 다른 스타일을
불러올때 사용하는 문법
*/
@import "./side.css"스타일 Zero 설정
모든 효과를 제거한 후 CSS 작업으로 페이지를 디자인 한다.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"
/>CSS Selector(선택자)
| No. | Section | Content |
|---|---|---|
| 1 | CSS 기초 | CSS 기초 |
| 2 | CSS 기본 선택자 | 전체,태그,클래스,아이디,일치,자식,후손,인접형제,일반형제 |
| 3 | 가상선택자 | hover, active, focus,[first/last/nth]-child,before,after |
| 4 | 상속과 우선순위 | 상속, 우선순위(명시도 점수: 인라인1000점,아이디100점,클래싀10점,태그1점,전체:0)점 |
| 5 | 박스속성 | 단위(px,em,vw,vh),속성(width,height,margin,padding,border,display,overflow) |
| 6 | 글꼴, 문자 | font, line-height(줄간격), text |
| 7 | 배경 | background(image,size,repeat,attachment) |
| 8 | 전통적레이아웃 | float/clear |
| 9 | position | position(relative,albolute,sticky), clearfix |
| 10 | 전환, 변환 | trsasition, transform |
| 11 | 애니메이션 | name, duration, direction, fillmode, play-state |
| 12 | flex-box | flex-flow,justify-content, align-content, align-items... |
4주차 마치며...
DB, CSS, HTML 이미 알고 있던 지식에서 비어 있던 부분을 채웠다. 일단 거기에 만족한다. 연습할 시간이 있어야 하는데...... 자바에 익숙해지려고 노력을 하고 있다. 프로그래머스 코딩 기초 트레이닝 25일 머쓱이 스탬프 획득 문제를 코스 진도에 맞춰 최대한 해보고 있다. 학부 때 문제 못 풀고 나머지 공부했던 추억이 소환됨. 스프링 입문에 대한 김영한 무료 강의를 보면서, 다형성, 람다, 컬렉션, 스트림, 제네릭에 대해서 더 확실하게 해두고 가야할 것으로 판단이 되어, 자바의 정석을 다시 보고/듣고 있다.(역시 최강이얌!) 빨리 익숙해 지자~
