DDOstory

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제Fetch API 개념 Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고 CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함Fetch API 사용법요청을 생성하고 리소스를 취득하려면 fetch 메서드를 사용fetch()는 window와 worker 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드리소드를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용 가능fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받음반환 값은 해당 요청에 대한 Response로 이행하는 prom..

useTabsimport React, {useState} from "react";import ReactDOM from "react-dom";const content = [ { tab: "Section1", content: "I'm the content of the Section 1" }, { tab: "Section2", content: "I'm the content of the Section 2" },];const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentInde..

useInputimport React, {useState} from "react";import ReactDOM from "react-dom";const useInput = initialValue = { const [value, setValue] = useState(initialValue); return {value};};const App = () => { const name = useInput("Mr."); return ( Hello `);};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);input를 업데이트함 useInput은 init..

useStateimport React from "react";import ReactDOM from "react-dom";function App() { return ( Hello Start editing to see some magic happen! );};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);useState는 항상 2개의 value를 return첫번째 value를 item두번째 value는 값을 변경하게 함import React, {useState} from "react" // useState를 importconst [item, se..

useTitle - react document의 title을 몇개의 hooks와 함께 변경useInput - input 역할을 그대로 함usePageLeave - 유저가 page를 벗어나는 시점을 발견하고 함수를 실행useClick - element를 클릭하는 시점useFadeIn - 어떤 Element든 상관없이 애니메이션을 Element 안으로 서서히 사라지게 함useFullscreen - 어떤 Element든 풀스크린으로 만들거나 일반 화면으로 돌아가게 할 수 있음useHover - 어떤 것에 마우스를 올렸을 때 감지useNetwork - Online 또는 Offline 상태인지 감지useNotification - notification API를 사용할 때 유저에게 알림을 보냄useScroll - ..

15. 리액트 styled-components🤯 리액트 styled-components 설치명령어를 통하여 최신 버전의 리액트 style-components 설치# npm을 사용하는 경우npm install --save styled-components# yarn응ㄹ 사용하는 경우yarn add styled-components스타일이 잘 적용되었다면 회색 배경에 흰색 글씨로 안녕 리액트라는 문자열을 출력하는 컴포넌트가 잘 작동하면 이러한 화면이 등장리액트 styled-components의 MainPage.jsx 파일을 생성하여 코드를 작성한 후 꼭 index.js 파일에서 Mainpage를 import 해주어야 npm 실행 명령어인 npm start 작성시 실행 가능🤯 리액트 styled-compone..

React 리액트 스타일링🍿 CSS웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것Cascading Style Sheets스타일링을 위한 일종의 언어여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음🍿 CSS 기본 구조Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀..

React 리액트 테마 변경 기능메인 컨텐츠 컨포넌트는 씸 컨텍스트로부터 현재 설정된 테마 값을 받아와 실제 화면의 컨텐츠를 렌더링하는 역할테마 변경 버튼을 누를 경우 씸 컨텍스트로부터 받은 roggleTheme함수를 호출하여 씸 컨텍스트의 값을 변경하는 역할도 함Theme 컨텍스트의 값을 가져오기 위해 Theme 컨텍스트.consumer 컴포넌트를 사용하는 방법 대신에 use-context-hook를 사용darkOrlight 컴포넌트는 방금 전에 만든 메인 컨텐츠 컴포넌트를 자식으로 갖고 있는데 이는 ThemeContext.Provider로 감싸서 theme-context의 값을 하위 컴포넌트들이 사용할 수 있도록 해줌SimContext.Provider로 감싸주지 않으면 하위 컴포넌트들이 SimCont..

1초마다 렌더링을 하며 시간을 알려주는 시계를 만들어 보았습니다 Elements는 한번 생성되면 변경할 수 없음React의 Elements는 변하지 않는 성질을 가지고 있어 생성 후 children또는 attributes를 변경할 수 없으며화면에 생성된 Elements를 업데이트하기 위해서는 기존 Elements를 변경하는 것이 아닌 새로운 Elements를 생성하면 됨React가 렌더링되는 과정은 VirtualDOM(React 엘리먼트)에서 실제 DOM(DOM 엘리먼트)으로 이동하는 과정  작성한 소스코드를 웹사이트로 실행하고 개발자 모드인 F12를 눌렀을 때 1초씩 지날 때마다 개발자 모드의 코드가 깜빡깜빡 거리며 시간이 변경이 되는 시계를 완성하였음라이브러리 불러오는 곳에서 아직 실수를 해서 오류가..

📓React A JavaScript Library for Building User Interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것SPASingle Page Application하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구📓React 장점빠른 업데이트 & 렌더링 속도우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나Virtual DOM 사용가상의 DOMDOM ..