분류 전체보기 (399) 썸네일형 리스트형 [react] 리액트에서 상태에 대한 정리(1) - 상태 - 본인이 이해한 react의 state에 대하여 정리한 글 입니다. - 리액트에서 상태(state)와 상태관리(state management) 리액트에서 상태란 컴포넌트 별로 기억해야하는 데이터이다. 이 데이터는 이미지도 될 수 있고, 고객이 장바구니에 담아둔 물품정보 일수도 있다. 즉, 리액트에서 상태관리란 이러한 데이터를 효율적으로 관리하는 것이라 이해할 수 있다. 컴포넌트 간에 데이터를 전달하는 방법과 업데이트하는 방식을 간소화하고, 어플리케이션의 상태를 일관성있게 유지하는 모든 것이 상태관리라고 볼 수 있다. 리액트에서 상태는 스냅샷으로 관리된다. 앞서 정리한 상태를 다시 정리해보면 상태는 스냅샷으로 관리된다. 풀어서 설명하자면, 상태는 카메라로 찍은 사진처럼 보관(-> 리액트의 특정한 메모리 .. [eslint] 리액트에서 Do not use a triple slash reference for react-scripts, use `import` style instead @typescript-eslint/triple-slash-reference 에러가 뜬다면? 이 문제는 보통 react-app-env.ts 파일에서 뜨는 문제이다. 아래 이미지를 살펴보면 /// 이 부분과 reference 태그를 사용하고 있는데, 리액트에서는 이렇게 사용하지 말고 import 를 사용해야 한다고 에러를 띄우는 것이다. 해결 방법은 간단하다. 에러에서 나온 해결방법대로 /// ref ... 부분을 다음과 같이 바꿔주면 된다. import "react-scripts" [eslint] react17 버전 이상임에도 'React' must be in scope when using JSX react/react-in-jsx-scope 가 뜬다면 React 17 버전 이상에서는 더 이상 React 를 최상단에 import 해올 필요가 없으나, react 에서 npx eslint 를 통해 검사를 하면 아래와 같은 에러가 뜨는 것을 볼 수 있었다. 위 문제를 해결하려면 .eslintrc.json 파일에서 rules 의 옵션으로 다음과 같이 React 를 import 하지 않아도 경고가 뜨지 않도록 값을 지정하면 된다. { "rules": { "react/react-in-jsx-scope": "off" } } [react] window.scroll 를 이용한 무한 스크롤 구현 시 문제되는 코드를 개선한 내용을 저장한 포스트 리팩토링 전 간략하게 정리해보면, 리팩토링 전의 코드는 스크롤 이후 추가적으로 불러오는 데이터를 카운트할 때 부모 컴포넌트로 부터 props 를 전달받아와서 사용했고, 이를 JSX 내에서 slice 를 활용해 중복으로 데이터를 불러오도록 하고 있다. 누가 봐도 전체적으로 성능 문제를 일으킬 수 있고, props 로 전달받은 데이터가 변동될 때 마다 컴포넌트가 전체적으로 리렌더링되는 등 문제가 많은 코드로 작성되어 있다. 그리고 아래 코드에서는 나오지 않았지만, 부모 컴포넌트에서 window.scroll 를 이용해 모든 자식 컴포넌트에서 불필요한 이벤트 호출이 발생하고 있다. 그리고 데이터가 추가적으로 로딩이 되는 경우 사용자는 데이터가 로딩되고 있는지 확인이 불가능했다. 아래 코드를 처음 작성했을 때는 .. [React Error] Error: [Immer] An immer producer returned a new value ... 을 해결하려면 발생 상황 개인 프로젝트 작업을 하던 중 Redux-toolkit 을 사용하여 axios.then 내부에서 dispatch 함수에 상태를 업데이트하는 레듀서 함수를 호출할 때 발생하였다. 발생 원인 리덕스의 레듀서는 내부적으로 불변성을 유지하기위해 immer 라이브러리를 사용한다. 다시 말해, 기존값을 수정하여 새로운 값을 반환(return)하는 변이성을 방지하는 역할을 수행한다. 즉, return 을 허용하지 않는다. 그러나 , 사용자의 실수로 추상화된 immer 라이브러리의 이러한 return 배제에 관한 규칙을 깨버리게 된다면(즉, 기존값을 건드려서 새로운 값을 반환하는 경우), 이에 대한 경고로서 에러를 띄우는데 그것이 아래의 메시지 이다. [React Error] Error: [Immer] An.. [HTML/JS] 웹 접근성을 고려한다면, 꼭 알아야 하는 속성 aria-controls 와 aria-selected 에 대한 정리 WAI-ARIA 웹 개발을 할 때 편리한 레이아웃을 셋팅하여 사용성과 편의성을 증진시키는 것도, 화려한 화면과 인터렉션을 통해 살아움직이면서도 아름다운 사이트를 만드는 것도 웹 페이지에 접근하는 사용자에게 흥미를 유발하는 점에서 중요하지만, 간과하지 말아야 하는 점은 스크린 리더 및 보조도구를 사용하는 사용자의 웹 접근성을 보장하는 일인 것 같다. 특히, 아무런 의미 없는 태그인 , 의 무분별한 사용은 스크린 리더를 사용하는 사용자에게 웹 페이지의 유의미한 정보를 제공해주지 못하기 때문에 되도록 사용을 지양하는 것이 좋다고 하는데, 그럼에도 불구하고 사용해야 하는 상황에서는 웹 접근성을 향상시키기 위해 사용되는 WAI-ARIA (Web Accessibility Initiative - Accessible .. [Next.js] next-auth 를 활용하여 깃허브 소셜로그인 기능 만들기(클라이언트 API) Next-auth 란? NextAuth.js는 Next.js 애플리케이션을 위한 완전한 오픈 소스 인증 솔루션 이며, 처음부터 Next.js와 Serverless를 지원하도록 설계되어 나온 라이브러리이다. next-auth 를 사용하면, 개발자는 auth 기능을 추가하기 위한 복잡한 코드를 추가할 필요 없이 라이브러리 내부적으로 처리해주기 때문에 간편하게 auth 로그인 기능을 추가할 수 있게 해준다. Next.js 13.2 이후 부터의 next-auth 13.2 버전 이전에서는 pages/api/auth/[...nextauth].js 로 권장되는 경로에 접근하여 아래와 같이 코드를 작성한다(직접 작성하기 보다는 공식 문서에 권장 코드가 잘 나와 있으니 참고해서 작성하면 된다.). import NextA.. [JS] 자바스크립트에서 innerHTML 을 사용하지 말라고 하는 이유에 관한 정리 innerHTML 이란? 웹 개발에서 사용되는 JavaScript의 속성 중 하나로, 해당 요소의 내부 HTML 콘텐츠를 변경하거나 삽입하는 데 사용된다. 바닐라 자바스크립트에서 innerHTML 을 사용하면 다음과 같은 형태가 된다. const H1 = document.querySelector('h1') H1.innerHTML ="안녕하세요!" 사실 이 자체만 본다면, 간편하게 HTML 요소를 브라우저에 표시할 수 있으니까 문제가 없어 보인다. 그럼 왜 문제가 된다는 걸까? 사용하지 말아야 하는 이유 보안 취약점 innerHTML을 사용하면 사용자가 입력한 데이터를 직접 HTML에 삽입할 수 있다. 이렇게 하면 크로스 사이트 스크립팅 (XSS) 공격과 같은 보안 취약점이 발생할 수 있다. 악의적인 사용.. 이전 1 ··· 22 23 24 25 26 27 28 ··· 50 다음
