관심쟁이 영호

이번 시간은 JSX 문법을 익혀볼 것이다. React의 기본만 다루는 것이 목표기 때문에, 자세히 들여다보진 말자. JS문법에 HTML 문법을 넣을 수 있다. return ( 안녕 ); 일반적으로 JS문법에서는 " 안녕 " 이렇게 "" 사이에 html 구문을 입력한다. JSX에서는 ""를 표시할 필요가 없다. ※ return이 무엇인지 모르는 사람이 있을 수 있다. 리액트는 설정에서 index.js를 실행하도록 설정이 되어있다. index.js는 아래의 코드가 있다. ReactDOM.render( , document.getElementById('root') ); 는 App.js의 function App()을 실행하라는 것이다. document.getElementById('root')는 index.html..

웹 개발에 관심이 있는 사람이라면, "리액트"라는 단어를 한번쯤은 보았을 것이다. 이 단어가 왜 많은 사람들에게서 언급이 되는 것일까? 오늘의 포스팅에서는 리액트의 전반적인 개요를 둘러볼 예정이다. 리액트란? 내가 이해한 수준에서 명쾌하게 말을 하자면, 리액트는 싱글 페이지 어플리케이션을 개발하는데 도움을 주는 프레임워크라고 생각이 된다. 그렇다면 싱글 페이지 어플리케이션이란 무엇인가? 싱글 페이지 어플리케이션? 싱글 페이지 어플리케이션이란, html 파일은 1개 뿐이다. 필요한 부분의 View만 새롭게 그린다. 통째로 html을 받아올 필요가 없다. 개발되기 전에 웹 개발 상황을 살펴보자. 클라이언트가 서버에게 웹 페이지를 요청한다. 서버는 클라이언트에게 HTML 화면 통째로 보내준다. 클라이언트가 화..

이번에는 주문취소에 대해서 살펴볼 예정이다. 주문취소를 보는 이유는 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..

이전 시간에는 데이터베이스에 테이블을 어떻게 생성하는지 살펴보았다. 이번 시간에는 웹에서 데이터를 생성할 때를 살펴보자. 회원가입을 해보자. 위 그림과 같이 생성했다. "Submit" 버튼을 눌렀을 때, 어떤일이 일어날까!? - 먼저 해당화면을 구성하는 html을 살펴보자. 이름 Incorrect date 도시 거리 우편번호 Submit 위와 같이 구성되었다. 여기서 태그에 주목을 하면, "" 이렇게 코드가 짜여져 있다. 자세한 이해를 하고 싶다면, html의 form태그의 기능을 살펴보자! action 으로 "/members/new"라고 적혀있다. "/members/new"라고 매핑이 되어있는 곳으로 해당 폼정보를 던진다는 뜻이다. method는 폼정보를 post형태로 던진다는 뜻이다. 이렇게 던지면,..

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