국비 지원 IT(웹앱개발) 취업반 강의 40일차 (HTML, CSS, JS, DB시험)

주말부터 화요일까지 공연 일정과 수업 일정이 있어서 수업에 참가하지 못했다. 38 39일차 수업은 주말에 업로드 하겠다!

그래서 처음에는 반응형 모바일메뉴, 탑바, 모바일 탑바를 만드는 것 부터 시작했다. 솔직히 말해서 엄청 버벅이면서 만들었다.

See the Pen 반응형 모바일메뉴 탑바, 모바일 탑바 by qBlackBirdp (@qBlackBirdp) on CodePen.

이런 느낌인데 링크 타고 들어가서 보면 화면 크기에 따라서 탑바를 쓸지 모바일 탑바를 쓸지 결정해준다. 디테일을 놓치는 경우가 많았고 css를 html에 쓰는게 익숙하지가 않다. html의 뼈대를 잡는 것 또한 쉽지 않았다. 그래도 어찌저찌 만들고 나서 보면 조금 보이긴한다.

See the Pen Untitled by jhs (@jangka44) on CodePen.

이게 강사님이 올려주신 정답이고 JS에도 뭔가 쓰여있다. 솔직히 말하자면 뭔지 모르겠다. 아 코드를 잘 보니까 클릭할 때 반응이 온다. 모바일 사이드바를 클릭하면 무언가 뜨도록 만들어놨다. 팝업창을 띄우는거랑 같은 느낌인 듯. 여기 몇줄 쓰여있는 css는 그거에 대한 반응이다. ative를 사용하지 않았는가. opacity는 클릭했을 때 투명도 반응 시간이고 등등. 근데 내가 저걸 처음부터 끝까지 하려고 하면 그게 될지는 의문이다.

아 이게 이틀 아무것도 못한 사이에 뭔가 많이 한 것 같아서 되게 지금 불안하다.

아무튼 다음으로는 모바일 메뉴 사이드바를 만들었다.

See the Pen 반응형 모바일메뉴 탑바, 모바일 탑바2 by qBlackBirdp (@qBlackBirdp) on CodePen.

이제 이 사이드바에 메뉴를 추가해주면 된다.

---

중간평가(DB)

DROP DATABASE IF EXISTS mall;

CREATE DATABASE mall;

USE mall;



CREATE TABLE t_order(

 userNo INT(5) NOT NULL,

 productNo INT(5) NOT NULL

);



CREATE TABLE t_user(

 id INT(5) PRIMARY KEY AUTO_INCREMENT,

 userId CHAR(200) NOT NULL,

 userPw CHAR(200) NOT NULL,

 userName CHAR(50) NOT NULL,

 addr CHAR(200) NOT NULL

);



CREATE TABLE t_product(

 id INT(5) PRIMARY KEY AUTO_INCREMENT,

 pname CHAR(100) NOT NULL,

 price INT(10) NOT NULL

);



# 1) t_order에 id 컬럼을 추가해주세요(alter 사용, primary key 적용, auto_Increment 적용)

alter TABLE t_order add column `id` INT NOT NULL PRIMARY KEY AUTO_INCREMENT; 

# 2) t_user 의 userName을 name 으로 변경해주세요(alter 사용)

ALTER TABLE t_user RENAME COLUMN userName TO `name`;

# 3) t_product 의 pname을 productName 으로 변경해주세요(alter 사용)

ALTER TABLE t_product RENAME COLUMN pname TO productName;

# 4) t_user의 userId 에 UNIQUE 제약조건을 추가하고 확인하는 SQL을 작성해주세요(alter 사용)

ALTER TABLE t_user MODIFY userId CHAR(200) UNIQUE NOT NULL;

SELECT *
FROM t_user;


# 5) 각 테이블에 다음 데이터를 넣어보세요

-- t_order

# userNo = 1, productNo = 1;
INSERT t_order(userNo, productNo)
VALUES          (1, 1);
# userNo = 2, productNo = 2;
INSERT t_order(userNo, productNo)
VALUES          (2, 2);
# userNo = 3, productNo = 3;
INSERT t_order(userNo, productNo)
VALUES          (3, 3);
# userNo = 4, productNo = 4;
INSERT t_order(userNo, productNo)
VALUES          (4, 4);
# userNo = 5, productNo = 5;
INSERT t_order(userNo, productNo)
VALUES          (5, 5);
# userNo = 6, productNo = 6;
INSERT t_order(userNo, productNo)
VALUES          (6, 6);
# userNo = 6, productNo = 7;
INSERT t_order(userNo, productNo)
VALUES          (6, 7);
# userNo = 1, productNo = 5;
INSERT t_order(userNo, productNo)
VALUES          (1, 5);
# userNo = 1, productNo = 1;
INSERT t_order(userNo, productNo)
VALUES          (1, 1);
# userNo = 5, productNo = 8;
INSERT t_order(userNo, productNo)
VALUES          (5, 8);

