본문 바로가기
분류 전체보기
 (410)
[리액트(React)] Data Fetching & HTTP Request // Data Fetching & HTTP Request - 서버에서 데이터를 가져오거나, 서버에 데이터를 보내는 과정 - Fetch API 나 Axios를 사용하여 HTTP 요청을 수행할 수 있다. - 리액트는 JavaScript 라이브러리이기 때문에, 자바스크립트의 방식을 그대로 사용한다. - https://sorrel012.tistory.com/346 참고 [자바스크립트(JavaScript)] API, Ajax // API, Application Programming Interface - 컴퓨터가 여러 소프트웨어와 상호작용하거나 소통하는 모든 인터페이스를 의미 - 웹에서 사용하는 API > HTTP를 기반으로 하는 인터페이스인 WebAPI // Ajax - 비동기 sorrel012.tistory.c..
[리액트(React)] Class-based Component // Class-based Component - 클래스 기반 컴포넌트 - React 16.8 이전에는 Functional Component가 아닌 Class-based Component를 사용했다. (여전히 사용하는 회사들이 많을 수 있으므로.. 공부해야 함..) * https://sorrel012.tistory.com/360에서 간략하게 언급한 적 있다. [리액트(React)] Component, Props // 컴포넌트, Component - 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 - 여러 컴포넌트들을 조립하여 UI를 구성한다. - 컴포넌트명은 항상 대문자로 시작해야 한다. - 컴포넌트 함 sorrel012.tistory.com // 기본 사용 형태 import { Componen..
[자바스크립트(JavaScript)] Million.js // Million.js - 빠르고 효율적인 JavaScript 프레임워크 - 공식 홈페이지에 보면, 컴포넌트를 최대 70%나 빠르게 만들어주는 매우 빠르고 가벼운 최적화 컴파일러라고 설명이 되어있다. - React의 가상 DOM 매커니즘을 대체하여 더 효율적인 매커니즘으로 DOM 업데이트를 수행한다. - 공식 홈페이지: https://million.dev/ Million.js | Million.js The Virtual DOM Replacement for React million.dev 1. 설치 npm install million 2. 컴파일러 추가 - vite 기반의 React 프로젝트인 경우 vite.config.js 파일을 수정하여 추가한다. import million from "million/..
[리액트(React)] Reducer, useReducer(Hook) // Reducer - 하나 또는 그 이상의 복잡한 값을 더 단순한 형태로 만드는 함수 - JavaScript의 reduce 함수도 Reducer 이다. // useReducer - state 관리 hook - 이전 state를 바탕으로 state를 업데이트할 때, 함수 형식을 사용하여 복잡해지는 것을 해결해 준다. 1. useReducer 생성 및 선언 const [useReducer로 관리되는 state명, dispatch 함수명] = useReducer(Reducer함수명, [초기값]); - dispatch 함수로는 action을 보낼 수 있는데, 이렇게 보내진 함수는 Reducer 기능에 사용된다. 2. Reducer 함수 정의 function Reducer함수명(state, action) { /..
[리액트(React)] 포탈(Portal) // 포탈, Portal - 부모 컴포넌트의 DOM 요소들 바깥에 컴포넌트를 렌더링하고 싶을 때 사용한다. - 모달, 팝업 등의 구현이 용이하다. - 부모 컴포넌트의 바깥에 렌더링하기 때문에 부모 컴포넌트의 css 적용을 받지 않는다. 1. react-dom 에서 createPortal을 import 한다. import {createPortal} from 'react-dom'; 2. createPortal을 return 한다. - 첫 번째 인수는 jsx 코드, 두 번째 인수는 해당 컴포넌트를 표시할 HTML 요소이다. return createPortal( , document.getElementById('') //다른 방법으로 받아도 됨 ); import React, { forwardRef, useImpe..
[리액트(React)] 참조(Refs) // 참고, Refs - DOM 요소에 직접 접근할 때나 UI에 직접적인 영향을 주지 않는 값을 제어할 때 사용한다. - useRef Hook을 import 해서 사용한다. (https://sorrel012.tistory.com/362 의 useRef 참고) [리액트(React)] Hook // Hook - function 컴포넌트에서 class컴포넌트와 동일한 기능을 사용할 수 있게 해준다. - 이름 앞에 use를 붙여 hook임을 나타낸다. - 최상위 컴포넌트에서만 호출해야 한다. - 렌더링될 때마다 늘 같은 sorrel012.tistory.com - useRef로부터 받는 참조 값들은 항상 JavaScript 객체이다. - HTML 요소에 ref를 통해 참조변수를 설정하면 참조변수명.current를..
[리액트(React)] Tailwind CSS(테일윈드 CSS) 사용하기 에서 테일윈드 CSS에 대한 전반적인 내용을 담았다. 이번엔 리액트에서 활용하는 방법에 대해 적어볼 예정이다. 나는 vite로 react를 생성했기 때문에 Install Tailwind CSS with Vite > Using React의 설명을 참조했다. (https://tailwindcss.com/docs/guides/vite) Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com 1. 설치 npm install -D tailwindcss postcss autoprefixer 2. 설정 파일 생성 npx tailwindcss init -p postcss.config.js..
[CSS] 테일윈드 CSS(Tailwind CSS) // 테일윈드 CSS, Tailwind CSS - 유틸리티 우선 방식의 CSS 프레임워크 - html 요소에 클래스를 추가함으로써 스타일을 단계적으로 적용하여 전체 컴포넌트를 스타일링한다. - 컴포넌트 기반의 접근 방식을 취하지 않고, 빌딩 블록(building block) 스타일의 클래스를 제공한다. - pt-2 와 같은 사전에 정의된 css 규칙을 사용할 수 있다. - 공식 문서: https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool..

티스토리툴바