FRONTEND/React6 React Typescript (CRA) 환경에서 Path Alias 설정하기 에러 발생, 그리고 해결 craco 라이브러리 설치 package.json 설정 tsconfig.paths.json 과 tsconfig.json 에러 발생, 그리고 해결 Vue 만 사용하다가 React 환경을 적응하려니까 영 어색했었는데, Typescript 도 실무에서 거의 처음쓰는거라 시간이 좀 걸렸다. 개인적으로 ../../ 덕지덕지 경로가 붙어있는게 싫어서 평소처럼 path alias 를 설정하려했다. 그런데 컴파일 에러가 뜨면서 안되기 시작 ... 분명 tsconfig.json 에 path 를 basePath 와 paths 를 설정해놨는데 ...! // tsconfig.json { "compilerOptions": { // ... "baseUrl": "./src", "paths": { "@/*".. 2024. 2. 13. React, Deck.gl, Mapbox(react-map-gl) 와 함께 한국어(ko) 처리하기 Deck.gl 이란? Deck.gl 사용하기 Deck.gl 코드 MapboxLanguage 사용하기 MapboxLanguage 한국어 설정 코드 회사에서 지도를 활용하는 프로젝트를 진행중인데, Deck.gl, Mapbox에 한국어를 적용하는 문서들이 많이 없길래 ... 누군가에게 도움이 될 수 있을지도 모르니, 백업 차원에서 오랜만에 블로그로 작성한다. 참고로 사용하는 라이브러리들이 client side rendering 이 많아 사용하는 프레임워크는 단순 React, Typescript 로 진행하고있다. Deck.gl 은 React friendly 하며, 처음엔 Next.js 사용할까 했는데 페이지가 약 4개정도 밖에 되지 않는데 차트랑 Deck.gl 때문에 use client 덕지덕지 붙어있어서 그냥.. 2024. 2. 6. 220902 React Textarea 컨텐츠 높이 자동 설정 이벤트 없이 자동으로 Textarea 컨텐츠 높이 설정 import React, { useRef, useEffect } from 'react' const Chat = () => { const myRef = useRef(null) // textarea 자동 높이 설정 useEffect(() => { if (myRef.current !== null) { myRef.current.style.height = (myRef.current.scrollHeight) + 'px' } }, [myRef]) return ( { image } {name} ) } 결과물 컨텐츠 내용에 맞춰 높이 설정 완료 2022. 9. 2. 210623 React Context React Context React Context Context 란? Context.Provider Class.contextType Context.Consumer Context.displayName Context 란? Context 는 컴포넌트 트리의 매 계층마다 props 전달 없이 데이터를 제공하는 방식입니다. (global context) Context 는 특정한 데이터가 다수의 컴포넌트에서 사용될때/필요할 때 사용합니다. 많은 컴포넌트에서 사용하므로, 사용시 주의가 필요합니다. Context API // create context object const context = React.createContext(defaultValue) Context.Provider 이 context 오브젝트는 트리에서.. 2021. 7. 4. 210622 React Hooks React Hooks React Hooks Hook 이란? Basic Hooks useState useEffect Rules of Hooks Building Your Own Hooks useContext Context Additional Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue Hook 이란? React 에서 Hook 은, function 컴포넌트 내부에서 React 의 state 와 lifecycle 특징을 연결시켜주는 (hook) function 입니다. 리액트는 내장 Hooks 들을 제공하며, 개발자가 직접 작성한, 재사용 가능한 Hook 을 사용할 수도 있습니다. Basi.. 2021. 7. 4. React - React lifecycle methods 정리 Lifecycle methods 1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) 2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) 3. render 4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) 5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) 6. shouldComponentUpdate(nextProps, nex.. 2020. 5. 16. 이전 1 다음
