본문 바로가기

✨ Front-end67

[JavaScript] - 동기(synchronous)와 비동기(Asynchronous) 동기(synchronous) 동기는 데이터 요청과 결과가 한자리에서동시에 일어나는 것이다. 사용자가 데이터를 서버에 요청한다면, 그 서버가 데이터 요청에 따른 응답을 다시 사용자에게 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야한다. 즉, 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기해야만한다. 비동기(Asynchronous) 비동기는 동시에 일어나지 않는다. 서버에 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 외부 활동을 수행해도 되고, 서버에게 다른 요청사항을 보내도 상관없는 것이다. https://bright-landscape.tistory.com/414 [JavaScript] - 비동기(Asynchronous) async와 awai.. 2023. 12. 27.
[JavaScript] 호이스팅이란? 호이스팅이란? 코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, const, let, function, class)을 스코프에 등록한다. 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작함. 즉, 변수와 함수선언은 호이스팅의 대상이며, 변수는 선언과 동시에 'undefined'로 초기화된다. 함수는 함수 전체가 끌어올려진다.단, 함수 표현식은 변수에 할당되는 부분만 호이스팅되며, 함수 전체는 끌어 올려지지 않음. console.log(x); // undefined var x = 5; foo(); /.. 2023. 12. 26.
[JavaScript] - 비동기(Asynchronous) async와 await HTML 삽입 미리보기할 수 없는 소스 주어진 코드는 JavaScript에서 Promise 객체를 사용하는 예시이다. 이 코드는 'Gird_1' 이라는 객체에 대해 read( ) 메서드를 호출하고, 해당 메서드가 완료된 후 enableButtons( )함수를 호출한다. 이러한 코드는 비동기 작업을 처리할 때 사용된다. 그렇다면 위 코드를 동기로 바꾸려면 어떻게 할까? HTML 삽입 미리보기할 수 없는 소스 주어진 코드를 await과 async을 사용해 리팩터링하려면 함수를 async 함수로 정의하고, await 키워드를 사용해 비동기 작업을 기다려야한다. 이렇게하면 코드가 더 명확하고 간결해질 수 있다. await 키워드는 read( ) 메서드가 완료될 때까지 기다린다. 그리고 read( ) 메서드가 완.. 2023. 12. 14.
[Spring-Boot , React] 스프링부트와 React 연동하기 0. Redux DevTools 구글에 Redux DevTools를 치고 Crome에 추가시켜준다. https://start.spring.io/ 먼저 위 사이트에서 스프링 프로젝트를 하나 생성해서 SpringBoot로 Gradle해왔다. 1. 프론트에서 React설치하기 npx create-react-app fronted 비주얼스튜디오에서 React를 설치한다. fronted 해당 폴더에서 npm start로 해서 리액트가 실행되면 리액트 실행까지 완성이다. 2. Proxy 설정하기. ( CORS 관련 오류 방지를 위해 proxy를 설정 ) npm install http-proxy-middleware --save CORS (Cross Origin Resource Sharing) 서버와 클라이언트가 동일한.. 2023. 9. 26.