우당탕탕 개발일지

Fetch와 Axios 차이점 fetch는 Promise 기반으로 만들어졌으며, 내장 라이브러리이기 때문에 별도의 import가 필요없기에 편리하다. 그러나 많은 사람들이 axios를 사용하는 것을 더 선호한다. 그 이유는 다음과 같다. fetch는 네트워킹에 오류가 있는 상황에서만 Promise를 reject 시키기 때문에 모든 fetch 호출에 오류를 처리하는 함수를 작성해야 한다. axios는 모든 HTTP 에러를 reject하는 Promise를 반환하기에, 모든 에러를 catch에서 처리할 수 있어서 편리하다. 또한, 인터셉터, 요청 설정 등 fetch보다 다양한 기능을 지원한다. Axios 사용 방법 - axios 설치 $ npm install axios - HTTP 요청 전송 import ax..

fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다. const promise = fetch(url [, options]) fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다. 후속 처리 메서드 then을 통해 Promise가 resolve한 Response 객체를 전달받을 수 있다. fetch('https://api.example.com/data') .then(response => { console.log(response) }); .catch(error => { console.log(error); }); - HTTP 응답 처리 Response 객체는 HTTP 응답을 나타..

Ajax - Asynchronous JavaScript and Xml JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - XMLHttpRequest AJAX는 서버와 비동기적으로 데이터를 교환하기 위해 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 사용한다. 이 객체는 요청을 처리하고 응답 데이터를 받아오는 데 사용이 된다. 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다. - HTTP 요청 전송 // XMLHttpRequest 객체 생성 const xhr = new XMLHttpRequest(); //..

export 변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보냄 import export로 내보낸 모듈을 가져오는 기능 담당 React에서 컴포넌트를 export 하는 방법에는 두 가지가 있다. export default 문을 사용하는 방법 import 시 괄호 없이 가져올 수 있음 컴포넌트 이름을 바꿀 수 있음 const MyComponent = () => { // 코드 블럭 } export default MyComponent export function 문을 사용하는 방법 import 시 괄호를 사용해야 가져올 수 있음 컴포넌트 이름을 바꿀 수 없음 export function MyComponent(){ // 코드 블럭 }

새로 만들 컴포넌트가 라이프사이클 API와 state를 사용하지 않고, props만 전달해주면 뷰를 렌더링 해주는 역할일 경우 주로 사용한다. function 함수명 (파라미터) { //코드 블럭 } 장점 클래스형보다 선언하기 편함 메모리 자원 절약 리액트 공식 메뉴얼에서는 컴포넌트를 작성할 때 함수형 컴포넌트 + Hooks를 사용하도록 권장하고 있다고 한다. ES6부터 도입된 새로운 함수 선언 방식으로, 간단하고 간결한 문법으로 함수를 선언할 수 있다. 화살표 함수가 기존 function()을 완전히 대체할 수는 없다. 일반 함수는 자신이 종속된 객체를 this로 가리키고, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 화살표 함수는 값을 연산하여 바로 변..

localStorage는 웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소이다. 웹 페이지에서 사용하는 데이터를 로컬에 저장하고, 나중에 사용할 수 있다. 저장해야할 데이터가 별로 중요하지 않거나 잃어버려도 상관없는 데이터일 때 효율적이다. 세션이 유지되는 동안에만 데이터를 저장할 수 있는 sessionStorage와 달리, localStorage는 데이터가 영구적으로 보존된다. setItem() - ( key, value ) 데이터 저장 localStorage.setItem("key", "value"); getItem() - 데이터 가져오기 const value = localStorage.getItem("key"); console.log(value); removeItem() - 데이터 삭제하기 lo..

DOM - Document Object Model Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다. document를 HTML 구성요소로 본다면 크게 head와 body로 구성할 수 있다. document.documentelement는 이러한 head, body를 둘러싼 최상위 HTML element를 반환한다. Document 메소드 HTML 요소 선택 HTML 요소 생성 HTML 이벤트 핸들러 추가 HTML 객체 선택 //해당 아이디의 요소 선택 const el = document.getElementById('first'); //해당 태그 이름의 요소 모두 선택 const pList ..

JS 파일도 리액트에서 UI를 구현하는 데 사용될 수 있지만, JSX를 사용하는 것이 일반적이다. JSX란 자바스크립트를 확장한 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있으며, 리액트에서 UI를 구성하는 데 사용된다. 브라우저는 JSX를 이해하지 못하기 때문에 JSX 코드를 JavaScript 코드로 변환해야 한다. Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구 중 하나이다. Babel을 사용하여 JSX를 자바스크립트로 변환하면, 리액트에서 작성한 UI 구성 요소를 일반적인 자바스크립트 코드로 컴파일하여 브라우저에서 실행할 수 있다. pnpm add -D babel 속성 Class 대신 ClassName을 사용해야 하며..