2021.12.25(세미 프로젝트)

커피가 너무 맛있다

- 오늘의 평가 및 느낀 점 - 

=> 오늘은 크리스마스이다. 작년까지는 싱숭생숭했지만 올해는 그런 기분이 없다. 이번 프로젝트에서 팀장을 급작스레 하게 되어서인가? 정리하고 생각할게 너무 많기 때문인 것 같아. 확실하게 팀을 다져나가야 된다는 책임감에 머리가 복잡해진다. 아침에 일어나자마자 노트북을 켰다. 하지만 벌써부터 프로젝트를 구상할 순 없다. JSP, Servlet을 배우지 않았기 때문에 기초적인 틀은 짤 순 없지만 팀원들에게 오늘까지 쇼핑몰의 주제와 기능을 1, 2가지 작성해달라고 했다. 그래도 우리가 정한 행동지침을 다들 잘 따라주시는 것 같아 다행이다. 오늘도 공부와 팀 프로젝트를 열심히 하는 하루가 되자.

-> 투표를 통해 정한 우리의 세미프로젝트 주제는 향수 쇼핑몰!

 

---

- 오늘 공부 계획 -

• 자바스크립트 Node 정리 (뉴렉처 및 블로그) 아주 중요.
• 쇼핑몰 프로젝트 주제 및 팀원 의견 취합

---

- 팀원 의견 -

dh : 향수 쇼핑몰

1.마일리지 적립(구매금액의 0.1%)
2. 출석 이벤트(달력에 스탬프 찍는 형태)
3. 결제할 때 쿠폰 사용 시 금액 차감되는 기능
4. 후기 전용 게시판

 

sj :

1.리뷰게시판에서 리뷰 안에 제품 이미지를 누르면 제품 정보로 이동하는 기능
2.Q&A를 작성 할 때 관리자만 볼 수 있도록 하는 기능
3. 메인 화면에 영상이 나오게 하는 기능
4. 신규 가입 시 신규 가입 쿠폰이 자동 발급되는 기능

 

sh : 원두커피

1. 쿠폰 발급
  가. 신규 회원 가입 시, 매주 주말 발급
  나. 30,000 이상 구매 시에 적용 가능
 2. 장바구니
  가. 주문번호 자동생성
  나. 상품 이미지 클릭 시, 상품정보 페이지로 이동( 페이징 )
  다. 쿠폰 적용
  3. 메인 화면
   가. 엠디 추천 상품에 마우스 커서 놓으면 가격과 재고 표시 
   나. 오프라인 매장 위치 맵 표시 
  4. 상품 화면 - 사이즈, 재고 표시

 

김남영 : 프로틴 쇼핑

1. 맨 아래에 주소 및 지도를 넣으면 좋겠다.

2. 사진에 마우스 커서를 갖다댈 시 확대되는 기능

3. 사진이 순차적으로 자동으로 바뀌어야 함.

4. 프로틴 판매 페이지 (많은 이용 경험으로 페이지의 기능이나 information 보충 설명들은 쉽게 적을 수 있음)

---

- 공부 내용 - 

 

노드 트리

부모 노드와 요소 노드 자식 관계

이벤트, 이벤트 버블링 객체 이용 JS프로그래밍

MouseEvent를 이용(파일 선택)

노드 정리 필기

뉴렉처 자스 필기 2

뉴렉처 자스 필기 3

//Ex5-Trigger
window.addEventListener("load", function(){
  var section = document.querySelector("#section5");

  var fileButton = section.querySelector(".file-button");
  var fileTriggerButton = section.querySelector(".file-trigger-button");

  fileTriggerButton.onclick = function() {
    var event = new MouseEvent("click",{
      'view':window,
      'bubbles':true,
      'cancelable':true
    });
    
    fileButton.dispatchEvent(event);
  }

});

//Ex4-서로 다른 기능의 여러 버튼을 가진 화면에서 이벤트를 처리하는 방법
window.addEventListener("load", function(){

  var section = document.querySelector("#section4");

  var tbody = section.querySelector(".notice-list tbody");

  tbody.onclick = function(e) {
   
    e.preventDefault();

    var target = e.target;

    if(target.nodeName != "A")
      return;

    if(target.classList.contains("sel-button")){
      var tr = target.parentElement;
      for(; tr.nodeName != "TR"; tr=tr.parentElement);
      tr.style.background = "yellow";

    }
    else if(target.classList.contains("edit-button")){
      console.log("edit");
    }
    else if(target.classList.contains("del-button")){
      console.log("del");
      
    }
    
    
  };
});

// Ex3-이벤트 버블링 멈추기
window.addEventListener("load", function () {

  var section = document.querySelector("#section3");

  var imgList = section.querySelector(".img-list");
  var addButton = section.querySelector(".add-button");
  var currentImg = section.querySelector(".current-img");

  imgList.onclick = function (e) {
    console.log("imgList.onclick");
    if (e.target.nodeName != "IMG") return;
    currentImg.src = e.target.src;
  };

  addButton.onclick = function (e) {
    e.stopPropagation();
    var img = document.createElement("img");
    img.src = "images/lion.jpg";
    currentImg.insertAdjacentElement("afterend", img);
  };

});





//Ex2-이벤트 버블링을 이용해 사용자 이벤트 처리하기:event Bubbling
window.addEventListener("load", function () {

  var section = document.querySelector("#section2");
  var imgList = section.querySelector(".img-list");
  var currentImg = section.querySelector(".current-img");

  imgList.onclick = function (e) {
    if (e.target.nodeName != "IMG") return;

    currentImg.src = e.target.src;
  };
});


//연습문제 1-선택된 레코드 삭제하기:event target
window.addEventListener("load", function () {
  var section = document.querySelector("#section1-1");

  var delButton = section.querySelectorAll(".del-button");

  for (var i = 0; i < delButton.length; i++) {
    delButton[i].onclick = function (e) {
      var tr = e.target.parentElement.parentElement;
      tr.remove();
    }
  }
});



//Ex1-선택된 이미지 보여주기:event target
window.addEventListener("load", function () {

  var section = document.querySelector("#section1");

  var imgs = section.querySelectorAll(".img");
  var currentImg = section.querySelector(".current-img");

  for (var i = 0; i < imgs.length; i++)
    imgs[i].onclick = function (e) {
      currentImg.src = e.target.src;
    };

});

-> 뉴렉처 자스 예제 코드

 

---

- 스터디 계획 및 결과 - 

• 오늘은 스터디 없는 날.