우당탕탕 개발일지

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을 사용해야 하며..

JavaScript를 사용하여 HTML로 구성한 UI를 제어할 때 DOM을 변형시키려면, 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야한다. To-Do List 만들기 2차 3. Loading() 함수 만들기 3-3. innerHTML활용해서 html 삽입하기 ( 앞서 To-Do List 만들기 1차에서는 제이쿼리를 사용해서 html 코드를 삽입하였다. ) 1차 시도 getElementById() 메서드를 사용하여 id가 "htmlList"인 uj0791.tistory.com 'To-Do List 만들기'를 보면 getElementById() 메서드를 사용하여 HTML 요소에 접근한다. 이벤트 발생 시, innerHTML로 ..