관심쟁이 영호

오늘은 Thymeleaf에서 템플릿 조각, 레이아웃 나누기 기능을 공부해볼 예정이다. 목차 부트스트랩 템플릿 구하기 템플릿 조각 나누기 레이아웃 생성 템플릿 조각과 레이아웃이란? 먼저 적용을 하고, 무엇인지 알아보자. 부트스트랩 템플릿 구하기 부트스트랩에서 템플릿을 구해서 가져올 것이다. 먼저 아래의 링크로 가서 템플릿을 가져오자. https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutori..

이번에는 UserState에 대해서 공부를 해보자! 먼저 아래의 코드를 보자. let number = 1; const add = () =>{ number++; console.log('add', number); } return ( 숫자 : {number} 더하기 ); local:3000 으로 접속해서 "더하기" 버튼을 클릭하면 console로 number 값을 확인할 수 있다. 하지만 숫자: {number}인데 number 값을 +1을 해주어도 "숫자 : 1" 에서 1이 바뀌지 않는다 왜그럴까? 상태 값이 변경되었다는 신호를 보내야 한다. 리액트는 아무 변수나 상태 값으로 생각하지않는다. 그래서 "이 변수를 상태 값으로 설정할게!" 라고 해주어야 한다. 그리고 값이 변하면 "상태 값이 변경되었어!" 라고 ..

이번 포스팅에서는 concat, filter, map, slice, 스프레드(전개) 연산자에 대해서 살펴볼 것이다. 스프레드 연산자 스프레드 연산자는 깊은 복사를 실시하는 연산자이다. 아래 코드를 보자. const a = [1,2,3] const b = [...a]; b.push(4); // a??? 이렇게 했을 때, a의 값은 어떻게 될까? 정답은 [1,2,3] 그대로다. 이것이 깊은 복사이다. a의 모든 값을 복사하여 새로운 메모리를 할당한 배열 b에 저장한다. 그래서 b에 새로운 값을 푸쉬해도 a에는 아무런 영향을 주지 않는다. concat concat 함수는 추가하는 함수라고 생각하면 된다. 아래 코드를 보자. const a = [1,2,3]; const b = a.concat(4); // b??..

이번에는 주문취소에 대해서 살펴볼 예정이다. 주문취소를 보는 이유는 DB에서 값을 가져와서 데이터를 변경해주는 작업이기 때문이다. 여기서 문제가 있다. 만약, 물품이 10개가 있다. A라는 사람이 1개의 물품을 주문함과 동시에 B라는 사람이 10개의 물품을 주문할 수도 있다. 이렇게 된다면, DB에도 문제가 생기고 결제서비스와 같은 직접 돈과 연관되어 있는 문제면 엄청난 파장이 생길 것이다. 어쨌든 살펴보자. 홈화면에서 "주문 내역"을 눌러준다. 그러면 위와같은 페이지가 나온다. 페이지에 해당하는 매핑 컨트롤러로 가보자! 페이지는 "http://localhost:8080/orders" 이다. // OrderController.class @Controller @RequiredArgsConstructor p..

이번에는 "주문하기"에 대한 코드를 살펴보자. 주문하기는 Member, item, order 등등 모든 테이블과 엔티티가 엮어있기 때문에 조금더 생각을 해야한다! 어쨋든, 홈화면에서 주문하기 버튼을 클릭해보자. 그렇게 되면, localhost:8080/order로 넘어가게 된다. 화면은 아래와 같다. 여기서 Controller에 매핑이 되어있을 것이다. 해당 url이 매핑되어 있는곳으로 가보자! ※ 주문 회원, 상품명을 클릭하면 리스트가 콥보박스처럼 드롭다운된다. @Controller @RequiredArgsConstructor public class OrderController { private final OrderService orderService; private final MemberService..

이전 시간에는 웹사이트에서 요청했을때, 어떤방식으로 인식하고 넘어가는지 살펴보았다. 그럼 이번시간에는 회원가입을 했을때, 데이터가 어떻게 넘어가고 어떻게 내부에서 움직이는지 살펴보자. Spring이 시작이 되면, 테이블을 생성한다. 어디에서 테이블을 생성하라는 코드가 있을까? 이것을 알기 위해서는 먼저 JPA에 대한 지식이 있어야 한다. JPA에 대한 지식은 다른 글에 있다. https://bestkingit.tistory.com/106 Spring Boot ㅣ JPA, ORM에 관해서 ORM? ORM은 Object Relational Mapping이다. 데이터베이스에 저장된 테이블 형식의 데이터를 모델링하여 자바에서 사용할 수 있도록 클래스로 바꿔주는 것이다!! 거꾸로도 가능하다! ]ORM를 알아보기 ..