Gom3rye

상품 등록 테스트 케이스 만들기 @Test void 상품등록() 테스트 케이스 만들기 거기서 productService.addProduct(request); 로 상품 등록을 해주기 productService는 addProduct라는 메서드에서 AddProductRequest를 전달받아서 상품을 등록하는 기능을 개발하는 것 따라서 final AddProductRequest request; 로 변수 선언 해주고 클래스가 없으니까 private class AddProductRequest{} 를 만들어주기 final AddProductRequest request = new AddProductRequest("상품명", 1000, DiscountPolicy.NONE); 으로 초기화를 해주고 이때 필요한 Discou..

부트스트랩 사용 방법 npm install react-bootstrap bootstrap 터미널에 위 명령어 입력 후 위 코드를 public > index.html 상단에 넣어준다. ( 아래) import 'bootstrap/dist/css/bootstrap.min.css'; 그 후 index.js 에 위 코드를 넣어준다. 적용 Border를 넣어주고 싶다! -> 처럼 className을 추가해준다. (rounded-circle을 넣을지 다른 것을 넣을지는 https://getbootstrap.com/docs/5.2/utilities/borders/#border 여기서 찾아주면 된다.) 부트스트랩을 이용해서 버튼 넣어주기 import Button from 'react-bootstrap/Button'; 버..

login 후 user db에 잘 저장되었나 확인하는 방법 http://localhost:8080/h2-console 에 들어가서 user 을 클릭해보자. 로그인된 사용자의 권한이 guest라면 posts 기능을 쓸 수 없다. (403 권한 거부 에러 발생하는 것을 볼 수 있음) -> h2-console로 가서 사용자의 role을 USER로 변경하자. (update user set role = 'USER'; 명령어 입력) 나쁜 코드란? -> 같은 코드가 반복되는 코드 cuz 유지보수성이 떨어짐 IndexController에서 세션값을 가져오는 부분인 SessionUser user = (SessionUser) httpSession.getAttribute("user"); 이 부분을 메소드 인자로 세션값을 바..

버튼 클릭 후 마우스를 버튼 밖으로 내보내면 시간이 사라지는 이벤트 작성 What's the time? - 주로 onClick과 EventListener을 통해 이벤트 구현 리액트로 이벤트 핸들링하기 - 버튼을 클릭할 때마다 글자색이 변하게 하려면 글자색을 관리하는 state 값이 있어야 한다. - 버튼을 클릭했을 때 색깔을 통해 그 변수값을 변경해주면 글자의 색깔이 바뀌겠다. -> 색깔을 props로 넘겨주자. - 위의 코드를 보면 굉장히 겹치는 게 많다 -> button 이라는 컴포넌트를 따로 빼줘서 작성해보자! button 컴포넌트 빼서 만든 핸들링 -> 하지만 이 코드는 실행되지 않음. Cuz setTextColor함수가 선언된 위치보다 더 위에서 사용되기 때문! Solution - onClick..

컴포넌트 형으로 Hello compoenent! 출력하기 // react를 가져오기 위한 코드 // 바벨 스크립트 넣어주기 Componenet를 사용하면 좋은 점 실습 - Button 컴포넌트를 사용하면 일일이 태그에 style={} 넣어주지 않아도 간결하게 한 번에 스타일 적용 가능하다. => 코드의 재사용성을 높여주었다. State란? 리액트에서는 state 값의 불변성이라는 개념이 아주 중요하게 등장한다. - 불변성은 어떤 값을 직접 변경하지 않고 새로운 값을 만들어 내는 것을 의미한다. 리액트에서 컴포넌트가 update된 값을 반영하는 방법을 보면 1. props 전달받음 2. 그 값을 바탕으로 shouldComponentUpdate 함수를 실행해서 false면 멈추고 true를 리턴하면 다음 단..

브라우저는 화면을 그리기 위해 DOM(Document Object Model) 개념을 사용한다. DOM은 html 파일 내용을 토대로 만들어지는데 js와 같은 script언어로 수정할 수 있도록 만들어진 웹페이지의 객체 지향 표현이라고 할 수 있다. DOM은 화면을 그리기 위해 필요한 정보가 tree 형태로 저장된 data이다. 기존에는 화면을 그릴 때마다 Jquery나 getElementById를 사용해 특정 DOM 노드를 수정하거나 삭제했는데 이렇게 특정 노드에 crud 작업을 수행하는 것은 많은 비용을 초래했다. -> 왜냐하면 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어가 있기 때문이다. 이런 비용 문제를 해결하기 위해 React에서 사용하는 Virtual DOM 개념이 나왔..