728x90 반응형 SMALL IT 인터넷/React Native & JS13 Vite + React + TypeScript + Tailwind [ 설치 ] $ 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,.. 2023. 2. 7. React를 ChatGPT에게 배우다. [ 설치 ] 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.. 2023. 2. 6. Vite 에서 process.env 를 사용하려면... 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 2022. 8. 10. [React Native] 타일형 버튼 세트 구현하기 버튼을 탭하면 선택된 버튼만 다른 모양이 되는 버튼 세트에요. 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; .. 2021. 7. 24. [React.js] 반복문으로 객체 생성하기 :: v-for of Vue.js 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 2021. 7. 19. [React.js] useMemo와 useEffect 함수형 컴포넌트에서 외부의 데이터를 가져와야 할 때가 있죠. useMemo와 useEffect를 쓸 수 있어요. 둘 다 두 번째 파라미터로 외부 데이터의 변경을 관찰할 수 있는데요. 만약 useEffect(함수, []) 이렇게 빈 배열을 넣으면 처음에 딱 한 번만 함수가 실행되고요. useEffect(함수, [props.value])라고 하면 props.value가 변경될 때마다 함수가 실행되요. 함수형 컴포넌트는 생명주기(componentDidMount, componentDidUpdate, ...) 메소드가 없어서 useEffect로 대신 구현하기도 해요. 먼저 useMemo 예제를 보죠. Main 컴포넌트는 1초마다 값을 바꾸는 역할만 해요. import React, { Component, useEf.. 2021. 7. 19. [React.js] 단숨에 리덕스 익히기 :: react-redux 글로벌 이벤트라고 생각하면 편해요. 실제는 그렇지 않겠지만 스토어는 리듀서들을 가진 오브젝트고, 실제 데이터는 리듀서에 들어있다고 생각해보세요. 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.. 2021. 7. 17. [React.js] 단숨에 스타일링 익히기 :: styled-components 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.. 2021. 7. 17. [React.js] 단숨에 라우팅 이해하기 :: Routing 리액트로 여러개의 페이지를 구축할 수 있어요. 주소창에 /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); }.. 2021. 7. 17. [React.js] 단숨에 JSX 알아보기 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.. 2021. 7. 17. 단숨에 React.js 이해하기 :: create-react-app 없이 index.html 파일 하나로 끝내보죠. react.js와 react-dom.js만 있으면 돼요. 에 이걸 넣어요. ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요. 이번엔 클래스 컴포넌트를 만들어 봐요. 이번엔 함수 컴포넌트를 만들어 봐요. 클래스 컴포넌트의 props에 값을 넘겨봐요. 컴포넌트를 재사용할 수 있어요. 함수 컴포넌트의 props에도 값을 넘겨요. 클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요. 태그를 생성할 때 속성값을 넣을 수 있어요. 태그로 해보죠. 한 번 보여주고 끝나는 페이지는 재미없죠? 클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요. 화면을 다시 그린.. 2021. 7. 17. [React Native] Expo 로 To-do 앱 만들기 :: MobX 버전 개발 환경 expo-cli 설치 sudo npm install -g expo-cli 프로젝트 생성 및 실행 expo init todo_app cd todo_app yarn start # blank 또는 blank (Typescript) 선택 w 누르고 웹에서 실행 * 여기서는 상태 관리를 위해 MobX(https://mobx.js.org/) 를 이용해요. sudo yarn add mobx mobx-react UI Store.tsx import { observable } from 'mobx'; const store = observable({ todos: [], add(newTodo) { this.todos.push(newTodo); } }); export { store }; Header.tsx import.. 2020. 11. 13. [React Native] Expo 로 To-do 앱 만들기 :: ActiveJS 버전 개발 환경 expo-cli 설치 sudo npm install -g expo-cli 프로젝트 생성 및 실행 expo init todo_app cd todo_app yarn start # blank 또는 blank (Typescript) 선택 w 누르고 웹에서 실행 * 여기서는 상태 관리를 위해 ActiveJS(https://activejs.dev/) 를 이용해요. sudo npm i @activejs/core --save UI Header.tsx import React, { Component } from 'react'; import { StyleSheet, View, TextInput, TouchableOpacity } from 'react-native' import { MaterialCommunityI.. 2020. 11. 13. 이전 1 다음 728x90 반응형 LIST
