본문 바로가기

Lect & Tip/node, Angular, React21

[React] SPA 페이지 이동 시 스크롤 맨 위 유지 하는 방법 [React] SPA 페이지 이동 시 스크롤 맨 위 유지 하는 방법최근 웹 개발 트렌드에서 싱글 페이지 애플리케이션(SPA)은 사용자 경험(UX)을 극대화하기 위해 많이 활용되고 있습니다. 특히 React와 같은 프론트엔드 라이브러리를 사용하여 SPA를 구축할 때, 페이지 간 전환이 빠르고 부드러운 전환 효과를 제공할 수 있다는 점이 큰 장점입니다. 그러나 이러한 SPA의 특성상 페이지 이동 시 스크롤 위치가 이전 페이지의 위치를 그대로 유지하는 문제가 발생할 수 있습니다. 본 포스팅에서는 React 환경에서 SPA 페이지 이동 시 스크롤을 항상 맨 위로 유지하는 다양한 방법과 그 구현 사례에 대해 심도 있게 다루어 보겠습니다.SPA와 스크롤 문제의 이해SPA는 한 번의 로딩으로 애플리케이션 전체를 불러.. 2025. 2. 10.

[React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때 [React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때이 글에서는 React를 사용하여 REST API로부터 Axios를 통해 데이터를 받아올 때 발생하는 배열(Array) 객체의 map 함수 호출 오류에 대해 상세히 설명하고, 이를 해결하는 간단하면서도 효과적인 방법을 소개하고자 합니다. 특히 비동기 데이터 처리와 관련하여 Promise 객체가 해결되기 전에 컴포넌트가 렌더링되어 발생하는 오류의 원인과 해결책을 중점적으로 다루며, 로딩 상태 관리 및 조건부 렌더링을 활용한 접근법에 대해 이야기합니다.도입부React를 사용하면서 서버로부터 데이터를 받아와 렌더링하는 과정은 매우 일반적입니다. 많은 개발자들이 Axios를 사용하여 REST API와 통신하며 데이터.. 2024. 10. 18.

React 실행 오류: npm ERR! errno -4058 해결 방법 React 실행 오류 - npm ERR! errno -4058 해결 방법 React 프로젝트에서 발생하는 npm 오류의 원인과 해결책 React를 사용하며 종종 마주치는 문제 중 하나는 npm ERR! errno -4058 오류입니다. 이 오류는 React 프로젝트를 실행할 때 npm 관련 문제로 인해 발생합니다. 이 글에서는 이 오류의 원인과 다양한 해결 방법을 자세히 살펴보겠습니다. 오류의 원인 파악 npm ERR! errno -4058 오류는 주로 파일 시스템 관련 문제에서 비롯됩니다. 이는 파일 또는 디렉토리에 접근할 수 없거나, 필요한 파일이 없을 때 발생합니다. 구체적인 원인은 다음과 같습니다: 잘못된 파일 경로: 프로젝트 내의 파일이나 디렉토리 경로가 잘못 설정되었을 때 발생합니다. 권한 부.. 2023. 11. 28.

리액트 쿼리 v5 에서 바뀐 점 react query v5 react query v5 리액트 쿼리 v5의 주요 변경사항 리액트 쿼리 v5에서는 많은 중요한 변화가 있었습니다. 이 react query v5 변화들은 개발자들에게 보다 명확하고 간결한 코드 작성을 가능하게 하며, 라이브러리의 유지보수를 용이하게 합니다. 단일 객체 시그니처 지원: 이전 버전에서는 useQuery와 같은 함수들이 TypeScript에서 다양한 오버로딩을 지원했습니다. 이제 v5에서는 객체 형식만을 지원하여, 더욱 간결하고 명확한 코드 작성이 가능해졌습니다【7】. queryClient.getQueryData 및 queryClient.getQueryState 변경: 이제 이 함수들은 queryKey만을 인자로 받습니다. 이는 API의 일관성을 높이고, 사용의 단순화를 가져옵니다【8】【9】.. 2023. 11. 13.

yarn install error Unexpected token \u0000 in JSON at position yarn install 할 때 간혹 만나게 되는 error Unexpected token \u0000 in JSON at position 해결 방법 npm cache verify 하지만 별 소용이 없다. 어차피 나는 얀 인스톨을 사용할 것이므로... yarn cache clean yarn cache clean 명령을 사용해서 얀 캐시를 지운다. PS D:\Work\seoul\ams\ams-front> cd .\frontend\ PS D:\Work\seoul\ams\ams-front\frontend> yarn install yarn install v1.22.10 resolution inconsistencies caused by unsynchronized lock files. To clear this war.. 2022. 12. 22.

autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0 VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다. 하아... 뭐야... 아 물론 내 소스는 아니다. 난 이미 해결을 했으므로... WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module.. 2022. 10. 20.

리액트 데이트피커 포맷 api axios error문제 react datepicker date format axios not working 리액트에서는 jquery용 데이트 피커를 사용할 수 없다. 아니 사실 리액트용 데이트피커인 react datepicker가 훨씬 깔끔하게 사용되기 때문에 굳이 제이쿼리 데이트 피커를 붙여야 할 필요가 없다. 사실 아직 리액트가 초짜라 react datepicker를 온전히 다루지는 못하고 있기 때문에 정석으로 설정하는 방법은 사실 나도 잘 모르겠다. 일단, 신규 프로젝트에서 datepicker를 사용할 일이 있어서 설치했다. yarn add react-datepicker 혹은 npm i react-datepicker 로 설치 하면 되겠다. 그런데 문제는 이렇게 설치하고 import DatePicker from "react-datepicker"; 했을 경우 스타일 깨짐 문제가 발생했다. 이유는 모르겠지만 .. 2021. 5. 20.

여러가지 리액트 멀티 레이아웃 connected-react-router multi layout 적용하기 리액트를 별로 좋아하지 않는 1인이다. 그런데 어쩔 수 없이 리액트 플젝을 해야 해서 퍼블리셔 겸 프런트 엔드로 참여 중이다. jquery라면 단박에 끝낼 문제에 고민하지 않아도 될 문제들이 리액트에는 넘쳐난다. 왜 쓰는지는 여전히 모르겠지만 까라니까 깐다. 일단 SPA 사이트에서 리액트가 편한 것은 대충 짐작은 된다. 그런데 SPA사이트라고는 해도, 한 사이트에 서로 다른 레이아웃이 여럿 사용해야 되는 경우가 많다. 단적으로 GNB, LNB가 없는 Intro페이지, Login페이지 그리고 사용자 화면과 다른 관리자 화면의 레이아웃은 서로 다를 수 있다. 아니 다를 수 있는 정도가 아니라 대체로 다르다. 그럴 때 리액트 여러 가지 레이아웃 적용하는 방법은 꽤 다양하지만 직관적이고 쉬운 방법을 소개하겠다... 2021. 2. 10.

React Js - Global CSS 설정 + styled reset. classNames/bind :global local css 동시 적용 react module.css :global local css 동시 적용하는 방법. classNames/bind를 사용하고 있을 때 className={cx("label","labelTst")} .labelTst는 app.module.css에 등록. React Js - Global CSS 설정 + styled reset css 초기화를 위해 styled-reset 설치 styled-components는 local로 동작하기 때문에 global 한 css를 만들기 위해 GlobalStyles.js 생성 설치 NPM설치 : npm install styled-reset styled-components 얀 살치: yarn add styled-reset styled-components 사용 Components/G.. 2021. 1. 14.

이전 1 2 3 다음

티스토리툴바