SUIN

💡페이지를 구성하다 보면 생각보다 많은 곳에서 모달과 팝업을 구현해야 하는 경우가 생긴다. React에서 모달을 구현하기 위해서는 모달 컴포넌트를 별도로 만들어 부모 컴포넌트에서 모달 컴포넌트를 선언해주는 방식으로 사용하게 되는데, 우리는 React에서 제공되는 기능인 React Portal을 추가하여 모달을 구현해주었다. React Portal을 알아보고 우리 프로젝트에는 어떤 식으로 Portal을 추가하여 구현했는지 알아보자.React Portal란? React Portal은 React 애플리케이션에서 DOM 요소를 다른 위치의 DOM 노드로 렌더링할 수 있게 해주는 기능이다. 일반적으로 React는 컴포넌트를 해당 컴포넌트의 부모 요소 내에서 렌더링 하지만 때로는 특정 컴포넌트를 부모 요소가 아닌..

Toast ui 포스트를 참고하던 중 리액트 지연초기화라는 것을 알게 되었다. 원문 : https://www.benmvp.com/blog/four-characters-optimize-react-component/ Four characters can optimize your React component | Ben Ilegbodu How making use of useState lazy initialization can speed up your React function component www.benmvp.com // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getIt..

NavLink v6.6.1 Type declarationdeclare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean reactrouter.com 프로젝트의 sideNav를 구현하는 중 router-dom NavLink를 활용하여 페이지 이동과 스타일링을 구현해 보았다. 조건 - 5개의 Link 중 3개->페이지 이동 / 2개- 전역모달 구현..

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component input에 정의되지 않은 값이 들어가게 되면서 발생되는 error //변경 전 const isAllCheck = prodList && prodList.length > 0 && checkedItems.length === ..

현재 진행하는 프로젝트에서 어드민 페이지의 전역 에러 처리 담당을 하게 되었다 각 api response 값이 다양하게 들어오기대문에 해당 res data의 vlaue 값을 별도로 뽑아주는 작업을 진행하여야 했다. react-toastify 라이브러리를 통해 toast 팝업을 띄워 주었으며 코드는 다음과 같다. import { toast } from "react-toastify"; axiosInstance.interceptors.response.use( (response) => response, (error) => { const { response } = error; if (response) toast.error(`${Object.values(response.data)[0]}`, { // toast 스타..

보호되어 있는 글입니다.

회원가입페이지를 작업하는 중 form의 inpyut password type에서 발생되는 경고 메시지 발생 Google Chrome에서는 모든 비밀번호와 모든 양식 데이터를 기본적으로 자동 저장 및 자동 완성하려고 하며 웹 개발자에게 브라우저에 더 편리한 양식 요소 범위를 준수하도록 더욱 권고한다고 한다 때문에 패스워드에는 별도의 자동완성 처리를 추가해주어야 한다. 크롬이 아니라면 경고창이 뜨지 않으며 코드에는 문제가 되지 않지만 콘솔을 깔끔하게 해 주기 위해서 autocomplete를 추가해주었다. 해결방법 autocomplete -> on or off 처리

통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가 필요하므로 MSW를 사용하여 모의 데이터를 만들어보는 공부를 했다. MSW - 데이터 목킹을 하는 라이브러리 - 리액트는 REST API & GraphQL support 한다. - 실제 서버와 동일한 주소여도 서로 올라가지 않고 Interceptor 해서 msw를 통해 데이터 처리가 가능하다 - 브라우저 내에 서비스워커를 띄운후 핸들러에 특정 api 설정을 하게되면 요청에 맞는 데이터를 받을 수 있다 - Browser 응답 요청 -> 서비스 봉사자가 상태 -> res clone -> msw 전송 -> 모킹 ..