구부정한 머스타드의 블로그

다른 블로그들에선 i18next 도 설치해서 쓰던데, 공식문서보니 그럴 필요는 없는것 같다. 라고 생각했는데 해야한다. ㅎㅎ; simple-multi-namespaces에 있는 코드 한번 보세요 한영 변환 코드 const NavBar = () => { const { t, i18n } = useTranslation() const toggle = useCallback(() => { i18n.changeLanguage(locale) },[i18n]) return ( toggle('en')} title="영어" style={{ color: 'white', paddingRight: '10px' }}> en toggle('ko')} title="한글" style={{ color: 'white' }}> ko ) } ..

사용 버전 - react native 0.67.5 - xcode 14.3 - ios 16.4.1 문제 해결 xcode에서 이부분을 요렇게 바꿔주면 된다. set -e export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh index.tsx 참고한 깃허브 https://github.com/facebook/react-native/issues/31421#issuecomment-958952811

$ npm install -D react-native-dotenv babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ['module:react-native-dotenv', { moduleName: 'react-native-dotenv', path: '.env', }], ], }; 프로젝트 루트에 .env파일 만들어서 API_KEY=어쩌구 src를 쓰고 있다면 src/types/env.d.ts declare module 'react-native-dotenv' { export const API_KEY: string; } 사용방법 import {API_KEY} from 'react-n..

redux는 SinglePageApplication framework와 함께 사용 가능하다. redux는 복잡성, 많은 패키지와 보일러플레이트 코드로 인해 redux-toolkit으로 대체되고 있다. 공식 홈페이지에선, Redux Toolkit은 Redux 코어 뿐 아니라 저희가 Redux 앱을 만들 때 필수적이라고 느낀 패키지들을 포함 (Redux Thunk나 Reselect 등)한다고 한다. 실은, react를 배울때 멋진 팀원덕에 처음부터 redux-toolkit을 써서 redux의 불편함을 잘 알진 못한다. (이에 자세히 알고 싶다면 참고 링크를 보길 바랍니다.) 그래서 왜 redux-toolkit을 썼나요? 라는 질문에 대답을 못했다. 찾아보던중 middleware에 대한 개념을 잘 못잡고 있는..

web3.js 기본 설정 react-web3-provider metamask-react $ npm i metamask-react 이거하나 설치하면 젤 쉽고 간단하고 잘 돌아감 이유: 자바스크립트랑, 리액트랑 라이프 사이클이 다르기 때문에, 리액트에서 web3 provider를 생성하는건 쉽지 않다. 따라서 라이브러리를 쓰는것. 초기 삽질. (안봐도됨) web3사용 위해, 리액트앱 루트에 web3 react provider로 감싸줌, 루트 컴포넌트에 getlibrary를 props로 전달하는데 web3-react가 사용할 web3 provider를 제공하는 역할을 함. GitHub - Uniswap/web3-react at v6 $ npm i @ethersproject/providers $ npm i we..

vite.config.ts import { defineConfig, loadEnv } from "vite"; //만일 vue라면 vue를 import하면 된다. import react from "@vitejs/plugin-react"; import path from "path"; export default defineConfig(() => { return { plugins: [react()], resolve: { alias: { //추가해주기 process: "process/browser", stream: "stream-browserify", zlib: "browserify-zlib", util: "util", }, }, }; }); // html(index.html) vite use web3.js th..

커밋을 눌러보니 불러오는 라이브러리가 변경되었다. // import { AbstractConnectorInterface } from '@web3-react/types' import { AbstractConnector } from '@web3-react/abstract-connector' // const connectorsByName: { [name: string]: AbstractConnectorInterface } = { const connectorsByName: { [name: string]: AbstractConnector } = { kibosh AbstractConnectorInterface · Uniswap/web3-react@7e1851e bump torus version emit provid..

npm i styled-components npm install --save-dev @types/styled-components styled-components: API Reference API Reference of styled-components styled-components.com [TS] TypeScript에서 Styled-component 사용하기 TypeScript에서 styled-component를 사용해보자. velog.io Storybook에서의 Typescript 공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용..

강의듣기 유데미, 유튜브, 노마드코더강의 공식문서 공식문서, 유데미 프로젝트 프로젝트 혹은 토이프로젝트

문제의 코드, children에 계속 밑줄이 그어짐 const TodosContextProvider: React.FC = (props) => { return ( {props.children} ) } 해결 type Props = { children?: React.ReactNode; }; children 정의. react 18 에선 children지원하지 않는다고 함. 리액트 18의 타입스크립트 타입 변경점 React(리액트) 18이 얼마 전에 출시했습니다. 개발하시는 프로젝트에 이미 업데이트 했거나 조만간 업데이트 하실 계획일텐데요. 리액트와 Typescript(타입스크립트)를 같이 사용했던 프로젝트라면 blog.shiren.dev