분류 전체보기 (395) 썸네일형 리스트형 [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) 공격과 같은 보안 취약점이 발생할 수 있다. 악의적인 사용.. [JS] Map 에 대한 정리 Map 키와 값을 매핑하는 자료 구조로, ECMAScript 6 (ES6)부터 도입되었다. Map을 사용하면 데이터를 효과적으로 저장하고 검색할 수 있다. 다음과 같이 new 키워드를 사용해지만 생성할 수 있다. 만일 new 를 사용하지 않으면 typeerror 가 뜬다. const examMap = new Map(); Map 의 특징 - 키와 값을 매핑하는 자료 구조로, 키와 값 모두 다양한 데이터 유형을 가질 수 있다. - 키는 중복될 수 없다. 만일 중복된 키를 넣으려고 하면 마지막에 추가한 키의 값으로 업데이트 된다. - 원소를 추가한 순서대로 순서를 보존한다. - Map은 반복 가능한(iterable) 객체로, for...of 루프 등을 사용하여 순회할 수 있다. 이 때 오해하면 안 되는 점은 .. [JS] 자바스크립트의 렌더링 블록과 방지방법에 대한 정리(defer 와 async) 렌더링 블록 렌더링 블록이란 이름 그대로 브라우저의 렌더링을 막는다는 의미이다. 즉, 브라우저가 HTML 를 렌더링하는 것을 막는 것을 뜻하는데, 이러한 현상은 HTML을 파싱하는 도중 자바스크립트(스크립트 코드)나 CSS 가 존재하는 경우 발생하게 된다. 블록 리소스 앞서 렌더링 블록이 브라우저의 렌더링을 막는 것이라 했는데, 여기서 렌더링을 막는 장애물을 블록 리소스라고 한다. 블록 리소스는 앞서 자바스크립트 코드나 CSS 가 해당된다. 자바스크립트의 렌더링 블록 렌더링 블록이 발생하는 이유 중 스크립트 태그로 인한 것이 있다. 보통 HTML 파싱 중에 스크립트를 만나게 되면 해당 스크립트를 파싱하기 위해 HTML 파싱은 잠시동안 중지되게 된다. 이로 인해 사용자는 로딩중인 빈화면을 오랫동안 보게 되.. [js] 클로저에 대한 정리 클로저에 대한 정의 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 여기서 어휘적 환경은 Lexical Environment 을 의미하며, 렉시컬 환경은 해당 범위에서 선언된 변수 및 함수 등의 정보를 저장하고 관리하는 자료구조이다. 여기서 왜 함수와 함수가 선언된 어휘적 환경의 조합이 클로저인가에 대해 생각해보기 전에 클로저 자체는 그리 특별한 현상은 아니라는 점 부터 알고 넘어가야 할듯하다. 클로저는 함수가 생성될 때 해당 함수가 정의된 렉시컬 환경에서 선언되어 있는 변수나 함수를 참조하는 현상을 의미한다. 즉, 함수가 생성되면 자동으로 발생하는 현상이 클로저 라는 소리이다. 그런데 이러한 클로저는 개념적으로 사용하는 경우와 실제 이 개념을 활용할 때 언급하는 클로저는 의미는 같지만, 목적은 .. [NginX] 임시 공부 정리 보호되어 있는 글입니다. 이전 1 ··· 22 23 24 25 26 27 28 ··· 50 다음
