아래 버전에서 구현한 방법입니다. "next": "14.0.4", "next-auth": "^4.24.5" "typescript": "^5.3.2" Next.js 14에서 App Router를 사용하여 NextAuth로 OAuth 인증을 구현하는 과정은 몇 가지 핵심 단계를 포함합니다. 이 포스팅에서는 간단하게 이러한 단계들을 설명하겠습니다. 1. NextAuth 설치 및 설정 먼저, NextAuth를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행하세요: npm install next-auth # or yarn add next-auth 2. NextAuth 설정 파일 생성 nextauth 설정 파일을 app/api/auth/[...nextauth]/route.ts 디렉토리 내에 생성합니다. 이..
CSS-in-JS는 모던 프론트엔드 개발, 특히 React 커뮤니티에서 점점 더 일반적으로 사용되고 있습니다. styled-components는 Tagged templates의해 구동되어 스타일만 정의하면 일반적인 react 컴포넌트를 생성할 수 있기 때문에 다른 CSS-in-JS 목록에서 눈에 띕니다. 이는 CSS 모듈성과 같은 중요한 문제를 해결하고, 중첩과 같은 non-CSS 기능을 제공하며, 이 모든 기능은 별도의 설정 없이 사용할 수 있습니다. 개발자는 CSS 클래스의 고유 이름에 대해 생각할 필요도 없으며, 클래스에 대해 전혀 생각할 필요도 없습니다. 그럼 styled-components는 어떻게 이를 해결할까요? styled-components에 익숙하지 않다면 우선 공식문서를 읽어보세요. ..
"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것입니다. styled-components와 Tagged Template Literals 먼저 Tagged Template Literals에 대해 간단하게 설명하자면, 템플릿 리터럴은 자바스크립트 문자열을 생성할 때 백틱(```)을 사용하는 방법입니다. Tagged Template Literal은 템플릿 리터럴 앞에 함수를 위치시켜 해당 문자열을 처리하는 방식입니다. 예시: function tag(strings, ...values) { return strings.reduce..
Styled Components의 특징 Styled Components는 React 애플리케이션의 컴포넌트에 스타일을 적용하는 라이브러리입니다. CSS-in-JS 라이브러리 중 하나로, JavaScript를 통해 CSS 스타일을 정의하고, 이를 컴포넌트와 연결합니다. 그렇다면, Styled Components가 내부적으로 어떻게 동작하는지 살펴보겠습니다. 1. JavaScript로 CSS 생성 먼저, Styled Components는 JavaScript 문법을 사용하여 CSS를 정의합니다. import styled from 'styled-components'; const Button = styled.button` background-color: blue; color: white; `; 여기서 styled..
CSS 스타일 속성에 따라 리플로우(reflow)가 발생할 수도 있고 발생하지 않을 수도 있습니다. 리플로우는 요소의 크기, 위치 또는 구조가 변경될 때 브라우저가 해당 변경 사항을 계산하고 적용하는 프로세스를 말합니다. 리플로우는 성능에 영향을 주므로 최소화하는 것이 중요합니다. 리플로우가 일어나는 주요 CSS 속성에는 다음과 같은 것들이 있습니다: width, height: 요소의 크기를 변경할 때 리플로우가 발생합니다. padding, margin: 패딩과 마진을 변경하면 요소의 크기와 위치가 변경되므로 리플로우가 발생합니다. position: absolute, fixed: 절대 위치나 고정 위치로 요소를 배치하면 주변 요소의 배치가 변경되므로 리플로우가 발생합니다. display: none: 요소..
OWASP(Open Web Application Security Project)는 웹 애플리케이션 보안을 개선하고 보호하기 위한 비영리 단체입니다. OWASP는 매년 업데이트되는 "OWASP Top 10"이라는 보안 취약점 목록을 제공하여 개발자, 보안 전문가 및 기업들이 웹 애플리케이션에서 가장 주요한 취약점에 대해 인식하고 대응할 수 있도록 돕고 있습니다. 이번 포스팅에서는 OWASP Top 10에 대해 자세히 알아보도록 하겠습니다. 1. 인젝션 (Injection) 인젝션은 악의적인 사용자가 애플리케이션에 악성 코드를 주입하는 공격입니다. 주요한 예로 SQL 인젝션, OS 명령어 인젝션, LDAP 인젝션 등이 있습니다. 2. 인증 및 세션 관리 (Broken Authentication) 약한 인증 ..
next.js https://dane-itview.tistory.com/entry/Nextjs-datafetch-method Next.js 이 4가지는 뭐가 다를까요? 🤔 getInitialProps / getServerSideProps / getStaticPaths / getStaticProps 여러분, 안녕하세요! Next.js 프레임워크로 멋진 웹사이트를 만들려는 분들을 위해, 제가 오늘 여러분들에게 Next.js에서 사용하는 4가지 데이터 가져오기 기법을 소개해드릴 거예요! 이 글을 통해 dane-itview.tistory.com https://dane-itview.tistory.com/entry/SSR-vs-SSG-Nextjs SSR vs SSG: Next.js의 렌더링 대결! 어떤 것을 택할까..
여러분, 안녕하세요! Next.js 프레임워크로 멋진 웹사이트를 만들려는 분들을 위해, 제가 오늘 여러분들에게 Next.js에서 사용하는 4가지 데이터 가져오기 기법을 소개해드릴 거예요! 이 글을 통해 각각 어떻게 다른지 이해하고, 어떤 상황에 어떤 기능을 사용해야 하는지 파악해봅시다! 데이터 가져오기 네 가지 기법의 살짝 둘러보기 getInitialProps 🕵️♂️ - 요청 시점에 서버와 클라이언트 모두에서 실행됩니다. - 페이지의 초기 상태를 설정해줍니다. getServerSideProps 🏃♂️ - 요청 시점에 서버에서 실행되어 데이터를 가져옵니다. - 서버 사이드 렌더링(SSR)의 빛을 발합니다. getStaticPaths 🛣 - 빌드 시점에 정적 경로를 생성합니다. - 필요한 경로만 정적으..
