REACT 5

[Naver Cloud Platform] SpringBoot 스프링부트 React 리액트 네이버 클라우드 플랫폼 배포하기 ➁ 서버 접속(공인 IP & 포트 포워딩)

※ aws 로 배포하기 ↓ 배포, 서버 등의 기본 개념 설명은 아래 포스팅을 참고하면 된다. [AWS + spring boot] 서버 배포하기 _ 1 서버는 왜 배포해야할까 서버를 24시간 작동하게 하는 방법은 3가지 내 pc를 24시간 구동시킨다. 호스팅 서비스를 이용한다. 클라우드 서비스를 이용한다. 그 중 유동적으로 트래픽 관리가 가능한 jihyee.tistory.com [AWS + spring boot] 서버 배포하기 _ 2 rds mysql 데이터 베이스 생성 spring boot 연동 spring boot 프로젝트 배 얼른 써야지 했는데 생각보다 2번째 포스팅이 오래 걸렸다 ㅠ [AWS + spring boot] 서버 배포하기 _ 1 [AWS + spring boot] 서버 배포하기 _ 1 서..

공부/Server 2022.02.25

[Naver Cloud Platform] SpringBoot 스프링부트 React 리액트 네이버 클라우드 플랫폼 배포하기 ① 서버 생성

※ aws 로 배포하기 ↓ 배포 서버 등의 개념 설명은 아래 포스팅에 적어두었다! [AWS + spring boot] 서버 배포하기 _ 1 서버는 왜 배포해야할까 서버를 24시간 작동하게 하는 방법은 3가지 내 pc를 24시간 구동시킨다. 호스팅 서비스를 이용한다. 클라우드 서비스를 이용한다. 그 중 유동적으로 트래픽 관리가 가능한 jihyee.tistory.com [AWS + spring boot] 서버 배포하기 _ 2 rds mysql 데이터 베이스 생성 spring boot 연동 spring boot 프로젝트 배 얼른 써야지 했는데 생각보다 2번째 포스팅이 오래 걸렸다 ㅠ [AWS + spring boot] 서버 배포하기 _ 1 [AWS + spring boot] 서버 배포하기 _ 1 서버는 왜 배..

공부/Server 2022.02.17

[React] 자바스크립트 리액트 이벤트 리스너

이벤트 리스너는 사용자가 어떤 이벤트 (마우스, 키보드 등등)를 일으켰을 때 이를 감지하고 적절한 기능을 수행할 수 있게 해 준다. 그래서 이름도 이벤트 리스너 갠 적으로 이 이름 맘에 든다 ᵔࡇᵔ 제일 많이 사용하는 이벤트 리스너 중 하나인 onClick onClick은 해당 태그를 사용자가 클릭했을 때 이벤트 리스너와 연결된 일을 수행하게 해 준다. 말고도 마우스 관련해서만 이벤트 리스너가 아래와 같이 많다. onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMo..

공부/React 2021.12.31

[React-Hook] 자바스크립트 비동기 처리 useState 와 useEffect 를 곁들인..

자바스크립트로 코드 짤 때 가장 헷갈린게 비동기 처리인 것 같다. Vue 를 쓸 때도 그렇고 React 쓸 때도 그렇고 다 좋은데 비동기 처리는 진짜 짜증 났던 것 같다. 난 분명히 값을 할당했는데 undefined.. 공부하고 정리 좀 해서 아까운 시간 쏟지 말자 ୧╏ ՞ _ ՞ ╏୨ 비동기 처리란 동기 처리는 동시에 일어남을 의미하고 비동기는 동시에 일어나지 않음을 의미한다. 동기 처리는 요청과 결과가 동시에 일어나기 때문에 코드가 직관적이고 이해하기 쉬운 반면에 ▶ 여기서 값을 받으면 ~ 이거 하고 이거 해! 비 동기 처리는 결과가 나올 때 까지 기다리지 않고 다른 일을 처리할 수 있기 때문에 코드나 순서는 이해하기 어려워도 자원 사용을 좀 더 효율적으로 할 수 있다. ▶ 여기서 값을 받으면 ~ 그..

공부/React 2021.11.05

[TS_React] setupProxy.js 로 CORS 에러 해결하자

TS :Trouble Shooting Proxy 설정은 왜 할까 서버와 클라이언트를 통신할 때 CORS 헤더를 통해 통신을 진행하는데 이런 CORS 를 통한 통신은 통신을 주고받는 통신 주체들의 도메인, 프로토콜, 포트 등이 일치하는지 확인한다. 프로젝트를 진행함에 있어 서버와 프론트의 도메인, 프로토콜, 포트가 일치하는 않는 경우에 CORS 에러가 나는 이유가 바로 이런 접근 권한 확인 과정을 거치기 때문이다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하게 하는 프록시 서버를 설정하면 위와 같은 문제를 해결할 수 있다. Proxy 서버 설정 방법 proxy 서버를 설정하기 위해서는 2가지 방법이 존재한다. 1. package.json 파일에서 설정 "proxy" : "{통신할 서버 주소}"..