분류 전체보기 (401) 썸네일형 리스트형 [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] 임시 공부 정리 보호되어 있는 글입니다. [리액트 npm error] CRA 환경에서 nth-check 취약점 문제 어느 순간 갑자기 nth-check 와 관련한 취약성 문제가 발생하여 이에 대한 정보들을 찾아보았고, 간략하게 정리하고 넘어간다. 참고로 이 문제를 해결하기 위해 npm adult fix --force 를 입력하게 되면 80개 이상의 새로운 취약점을 만나게 되는 마술을 보게 될지도 모른다. 근데, 굳이 이렇게 고칠 필요가 없다. 애초에 고칠 필요가 없으며, 고치는 것이 잘못된 행동이다. 왜 그런 것인지는 아래에 관련 자료를 링크해 두었다. 에러 코드 nth-check [next.js] 16. 컴포지션 패턴 본 내용은 next.js 공식 사이트를 한글로 번역하여 정리한 것입니다. 정보 변경, 오역 등의 문제가 있을 수 있으니 자세한 내용은 공식 사이트를 활용해주세요 Rendering: Composition Patterns | Next.js When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components. Here's a quick summar nextjs.or.. 이전 1 ··· 23 24 25 26 27 28 29 ··· 51 다음
