스타일드 컴포넌트 되게 간단히 컴포넌트를 만들 수 있음. 저거는 외부 라이브러리라서 설치 해야 함. import 해야 한다. 외부 컴파일러. const TestData = styled.div` width:100%; height:100% backgroun-image:url(${props=>props.img}); ` 저런 식으로. 말 그대로 스타일된 컴포넌트 저거 컴포넌트라 props 쓸 수 있음. 이런 식으로. 컴포넌트라 img처럼 저렇게 속성 줄 수 있음. React 2023.11.10
인덱스 클러스터형 인덱스 보조 인덱스 고유 인덱스 클러스터형 인덱스 기본키 기본키에 의해 자동으로 정렬됨. 영어사전과 비슷함. 자동정렬. 보조 인덱스 자동정렬 안일어남. 일단은 인덱스 기본 작동 원리부터. (클러스터) 이거 트리 형식임. 이런 식인데, 그러니까 노드? 라는 게 있음. mySql에선 페이지라고 부름 이 페이지는 한 건의 데이터가 아니라, 이런 식으로 어떤 테이블? 처럼 저 각각이 primary key, 더 정확히는 인덱스 라고 보면 됨. 이렇게 트리구조로, 찾아감. 맨 위를 루트페이지, 최 하단 저 페이지들을 리프페이지라고 하는데, 말했다시피 트리구조임. 데이터 많아지면 또 저기서 트리구조로 펼쳐지는 거. 저러 한 페이지들이 테이블마다 다 따로 있는 거. 데이터가 넘치게 되면, 페이지를 분할 시킴.. DB 2023.11.10
24. 상품 수정 @GetMapping("/items/{itemId}/edit") public String updateItemForm(@PathVariable("itemId") Long itemId, Model model){ BookForm form = new BookForm((Book) itemService.findOne(itemId)); model.addAttribute("form", form); return "items/updateItemForm"; } 그냥 폼. 생성자는 그냥 내가 만들어 봤음. Book을 BookForm으로. 그걸 템플릿에 뿌려줌. 글번호/edit 이런 형식은 자주 있는 형식인듯. 아무 사이트 글에서 저렇게 edit 붙였더니 로그인 페이지로 이동되었음. 그 후 내 아이디로 로그인 하고 다시 edi.. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.10
23. 상품 등록 @Controller @RequiredArgsConstructor public class ItemController { private final ItemService itemService; @GetMapping("/items/new") public String createForm(Model model){ model.addAttribute("form", new BookForm()); return "items/createItemForm"; } @PostMapping("/items/new") public String create(BookForm form){ Book book = new Book(); book.setName(form.getName()); book.setPrice(form.getPrice()); .. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.10
22. 회원 목록 조회 회원 목록 조회는 간단하다. 주문조회 처럼 따로 조건도 없고, 그냥 조회해 오는거다. @GetMapping("/members") public String list(Model model){ List members = memberService.findMembers(); model.addAttribute("members", members); return "members/memberList"; } 저렇게 list 넘기고 # 이름 도시 주소 우편번호 이렇게 하면, th:each는 반복문, forEach랑 같다. ${members}의 각각의 원소들을 member라는 이름으로 member.address?.city는 address가 있냐? 그러면 찍고 없으면 안 찍는다. 엔티티는 최대한 순수하게, 그러니까, 로직도 비.. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.10
리액트 이미지 가져오는 법 import img02 from './images/img02.jpg'; function App() { return ( {/* */} // ); } 저렇게 4가지 방법, 아니 첫번째 저렇게 가져오는 건 문제. 걍 html에서 쓰듯이 하면 안됨. 저거 빼고 아래 3개 import 해서 가져오거나 아예 reqire 해서 가져오거나. 근데 그냥 public 폴더에 images 폴더 만들어서, 거기서 가져오는 게 좋음. process.env는 환경변수들 있는 객체인데, 거기서 PUBLIC_URL 이 public 폴더 url임. React 2023.11.09
21. 회원 등록 회원 등록 부분의 컨트롤러, 문서를 개발할 것이다. @Controller @RequiredArgsConstructor public class MemberController { private final MemberService memberService; @GetMapping("/members/new") public String createForm(Model model){ model.addAttribute("memberForm", new MemberForm()); return "members/createMemberForm"; } } 보통 컨트롤러에서 service를 쓰니 일단 주입받는다. (@RequiredArgsCons~~ 저걸로 final 인자로 있는 생성자 생성해주고, 그럼 알아서 빈에서 주입됨.) /.. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.09
뷰 가상테이블 단순 뷰 : 하나의 테이블과 연관된 뷰 복합 뷰 : 2개 이상 테이블 뷰는 가상 테이블로, 바로가기와 비슷. 데이터를 가지고 있지 않음. 뷰는 select에 의해 만들어짐. create view v_member as select mem_id, mem_name, addr from member; select * from v_member; 테이블 생성할 때 처럼 create view 뷰네임 as select 가져올데이터1, 가져올데이터2, .... from 테이블 조회는 테이블이랑 똑같음. 그냥 테이블이라고 생각 하셈. 그러니까 저 select 문을 저장해 뒀다가 뷰를 조회하는 순간 저 쿼리를 날려 가져오는 듯. create view v_member_buy as select b.mem_id, m.mem_nam.. DB 2023.11.09
20. 웹 계층 개발 여기선 일단 SSR인 타임리프를 쓸 것이다. 웹계층 홈 화면, 레이아웃 회원 등록 회훤 조회 상품등록 상품 목록 상품 수정 변경 감지와 병합(merge) 상품 주문 주문 목록 검색, 취소 변경 감지와 병합은. 어떻게 데이터를 수정하는 것이 올바른 방법인가. 이제 컨트롤러와 문서이다. 먼저 화면을 그냥 가져왔다. 스프링 위주로 배울거기 때문에 그냥 화면은 가져왔다. thymeleaf 템플릿이며, fragment로 공통적인 부분들은 따로 빼서 그걸 가져오는 형식으로 템플릿을 구성했다. 화면 꾸미는 건 그냥 bootstrap 써서 기본적인걸로.. static에 접근할 때는 그냥 /css/css파일 이렇게 루트로 접근하면 되는 듯. 일단 홈화면만 만들어 놨음. 컨트롤러 @Slf4j @Controller publ.. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.09
19. 주문 검색 기능 개발 이것도 오더 서비스의 기능이긴 한데, 동적 쿼리가 필요한 부분이라 다른 것들 먼저 개발했다. 조회를 할 때 서비스에서, public List findOrders(OrderSearch orderSearch){ return orderRepository.findAll(orderSearch); } 저렇게 특정 조건을 넣어 검색하면, 그 조건에 맞는 쿼리만 가져올 것이다. 그래서 조회해올 때 동적쿼리가 필요하다. 조건은 어떤회원이 주문했는지, 또 어떤 주문상태인지 조건에 맞는 것만 조회할 수 있도록 그렇게 쿼리를 짜게끔 할 것이다. public List findAll(OrderSearch orderSearch){ em.createQuery("select o from Order o join o.member m", .. 스프링데이터 + JPA/웹 애플리케이션 개발 2023.11.09