WorkShop

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

현재 #code 개발 중에 어노테이션 Value 적용하다가 실수를 하여 이를 실수하지 않고자 글을 작성한다. @Value는 properties에 있는 정보를 쉽게 가져올 수 있다는 점이 있는 데 이를 사용하려고 @Value("social.kakao.client-id") 라고 해서 2시간 동안 뭐가 잘못되었는 지 확인한 결과 ${}를 하지 않아서라는 것을 파악하였다. SecurityConfiguration에서는 제대로 작성했는 데 Controller에 괜히 이상하게 작성해서 2시간이 사라졌다. @Value("${social.kakao.client-id}") 현재는 위처럼 다시 수정하여 잘 작동하였습니다.

MVC 설명과 더불어 스프링에서의 구현관련 하여 이해한 대로 적어보고자한다. mvc는 Model, View, Controller 로서 사용자 인터페이스, 데이터 및 논리 제어를 구현하는 데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는 데 중점을 두고 있습니다. 더 나은 업무의 분리와 향상된 관리를 제공하기 위해 사용합니다. 예를 들어 view 파일에 모델도 있고, 컨트롤러도 있다면 굉장히 복잡하여, 이를 작성한 사람도 해석하는 데 한 나절이 걸릴 수 있거나, 가독성이 없어지기 때문에 사용합니다. 이를 스프링에서는 간단하게는 아래와 같이 구현이 가능합니다. @GetMapping("hello-mvc") public String helloMvc(@RequestPar..

현재 스프링에 대해 공부하고 있기때문에 다시 상기하는 겸사 글 역시 작성해보고자 한다. 저 외에도 스프링을 공부하는 분들을 위해 간략하게만 작성하도록 하겠습니다. 스프링을 공부하신다면 제 글을 읽을 일이 없는 게 사실이지만요 먼저 https://start.spring.io/ 에 들어가서 스프링 부트를 사용할 것입니다. Project는 제가 기존에 자주 사용하는 Maven이 아닌 Gradle를 사용할 것입니다. 언어는 코틀린을 따로 공부하고 있기하나, 아직 제대로되지않았기에 코틀린에 비해 잘 아는 언어인 자바를 선택합니다. Spring Boot 버전은 2.5.6을 하였습니다. Group은 티스토리 도메인으로 하였고, 프로젝트명은 'LearnSpring' 입니다. Jar 파일로 압축하도록 하고, 자바 버전은..