PersesTitan(페르) 기술블로그

개발 노트 개발 노트는 코드 및 설명등을 작성하지 않으며 개발하면서 구현에 성공한 동작등을 기록하는 목록입니다. 리액트로 문제를 만드는 웹사이트에 문제를 추가하는 로직을 구현하는 동작을 구현하게 되었습니다. 동작을 구현을 목적으로 하다보니 디자인등은 고려하지 않고 구현하게 되었습니다.

spring에서 전송한 데이터를 react에서 출력하는 로직을 구현하게 되었습니다. 우선은 배포가 아닌 테스트를 위한 동작이므로 프로젝트를 합치지 않고 동작하도록 하였습니다. Spring 데이터 전송 확인 http://localhost:8080/api/ 우선은 url에 들어가서 데이터가 잘 전송되었는지 확인해주었습니다. 예제 데이터로 최신순으로 생성된 글 createDateSort과 좋아요 순으로 정렬된 글 likeSort를 반환해주는 로직입니다. React 프록시 추가 프로젝트에 package.json이라는 파일에 "proxy": "http://localhost:8080"를 추가해 줍니다. url포트나 링크가 다르면 링크 값은 백앤드 url로 변경해주시길 바랍니다. axios 설치 해당 커맨드를 rea..

웹스톰에서는 간단하게 File > New > Project에서 쉽게 프로젝트를 생성할 수 있는데요. 여기서 생성하실 React를 좌측에서 눌러주시고 하단의 Create TypeScript project 체크박스를 체크하고 생성하시면 TS언어로 프로젝트를 생성하실 수 있습니다. 생성 결과