c29130811

React Hook인 useEffect 는 컴포넌트 라이프 사이클에서 일어나는 Side Effect를 관리할 수 있게 해준다. Side Effect는 컴포넌트가 렌더링 과정에서 렌더링 이외에 작업을 부르는데, API 호출 , 데이터 저장, 로그 등 다양한 일들이 있을 수 있다. 타이머 등을 동작하는 웹 사이트에서 언마운트가 될 때 해제되어야 하는 업무들을 포함한다. import { useEffect } from 'react';useEffect(() => { fetch("https://api.example.com/data") .then(response => response.json())}, []); // [] 는 의존성 배열 일반적으로 하는 useEffect 사용하는 형태로 렌더링 후 즉 DOM 업..

어떻게 보면 React를 그냥 따라 쓰고 예제만 할 뿐 공부가 많이 부족했던거 같다. 그래서 찬찬히 공부 https://react.dev/reference/react/useState useState – ReactThe library for web and native user interfacesreact.devuseState는 state 상태를 저장하며 변경 감지 및 UI 업데이트를 하는 역할을 한다.가령 state가 아닌 변수가 업데이트가 일어난다고 해서 바로 업데이트 되어 화면에 해당 값이 반영되지는 않는다. useState는 다음 아래와 같이 [변수, 세팅할변수] = useState(초기값); 을 통해 사용을 한다. import "./styles.css";import { useState } from..

Retool | The fastest way to develop effective software. Retool | The fastest way to develop effective software.Retool is the fastest way to build effective business software. Use Retool's building blocks to develop apps and workflow automations that connect to your databases and APIs, instantly.retool.com low code 기반으로 dashboard 또는 admin 을 빠르게 만들 수 있는 tool이다. database 등 여러 서비스에 편하게 연동할 수 있게 도와주다..

https://flowbite.com/docs/forms/search-input/#search-bar-example Tailwind CSS Search Input - Flowbite Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes flowbite.com tailwind로 페이지 몇개 작업하다가, 위 Flowbite에 Search Input에 Dropbox가 괜찮아보여 커스텀좀 해봤다. 사실 되게 어렵게 접근을 하는거 같은데... 그냥 사실 hidden 되어있는 것만 sta..

npm run start 해서 진행할 경우, iframe이 추가되며, 아래의 옵션 때문에 화면에 버튼이고 뭐고 아무것도 안눌림. position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647; https://github.com/facebook/create-react-app/issues/11773 Is this the bug of react-error-overlay? · Issue #11773 · facebook/create-react-app Describe the bug When I change the code and emit the hot-reload, there is iframe cove..

React 에서 Last Child 가 추가 될 때, Background Color를 변경한다. setTimeout을 활용하여, 3초가 지나면 다시 Color를 원복 시킨다.

React에서 useState로 있는 Array에 값을 Search 하는 코드 const searchResult = item.filter((v) => { return v.toLowerCase().includes(input); }); inputField에 입력 된 값이 포함 되면, searchResult에 추가하고, 추가된 값을 Render 한다.

이전에 만들었던 허접한 deeplink 테스트 페이지가 너무 오래 되었고, 여러가지 기능을 개편하고자 다시 만들어보려고 한다. 기능은 정말 없다. firebase realtime database에 deeplink 관련된 아래의 정보를 저장해서 꺼내와 사용한다. 웹에서는 신규 링크를 저장 또는 삭제하며, 딥링크 가기 버튼을 누르면 딥링크를 url로 이동시킨다. 단순히 deeplink 테스트 용으로 종류를 모아둔 사이트. 시작은 create-react-app으로 project를 생성한다. npx create-react-app my-app 바로 npm run start를 하면 localhost:3000으로 아래와 같은 창이 출력된다. 이제 firebase 를 추가하는 작업을 진행한다. https://fireb..