IT 30

React과 Spring 사이, Date format

Front와 Back을 나눠서 개발하는 경우 데이터의 자료형이 발목을 잡는 경우가 많다. 자주 사용하는 Int와 String은 자료형이 고정적이라 에러가 자주 발생하지 않지만, API를 자세하게 읽어보지 않은 경우 그리고 API가 친절하게 설명되지 않은 경우 에러가 발생한다. React로 웹 어플리케이션을 만들고 Back에 있는 데이터와 상호작용 할때 date format 이슈에 대해 해결한 방법을 공유하고자 한다. 문제상황 HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미..

IT/Font-end 2020.03.26

Time Zone 에러 /DB와 서버 시간 차이 해결 방법

LocalDateTime 자료형을 사용하여 개발을 하던중 Time Zone 관련 에러가 발생했다. 에러는 다음과 같다. java.sql.SQLException: The server time zone value 'insertDate' is unrecognized or represent s more than one time zone. You must configure either the server or JDBC driver (via the serverTi mezone configuration property) to use a more specifc time zone value if you want to utilize time zone support. 최근에 설치한 MySQL이 높아 java와 데이터 포멧이..

IT/DB 2020.03.24

스프링 부트 CORS (Spring Boot CORS )

개발을 하던 중 만난 CORS(Cross-Origin Resource Sharing): 교차 출처 자원 공유 에러를 해결한 방법을 공유하겠습니다. CORS(Cross-Origin Resource Sharing)이란 동일한 출처(최초 자원이 서비스된 출처)가 아니여도 다른 출처에서의 자원을 요청하여 쓸 수 있게 허용하는 구조를 뜻한다. 보통 보안상의 이슈(DOM을 통한 취약한 데이터 접근 시도) 대문에 동일 출처 원칙을 기본적으로 웹에서는 준수하게 됩니다. 따라서 최초 자원을 요청한 출처 말고 다른 곳으로 스크립트를 통해 자원을 요청하는 것은 금지됩니다. CORS를 적용하려면 웹 어플리케이션과 서버 어플리케이션에서 그에 따른 처리를 해줘야 합니다. @CrossOrigin 기존 소스 @RestControll..

IT 2020.03.24

서버 기동시 port 중복 해결방법!

프론트와 백을 막론하고 컴퓨터를 부팅시킨 상태에서 몇일 동안 작업을 하다가 보면 가끔 보는 에러가 있다. 그것은 바로 Identify and stop the process that's listening on port 8080 or configure this application to listen on another port. 이것은 내가 실행하려는 어플리케이션이 다른 사용중인 포트로 접속 하려는 것을 말한다. 주로 localhost:8080이나 localhost:3000을 사용중인 필자는 자주 이 현상을 겪는다. 프론트 같은 경우에는 포트가 중복되어 어플리케이션을 실행할 수 없는 경우 위와 같이 포트 번호를 일시적으로 바꿔주고 어플리케이션을 실행 시켜준다. 포트 번호는 영속적인 것이 아니라 일시적인 것으..

IT/Back-end 2020.03.18

REST 방식으로 JPA Data에 접근하기

우리는 관계형 JPA data에 접근하는 Application을 만들려고 합니다! hypermedia-based RESTful front end를 통해서 말이죠! 우리가 만들 것 우리가 만들 것은 Spring Data REST 방식을 통해 Person 객체를 만들고 값을 저장하는 Spring application입니다. Spring Data REST는 Spring HATEOAS 와 Spring Data JPA 를 자동적으로 묶어줍니다. Spring HATEOAS 개념 (아래 링크 참조) https://engkimbs.tistory.com/866 [Spring REST API #9] 스프링 HATEOAS 개념 및 적용 | 스프링 HATEOAS HATEOAS는 Hypermedia As The Engine O..

IT/Back-end 2020.03.10

[Spring] 데이터에 접근하기 (feat. JPA) -(1)

