WEB12 [ Tailwind CSS ] - React Vite에서 Tailwind CSS 설치하기 https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com공식 문서를 참고하면서 설치했습니다. 1. React Vite 설치npm create vite@latest 2. Tailwind CSS 설치npm install tailwindcss @tailwindcss/vite 또는 npm install tailwindcss @tailwindcss/vitenpx tailwindcss init 3. vite.config.js(.. 2025. 6. 12. React - Context Hook ContextContext란 리액트 컴포넌트에서 props 없이 전역적으로 값을 공유할 수 있게 해 준다. Context 사용하기 1. Context 생성import React, { createContext, useContext, useState } from 'react';const MyContext = createContext(); //createContext() 함수를 사용해 생성함 MyContext는 Provider와 Consumer를 제공한다.근데 보통 Provider를 사용해 값을 공급하고, Consumer는 useContext를 대체할 수 있다. 2. Context Provider로 값 전달하기Provider 컴포넌트를 사용해 하위 컴포넌트에게 값을 전달해준다.value를 넣으면 그 값을 .. 2025. 5. 9. React 라우터(Router) 설정하기 오늘은 React 라우터 설정하는 법에 대해서 알아보자~라우터란 무엇일까?라우트는 사용자가 특정 URL로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정하는 경로를 의미한다한마디로 요약하자면 페이지 전환을 관리하는 역할을 담당한다! React Router에서 라우트 사용법React에서는 react-router-dom 라이브러리를 사용해서 라우팅을 구현한다.다운로드터미널 창을 켜서 다음과 같은 명령어를 입력해서 다운로드 받는다.npm install react-router-dom 1. index.jsimport { BrowserRouter } from 'react-router-dom';index.js 파일에 BrowserRouter를 import 받기! 2. App.jsimport { BrowserRouter.. 2025. 3. 30. 웹 문서의 레이아웃 만들기 배치 방법을 결정하는 display 속성 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 바꿈 (여러 줄->한 줄) inline 블록 레벨 요소를 인라인 레벨 요소로 바꿈 inline-block 인라인과 블록 레벨 요소의 속성을 모두 가지고 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다 menu1 menu2 menu3 menu4 li를 display : inline-block으로 지정하여 가로 배치를 해준다. * display: inline-block과 float: left 속성의 차이점 display: inline-block은 기본 패딩과 마진 값을 가지고 있지만 float: left는 기본 패딩과 마진을 가지고 있지 않아서 필요에 따라 지정해야 되고 float.. 2024. 2. 22. 이전 1 2 3 다음