-- t_user

# userId = ‘user1’, userPw = ‘pass1’, name = ‘김철수’, addr = ‘런던’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user1', 'pass1','김철수','런던');

# userId = ‘user2’, userPw = ‘pass2’, name = ‘김영희’, addr = ‘서울’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user2', 'pass2','김영희','서울');
# userId = ‘user3’, userPw = ‘pass3’, name = ‘홍길동’, addr = ‘대전’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user3', 'pass3','홍길동','대전');
# userId = ‘user4’, userPw = ‘pass4’, name = ‘박민수’, addr = ‘대구’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user4', 'pass4','박민수','대구');
# userId = ‘user5’, userPw = ‘pass5’, name = ‘박민수’, addr = ‘대구’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user5', 'pass5','박민수','대구');
# userId = ‘user6’, userPw = ‘pass6’, name = ‘최윤정’, addr = ‘울산’;
INSERT t_user(userId, userPw, `name`, addr)
VALUES          ('user6', 'pass6','최윤정','울산');

-- t_product

# productName = ‘운동화’, price = 1000000;
INSERT t_product(productName, price)
VALUES          ('운동화', '1000000');
# productName = ‘코트’, price = 100000;
INSERT t_product(productName, price)
VALUES          ('코트', '100000');
# productName = ‘반바지’, price = 30000;
INSERT t_product(productName, price)
VALUES          ('반바지', '30000');
# productName = ‘스커트’, price = 15000;
INSERT t_product(productName, price)
VALUES          ('스커트', '15000');
# productName = ‘코트’, price = 100000;
INSERT t_product(productName, price)
VALUES          ('코트', '100000');
# productName = ‘티셔츠’, price = 20000;
INSERT t_product(productName, price)
VALUES          ('티셔츠', '20000');
# productName = ‘운동화’, price = 200000;
INSERT t_product(productName, price)
VALUES          ('운동화', '200000');
# productName = ‘모자’, price = 30000;
INSERT t_product(productName, price)
VALUES          ('모자', '30000');




# 6) t_user 의 userId에  Index 를 추가하고 확인해보세요
ALTER TABLE t_user ADD INDEX idx(userId);

SHOW INDEX FROM t_user;


# 7) 각 문제를 해결 할 수 있는 쿼리를 작성하여 제출하세요（INNER JOIN　사용)

# 1. 김철수의 상품 주문 갯수는?

SELECT COUNT(*)
FROM t_user u
INNER JOIN t_order o
ON u.id = o.userNo
WHERE u.`name` = '김철수';

# 2. 김철수가 산 상품은? 
SELECT DISTINCT u.productName AS '김철수가 산 상품'
FROM t_user u
INNER JOIN t_order o
ON u.id = o.userNo
INNER JOIN t_product p
ON p.id = o.productNo
WHERE u.`name` = '김철수';

# 3. 스커트를 산 사람은? 
SELECT u.`name` AS '스커트를 산 사람'
FROM t_user u
INNER JOIN t_order o
ON u.id = o.userNo
INNER JOIN t_product p
ON p.id = o.productNo
WHERE p.productName = '스커트';


# 4. 가장 많이 주문한 사람의 아이디와 이름, 주문개수는? 
SELECT u.userId AS '가장 많이 주문한 사람 아이디', u.`name` AS '이름', count(o.userNo) AS '주문개수'
FROM t_user u
INNER JOIN t_order o
ON u.id = o.userNo
GROUP BY o.userNo
ORDER BY count(o.userNo) DESC
LIMIT 1;

# 5. 김영희가 사용한 총 금액은? 
SELECT SUM(p.price) AS '김영희가 사용한 총 금액'
FROM t_user u
INNER JOIN t_order o
ON u.id = o.userNo
INNER JOIN t_product p
ON p.id = o.productNo
WHERE u.`name` = '김영희';

DB 시험을 갑자기 봤는데 생각보다 그렇게 어렵지 않게 풀었다.

---

암튼 다음 단계로 3차메뉴를 사이드바에 추가하는데 좀 많이 어려움을 겪었다.
구현하기 전에 앞서 bem 방식에 대해서 강사님은 설명하셨다.
아 그리고 메뉴 구성이 헷갈릴 수도 있으니까 아예 새 코드펜을 열어서 만들어서 가져와도 된다고 말씀해주셨다.

또, 뭐 하나를 구현할 때 따로 빼서 할 수 있으면 따로 빼서 하고 그 위치에 넣어주는 것도 방법이라고 하셨다.

See the Pen 반응형 모바일메뉴 탑바, 모바일 탑바 - 메뉴아이템 만들기. by qBlackBirdp (@qBlackBirdp) on CodePen.

그래서 여기서 메뉴 부분만 빼서 구현했다.

See the Pen 3차메뉴 따로 빼서 작업 by qBlackBirdp (@qBlackBirdp) on CodePen.

오늘은 여기까지!!