잇!(IT) 블로그

* 아래 코드를 확인하기 전 알아야 할 것이 있다. React는 같은 레벨에서 데이터를 주고 받을 수 없기 때문에 부모 컴포넌트로 데이터를 전달하고, 부모 데이터로부터 데이터를 전달 받아야 한다. - 위와 같이 Event를 통해 부모 컴포넌트에서 자식 컴포너트로부터 데이터를 전달받고, 자식 컴포넌트로 데이터를 전달하는 것을 확인 할 수 있다. - 사용자 입력, 입력 화면 - App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import Lifecycle from "./Life..

- Javascript 코드 function changePhone1(){ const phone1 = document.getElementById("phone1").value if(phone1.length === 3) { document.getElementById("phone2").focus() } } function changePhone2(){ const phone2 = document.getElementById("phone2").value if(phone2.length === 4) { document.getElementById("phone3").focus() } } function changePhone3(){ const phone1 = document.getElementById("phone1").valu..

- html 코드 회원가입 - - 000000 인증번호 전송 3:00 인증 완료 지역을 선택하세요. 서울 경기 인천 여성 남성 가입하기 - - onchange는 사용자가 입력 필드나 선택 옵션 등의 값을 변경하고 포커스를 다른 요소로 옮겼을 때 발생한다. - onkeyup은 사용자가 키보드의 키를 누르다가 뗄 때 발생한다. 인증번호 전송 - button 속성에 disabled 코드를 추가하면, 버튼이 비활성화 된다. - select 태그를 사용하면 위와같은 선택지를 만들 수 있다. 지역을 선택하세요. - select 태그의 하위 옵션인 option에서 disabled를 입력하게 되면 선택할 수 없는 상태로 변하고, selected가 되면 최초에 해당 option이 선택된다. - css 코드 * { box..

- 최종 완성본 - index.html (메인 페이지) TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 사이좋은 사람들, 싸이월드 사생활보호설정 홈 쥬크박스 게임 홈 쥬크박스 게임 - 홈, 쥬크박스, 게임 버튼 3개 각각 클릭되게 되면 menuHome(), menuJukebox(), menuGame() 함수가 실행되게 된다. const menuHome = () => { document.getElementById("contentFrame").setAttribute("src","home.html") // 매개변수가 2개 들어간다. "src", "값" document.getElementById("menuHome").style = "..

- index.html TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 - class명을 지정할 때, 보통 최대 4개까지 작성하도록 한다. 종속 클래스 명을 지을 때 제일 대표가 되는 맨 앞의 단어 하나정도는 생략해도 된다. (class는 어차피 구분하기 위해 작성하는 것이기 때문에 이름이 꼭 종속 될 필요는 없지만, 구분하기 편하게 하기 위해 작성한다.) - index.css * { box-sizing: border-box; /*border-box로 설정하면, 요소의 크기를 width와 height 값에 padding과 border를 포함한 총 크기로 설정 */ margin: 0px; } .background { width:..

- 장바구니 목록 중 체크박스가 선택된 상품을 주문하는 로직을 작성한다. - 장바구니에서 주문을 하면 기존 주문 로직과의 차이점은 여러 개의 상품을 하나의 주문에 담을 수 있다는 점과 주문한 상품은 장바구니에서 삭제해야 한다는 점이다. - 장바구니 페이지에서 주문할 상품 데이터를 전달할 DTO를 생성한다. - CartOrderDto.java @Getter @Setter public class CartOrderDto { private Long cartItemId; private List cartOrderDtoList; // 1. 장바구니에서 여러 개의 상품을 주문하므로 CartOrderDto 클래스가 자기 자신을 List로 가지고 있도록 만든다. } - 장바구니 주문은 cartItem의 Id와 장바구니에서..

- 이전에 장바구니에 담는 기능을 추가했다면, 이번에는 담은 장바구니를 조회하는 기능에 대해 구현할 것이다. - 장바구니 조회 페이지에 데이터를 전달할 DTO 클래스를 생성한다. - 이번에는 JPQL로 쿼리 작성 시 생성자를 이용해서 DTO로 바로 변환하는 방법을 사용한다. - CartDetailDto.java @Getter @Setter public class CartDetailDto { private Long cartItemId; //장바구니 상품 아이디 private String itemNm; private int price; private int count; private String imgUrl; public CartDetailDto(Long cartItemId, String itemNm, in..

- 상품 상세 페이지에서 장바구니에 담을 수량을 선택하고 장바구니 담기 버튼을 클릭할 때 상품이 장바구니에 담기는 기능을 구현해야 한다. - 상품 상세 페이지에서 장바구니에 담을 상품의 아이디와 수량을 전달 받을 CartItemDto 클래스를 생성한다. (장바구니에 담을 상품의 최소 수량은 1개 이상으로 제한한다.) - CartItemDto.java @Getter @Setter public class CartItemDto { @NotNull(message = "상품 아이디는 필수 입력 값 입니다.") private Long itemId; @Min(value = 1, message = "최소 1개 이상 담아주세요") private int count; } - 회원 한 명당 1개의 장바구니를 갖어야 한다. 처..

- 주문 이력에서 원하지 않는 주문을 취소하는 기능도 필요하다. 주문을 취소할 경우 해당 주문의 상태를 취소 상태로 만들어주고, 주문할 때 상품의 재고를 감소시켰던 만큼 다시 더해주는 로직을 작성하면 된다. - 상품의 재고를 더해주기 위해 Item 클래스에 addStock 메서드를 생성한다. - Item.java // 상품에 재고를 더해주기 위해서 Item 클래스에 addStock 메소드를 생성한다. public void addStock(int stockNumber) { // 1. 상품의 재고를 증가시키는 메소드이다. this.stockNumber += stockNumber; } - addStock을 호출하게 되면 재고를 증가시킨다. - 주문을 취소할 경우 주문 수량만큼 상품의 재고를 증가시키는 메소드를..

- 주문을 한 다음에는 주문 이력을 조회할 수 있는 페이지를 만들어야 한다. - 조회한 주문 데이터를 화면에 보낼 때 사용할 DTO 클래스를 생성한다. - OrderItemDto.java @Getter @Setter public class OrderItemDto { private String itemNm; //상품명 private int count; //주문 수량 private int orderPrice; //주문 금액 private String imgUrl; //상품 이미지 경로 public OrderItemDto(OrderItem orderItem, String imgUrl) { // OrderItemDto 클래스의 생성자로 orderItem 객체와 이미지 경로를 파라미터로 받아서 멤버 변수 값을 세..