이번 가이드는 Spring Data JPA를 사용하여 관계 데이터를 관계형 데이터 베이스에 저장하는 것을 실습하겠습니다! 우리가 만들 것? 우리는 Customer POJO(plain Old Java Objects)를 만들고 실제 데이터베이스에 저장하면서 관리하는 Application을 만들겠습니다. 필요한 것 약 15분의 시간 가장 자주 사용하는 IDE JDK 1.8 이상 Gradle 4+ or Maven 3.2+ Spring Initializr로 프로젝트를 생성 의존성은 Spring Data JPA와 H2 Database 두 가지를 추가해 줍니다. Spring Initializr는 프로젝트 이름으로 작성되어 압축되어 있기 때문에 대상 폴더의 하위에 '압축 파일명'으로 폴더 생성 후 압축 풀기(E) 체크..

IT/Back-end 2020.03.10

RESTful 웹 서비스 사용하기 -(2)

이번에 따라가 볼 가이드는 RESTful 웹 서비스 사용하기! 입니다. 이 가이드는 RESTful 웹 서비스를 사용하는 application 생성 프로세스를 따릅니다. 우리가 만들 application Spring의 RestTeamplate를 사용해 https://gturnquist-quoters.cfapps.io/api/random 위 API에서 무언가를 검색하는 application을 만들겠습니다. 준비 사항 약 15분의 시간 JDK 1.8 이상의 버전 Gradle 4+ 혹은 Maven 3.2+ 가장 선호하는 IDE (우리는 vscode를 사용할게요!) Spring Initializr 이전에 따라한 것과 같이 https://start.spring.io/ 에 접속하여 하단에 의존성을 web만 선택하시고..

IT/Back-end 2020.03.04

RESTful Web Service 구축하기! (feat. spring)-(2)

2020/03/03 - [IT/Back-end] - RESTful Web Service 구축하기! (feat. spring)-(1) (이전) RESTful Web Service 구축하기! (feat. spring)-(1) 이번 가이드는 Spring을 사용하여 "Hello, World"를 출력하는 RESTful 웹 서비스 구축 안내서입니다! 앞으로 구축하게 될 것들 우리는 앞으로 HTTP의 GET 메소드 요청을 수행하는 서비스를 만들 것입니다! http://.. omaeng.tistory.com 자 이제 프로젝트 및 설정을 준비완료 했습니다. 이제 웹 서비스를 구축할 준비가 되었습니다. 각 서비스가 어떻게 상호작용하는지 유념하시며 보시길 바랍니다! Resource Representation class 만들..

IT/Back-end 2020.03.03

RESTful Web Service 구축하기! (feat. spring)-(1)

이번 가이드는 Spring을 사용하여 "Hello, World"를 출력하는 RESTful 웹 서비스 구축 안내서입니다! 앞으로 구축하게 될 것들 우리는 앞으로 HTTP의 GET 메소드 요청을 수행하는 서비스를 만들 것입니다! http://localhost:8080/greeting 위와 같이 요청이 오게 되면 JSON 형식의 결과물을 응답으로 보낼 것입니다. 바로 {"id":1,"content":"Hello, World!"} 이렇게요! 그리고 요청 URL에 name 매개변수를 넣어 다음과 같이 요청할 수 있습니다. http://localhost:8080/greeting?name=User name 매개변수는 World 로 기본 설정 할 것입니다! 하지만 사용자가 매개변수를 통해 name을 설정한다면 재설정된..

IT/Back-end 2020.03.03

React로 간편하게 app 만들기

입사 후 Toy Project로 회의실 예약관리 시스템을 만드느라 블로그에는 전혀 신경을 쓰지 못했습니다... 그래서 프로젝트를 진행 하면서 배운점과 따라한 몇가지 가이드를 소개하려 합니다! 첫 번째로 15분이면 따라할 수 있다는 React app만들기!!!!!!!!!!!!!! 시작하기에 앞서 create-react-app에 대해서 간략하게 알아보자. create-react-app? 단순하게 직역하면 react app을 만드는 녀석이다. 개발을 시작하기 위한 주춧돌 즉 기본이 되는 꼭 작성해야 하는 코드이다. 이것을 boilerplate라고 하는데 단순하게 시작하기 위한 것이라고 생각하는 것이 편하다. 2019년이 되어 처음으로 react를 접해봤는데, 이건 뭐 취업성공패키지로 6개월간 들은 교육에서와 ..

IT/Font-end 2020.02.24