본문 바로가기

분류 전체보기93

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.
Springboot oauth2 인증시 Error: redirect_uri_mismatch에러 발생 github로 인증시에 위와 같은 오류 발생 github에 Authorization callback URL이 잘못 저장 되어 있어서 발생하는 오류 이니 제대로된 url을 설정했는지 확인해야함 나의 경우는 정상적인 주소가 http://localhost:8080/login/oauth2/code/github 이고 잘못된 주소가 http://localhost:8080/login/oauth2/callback/github 으로 되어 있었음 2021. 3. 1.
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.
spring boot에서 PUT 메소드 호출시 cors 오류 allowedMethods("*")를 추가한다. registry.addMapping("/**") .allowedMethods("*") .allowedOrigins("http://localhost:3000"); 참조 : stackoverflow.com/questions/35315090/spring-boot-enable-global-cors-support-issue-only-get-is-working-post-put-and Spring boot enable Global CORS support issue: only GET is working, POST, PUT and Delete are not working Update: Now looking back more than a year later, I am giv.. 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.
intellij gradle 에서 java: cannot access org.springframework.context.ConfigurableApplicationContext 오류 intellij에서 스프링부트 애플리케이션 실행시 다음과 같은 오류가 날때가 있는데 이때는 clean, build 한번하고 intellij를 종료했다가 다시시작하면 없어진다. java: cannot access org.springframework.context.ConfigurableApplicationContext class file for org.springframework.context.ConfigurableApplicationContext not found 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.