멋사 부트캠프 프론트엔드 플러스 5기 - Next.js & DB (7일차)

Next.js

★  “use client”

=> 브라우저(클라이언트)에서 실행, 해당 코드를 미 적용 시 노드에서 실행(서버)에서 실행

 

노드에서 사용하는 이유 > 서버사이드 랜더링을 하기 위해서 > 구글에서 웹이 노출하기 위해서

 

★ image

이미지 태그를 사용할 시 너비와 높이를 지정해야 하는 이유 : 레이아웃 시프트가 발생한다.

레이아웃 시프트: 웹 페이지가 로드되는 동안 기존에 있던 콘텐츠가 갑자기 위치를 바꾸거나 밀려나는 현상

 

대부분의 이미지는 퍼블릭 폴더에 둔다(경우에 따라서 따로 빼올 수도 있다.)

 

★ Next.js 공식문서에서 Linking and Navigating

Link를 사용하면 페이지가 새로고침되지 않는다. *프리패치 기능

 

*프리패치(Prefetch) : 링크를 클릭하기 전에 해당 페이지의 리소스를 미리 다운로드

 

---

DB

★ 데이터 유형

관리데이터 : 수정이 필요한 데이터

로그데이터 : 삭제와 수정이 필요 없는 데이터 (빅데이터가 이에 해당한다.)

 

★ 데이터를 사용하는 이유

사용자의 행위(결제내역,진료내역,주문내역 등..)들을 기록이나 저장

말과 글을 분석하기 보다는 행동과 조회로 분석한다.

 

★  데이터 모델링 과정

• 개념적 구조 : 사용자 입장에서 어떤 데이터로 이루어져 있는가?
• 논리적 구조 : 데이터들을 테이블 형태로 만들며 어떻게 상호관계하는 구조를 만들며 표현할 것인가?
• 물리적 구조 : 데이터들을 어디에 저장하고 보관할 것인가?

★ 시스템 ?

둘 이상 (각 역할자가 존재) 의 여러 구성 요소들이 서로 연결되어 상호작용하는 집합체(소프트웨어, 하드웨어 등...)

 

★ E-R 데이터 모델링

E-R 데이터 모델링 기호와 의미

예로 식당을 들었을 때, 주체가 되는 개체(엔티티) 즉 손님, 요리사, 웨이터가 되는 것이고

무언가를 하는 행위 혹은 절차를 관계(릴레이션) 결제,주문,메뉴등록 등이 해당하며,

속성은 관계, 행위 안에 포함하고 있는 걸 말한다. 결제에는 결제일자, 주문한 메뉴에 대한 금액, 결제 수단에 해당한다.

개체와 관계에 따라 1:1, 1:N, N:N이 존재한다. 

 

 

★ 정규화

데이터를 중복없이 간단하고 효율적으로 관리하는 방법

 

제1정규화 : 속성 값이 더 이상 쪼갤 수 없는 원자값(한칸에 한 개의 값)

 

ex) A : 숫자,문자 / B : 문자 (X)
      A : 숫자 / A : 문자 / B : 문자 (O)

 

제2정규화 : 완전 함수 종속,

기본키의 일부에만 종속되는 속성(컬럼)을 제거

한 개의 테이블을 관계에 따라서 두 개 이상으로 분리

 

ex) 적용 전 => 학번, 과목코드, 성적, 담당교수(학교 테이블)

      적용 후 => 학번, 과목코드, 성적 (수강 테이블)
                        과목코드, 담당교수 (과목정보 테이블)

 

제3정규화 : 이행적 종속(A->B, B->C가 성립할 때 A->C가 성립) 제거

기본키가 아닌 속성이 다른 기본키가 아닌 속성을 결정

 

ex) 적용 전 => 학번, 학생이름, 학과명, 학과 사무실 위치(학교 테이블)

      적용 후 => 학번, 학생이름 , 학과명 (학생 테이블)
                        학과명 , 학과 사무실 위치 (학과정보 테이블)

 

 

 

 

회고 : Next.js는 공식문서를 한번 훑어보자 무의식적으로 쓰고 보는 것과

흐름을 알고 난 후에 보는 것과 체감이 많이 다르다. 

먼저 올바른 DB를 만들기 위해서는 시스템이라는 설계도를 마인드맵처럼 생각하고

개체와 관계에 연결 경우를 고려해서 데이터의 테이블을 만들어야 할 필요가 있다.