분류 전체보기

[프론트엔드] React Router v6 업데이트

React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공식문서 Switch가 사라지고, Routes 등장 Routes는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다. Routes로 기존 Switch의 기능을 대체 가능 기존 코드 v6 코드 useHistory가 사라지고, useNavigate 등장 useNavigate로 기존에 useHistory의 기능을 전부 대체 가능 useHistory의 history는 객체였지만 useNavigate의 navigate는 함수다. 기존 코드 const history = useHistory(); history.push('/'); history.goback()..

[프론트엔드] REACT ROUTER-TUTORIAL 오류 수정

index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 1. 오류 원인 리엑트 라우터 설치 및 공부중 위와 같은 오류가 발생하였다. [React] A is only ever to be used as the child of element, never rendered directly. Please wrap your in ㅋㅋㅋㅋㅋㅋㅋㅋ 에러문구가 시키는대로 로 감싸주었는데도 해결 못하셔서 찾아오신분들 환영합니다. 'react-router-dom' 라이브러리가 버전 업데이트가 됬어요...! 의 매개변수 이름이 변경되었습 developer..

[프론트엔드] REACT 팝업창 만들기

회사에서 특정페이지에 팝업창을 노출하는 기능을 개발할 필요가 생겨서 팝업창을 만들게 되었다. 요구사항은 1. 페이지 진입 시 팝업창 노출 2. 팝업창 닫기 버튼 추가 3. 팝업창 내 이미지 노출 (이미지는 수시로 변경될 것으로 추측) 4. 오늘 하루 그만보기 추가 1번은 팝업창을 상시로 띄우면 되는 부분이고, 3번에 필요한 이미지 영역을 잡고서 팝업으로 보여줄 필요가 있었다. 2,4번은 동일하게 닫기 기능 + 쿠키 및 localStoarge 사용으로 로컬에서 팝업창 노출시간을 설정하면 된다. 나중에는 특정경로애서 유입되는경우에만 팝업을 띄워야하는 이슈가 있어서 팝업창을 커스텀하기 편하게 직접 만들기로 결정하였다; 1. 팝업창 만들기 팝업창을 만들기 위해서는 2가지 방법이 있다. 1. 직접 만들기 2. r..

github 프로젝트 연동

프로젝트를 올리고 수정하는 부분은 간단하다 git에 계정이 인증되어 있다는 전제조건을 필요로 한다. https://sycdev.tistory.com/16?category=978956 (repository 권한이 없으면 위의 글을 참고하도록 하자) 1.git에 생성한 repository를 복사한 후 폴더에 clone 2.git의 clone한 폴더를 가져와서 todo-app으로 복사 붙여넣기. 3.vscode나 기타 프로그램 툴로 git에 접근하여 push, pull 하면 끝. 아래와 같이 변경(업로드)해야 할 폴더, 파일들을 확인하고 push .