WorkShop

카카오 OAUTH 역시 추가하고자하였지만, 일정에 변동이 생길 수 있기에 카카오 OAUTH는 추후 시간이 넉넉할 때 추가할 것 입니다. 다음 일정: ~ 04.04, 로그인 (DB에 토큰 저장) (나중에 시간이 된다면 로그인 폼이 첫 화면이기에 간단한 이미지를 넣을 예정입니다.) 이상입니다.

일상글에서 언급했다시피 프로젝트명을 Remote Note에서 덕지덕지로 바꾸었습니다. 포스트잇 혹은 메모지를 벽에 덕지덕지 붙인다는 말이 떠올랐고, 어감이 나름 괜찮아서 무엇보다도 Remote Note 보다는 괜찮아서 이름을 바꾸었습니다. 현재 아주 단순한 것부터 개발을 하였습니다. 먼저 엔티티부터 설계를 하였습니다. OAUTH 2.0으로만 로그인하도록 기획하였기에 이에 맞게 엔티티를 설계하였습니다. @Getter @AllArgsConstructor @NoArgsConstructor @Builder @Embeddable public class OAuth implements Serializable { @NotNull @Column(unique = true) private String email; @NotN..

버그...그리고 오류들.. 일단 크게 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, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바..