반업주부의 일상 배움사

[ 설치 ] $ yarn create vite vite_test --template react-ts $ cd vite_test $ yarn add -D tailwindcss postcss autoprefixer $ npx tailwindcss init $ touch postcss.config.cjs $ echo 'module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }' > ./postcss.config.cjs $ yarn dev [ 수정 ] tailwind.config.cjs /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,..

[ 설치 ] React를 설치하려면 다음 단계를 따라주세요: Node.js와 npm을 설치하세요. (https://nodejs.org) 명령 프롬프트 또는 터미널에서 다음 명령어를 실행하세요: 'npx create-react-app my-app' (my-app은 원하는 프로젝트 이름으로 변경하세요) 프로젝트 디렉토리로 이동하세요: cd my-app 다음 명령어를 실행하세요: npm start 이제 브라우저에서 http://localhost:3000을 열면 React 프로젝트가 실행되고, 애플리케이션을 개발할 준비가 되었습니다. [ 기본 예제 ] 메시지를 표시하는 간단한 예제입니다. App.js import React from 'react'; import Welcome from './Welcome'; fu..

vite.config.ts import { defineConfig, loadEnv } from 'vite' export default (mode) => defineConfig({ define: { 'process.env': loadEnv(mode, process.cwd(), ''), }, ... }) 반주부의 [ 둘러앉아 IT이야기 ] https://open.kakao.com/o/gg0O4T0e 영어, 중국어 공부중이신가요? 홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요! 한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어 한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!! smartstore.naver.com

버튼을 탭하면 선택된 버튼만 다른 모양이 되는 버튼 세트에요. import React, {useState} from 'react'; import {SafeAreaView} from 'react-native'; import styled, {css} from 'styled-components/native'; const ContainerBox = styled.View` width: 100%; `; const TitleText = styled.Text` text-align: center; font-size: 35; `; const TopBox = styled.View` flex-direction: row; width: 100%; align-items: center; background-color: white; ..

Vue.js에는 v-for가 있죠. JSX는 아래와 같이 사용해요. import React from 'react'; function App() { return ( 시작! {Array.from({ length: 8 }, (_, i) => ( {i + 1}번째 라벨 ))} 끝! ); } export default App; 영어, 중국어 공부중이신가요? 홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요! 한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어 한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!! smartstore.naver.com

함수형 컴포넌트에서 외부의 데이터를 가져와야 할 때가 있죠. useMemo와 useEffect를 쓸 수 있어요. 둘 다 두 번째 파라미터로 외부 데이터의 변경을 관찰할 수 있는데요. 만약 useEffect(함수, []) 이렇게 빈 배열을 넣으면 처음에 딱 한 번만 함수가 실행되고요. useEffect(함수, [props.value])라고 하면 props.value가 변경될 때마다 함수가 실행되요. 함수형 컴포넌트는 생명주기(componentDidMount, componentDidUpdate, ...) 메소드가 없어서 useEffect로 대신 구현하기도 해요. 먼저 useMemo 예제를 보죠. Main 컴포넌트는 1초마다 값을 바꾸는 역할만 해요. import React, { Component, useEf..

글로벌 이벤트라고 생각하면 편해요. 실제는 그렇지 않겠지만 스토어는 리듀서들을 가진 오브젝트고, 실제 데이터는 리듀서에 들어있다고 생각해보세요. store.reducer.data 파일 하나로 끝낼께요. import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { createStore, combineReducers } from 'redux'; ///////////////////////////////////////// // // Main // ///////////////////////////////////////// function Main() { const dispatch = useDi..

SCSS 같은거라 보면 돼요. 설치할께요. npm install --save styled-components 상속도 되고 구조화도 가능해요. 종합 예제를 만들어봐요. import styled, { css } from 'styled-components'; const BoxParent = styled.div` padding: 50px; `; const Box = styled(BoxParent)` background-color: ${(props) => props.bgColor}; color: red; // &는 this와 같은 의미 & > div { color: blue; ${(props) => props.bgColor === 'grey' && css` color: yellow; `} } `; function..

리액트로 여러개의 페이지를 구축할 수 있어요. 주소창에 /admin, /user 등을 입력하면 서로 다른 페이지를 보여주는거죠. 그걸 라우팅이라고 불러요. 우선 간단하게 해시를 이용할께요. 주소창에 /#a를 입력하면 A 컴포넌트를 보여주고 /#b를 입력하면 B 컴포넌트를 보여주면 될 것 같네요. import { useState } from 'react'; function A() { return A 페이지; } function B() { return B 페이지; } function App() { const [hash, setHash] = useState(document.location.hash); function onHashChanged() { setHash(document.location.hash); }..

React.createElement()를 많이 쓰면 코드 파악이 어려워요. 그래서 HTML과 유사한 방식으로 컴포넌트들을 생성할 수 있도록 JSX가 나왔어요. create-react-app으로 프로젝트를 생성해요. npx create-react-app jsxtest src/App.js를 열어보면 div, img, p, a 등 익숙한 태그들이 보이죠? 컴파일 하면 HTML로 변환되지만 현재 상태는 리액트 컴포넌트에요. class 대신 className을 쓰고 for 대신 htmlFor를 쓰는 등의 차이가 있어요. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to relo..