Axios 사용법    ❗️소개 Axios를 간단히 소개하자면 fetch() 함수처럼 리퀘스트를 보내고 리스폰스를 받을 수 있는 라이브러리입니다!fetch() 함수랑 사용법은 비슷한데요. 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간단히 설명드릴게요. Axios를 아주 간단하게만 사용해 볼 거니까, 쉽게 따라 하실 수 있을 겁니다. ❗️Axios 설치방법npm install axios package.json 파일의 dependencies 안에 아래처럼 axios 가 추가될 겁니다."dependencies": { ... "axios": "^1.2.2", ...}  ❗️Fetch와 Axios 사용법 비교 - 요약1. 우선 GET..

React 모듈 불러오는 방법   ❗️상황지금까지 아래와 같은 코드를 이용해서 사용했었는데import { createContext } from 'react';const MyContext = createContext(null); 다른 강의를 보면서 공부중 아래와 같은 코드를 사용해서 이게 뭐지? 하면서 찾아보았다 import React from 'react';const MyContext = React.createContext(null); ❗️차이점이 두 방법은 기능적으로 동일합니다. React.createContext는 React 모듈의 메서드를 직접 호출하는 방식이고,import { createContext } from 'react'는 ES6 구조 분해 할당을 사용하여 createContext 메서드만을..

JavaScript 현재 페이지 새로고침하는 방법     ❗️location 객체에서 제공하는 reload() 메서드를 사용하는 것입니다.location은 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방법으로 reload() 메서드를 호출할 수 있습니다.location.reload();window.location.reload(); 매개변수 존재하지 않습니다.반환 결과 존재하지 않습니다. 참고로 reload()대신 replace()를 사용하고 가로안에 위치를 지정해주면 해당위치로 이동한다.   🔥참고자료https://developer.mozilla.org/ko/docs/Web/API/Location/reload Location.reload() - Web API | MDNLocation.relo..

❗️에러해결❗️    ❗️ 에러프로젝트 작업 중 아래와 같이 img 태그 사용했는데 에러 발생했습니다!img src={image} />  ❗️ 에러 메시지 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.eslintjsx-a11y/alt-text  ❗️ 해결 방법img 태그 사용시 src 속성과 함께 alt도 같이 작성해야 합니다! (alt의 내용은 자유!) 오류해결!  마무리🔥오류해결 하나 씩 해결하고 다음엔 실수 안해야지!!오늘도 화이팅🔥

CSR vs SSR vs SSG    Client Side Rendering (CSR)CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.👍장점▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.👎단점▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를..

DOM이란? Virtual DOM이란? 사용하는 이유는?      Virtual DOM이란? 사용하는 이유는?Virtual DOM 공부하기 전에 DOM부터 알아보자. DOM DOM은 Document Object Model의 약자임. 한국어로는 문서 객체 모델. 간단하게 설명하면 웹 페이지에 나오는 HTML문서 전체를 객체로 표현한 것으로 생각하면 될것같음. 이때의 각 객체를 노드(Node)라는 용어로 표현하고 각 노드는 HTML 요소들과 연관되어 있고 DOM노드로 이루어진 트리를 만듬, 태그는 요소 노드, 문자는 텍스트 노드로 구분됨. DOM 트리   웹 페이지나 웹 앱에 있는 HTML 요소들의 계층 구조를 나무에 비유해서 DOM 트리라고 표현함. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현..