개발 (5) 썸네일형 리스트형 [React] github 프로젝트 로컬상에서 실행하기 관광데이터 공모전을 신청하기에 앞서 리액트로 여행앱을 어떻게 만드는지 확인해보기 위해 유튜브를 뒤적거렸다. https://youtu.be/0dOSLhPzSGI?si=P5C-YMuLtrTA0BeY 먼가 맛있어보이는 영상에서 위와 같은 깃허브 링크를 찾았고 로컬상에 받아서 실행해보니 자꾸 오류가 떴다 src 폴더에 들어가 다음 행동을 해줬다. npm install // package.js에 있는 것들 설치를 위해 진행 npm i react react-dom // 리액트랑 리액트 dom 설치 npm install -g react-scripts // 전역적으로 react-scripts를 설치 npm install --legacy-peer-deps // 1번째 줄에서 실패한 후 버전에 맞는 npm 설치를 위해 했.. [Web] React, Spring boot 연동 1. React ( port : 3000 ) [ npm은 설치되어있다고 전제 ] 1) npm install react : 리액트 설치를 위함 2) npm install http-proxy-middleware : CORS 정책 우회를 위함 3) src/setupProxy.js 생성 후 아래 내용 추가 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/test', // 우회가 필요한 부분을 라우팅 createProxyMiddleware({ target: 'http://localhost:8080', //타겟이 되는 API의 URL 입력. 필자는 백엔드에 8080.. [API] REST vs SOAP 공통점 : API(Application Programming Interface)를 구축하는 방법을 정의한다. 차이점 REST(Representational State Transfer) SOAP(Simple Object Access Protocol) 프로토콜이 아님 W3C에서 유지관리하는 공식 프로토콜 가벼움 주로 IoT, 모바일 앱 개발, 서버리스 컴퓨팅 개발에 사용 OpenAPI (ex. Google Maps API, 공공데이터 API 등 )에 사용 무거움 주로 XML 메시징 같은 특정 요구사항이 필요한 경우 사용 기본 보안 및 트랜잭션 준수를 제공 REST(Representational State Transfer) : 표현 상태 전송 : 경량 웹 서비스 및 모바일 애플리케이션의 요구사항에 맞춰 조정된.. [nginx] 이미지 올리기 먼저 /home/사용자디랙터리에서 images 폴더를 추가해준 후 이미지 파일을 아무거나 업로드한다. ( ex. arrow.jpg ) 1. / 디랙터리에서 namei /home/사용자디랙터리(ex. namei /home/ubuntu ) 2. chmod /home/사용자디랙터리 (ex. namei /home/ubuntu) 3. cd /etc/nginx/sites-available에 있는 conf 파일 수정 ( ex. sudo vim default ) 후 아래 문장 추가 location /images { alias /home/사용자디랙터리명/images; } 4. sudo ln -s /etc/nginx/sites-available/conf파일 이름 /etc/nginx/sites-enabled/ (ex. su.. IoT 사진 이전 1 다음
