리액트프론트엔드 (4) 썸네일형 리스트형 [리액트 React] fullPage 사용 시 상단으로 이동하기 / 100vh 스크롤 이벤트 / 100vh scroll / How to get to the top 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 fullPage jQuery 라이브러리 사용 시 상단으로 이동하는 방법에 대해 공유하겠습니다. 이전에 100vh를 사용하여 스크롤마다 전체 화면이 바뀌는 fullPage jQuery 사용 방법에 대해 공유했었는데요. [리액트에서 fullPage 사용하는 방법] [리액트 React] fullPage 사용하기 / 100vh 스크롤 이벤트 / 100vh scroll / Type annotations can only be used in TypeSc ** 2022.10.09 내용 추가 : anchorLink 인자를 사용하는 방법을 추가했습니다. 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅은.. [리액트 에러 React Error] because of npm naming restrictions / name can only contain URL-friendly characters 해결 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트 프로젝트를 생성할 때 만날 수 있는 because of npm naming restrictions / name can only contain URL-friendly characters 에러 해결 방법에 대해 공유하겠습니다. 번역하면 이런 뜻인데요. 이름에는 URL 친화적인 문자만 포함될 수 있습니다. npm이 사용하는 명령어의 일부이거나 프로젝트명에 대소문자 또는 특수기호를 입력하지 말라는 뜻입니다. 저는 프로젝트를 만드려는 폴더명에 공백(스페이스바)를 넣었다가 해당 에러를 만나게 되었어요. 대문자를 넣었다면 소문자로 바꿔주시고, 특수문자를 넣었다면 삭제하여 해당 에러를 해결하세요! [리액트 에러 React Error] You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트로 프로젝트를 생성할 때 만날 수 있는 You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). 에러 해결 방법에 대해 공유하겠습니다. 리액트 기본 세팅 코드를 터미널에 입력했더니 해당 에러를 만나게 되었는데요. (npx creact-react-app myapp) 리액트로 개발할 때마다 늘 사용하던 명령어인데 새삼스레 이런 에러를 만났습니다. 해당 에러를 번역하면 아래와 같은 내용입니다. Create React App의 글로벌(전역) 설치를 더 이상 지원하지 않습니다. 다음 명령어를 따라하여 글로벌 설치를 삭제하세요. - .. [리액트 React] react-table body style / react-table 테이블 내용 스타일 주기 안녕하세요. 디자인도 하고, 개발도하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 react-table 라이브러리를 사용할 때 바디에 스타일 주는 법에 대해 공유하겠습니다. 기본적으로 react-table은 body 글자가 좌측 정렬이 되어 있습니다. 그렇다면 어떻게 style을 주어서 변경을 할 수 있을까요? 지금부터 알아보겠습니다! 바디 스타일 주는 법 / react-table body style 이렇게 Cell이라는 Key로 넣어주면 되는데요. cell: { value }안에 담기는 value는 accessor에서 불러온 데이터이니 참고해 주세요! return할때 태그에 style을 지정해주면 끝! const columns = React.useMemo( () => [ { Header: () => (
