Main Concepts 처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊 Introducing JSX React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다. JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다. Rendering Elements React로 만들어진 어플리케이션은 하나의 root DOM 노드를 ..

문제 상황 React context 사용 시 기존 코드 구성이 context 내부 요소가 늘어날 수록 복잡해져서 리팩토링하려 한다. 기존 구현 // 구성 const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..

React-query : fetch, cache, synchronize, update(for server state)에 사용되는 라이브러리이다. 공식사이트 React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 배경 server state 사용 시 발생할 수 있는 문제점은 다음과 같다. caching deduping(데이터 중복 제거) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

query가 오래 되었다는 것을 판단하고 다시 fetch해올 때, queryClient.invalidateQueries 함수를 사용한다. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..

query와 다르게 CUD에 사용된다. https://react-query.tanstack.com/guides/mutations Mutations Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.com 사용예제 const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.mes..

React array state가 갱신되어도 view가 바뀌지 않을 때 const [members, setMembers] = useState([]); const deleteMember = (index: number) => { // member 삭제 const tmp = members; tmp.splice(index, 1); setMembers(tmp); } return( { members.map((member: string, index: number) => {member} } ); members라는 Array state의 값 하나를 삭제하는 함수이다. 해당 함수를 실행해도 표시되는 학생이 변하지 않는 이슈가 발생했다. 하지만 개발자도구를 통해서 보면 분명 해당 컴포넌트의 members State는 변경되..

React 환경변수 등록 기존 개발 시 개발 환경에서 React를 프론트로 사용할 때, 코드 사아에서 환경변수를 이용하려면 어떻게 해야할까? 최상위 폴더에 .env 파일을 만든다. .env 파일에 REACT_APP으로 시작하는 환경변수를 정의한다. REACT_APP_ADMIN_KEY=hi 코드 상에서 process.env.REACT_APP_ADMIN_KEY와 같은 형태로 사용한다. 이렇게 간편하게 이용할 수 있다! 배포 시 하지만 서비스를 위한 build 후에는 환경변수를 읽어들일 수 없기 때문에 build와 동시에 build에 대한 매개변수(argument)로 환경변수를 세팅해주어야한다. NERA는 github action에서 docker/build-push-action@v1.1.0 이라는 action..

html2canvas + 이미지 호스팅 *예제는 React Hook 환경에서 진행되었습니다. 결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다. html table을 이미지로 만들기 만들어진 이미지를 호스팅하기 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기 차례대로 해보자. html table을 이미지로 만들기 DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다. import html2canvas from 'html2canvas'; const copyDOM = async () => { window.scrollTo(0, 0); let url = ""; await html2canvas(..