[JS] 나를 위한 배열과 Date 메서드 컨닝페이퍼

01배열 조작 메서드1. push배열의 맨 뒤에 요소를 추가합니다.const arr = [1, 2, 3];arr.push(4);console.log(arr);// 출력결과: [1, 2, 3, 4] 2. pop배열의 마지막 요소를 제거하고 반환합니다.const arr = [1, 2, 3];const removed = arr.pop();console.log(arr);console.log(removed);// 출력결과: [1, 2]// 출력결과: 3 3. shift배열의 첫 번째 요소를 제거하고 반환합니다.shift는 원본 배열을 변경하므로, 성능이 중요한 경우 빈번히 사용하지 않는 것을 권장합니다.const arr = [1, 2, 3];const removed = arr.shift();console.log(..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

[Next.js] Page Router? Next.js에서 클릭 몇 번이면 끝난다고! 1탄

Next.js를 쓰다 보면 "어? 이건 어떻게 하지?" 싶은 순간들이 있습니다. 이번에는 네비게이션, 프리패칭, 그리고 레이아웃 설정을 쉽게 이해할 수 있도록 정리해볼게요. 어렵게 생각하지 말고 가볍게 읽어주세요!01네비게이션페이지를 쉽게 이동하는 방법, 한번 알아볼까요?Next.js에서 페이지 이동은 정말 간단합니다. Link 컴포넌트와 useRouter 훅만 기억하면 됩니다.import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter } from "next/router";export default function App({ Component, page..

• format_list_bulleted Next.js
• · 2025. 1. 22.
• textsms

[Next.js] React의 찐친 확장판?

01Next.js 란 무엇인가?Next.js는 React.js의 확장판 느낌이 물씬 나는 프레임워크입니다.“라이브러리가 아니라고?” 맞아요, 프레임워크예요. 이게 왜 중요하냐면, 개발자와 코드의 관계가 완전히 달라집니다.라이브러리 vs 프레임워크: 누가 더 자유로울까?프레임워크는 이렇게 말하죠:“내가 틀을 다 정해놨으니 너는 그 안에서 놀아. 내가 다 해줄게!”덕분에 모든 기능이 기본 제공되지만, 대신 자유도는 낮아집니다.반면 라이브러리는:“자, 이거 쓰고 싶은 대로 써. 네 마음대로 만들어봐!”자유도는 최고지만, 대신 직접 만들어야 할 게 많습니다.Next.js는 이 프레임워크의 특성을 활용해 사전 렌더링 같은 고급 기술을 쉽게 사용할 수 있도록 만들어졌습니다.02사전 렌더링: CSR의 단점을 극복한 ..

• format_list_bulleted Next.js
• · 2025. 1. 17.
• textsms

Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..

• format_list_bulleted PROJECT NOTES
• · 2024. 12. 31.
• textsms

유저 상태를 Provider로 비비고, Context로 비비자!

React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다! 01Context와 ProviderReact의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.1. Context 란?Context는 데이터를 저장하는 "저장소" 역할을 합니다.React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.import { createContext, useContext } from "react";// Context 생성export const AuthContext = crea..

• format_list_bulleted PROJECT NOTES
• · 2024. 12. 26.
• textsms

GitHub 로그인 구현? 생각보다 너무 쉽다! (진짜 쉽다…)

GitHub OAuth를 이용하면 소셜 로그인을 쉽게 구현할 수 있습니다.이 글에서는 GitHub OAuth App을 등록하는 방법부터 로그인 흐름, 구현까지 간단히 정리해 보겠습니다.01Github OAuth App 등록하기1. 설정 메뉴로 이동하기먼저 GitHub에 로그인한 후, Settings > Developer settings > OAuth Apps로 이동합니다. 2. 앱 정보 입력하기필요한 정보를 입력해 앱을 등록합니다.Application name: 웹사이트 이름HomePage URL: 내 웹사이트 주소Application description: 사이트 설명 (선택 사항)Authorization callback URL: 인증 완료 후 GitHub 인증 서버가 코드를 보낼 URL모든 정보를 입..

• format_list_bulleted PROJECT NOTES
• · 2024. 12. 19.
• textsms

네 구글 로그인이 안전한 이유, 사실은 OAuth 덕분이지

구글이나 소셜 계정으로 로그인하는 건 정말 편리하죠! 그런데 문득 궁금해졌습니다."내 비밀번호를 외부 사이트에 알려주지 않아도 로그인이 되는 이유는 뭘까?"찾아보니, 그 답은 바로 OAuth라는 기술이었습니다.이번 글에서는 OAuth가 어떻게 작동하는지, 그 원리를 제가 보기 편하게 정리해 보겠습니다." 인증과 인가 "인증(Authentication): 인증은 사용자가 누구인지 확인하는 과정입니다.예를 들어, 로그인 화면에서 ID와 비밀번호를 입력해 본인임을 증명하는 것이죠.인증이 성공하면, 서비스는 "이 사람은 OOO다"라고 신원을 확인합니다.인가(Authorization): 인가란 인증된 사용자가 어떤 권한을 가지는지 결정하는 과정입니다.예를 들어, "OOO 사용자가 특정 파일에 접근하거나 데이터를 ..

• format_list_bulleted PROJECT NOTES
• · 2024. 12. 15.
• textsms

쿠키? 세션? JWT? 로그인 뒤에 숨어있는 이 복잡한 친구들

회원 기능을 구현하려면 세 가지 주요 방식을 선택할 수 있습니다.첫 번째는 쿠키(cookie), 두 번째는 세션(session), 그리고 세 번째는 JWT(Json Web Token)를 이용한 토큰 방식입니다.또한, 구글이나 페이스북 계정을 활용한 OAuth 방식도 많이 사용되지만,이번 글에서는 쿠키, 세션, JWT의 기본 동작 원리와 차이점을 중심으로 정리해 보겠습니다. 😊01Http? Https?회원 인증을 할 때 사용하는 쿠키, 세션, JWT 같은 방식은 결국 브라우저(클라이언트)와 서버가 정보를 주고받는 규칙 위에서 작동합니다. 이 규칙을 정하는 게 바로 HTTP와 HTTPS입니다.HTTP (HyperText Transfer Protocol)HTTP는 브라우저와 서버가 서로 대화할 수 있는 기본..

• format_list_bulleted PROJECT NOTES
• · 2024. 12. 15.
• textsms