나 혼자만 개발업

Client Components와 Server Components는 리액트 컴포넌트를 서버와 클라이언트 측에서 어떻게 처리하고 렌더링하는지에 대한 새로운 개념이다. 기본 리액트 컴포넌트 기본 리액트 앱에서는 모든 컴포넌트가 클라이언트 측에서 렌더링된다. 즉, 사용자의 브라우저에서 JS를 실행해서 UI를 구성한다는 의미이며, 이 방식은 상호작용이 많은 동적인 웹 애플리케이션에 적합하지만, 초기 로딩 시간이 길거나 SEO(검색 엔진 최적화)에 불리한 점이 있다. 서버 컴포넌트 서버 컴포넌트는 이름 그대로, 서버에서만 렌더링이되고, 최종 HTML 결과만 클라이언트로 전송된다. 즉, 상호작용이 없거나 병경되지 않는 UI를 작성할 때 이상적이라고 할 수 있다. 예를 들어, 데이터를 로드하고 표시하는 컴포넌트가 서..

.catch().then()은 http 요청이 성공했을 때 수행되는 메서드반면, catch()는 실패 했을 때 수행하는 메서드이다..finally()HTTP 요청 성공, 실패 여부와는 상관없이 무조건 실행되는 메서드이 메서드는 인자로 콜백 함수를 받으며, 해당 콜백 함수는 어떠한 매개변수도 전달받지 않는다..catch() 활용 예제 button1 요청 실패한 경우, 상태코드를 받아오고 그에 따른 작업 수행 예제 function ajax3() { axios.get("/main39/sub2") .catch(function (error) { // 상태 코드 400으로 가정 console.log(error); // 실패..

.then() 메서드 (HTTP 요청이 성공한 경우 호출되는 메서드).then()은 axios의 요청 메서드가 성공적으로 완료되었을 때 실행될 콜백 함수를 등록하는데 사용된다.즉, http 요청이 완료된 후에 수행할 추가 작업을 .then() 메서드로 수행한다..then() 메서드의 로직이 다 수행되고, 이 메서드에서 또 다시 Promise 객체를 반환한다. (연속적으로 추가적인 작업을 수행하기 위해서)이 Promise에는 response객체를 포함하는데, response 객체에는 아래와 같은 여러 프로퍼티를 가지고 있다.data: 서버에서 반환한 데이터 (파싱된 json 객체)status : http 상태코드headers : http의 헤더 등등등이 있음.예시 코드 button2 ..

AxiosAxios는 클라이언트 사이드에서 HTTP 요청을 할 때 비동기 처리를 지원하는   javaScript의 라이브러리이다. Axios는 Promise 기반으로 동작하며, HTTP 요청을 비동기로 쉽게 처리할 수 있도록 다양한 메서드를 제공한다. 또한, 진행중인 요청을 취소할 수 있도록 취소 토큰도 지원하며, JSON 형식의 문자열 데이터를 JavaScript Object형식으로 변환해주는 기능도 지원한다.  Promise란?JavaScript(클라이언트 사이드)에서 비동기 작업을 다루기 위한 객체이다. axios에서는 http 요청을 비동기로 처리하기 위한 요청 메서드 (get, post, put, delete 등) 를 지원하며, 이 메서드는 Promise 객체를 반환한다. 이 Promise 객체..

AJAX AJAX란? 웹 페이지에서 서버와 비동기식으로 데이터를 교환하거나 가져오기 위해 사용되는 클라이언트 측 웹 개발 기술이다.  AJAX를 사용하면 페이지 전체를 새로고침하지 않아도 서버로부터 데이터를 받아와 웹페이지의 일부를 업데이트 할 수 있다. 특징AJAX 요청은 비동기식으로 처리되며, 서버로부터 응답을 기다리는 동안 다른 작업을 진행할 수 있다.전체 페이지를 새로고침 하지 않고도 필요한 데이터만 서버와 교환할 수 있어 트래픽을 줄이고 성능을 향상 시킨다. AJAX 종류1. XMLHttpRequest가장 기본적인 HTTP 요청 방식브라우저에서 제공하는 원시적인 API로, 다소 번거롭고 코드가 길어질 수 있음과거에 사용하던 방식.2. ajax jQeuryjQuery 라이브러리를 사용한 HTTP ..