목적: 데이터베이스 정규화와 관련된 내용을 복습하고 이해. 정규화란 관계형 모델에서 논리 스키마를 효과적으로 모델링하기 위해 이용하는 기법. 정규형을 분석함으로써 릴레이션의 스키마가 얼마나 효율적으로 실세계를 반영하고 있는지 평가할 수 있다. 정규화란 개념을 모르고 스키마를 만들때 프론트엔드에서 요청할 때 이런 데이터들이 필요하니까 이 모델에는 이런 스키마가 필요하겠다.라고 해서 만들었는데, 내가 만든 스키마를 보면 정규화가 무슨 역할을 하는지 모두 이해할 수 있다. 정규화의 효용성 1. 한 릴레이션 내의 컬럼들 간의 관계 표현 2. 불필요한 데이터의 종속과 중복 제거 3. 새로운 컬럼 추가 시 기존 컬럼과의 관계 수정을 최소화 함수적 종속성이란? 속성들 간의 값의 연관관계를 표현한 것. 잘못 설계된 릴..
브라우저가 화면을 표시하는 과정7 : The Render tree
1. Navigation 2. Fetching Data 3. parsing the HTML 4. parsing the CSS 5. executing the Javascript 6. creating the accessibility tree 7. the Render Tree 단계 중 마지막 일곱 번째입니다. 파싱단계에서 생성된 tree(DOM, CSSOM)은 결합되어 랜더트리를 만듭니다. 이 랜더트리는 최종적으로 화면에 그려질 모든 요소의 레이아웃을 계산하는데 사용됩니다. 랜더트리의 목적은 요소들이 올바른 순서로 화면에 그려지는지 확인하는 것입니다. 그리고 이것은 화면에 실제로 픽셀을 표시하는 페인팅 단계에 대한 입력으로 제공됩니다. DOM은 HTML로 만들었고. CSSOM은 CSS로 만들었습니다. 이 파일..
브라우저가 화면을 표시하는 과정6 : Creating the accessibility tree
이 주제는 브라우저가 화면을 표시하는 과정이라는 주제에서 약간은 벗어나지만 접근성이라는 매우 중요한 내용입니다. 1. Navigation 2. Fetching Data 3. parsing the HTML 4. parsing the CSS 5. executing the Javascript 6. creating the accessibility tree 7. the Render Tree 단계 중 여섯 번째입니다. 지금까지 얘기했던 모든 Tree들(DOM, CSSOM, AST) 외에도 브라우저는 accessibility tree라는 것을 만듭니다. (트리가 참으로 많네요) accessiblility란(A11y로 축약됨) 접근성으로써 웹개발에서의 접근성이란 어떤 방식으로든 능력이 제한된(장애가 있는) 사람들도 최..
브라우저가 화면을 표시하는 과정5 : Executing the Javascript
1. Navigation 2. Fetching Data 3. parsing the HTML 4. parsing the CSS 5. executing the Javascript 6. creating the accessibility tree 7. the Render Tree 단계 중 다섯 번째입니다. 세 번째 단계(parsing the HTML)에서 언급했던 pre-loader덕분에 css가 파싱 되어 cssom이 만들어지는 동안 자바스크립트 파일이 다운로드됩니다. pre-loader의 역할을 간단히 다시 설명하자면, html파싱이 시작되면 메인 파서가 html구문분석을 하는 동안 stylesheet, scripts, image같이 추가적으로 다운로드 요청해야 하는 태그들을 찾아서 미리 다운로드 요청하는 것..
브라우저가 화면을 표시하는 과정4 : Parsing the CSS
html이 파싱이 되었다면 css를 파싱하고 cssom을 만들 차례입니다. 브라우저가 외부, 혹은 내부의 css 스타일 시트를 만나면 텍스트를 브라우저가 레이아웃을 꾸미는데 유용한 구조로 파싱 합니다. html을 DOM으로 바꾸는 것처럼.. 브라우저는 css를 CSSOM으로 바꿉니다. DOM과 CSSOM은 트리라는 구조를 가진 비슷한 개념이지만 서로 다른 자료구조를 가집니다. css에서 cssom을 만드는 과정은 랜더링을 차단하는 프로세스로 간주됩니다. html을 파싱 하는 과정과 비슷하게 css 파싱도 토크나이징으로 시작합니다. 바이트 데이터를 전달받아서 토큰으로 변경하고 node를 만들고 cssom으로 바뀝니다. 브라우저는 selector matching이라는 것을 수행하는데, 각 스타일 세트가 페이..
TLS Handshake 좀 더 자세히 알아보기
목적: 네트워크 과정 중 TLS Handshake부분을 자세히 쉽게 설명한다. 현재 브라우저가 화면을 표시하는 과정에 대한 글을 쓰고 있습니다. 그중 https통신에 꼭 필요한 TLS 부분이 있습니다. TLS란 Transport Layer Secure의 약자로써 '전송계층보안'이라는 뜻입니다. 말 그대로 네트워크를 할 때 응용계층 아래, 전송계층 위에서 보안을 담당하는 부분입니다. 이 부분에서 보안이 된다면 데이터를 응용계층에서 보낼 때 암호화하고 받을 때는 전송계층을 통과후 응용계층에 도착하기 전에 복호화됩니다. 그래서 브라우저가 화면을 표시하는 과정1 에서 TCP handshake 가 끝나고 나서 TLS 부분이 진행되는 것 같습니다. 만약 https를 사용하지 않고 http통신을 하면 무슨 위험이 있..