MO-ING

프론트엔드(React) + 백엔드(Springboot) 통합 원래 알고 있던 방법 백엔드 쪽에서 주는 스웨거 문서를 받음 스웨거를 보면서 목업 데이터, 인터페이스를 만들면서 프론트 개발 통합 테스트를 할때는 api 통신을 위해 인텔리제이에서 스프링 부트를 켜서 확인 실제 프로덕션 단계에선 로컬 주소로 http 요청 보내는 것 -> 실제 url 주소로 요청으로 변경 빌드된 리액트 파일을 클라우드에 올림 -->이번에 진행하기로 한 방법 백엔드 측에서 클라우드에 스프링 부트를 켜놓은 상태로 둡니다. 백엔드 애플리케이션(Spring Boot)을 클라우드 환경(예: AWS, Azure, Google Cloud 등)에 배포합니다. 프론트 엔드에서는 클라우드에 켜진 스프링 부트를 통해 스프링 로컬 주소로 HTTP 요..

- 스프링 연동 프론트에서 개발 중인 리액트와 벡엔드에서 개발 중인 스프링을 연동하는 방법은 여러가지가 존재합니다. 하지만 결국 가장 중요한 것은 proxy 설정 입니다. SpringBoot : 8080 port React : 3000 port 가장 기본적인 방법은 리액트의 package 에 proxy를 직접 연동하는 방법으로 "proxy": "http://localhost:8080" 아래와 같은 설정을 통해 프록시 설정을 할 수 있습니다. 연동 이후 axios와 Fetch를 이용하면 RestApi 데이터를 쉽게 연동할 수 있는데 기본적인 형태는 useEffect(() => { fetch("/hello") .then((test) => { return test.json(); }) .then((data) =..

네이버 쇼핑 api 끌어오기 앞에 정리해놓은 스크럼에 나온 방식대로 정리 예정 위와 같은 url로 요청하면 위와같이 query에 검색어를 입력해서 get요청을 보내면 body에 json형식으로 정보가 반환되는 것을 볼 수 있음. 감기이슈로 내일 진행예정,, 근데 나는 네이버 로그인을 진행하여 엑세스토큰이 있어야,,,네이버 쇼핑 api를 불러올 수 있다고 알았다...(어디서 읽음ㄹㅇ) 하지만,,,........,,,,,,,,, 나는 감자였다..........

현재 방법 백앤드에서 서버 배포 후에 서버 주소를 알려준다. 프론트에서 그 url로 axios등 연결(지인이 사용하는 방법) 프론트에서 로컬로 스프링을 띄운 후에, localhost:8080으로 proxy 설정 후 사용 2. 프론트에서 로컬로 스프링을 띄운 후에, localhost:8080으로 proxy 설정 후 사용 CORS에러 방지를 위해 프록시 관련 모듈 (공식문서) 설치 후에, axios 이용 참고 문헌 Gradle을 이용해서 프로젝트 빌드하기 이 부분은 연동보다는 통합 빌드와 관련 프로젝트를 하나의 패키지화 시키는 것, build.gradle에 하단의 코드를 추가 시켜 SpringBoot 프로젝트와 React 프로젝트가 하나의 패키지가 될 수 있는 build 구성한다. 더 자세한 내용은 하단의 ..

프론트엔드에게 보내기 위한 html 파일 작성함 네이버 로그인 네이버 로그인 이제 컨트롤러 단에서 이 html파일을 보내서 네이버 로그인이 가능하게 됨 하지만 지금은 우리 토큰을 넘겨주고 그냥 넘기는데, 우리 db에 적재를 어떻게 할지 고민해봐야될듯,,

- 전반적인 코드 수정 와이어 프레임 형식으로 진행된 코드에 디자인 적용

소셜로그인을 카카오를 이용해 하기로 했었지만, 네이버로 바꾸고 소셜 로그인 개발,, 일단 네이버 개발자 페이지에서 어플리케이션 등록을 진행함 https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 어플레케이션 등록페이지에서 서비스 URL과 Callback URL 설정도 해놓음 서비스단에서로그인을 수행하는 메서드는 toEntityUser인데, 기능을 요약하자면 아래와 같음 발급받은 인가코드를 통해 네이버 전용 AccessToken..

- 전반적인 코드 수정 와이어 프레임 형식으로 진행된 코드에 디자인 적용 조리원 페이지 조리원 디테일 페이지

- 전반적인 코드 수정 와이어 프레임 형식으로 진행된 코드에 디자인 적용

상단 margin 값 수정 헤더랑 너무 붙어있길래 마진 값 늘렸숩니다. 마이페이지 디자인 추가 일단 프로필 사진에 있는 수정 아이콘 추가했습니당