웹개발45 스프링 부트에 H2 DB 적용하기 build.gradle 설정 depandency에 작성 dependencies { implementation 'org.springframework.boot:spring-boot-starter' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-data-jpa' testImplementation 'org.springframework.boot:spring-boot-starter-test' developmentOnly 'org.springframework.boot:spring-boot-devtools' compileOnly 'org.p.. 2021. 3. 3. Spring boot에 OAuth2.0 설정하기 스프링부트에 Oauth2.0 설정을 한번 해보자. spring.io에 상세하게 나와 있으니 아래 주소를 참조하기 바란다. 참조 : spring.io/guides/tutorials/spring-boot-oauth2/ Spring Boot and OAuth2 this tutorial is designed to be completed in 2-3 hours, it provides deeper, in-context explorations of enterprise application development topics, leaving you ready to implement real-world solutions. spring.io Oauth는 신뢰할수 있는 제3자가 인증을 대신 해주는 방식이다. 웹서비스를 구축할.. 2021. 3. 2. Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기 리액트는 로컬에서 실행이되면 이제 웹서버에 배포를 해보자. 여기서는 Nginx라는 웹서버에 배포를 해보기로 한다. 먼저 Nginx를 설치한다. 참조 : docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/?_ga=2.25959549.1579693219.1614562598-1938105987.1614562598#prebuilt_ubuntu NGINX Docs | Installing NGINX Open Source Install NGINX Open Source either as a prebuilt package or from source, following step-by-step instructions for all s.. 2021. 3. 1. 리액트 Ant design 설정하기 오늘은 알리바바에서 만들었다는 react용 ui라이브러리 Ant design을 한번 적용해 보겠다. 예전 회사에서 한번 써봤는데 왠만한 컴포넌트와 예제 샘플이 어느정도 만들어져 있어서, 가져다가 바로 사용하면 되서 사용하기 편했던 기억이 있다.그래서 한번 예제를 만들어보겠다. 참조: ant.design/docs/react/introduce Ant Design of React - Ant Design Polyfills are needed for IE browsers. We recommend @babel/preset-env for it. You can set targets config if you are using umi. We recommend using npm or yarn to install, it no.. 2021. 2. 26. 리액트 함수형 컴포넌트에서 context 사용하기 리액트프로그램을 만들다 보면 state만으로는 프로그램에서 사용하는 데이타를 모두 다룰수가 없다. 아니 다룰수는 있겠지만 엄청 번거롭고 복잡해진다. 이유는 state는 해당 컴포넌트에서 사용할수도 있지만 다른 컴포넌트에서 state값을 사용하려면 state의 값을 다른 컴포넌트에 사용하기 위해서 최상위 컴포넌트에 state를 정의한다음 state를 사용하고자 하는 컴포넌트에 props로 내려 보내야 한다. 하위 컴포넌트가 하나면 큰 문제가 없을수도 있지만 하위의 컴포넌트 갯수가 많아질수록 props로 내려보내야 되는 컴포넌트가 많아지고 state값을 사용하지 않는 컴포넌트도 해당 state를 props로 받아서 state를 사용하는 하위 컴포넌트로 내려보내야 하는 코드를 작성해야한다. 이런 불편함을 해결.. 2021. 2. 25. 리액트에서 state사용하기 리액트에서는 현재의 상태값을 저장할수 있는 state라는것을 사용한다. 해당 컴포넌트에서 표현하고 싶은 데이타를 state에 저장을 하면 해당 컴포넌트가 rerendering되면서 변경된 state값을 표현할수 있게된다. 그럼 예제를 한번 보자. 한번쯤 봤을법한 count예제이다. 여기서는 useState를 써서 state값을 처리한다. 더하기 버튼을 클릭하면 카운트가 1씩 증가하게 한다. 먼저 카운트 표시하는 div를 만들고, 그리고 count버튼을 다음과 같이 만들자 function Counter({count,onIncrementClick}) { return {count} } function CounterDisplay({count}) { return The current counter count is.. 2021. 2. 24. 리액트 부트스트랩 nav에 route적용하기 이번에는 부트스트랩 nav를 만들고 react-route를 적용해본다. 먼저 react-route-dom을 설치한다. 참조: reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com npm install react-router-dom react-bootstrap로 navbar를 만든다. import './assets/css/App.css'; import {Button, Form, FormControl, Nav, Navbar, NavDropdown} from "react-bootstrap"; function App() { return ( H.. 2021. 2. 23. 리액트에서 부트스트랩(React Bootstrap)적용하기 리액트에서 부트스트랩을 사용할수 있는 라이브러가 2개있다. react-bootstarp 과 reactstarp 이다. 두개중에 사용하고 싶은걸 사용하면 된다. www.npmtrends.com/react-bootstrap-vs-reactstrap react bootstrap vs reactstrap | npm trends Compare npm package download statistics over time: react bootstrap vs reactstrap www.npmtrends.com 두개를 비교한 내용이다. www.geeksforgeeks.org/difference-between-reactstrap-and-react-bootstrap/ Difference between reactstrap an.. 2021. 2. 22. 리액트 네이티브 환경 설정 관련 intellij에서 리액트 네이티브 프로젝트를 생성하고 실행하니 제대로 실행이 안되고 오류가 발생한다. 그래서 이것 저거 셋팅하다보니 되버렸다. 그래서 해본거를 전부다 한번 다시 정리해본다. 리액트 네이티브 환경설정 방법 reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev * adb 관련 오류발생 'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 시스템 path에 다음과 같이 추가함 Andro.. 2021. 2. 19. 리액트에서 스프링부트 api호출해서 json결과값 받아오기 먼저 스프링부트 서버에서 json데이타를 내려주는 작업을 먼저 실행한다. samtao.tistory.com/24 스프링부트 api응답을 json으로 하기 먼저 User라는 클래스를 만든다. package com.example.myapp; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; @Setter @Getter @AllArgsConstructor public class User { String.. samtao.tistory.com api.js에 서버 api호출 메서드를 추가한다. // 기본 api url 주소 const URL_API = "http://localhost:8080/api/v1"; // hello a.. 2021. 2. 18. 이전 1 2 3 4 5 다음
