Post

데브코스 TIL - Day 10

스프린트1 프로젝트 만들기

1. HTML/CSS만 이용해서 나만의 포트폴리오 페이지를 만들기

portfolio

자바스크립트를 사용할 수 없기때문에 최대한 심플하게 만드려고 하였다.

내가 반응형 홈페이지 마크업하는 것을 홈페이지들을 넣었다. 마우스를 호버하면 프로젝트의 타이틀과 어떤 카테고리의 프로젝트인지 나타나도록 하였다.

이미지가 빨리 로딩될 수 있도록 기존의 png 파일을 webp 파일로 변환하여 사용하였다.

📂 폴더 구조

1
2
3
4
5
6
7
8
9
10
11
12
├── 📁img
│   ├── hyemin_face.png
│   ├── moment.webp
│   ├── responsive1.webp
│   ├── responsive2.webp
│   ├── responsive3.webp
│   ├── responsive4.webp
│   └── twitter.webp
├── README.md
├── favicon.ico
├── index.html
└── style.css

2. 데이터베이스 테이블 설계해보기

프로젝트 요구사항

  • 모든 공연은 회원 1명당 구매 수량 제한 100장
  • 각 공연의 회차는 1회
  • 모든 공연의 좌석은 예매할 수 없음

데이터 요구사항

  • 메인 페이지
    • 로그인 버튼
    • 주문내역 버튼
    • 공연 아이템
      • 공연 이미지
      • 날짜
      • 공연명
      • 가격
  • 공연1 상세페이지
    • 공연이미지
    • 공연명
    • 날짜
    • 공연 가격
    • 설명
    • 예매하기 버튼
  • 로그인 페이지
    • 이메일
    • 비밀번호
    • 로그인 버튼
    • 회원가입 버튼
  • 회원가입 페이지
    • 이름
    • 이메일
    • 비밀번호
    • 비밀번호 확인
    • 회원가입 버튼
  • 주문 내역 페이지
    • 예매번호
    • 예매일자
    • 예매 공연명
    • 예매자 이름
    • 예매자 연락처
    • 공연 날짜
    • 공연 가격
    • 예매 수량
    • 총 예매 가격

내가 설계한 테이블

dd

  • user table
    • 유저 정보를 저장
  • order_history table
    • 주문 내역을 저장
    • 주문내역에서 공연 명을 클릭하면 해당 공연 상세페이지로 이동할 수 있게 show_id 값을 가지도록 설계
    • 유저의 공연 예매 내역을 가져오기 위해 user_id 값을 가지도록 설계
    • 예매 번호를 클릭하면 주문 상세페이지로 이동할 수 있게 order_id를 가지도록 설계
  • order_detail table
    • 주문 상세 내역을 저장
    • 유저의 이름, 핸드폰 번호, 주소 등을 가져올 수 있도록 user_id를 가지도록 설계
    • 공연의 가격, 날짜 등을 가져올 수 있도록 show_id를 가지도록 설계
  • show_item table
    • 공연 상세 정보를 저장

강사님의 피드백

table 안에 PK 값으로는 user_id나 order_id와 같이 작성하지 않고, 그냥 id로 작성하고 사용한다.

Why?
table 안에 있는 id 값을 가져와 사용하기 때문에 table명_id로는 사용하지 않는다.
user.id vs user.user_id

다른 테이블에서 참조할 때만 table_id로 작성해서 사용한다.

느낀점

프로젝트를 제작할 때 항상 리액트를 사용해서 제작하곤했었는데, 오랜만에 HTML/CSS로 프로젝트를 제작해서 재미있었다. 데이터베이스 설계할 때 고려할 사항들이 참 많고, 같은 조건이어도 다 다르게 설계한다는 점이 신기했다. 데이터베이스를 설계하는 것은 정답이 있는 줄 알았는데 같은 내용을 중복해서 가지고 있지 않는 경우에는 모두 정답이라는 점이 제일 기억에 남는다.

This post is licensed under CC BY 4.0 by the author.