데브코스 TIL - Day 10
스프린트1 프로젝트 만들기
1. HTML/CSS만 이용해서 나만의 포트폴리오 페이지를 만들기
자바스크립트를 사용할 수 없기때문에 최대한 심플하게 만드려고 하였다.
내가 반응형 홈페이지 마크업하는 것을 홈페이지들을 넣었다. 마우스를 호버하면 프로젝트의 타이틀과 어떤 카테고리의 프로젝트인지 나타나도록 하였다.
이미지가 빨리 로딩될 수 있도록 기존의 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 상세페이지
- 공연이미지
- 공연명
- 날짜
- 공연 가격
- 설명
- 예매하기 버튼
- 로그인 페이지
- 이메일
- 비밀번호
- 로그인 버튼
- 회원가입 버튼
- 회원가입 페이지
- 이름
- 이메일
- 비밀번호
- 비밀번호 확인
- 회원가입 버튼
- 주문 내역 페이지
- 예매번호
- 예매일자
- 예매 공연명
- 예매자 이름
- 예매자 연락처
- 공연 날짜
- 공연 가격
- 예매 수량
- 총 예매 가격
내가 설계한 테이블
- 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.