useSession
ex.
import { useSession, signIn, signOut } from "next-auth/react";
function MyComponent() {
const { data: session } = useSession();
if (session) {
return (
<>
<p>Signed in as {session.user.email}</p>
<button onClick={() => signOut()}>Sign out</button>
</>
);
}
return (
<>
<p>Not signed in</p>
<button onClick={() => signIn()}>Sign in</button>
</>
);
}: Next.js의 인증 라이브러리인 next-auth에서 제공하는 후긍로, 사용자의 세션 정보를 관리하고 접근할 수 있으며, 현재 로그인된 사용자의 세션 데이터를 가져올 수 있고, 로그인 상태를 확인하고 이에 따라 UI를 조건부 렌더링 할 수 있음.
로그인 상태에 따라 다른 UI를 렌더링 하며, signIn함수와 signOut함수를 통해 로그인과 로그아웃을 처리함.
useRouter
ex.
import { useRouter } from "next/router";
function MyComponent() {
const router = useRouter();
const handleClick = () => {
router.push("/about"); // "/about" 페이지로 이동
};
return (
<div>
<p>Current path: {router.pathname}</p>
<button onClick={handleClick}>Go to About Page</button>
</div>
);
}: next.js에서 제공하는 훅으로, 라우터 객체에 접근할 수 잇게 해줌. 이를 통해 페이지 전환, 쿼리 파라미터 접근, 현재 경로 정보 등을 얻을 수 있음. useRouter로 현재 경로와 같은 라우팅 정보를 가져올 수 있으며, router.push로 프로그램적 페이지 이동이 가능함.
특징
1. 페이지 이동 : 프로그램적으로 페이지를 이동하거나, 쿼리 파라미터를 변경할 수 있음.
2. 라우팅 정보 접근 : 현재 경로, 쿼리 파라미터, 페이지 간 전환 등의 라우팅 정보를 얻을 수 있음.
✏ 쿼리 파라미터(Query Parameters)
: 웹 애플리케이션에서 URL을 통해 서버로 데이터를 전달하기 위해 사용되는 방법. 쿼리 파라미터는 주로 클라이언트가 서버에 특정 요청을 보낼 때 추가 정보를 전달하거나 필터링, 검색, 페이지네이션 등의 목적을 위해 사용됨.
구조
기본 구조
ex.
http://example.com/page?parameter1=value1¶meter2=value2: URL에서 쿼리 파라미터는 물음표(?)로 시작하며, 키=값 쌍의 형태로 지정됨. 여러 개의 쿼리 파라미터는 앰퍼샌드(&)로 구분됨.
예시.
https://example.com/search?query=javascript&sort=asc&page=2query=javascript : query라는 파라미터에 javascript라는 값을 전달함.
sort=asc : sort라는 파라미터에 asc라는 값을 전달하여 데이터를 오름차순으로 정렬하라는 의미.
page=2 : page라는 파라미터에 2라는 값을 전달하여 2번째 페이지의 데이터를 요청함.
사용 사례
1. 검색 : 사용자가 입력한 검색어를 서버로 전달하여 관련된 데이터를 필터링함.
2. 필터링 : 특정 조건에 맞는 데이터를 필터링하기 위해 사용됨.
3. 정렬 : 데이터를 특정 기준에 따라 정렬함.
4. 페이지네이션 : 대량의 데이터를 나눠서 보여줄 때, 특정 페이지의 데이터를 요청함.
5. API 요청 : API에서 특정 데이터를 요청할 때 쿼리 파라미터를 사용하여 원하는 데이터를 가져옴.
clsx
: css 클래스 이름을 조건에 따라 쉽게 조합할 수 있도록 도와주는 작은 Javascript 유틸리티.
예를 들어, 여러 클래스를 조건부로 적용하거나, 배열이나 객체 형태의 클래스를 사용할 수 있음.
ex.
import clsx from 'clsx';
const isActive = true;
const buttonClass = clsx('btn', {
'btn-active': isActive,
'btn-disabled': !isActive,
});
// buttonClass는 "btn btn-active"로 설정됩니다.
format (date-fns)
: Javascript의 날짜를 다루기 위한 라이브러리로, format 함수는 날짜를 특정 형식으로 포맷팅하는 데 사용됨.
ex.
import { format } from 'date-fns';
const date = new Date();
const formattedDate = format(date, 'yyyy-MM-dd');
console.log(formattedDate); // "2024-08-09"
//여기서의 format 함수는 현재 날짜를 년-월-일 형식으로 반환
쿠키
:웹 브라우저에 저장되는 작은 데이터 조각으로, 클라이언트와 서버 간의 상태나 세션 정보를 저장하는데 사용됨.
쿠키는 서버가 클라이언트에 설정하고, 이후 클라이언트가 해당 서버로 요청할 때마다 자동으로 포함됨.
도메인, 경로, 만료일, 보안 플래그 등을 설정할 수 있음
세션
: 서버에 저장되는 사용자별 데이터의 집합. 세션은 서버에서 관리되며 ,클라이언트는 세션 ID를 통해 자신의 세션에 접근함. 세션은 일반적으로 클라이언트가 서버와 상호작용하는 동안 상태를 유지하기 위해 사용되며, 세션 ID는 쿠키로 관리되기도 함.
쿠키와 세션의 차이
1. 저장 위치
쿠키 : 클라이언트(브라우저) 측에 저장
세션 : 서버 측에 저장
2. 보안
쿠키: 클라이언트 측에 저장되므로 상대적으로 보안에 취약함. 만료 기간을 지정할 수 있음.
세션 : 서버 측에서 관리되며, 상대적으로 보안성이 높음. 일반적으로 브라우저를 닫으면 세션이 종료됨.
3. 사용 목적
쿠키 : 사용자의 설정이나 로그인 상태 유지 등 클라이언트 측 정보를 저장.
세션 : 사용자 로그인 정보 등 보안이 필요한 상태를 서버 측에서 유지
가상 DOM (Virtual DOM)이 렌더링 시 기여하는 방식
: 가상 DOM은 실제 DOM의 가벼운 사본을 메모리에 유지하여 React와 같은 프레임워크에서 빠르고 효율적인 업데이트를 가능하게 함.
변화가 발생하면 가상 DOM은 이를 기존 가상 DOM과 비교하여 최소한의 변경사항을 실제 DOM에 반영함. 이를 diffing 알고리즘이라 하며, 실제 DOM 조작보다 훨씬 빠르게 수행됨.
가상 DOM 덕분에 React는 효율적으로 UI를 업데이트 할 수 있으며, 불필요한 DOM 변경을 줄여 성능을 최적화 함.
HTTP와 HTTPS
HTTP : Hyper Text Transfer Protocol의 약자로, 웹 브라우저와 서버 간에 하이퍼텍스트 문서(HTML)을 전송하는 프로토콜. HTTP는 기본적으로 텍스트를 암호화하지 않고 전송하므로 보안에 취약.
HTTPS : Hyper Text Transfer Protocol Secure의 약자로, HTTP에 SSL/TLS 프로토콜을 추가하여 데이터를 암호화하여 전송함. 이는 보안성과 무결성을 보장함.
✏ SSL / TLS 프로토콜
: SSL(보안 소켓 계층, Secure Sockets Layer)와 TLS(전송 계층 보안, Transport Layer Security)는 인터넷을 통해 전송되는 데이터의 보안을 강화하기 위한 암호화 프로토콜임. SSL은 원래 1990년대 중반에 넷스케이프(Netscape)에서 개발되었으며, TLS는 그 후속 버전으로 SSL의 개선된 버전임. 현재 SSL 3.0 이후의 버전은 더 이상 사용되지 않고 있으며, 대부분의 시스템에서는 TLS 프로토콜이 사용됨.
SSL/TLS의 주요 기능
1. 암호화 (Encryption) : 데이터를 전송하기 전에 암호화하여, 중간에 가로채어도 원래의 내용을 이해할 수 없도록 함.
2. 인증 (Authentication) : 서버와 클라이언트가 서로 신뢰할 수 있는지 확인함. 이를 위해 SSL/TLS는 디지털 인증서를 사용하여 서버의 신원을 확인함.
3. 데이터 무결성 (Integrity) : 전송 중 데이터가 변경되거나 손상되지 않았는지 확인함.
작동방식 (핸드셰이크 과정(Handshake)
1. 클라이언트 헬로(Client Hello) : 클라이언트가 서버에 접속을 시도하고, 사용 가능한 암호화 방식, TLS 버전, 무작위 값(Random Value) 등을 서버에 보냄
2. 서버 헬로 (Server Hello) : 서버는 클라리언트의 요청을 받아들이고, 선택한 암호화 방식, 인증서, 무작위 값 등을 클라이언트에게 보냄.
3. 서버 인증서 전송 (Server Certificate) : 서버는 자신의 공개키(Public Key)가 포함된 인증서를 클라이언트에게 보냄.
4. 세션 키 생성 (Session Key Generation) : 클라이언트는 서버의 공개키로 데이터를 암호화한 후, 이 데이터와 함께 세션 키를 생성하여 서버로 보냄. 서버는 자신의 개인키(Private Key)로 이를 복호화 함.
5. 대칭키 암호화 (Encrypted Communication) : 이후의 통신은 세션 키를 사용한 대칭 키 암호화 방식으로 진행되어, 빨고 안전하게 데이터를 전송함.
HTTP와 HTTPS의 차이
1. 보안
HTTP : 암호화되지 않은 텍스트 전송으로 보안에 취약
HTTPS : SSL/TLS를 통해 데이터를 암호화하여 보안성 확보.
2. 포트 번호
HTTP : 기본 포트는 80
HTTPS : 기본 포트는 443
3. 성능
HTTPS는 암호화/복호화 과정이 추가되므로 HTTP보다 약간 느릴 수는 있지만, 현대 웹에서는 이 차이가 거의 무시할 수 있을 정도로 줄어들었음.
✏ 암호화 / 복호화
: 암호화(Encryption)는 평문(Plain Text)을 암호문(Cipher Text)으로 변환하여, 인가되지 않은 사용자가 데이터를 읽응ㄹ 수 없도록 보호화는 과정. 반대로 복호화(Decryption)는 암호문을 다시 평문으로 변환하는 과정.
암호화의 종류
1. 대칭키 암호화(Symmetric Key Encryption)
: 하나의 키를 사용하여 데이터를 암호화하고 복호화합니다. 이 키는 암호화와 복호화에 동일하게 사용되므로, 키의 관리와 보호가 매우 중요합니다.
ex. AES(Advanced Encryption Standard)
2. 비대칭키 암호화(Asymmetric Key Encryption):
서로 다른 두 개의 키(공개키와 개인키)를 사용하여 데이터를 암호화하고 복호화합니다. 공개키로 데이터를 암호화하고, 이에 대응하는 개인키로 복호화할 수 있습니다.
ex. RSA(Rivest-Shamir-Adleman)
암호화/복호화의 과정 예시
대칭키 암호화
1. 데이터 "Hello World"를 대칭키로 암호화하면, 예를 들어 "aX1cE9!"와 같은 암호문이 생성됩니다.
2. 수신자는 동일한 대칭키로 "aX1cE9!"를 복호화하여 원래의 "Hello World"를 얻습니다.
비대칭키 암호화
1. 서버는 자신의 공개키를 클라이언트에게 제공하고, 클라이언트는 이 공개키로 데이터를 암호화합니다.
2. 암호화된 데이터는 서버의 개인키를 사용해 복호화됩니다.
프로토콜
: 컴퓨터 네트워크에서 데이터를 교환하는 규칙과 절차의 집합. 네트워크 프로토콜은 서로 다른 시스템 간의 통신을 가능하게 하며, 이를 통해 데이터를 정확하고 일관되게 전달할 수 있음.
네트워크 환경에서 다양한 종류의 통신을 관리하고 제어하는 중요한 규칙을 정의하며, 이를 통해 네트워크 내에서 일관성 있고 신뢰성 있는 데이터 전송이 가능함.
ex.
HTTP/HTTPS : 웹에서 하이퍼텍스트 문서를 전송하기 위한 프로토콜
FTP : 파일을 서버와 클라이언트 간에 전송하기 위한 프로토콜
SMTP : 이메일을 전송하기 위한 프로토콜
TCP/IP : 인터넷 프로토콜 스위트로, 데이터 전송을 위한 기본적인 프로토콜 집합.