Gom3rye

서버, 스토리지 등 cloud computing 모두 가능 Problem of On-Premise over provision - waste of resources under provision - can't service gameplay, dissatisfied customers leave difficult to dimension (load can vary) maintatin : expensive needs to invest a lot of money in hw needs expertise needs maintenance Scaling up is difficult. - Need to order new servers, install them, and integrate with existing clusters..

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 개념이 나왔..

cra 이용해 npx create-react-app {프로젝트명} 로 리액트 시작하기 HTML으로 Hello HTML! 출력하기 Hello HTML! JS로 Hello Javascript! 출력하기 React로 Hello React! 출력하기 // react를 가져오기 위한 코드 비교 - JS에서 createElement 한 후 textContent로 따로 저장해준 것처럼 하지 않아도 React에서는 children을 통해서 "Hello React!"라는 string을 받아줄 수 있다. - ReactDOM이라는 친구가 render 함수를 통해 element를 rootElement에 넣어서 렌더링 해준다. JSX로 Hello JSX! 출력하기 // react를 가져오기 위한 코드 // 바벨 스크립트 넣어주..