리액트 (7) 썸네일형 리스트형 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 npm i bootstrap index.js 파일에 경로추가 import 'bootstrap/dist/css/bootstrap.css'; 이상 참고 Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. R.. 리덕스 리덕스는 오픈소스 자바스크립트 라이브러리로 애플리케이션의 상태를 관리하는 역할을 합니다. 리액트 리덕스 설치 리액트 프로젝트를 생성할 때 템플릿 옵션을 추가하면 리덕스가 자동으로 설치됩니다. npx create-react-app --template redux 리듀서 생성 feature 폴더 안에 생성할 리듀서를 담을 폴더를 생성 폴더 안에 파일을 추가하고 아래와 같이 슬라이스를 생성합니다. import { createSlice } from "@reduxjs/toolkit" const initialState = {} export const authSlice = createSlice({ name:'auth', initialState, reducers: { reset: (state) => initialStat.. 리액트 라리브러리 - 리액트 라우터 돔 리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 비주얼 스튜디오 리액트 익스텐션 비주얼 스튜디오에 설치 가능한 리액트 익스텐션을 살펴보겠습니다. ES7+ React/Redux/React-Native snippets 리액트 코드 스니핏 익스텐션으로 단축키를 사용하여 다양한 리액트 코드를 쉽게 구현하도록 해 줍니다 HTML 삽입 미리보기할 수 없는 소스 프로젝트 템플릿 만들기 리액트 애플리케이션을 생성하면 기본적으로 생성된 폴더들이 있는데요. 불필요한 폴더들을 삭제하고 기본 템플릿을 만들어 보겠습니다. 완성된 템플릿 불필요한 파일을 제거하고 완성된 템플릿은 아래와 같습니다 App.js function App() { return ( Test ) } export default App index.js import React, { StrictMode } from "react"; import ReactDOM from 'react-dom/client' import App from './App' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ) 앱 구조 먼저.. 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 상태관리 등의 기능을 자체적으로 탑재하고 있는 것이 아니라 다른 라이브러리를 사용하여 구현하기 때문에 사이즈가 작고 배우기 쉬운 장점이 있습니다.리액트 앱 만들기리액트 앱을 만드는 가장 간단한 방법은 아래 명령어를 사용하는 방법입니다. 커맨드라인을 열고 아래 명령어를 실행하면 필요한 구성과 함께 새로운 리액트 앱이 생성됩니다.npx create-react-app app-name생성된 앱으로 이동하여 편집기를 엽니다.cd app-namecode .구동하기커맨드라인을 열고 아래 명령어 실행npm start참고React – A J.. 환경변수 사용하기 환경변수는 고정된 값이 아닌 변수를 사용하게 해 주어 개발환경과 프로덕션환경 사이에서 필요한 설정 값을 변경할 필요 없이 한 번의 설정으로 모두 적용되게 하며, 민감한 정보의 노출을 숨길 수 있는 장점이 있습니다 (프로젝트 빌드 파일에 포함되므로 완벽히 보호되는 것은 아님). 웹 애플리케이션을 만드는데 다양한 프레임워크와 도구가 사용되는 만큼 환경변수를 지정하는 방법도 조금씩 다르므로 다양한 예시를 통해 환경변수를 설정하는 방법을 볼까 합니다. HTML 삽입 미리보기할 수 없는 소스 이전 1 다음
