Next-auth Next.js 애플리케이션에서 사용자를 인증하고 관리하기 위한 오픈 소스 라이브러리`next-auth`를 사용하면 다양한 인증 제공자(소셜 로그인, 이메일, 로그인 등) 손쉽게 통합할 수 있으며, Oauth 2.0, OpenID Connect, JWT(JSON Web Token)와 같은 다양한 인증 표준도 지원을 한다. 기능 - 다양한 인증 제공자 지원 - OAuth 2.0 : Google, Facebook, Twitter, GitHub 등 소셜 로그인 제공자를 지원한다.자체 로그인 : 이메일 기반의 인증 및 비밀번호 기반 로그인을 구현할 수 있다.타사 로그인 : 엔터프라이즈 인증 제공자(Auth0,Microsoft Azure AD)와도 통합할 수 있다. 세션관리 `next-auth`는..

CSS 모듈 사용import styles from './Home.module.css';function HomePage(){ return Hello World;}export default HomePage; - `Home.module.css` 파일을 만들어 `styles.title` 처럼 사용한다. 전역 CSS 사용//pages/app.jsimport '../styles/globals.css';function MyApp({ Component, pageProps }) { return ;}export default MyApp;- `pages/app.js` 파일에서 임포트 한다. 데이터 패칭 (geStaticProps, getServerSideProps) - Next.js는 데이터 패칭 메서드를 제공하여 서버 사..

파일 기반 라우팅모든 애플리케이션에서 골격은 라우팅이다. next.js에서 라우팅은 파일 시스템 기반이다. `pages` 디렉터리에 파일을 생성하면, 해당 파일의 이름이 자동으로 URL 경로로 매핑된다. 기본 라우팅`pages/index.js` -> `/``pages/about.js` ->`/about``pages/blog/first-post.js` -> `/blog/first-post`동적 라우팅next.js에서는 파일 이름을 대괄호로('[]')로 감싸면 동적 라우팅이 가능하다.URL 경로의 일부를 변수로 처리하여, 다양한 경로를 하나의 페이지 컴포넌트로 처리할 수 있게 해주는 기능즉, URL의 특정 부분이 고정된 값이 아니라, 요청에 따라 변할 수 있는 경우 사용`pages/blog/[id].js` ..

API 라우트 - next.js 에서는 API 라우트를 만들어 서버리스 함수를 쉽게 구현할 수 있도록 해주는 기능이다. API 라우트를 통해 별도의 서버 설정 없이도 서버 측 로직을 작성하고, 클라이언트 측과 데이터를 주고 받을 수 있다.  `pages/api` 디렉토리에서 사용할 수 있으며, 파일 기반의 라우팅 시스템을 따른다.서버리스 함수(Serverless Functions) : 클라우드 컴퓨팅에서 서버를 직접 관리하지 않고, 코드만 작성하여 클라우드 제공자가 알아서 실행해주는 일종의 서버 측 로직이다. 개발자는 함수 코드 작성에만 집중하고, 클라우드 제공자가 자동으로 서버를 프로비저닝, 확장, 관리하며, 함수가 호출될 때만 비용이 청구되는 방식으로 동작한다. 특징)자동 확장 : 요청 수에 따라 자..

JavaScript1.    html 파일과 js 파일을 따로 만들어 준 후, html 안에 소스 작성하면 끝이다.

💡 next.js 알게된 것 - v8 엔진 (검색 엔진) 을 통해 구글 맵 개발 가능 - 서버와 통신할 수 있는 react 라이브러리 - SSR (server side randering) - 풀스택 프레임워크  - 싱글 페이지 어플리케이션 - 라이브러리((react) : 내가 미리 만들어둔 함수를 가져다 쓸 수 있다. 수정 가능, 원하는 대로 유연하게 대처 가능 - 프레임워크(vue) : 코딩하는데 한계가 있음 SSR이란 ? - 서버 사이드 렌더링은 웹 애플리케이션에서 클라이언트 측에서만 렌더링되던 부분을 서버에서도 렌더링하여 완전한 HTML 문서를 클라이언트에게 제공하는 기술이다. 즉, 서버로 부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 기술이다.  SSR은 클라이언트와 서버 간의 협력으로 ..

비주얼스튜디오 추가 설치 (마켓플레이스)korean language pack for visual studio code -  한글 번역open in browser - 단축키를 통해 브라우저 결과 확인 기본 단축키html 파일에 html:5 작성 시 기본문장 단축키 Alt + B : 바라우저 실행Alt + Shift + B : 브라우저 바로 실행ctrl + s : 저장(수시로 해주기)  자바스크립트 코드 작성법 (html 파일 안에 위치) 페이지 위치에 상관없이 정상적으로 실행브라우저 성능이 좋아져 위치에 따른 체감 없음대부분 개발자들이 head 태그에 작성 주석 처리 - 설명글을 남기고 싶을 때 사용 - 코드 실행을 제외하고 싶을 때 사용 // 한줄 주석/*여러 줄 주석여러 줄 주석*/ 내부방식과 외부방식..

JavaScript 란 ?웹 어플리케이션을 구동하기 위해 HTML, CSS(Mark-up언어)와 함께 필수적으로 사용되는 프로그래밍 언어인터넷 초기 브라우저인 Netscape에서 LiveScript 라는 이름으로 시작Client 언어 > 브라우저 동작 C, Java, PHP 언어와 문법적으로 유사JIT(Just In Time) 언어Java와 JavaScript는 전혀 다른 언어 ! Compile Language (컴파일 언어)Interpreter Langage (인터프리터 언어)예시 : C / C++소스 코드를 컴파일을 통해 실행파일을 생성, 실행코드 수정 시 매번 컴파일이 필요코드 오류를 컴파일 과정에서 확인 및 수정 가능최종적으로 기계어가 수행되므로 성능이 우수예시 : Python / JavaScri..