📅 2024-09-05 개인프로젝트 10일차

TODO

1. ERD, DB 수정
2. Figma 수정

• 상단 메뉴바 hover시를 안만들었다...

---

1. ERD, DB 수정

🔎 ERDcloud 링크

1. 타자기록, 투수기록, 팀 기록 테이블의 기록 요소들을 모두 NOT NULL로 했다가 SELECT 할 때 IFNULL 쓰면 된다는게 생각이 나서 NULL이 가능한 것들은 NULL로 수정했다. (나는 바보다..)
2. FOREGIN KEY(외래키)도 설정하였고 ERDcloud에서 export 한 SQL 쿼리문을 GPT한테 물어봤더니 모르는 개념이 있었다.

✨ON DELETE CASCADE를 추가.

• CASCADE : 참조되는 테이블에서 데이터를 삭제하거나 수정하면 참조하는 테이블에서도 삭제와 수정이 같이 이루어진다.

• ON DELETE : 참조되는 테이블의 값이 삭제될 경우의 동작을 ON DELETE 구문으로 설정

• ON UPDATE : 참조되는 테이블의 값이 수정될 경우의 동작을 ON UPDATE 구문으로 설정

• ON DELETE CASCADE : 참조된 부모 레코드가 삭제될 때 자동으로 관련된 자식 레코드들도 함께 삭제된다.

  • 사용하는 이유
    • 데이터 무결성 유지 : 부모 레코드가 삭제되면 관련된 자식 레코드도 함께 삭제되어 데이터베이스가 일관된 상태를 유지
    • 편리함 : 수동으로 관련된 자식 레코드를 찾아서 삭제할 필요 없이 부모 레코드만 삭제하면 자동으로 자식 레코드가 삭제
    • 자동화 : 관리자가 실수로 부모 레코드를 삭제했을 때 수동으로 자식 레코드를 삭제하지 않아도 되기 때문에 관리가 더 용이

✨FK(외래키) 추가 방법이 알고있던 것과 달랐다.

• 내가 알고있던 방법은 ALTER TABLE 테이블명 ADD FOREGIN KEY(칼럼명) REFERENCES 참조할 테이블명(칼럼명);
• ERDcloud export 했을 때 방법은 ALTER TABLE 테이블명 ADD CONSTRAINT FK_테이블명_참조할 테이블명 FOREIGN KEY (칼럼명) REFERENCES 참조할 테이블명(칼럼명);
• 찾아보니까 CONSTRAINT 이게 제약조건을 설정하는거였다..
  🔎 제약 조건(constraint) : 데이터의 무결성을 지키기 위해 데이터를 입력받을 때 실행되는 검사 규칙을 의미. 이러한 제약 조건은 CREATE 문으로 테이블을 생성할 때나 ALTER 문으로 컬럼을 추가할 때도 설정할 수 있다.
• 이걸 토대로 분석해보면
  • ALTER TABLE 테이블명 : 외래키 제약 조건을 추가할 테이블의 이름을 지정한다.
  • ADD CONSTRAINT FK_테이블명_참조할 테이블명 : 새로운 제약 조건을 추가하는 명령어. FK_테이블명_참조할 테이블명은 제약 조건의 이름으로 외래키의 제약 조건을 설명하는 이름을 사용한다.
  • FOREIGN KEY (칼럼명) : 외래키 제약 조건이 적용될 테이블의 칼럼을 지정합니다. 이 칼럼은 참조할 다른 테이블의 기본키(또는 고유키) 칼럼을 참조한다.
  • REFERENCES 참조할 테이블명(칼럼명) : 외래키가 참조할 다른 테이블의 이름과 칼럼을 지정한다. 외래키가 참조하는 칼럼은 보통 해당 테이블의 기본키이다.

3. 일단 DB는 끝난거 같다.. Figma 수정하자.. (Figma 언제끝나지?)

2. Figma

• Figma 드롭다운 메뉴 만들기 참고

🔎 Figma에서 상단바 메뉴에 마우스 올렸을 때 드롭다운 메뉴가 나오게 하고 싶어서 이것저것 시도하다 그럴싸하게 하는법을 알아냈다..

1. 상단바 메뉴 프레임 아래에 드롭다운 메뉴 프레임 최대높이 사이즈 만큼 프레임(= 배경프레임)을 만들어서 붙이고 상단바 메뉴 프레임과 배경프레임을 오토레이아웃!

• 내가 만든 드롭다운 메뉴 프레임의 최대높이 사이즈는 200.
  

2. 배경프레임을 드롭다운 메뉴의 개수만큼 생성하고 각각의 배경프레임에 알맞게 드롭다운 메뉴를 넣는다.
   
3. 배경프레임과 드롭다운 메뉴를 선택하여 마우스 우클릭을 하고 Flame Selection(Ctrl+Alt+G)를 선택하면 프레임으로 감싸진다.

• 마우스 우클릭 메뉴
  
• 프레임으로 감싸진 상태의 사진
  

4. 2, 3번을 반복하여 배경프레임과 드롭다운 메뉴를 프레임으로 다 감싼 후 상단 메뉴바 아이템을 선택하여 피그마 우측 상단에 Prototype을 클릭

5. Interactions의 + 버튼을 클릭

• Trigger : While hovering
• Action : Open Overlay
• Overlay : 해당하는 드롭다운 메뉴와 배경프레임을 감싼 프레임을 열게끔 선택
• Position : Manual을 설정하여 적절한 위치로 배치!

6. 주의사항 : 상단 메뉴바 아이템만 선택해서 5번을 진행하면 상단 메뉴바 아이템에서 마우스가 벗어난 순간 드롭다운 메뉴도 사라진다..

• 해결법 : 상단 메뉴바 아이템 영역과 드롭다운 메뉴 프레임 영역을 붙인 후에 마우스 우클릭 하여 Flame Selection을 해서 프레임으로 감싼 후에 감싸진 프레임 영역에 5번 과정을 해야한다.
  • 상단 메뉴바 경계선에 드롭다운 메뉴 프레임 영역을 붙이고 해당하는 상단 메뉴바 아이템 영역을 복사하여 두 영역을 선택한 사진
    
  • 두 프레임 영역을 선택하고 마우스 우클릭을 눌러 Flame Selection를 선택(프레임으로 감싸기 위해)한 사진
    

7. 완성본

✔ Figma 그만 붙들고 빨리 기능구현하면서 기능정의서 작성하자
(이제 좀 놔줘... 피그마는...)