WorkShop

나름 유용한 내용인 것 같아 포스팅하게 되었습니다. Entity를 만들 때, 최초 생성 날짜, 그리고 제일 최근 수정 날짜 저장을 하고 싶을 때가 종종 있는 데 이를 수동적으로 넣을 수 도 있지만 비즈니스 로직을 작성할 때마다 넣는 것은 굉장히 번거롭기 때문에 Entity를 연결해주는 추상 클래스를 하나 만들어 사용할 수도 있지만 Entity가 적다면 Entity에다가 그냥 적용시킬 수도 있지만 Entity가 하나인 경우는 많이 없다보니 Entity가 2개 이상이기에 추상 클래스를 사용해서 날짜를 자동 저장을 해야하는 상황이라고 가정해보자. 먼저 추상 클래스를 하나 만든다. 이름은 아무렇게나 해도 좋으나 모든 엔티티에 베이스(기초)가 되는 날짜이기에 BaseTimeEntity라고 지었습니다. 어노테이션 ..

버그...그리고 오류들.. 일단 크게 2가지 오류들이 있었습니다. 1. CORS, Same-Origin-Policy 문제 2. React V6 버전 문제 redirect is not allowed for a preflight request Access to XMLHttpRequest at 'http://localhost:8080/ from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 정도의 오류가 있었습니다. 일단 맨 마지막 문제같은 경우에는 @CrossOrigin이라는 어노테이션이 있지만 CORS..

드디어 끝냈습니다. 리액트를 다루는 것이 이번이 처음이라서 제대로 이런 간단한 것도 못 끝낼 줄 알았지만 역시 노력(이하 삽질이라고 부른다.)은 배반하지 않는 것 같습니다. 일단 리액트 코드를 좀 많이 개판으로 만들어놨긴했는 데.... 잘 돌아가니 된건가.. 각설하고 코드를 조금 살펴보면 패키지 2개로 input파트(라고 하지만 실제로는 개판오분전인 막장 코드) 그리고 request(대충 Spring Rest API에게 POST 혹은 GET request 보내기 위한 파트) 이렇게 2개입니다. 일단 Spring 코드를 어떤 방식으로 구성했는 지 간단하게 설명하자면 회원가입을 합니다. (PasswordEncoder로 비밀번호 암호화) 로그인을 합니다. (Access, Refresh 토큰 발행해줌 & Ref..

스프링과 리액트 이 두 친구들이 서로 사용하는 포트가 다르다. 리액트는 3000을 사용하는 반면, 스프링은 8080을 사용한다. 사람마다 CORS를 해결하는 방식도 각양각색인데 크게 3가지 정도가 생각이 난다. 스프링을 3000에 맞춘다. 리액트를 8080에 맞춘다. 제 3의 포트로 둘 다 맞춘다. CORS(Cross-Origin Resource Sharing)이란? 추가 HTTP 헤더를 사용하여, 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처(origin)의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (출처) 저 같은 경우에는 리액트를 스프링 포트에 맞춰주었습니다. {리액트 패키지}/package.json 에 "proxy": "http://localho..

Spring을 잘하는 편은 아니지만 같이 프로젝트를 진행하거나 할 때 마땅히 같이 할 프론트가 없는 것 같아 저라도 조금이라도 해야겠다는 마음으로 React에 발을 담그게 되었습니다. 먼저 nodejs.org/ko/download/ 에 들어가서 Windows Installer를 통해 설치를 받고 명령 프롬포트(cmd)로 node -v 명령어를 통해 올바르게 설치가 되었는지 그리고 해당 node의 버전을 확인하였습니다. 여기까지는 문제가 없었는 데.. npm install -g create-react-app 명령어를 진행하자 node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바..