ming.log

[TIL] Vercel로 배포하기 - CI/CD

Fri, 09 Jan 2026 16:10:07 GMT

📚 Vercel로 배포하기

📕 Vercel이란?

정의

정적 웹 사이트 및 애플리케이션을 빌드 & 배포하기 위한 클라우드 플랫폼이다.
프론트엔드 & 백엔드 개발자들이 코드를 더 쉽게 배포하고 호스팅할 수 있게 도와준다.
GitHub, GitLab, Bitbucket 등과 연동하여 CI/CD를 간편하게 설정할 수 있다.
사용성과 확장성이 좋아 많은 개발자들에게 인기가 있다.
Next.js와의 시너지가 극대화되어, 빠르고 효율적인 웹 애플리케이션 개발 및 배포 환경을 구축할 수 있다.

주요 기능

웹 애플리케이션 호스팅: 정적 파일로 구성된 웹 애플리케이션을 배포하고 호스팅한다.
빠른 배포: Git 저장소와 연동하여 변경 사항이 발생하면 자동으로 배포된다.
CI/CD 통합: GitHub Actions, GitLab CI 등과 연동하여 지속적 통합 및 배포를 설정할 수 있다.
환경 변수 관리: 환경 변수 설정을 지원하여 애플리케이션의 보안과 환경 설정을 관리한다.
도메인 관리: 사용자의 도메인을 Vercel 플랫폼에 연결할 수 있도록 도와준다.
서버리스 함수: Serverless Functions를 제공하여 손쉽게 백엔드 기능을 구축할 수 있다.
애널리틱스: 애플리케이션 성능 및 사용 통계를 수집하고 모니터링하는 도구를 제공한다.

📗 Vercel로 배포하기

CLI로 배포하기

프로젝트 디렉토리에서 Vercel CLI를 통해 수동으로 배포할 수 있다.
vercel 명령어를 실행하면 배포 프로세스가 시작된다.
첫 배포 시 로그인 및 프로젝트 설정을 진행하게 된다.
vercel --prod 명령어로 프로덕션 환경에 직접 배포할 수 있다.

GitHub/GitLab 연동 배포 (GitHub Import)

GitHub, GitLab과 Vercel을 연동하여 저장소에 변경사항이 푸시될 때마다 자동으로 배포된다.
Vercel의 GitHub Import는 CI/CD(Continuous Integration / Continuous Deployment) 프로세스의 일부이다.
CI (Continuous Integration)
- 개발자나 팀이 코드 변경을 일일이 검사하지 않고도 코드의 품질과 안정성을 유지하도록 도와주는 프로세스이다.
- 코드 변경이 이루어질 때마다 자동으로 테스트, 빌드 및 코드 검사를 수행하고, 오류를 미리 감지한다.
CD (Continuous Deployment)
- CI의 확장으로, 코드 변경이 CI 테스트를 통과하면 자동으로 프로덕션 환경에 배포되도록 하는 프로세스이다.
- 이를 통해 새로운 기능과 버그 수정 사항이 빠르게 사용자에게 제공된다.

환경 변수 설정

Vercel 대시보드나 CLI를 통해 환경 변수를 설정할 수 있다.
프로젝트 설정의 Environment Variables 섹션에서 추가 및 관리가 가능하다.
Development, Preview, Production 환경별로 다른 값을 설정할 수 있다.

📘 GitHub Import를 통한 배포 과정

배포 과정

Vercel 계정 생성: Vercel 웹사이트에 접속하여 계정을 생성한다.
프로젝트 생성: 대시보드에서 'New Project' 또는 'Import Project' 버튼을 클릭한다.
GitHub Import: 'Import Git Repository'를 선택한 후 GitHub 계정으로 로그인한다.
저장소 선택: 배포하고자 하는 원하는 레포지토리를 선택하여 import한다.
배포 구성: Vercel은 프로젝트를 자동으로 감지하고 배포 구성을 설정한다(빌드 명령어 및 환경 변수는 추가 설정 가능).
배포 실행: 프로젝트를 배포하려면 'Deploy' 버튼을 클릭한다.

배포 후 수정 사항

환경 변수 추가: Vercel 대시보드의 프로젝트 설정에서 필요한 환경 변수를 추가한다.
빌드 명령어 수정: Prisma를 사용하는 경우 빌드 명령어를 npx prisma generate && next build로 수정한다.
OAuth 리다이렉트 URL 추가: 카카오, 네이버, 구글 디벨로퍼 콘솔에서 배포된 Vercel URL을 Redirect URI로 추가한다.
도메인 설정: 커스텀 도메인을 사용하는 경우 Vercel 프로젝트 설정에서 도메인을 추가하고 DNS 설정을 진행한다.

📙 CI/CD 파이프라인 이해하기

CI/CD의 장점

자동화된 배포: 수동 배포 과정을 제거하여 배포 시간을 단축하고 휴먼 에러를 줄인다.
빠른 피드백: 코드 변경 사항에 대한 즉각적인 피드백을 받을 수 있다.
일관된 배포 프로세스: 모든 배포가 동일한 프로세스를 거쳐 일관성을 유지한다.
품질 향상: 자동화된 테스트를 통해 코드 품질을 지속적으로 검증한다.

Vercel의 배포 흐름

코드 푸시: 개발자가 GitHub 저장소에 코드를 푸시한다.
자동 트리거: Vercel이 변경 사항을 감지하고 배포 프로세스를 자동으로 시작한다.
빌드 과정: 설정된 빌드 명령어가 실행되고 정적 파일이 생성된다.
Preview 배포: 브랜치별로 Preview URL이 생성되어 변경 사항을 미리 확인할 수 있다.
프로덕션 배포: main/master 브랜치에 머지되면 프로덕션 환경으로 자동 배포된다.

📒 Vercel 활용 팁

Preview Deployment 활용하기

Pull Request를 생성하면 자동으로 Preview URL이 생성된다.
팀원들과 변경 사항을 공유하고 리뷰하기에 용이하다.
각 커밋마다 새로운 Preview가 생성되어 변경 이력을 추적할 수 있다.

성능 최적화

Vercel은 전 세계 CDN을 통해 콘텐츠를 제공하여 로딩 속도를 최적화한다.
이미지 최적화를 위해 Next.js의 Image 컴포넌트를 활용하면 자동으로 최적화된다.
Analytics 기능을 활성화하여 성능 지표를 모니터링할 수 있다.

보안 관리

환경 변수를 통해 API 키와 같은 민감한 정보를 안전하게 관리한다.
.env.local 파일은 Git에 커밋하지 않도록 .gitignore에 추가한다.
Vercel 대시보드에서만 환경 변수를 관리하여 보안을 강화한다.

[React] react-hook-form

Mon, 22 Dec 2025 12:05:40 GMT

📚 React-hook-form

📕 React-hook-form 이란?

소개

리액트 애플리케이션에서 폼 처리를 더욱 간편하게 만들어주는 라이브러리이다.

특징

폼 관리 : 폼 요소의 상태와 유효성 검사를 관리하기 위한 라이브러리로, 필요한 상태를 간단한 훅으로 제공한다.
훅 기반 : Hook API를 사용하여 컴포넌트 내에서 폼 상태를 관리한다. (ex. useForm, useFieldArray, useWatch)
커스텀 및 다양한 입력요소 지원 : 모든 종류의 입력 요소 (텍스트, 라디오 버튼, 체크박스, 셀렉트 박스 등)와 커스텀 입력 요소를 지원한다.
유효성 검사 : 내장된 유효성 검사 규칙 또는 사용자 정의 검사 함수를 사용하여 입력값을 유효성 검사할 수 있다.
폼 제출 처리 : handleSubmit 함수를 사용하여 폼 제출을 처리하고, 필요한 로직을 실행할 수 있다.
리액트 렌더링 최적화 : 비제어 컴포넌트 방식으로 불필요한 리렌더링을 줄여 성능을 향상시킨다.

장점

높은 성능 : 비제어 컴포넌트를 사용하여 리렌더링 횟수를 최소화한다.
작은 번들 사이즈 : 의존성이 없고 가벼운 라이브러리이다. (약 9KB)
간편한 통합 : 기존 프로젝트에 쉽게 추가할 수 있으며, 다양한 UI 라이브러리와 호환할 수 있다.
TypeScript 지원 : 완벽한 타입스크립트 지원으로 타입 안정성을 보장한다.

📗 설치 및 기본 설정

설치 방법

npm install react-hook-form
yarn add react-hook-form

기본 구조

import { useForm } from "react-hook-form";

function MyForm() {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();

    const onSubmit = (data) => {
        console.log(data);
    };

    return (
        
            
            
        
    );
}

📘 useForm 주요 기능

register

// 기본 사용법


// 유효성 검사와 함께 사용


// 카테고리 선택 예시

폼 입력 요소를 react-hook-form에 등록하는 함수이다.
ref를 통해 입력 요소를 추적하고 값을 관리한다.
유효성 검사 규칙을 설정할 수 있다.

handleSubmit

const onSubmit = async (data) => {
    try {
        const result = await axios.post("/api/stores", data);
        if (result.status === 200) {
            toast.success("맛집을 등록했습니다.");
            router.replace(`/stores/${result.data.id}`);
        }
    } catch (e) {
        toast.error("데이터 생성 중 문제가 생겼습니다.");
    }
};


    {/* 폼 내용 */}

폼 제출을 처리하는 함수이다.
유효성 검사를 통과한 경우에만 제출 함수를 실행한다.
두 개의 콜백 함수 사용할 수 있다. (성공 시, 실패 시)

formState

const {
    formState: { errors, isSubmitting, isDirty },
} = useForm();

// 에러 메시지 표시
{errors.name?.type === "required" && (
    
        필수 입력 사항입니다.
    
)}

// 제출 중 버튼 비활성화

폼의 현재 상태를 담고 있는 객체이다.
errors, isDirty, isValid, isSubmitting 등의 정보를 제공
- errors : 각 필드의 유효성 검사 에러 정보를 담고 있다.
- isDirty : 사용자가 폼의 값을 변경했는지 여부를 나타낸다 (초기값과 다른 경우 true).
- dirtyFields : 변경된 필드들의 목록을 객체 형태로 제공한다.
- isValid : 모든 필드가 유효성 검사를 통과했는지 여부를 나타낸다.
- isSubmitting : 폼이 현재 제출 중인지 여부를 나타낸다 (비동기 제출 시 유용).
- isSubmitted : 폼이 제출되었는지 여부를 나타낸다.
- isSubmitSuccessful : 폼이 에러 없이 성공적으로 제출되었는지 여부를 나타낸다.
- submitCount : 폼이 제출된 횟수를 나타낸다.
- touchedFields : 사용자가 포커스했던 필드들의 목록을 나타낸다.
- isValidating : 유효성 검사가 진행 중인지 여부를 나타낸다 (비동기 검증 시).

setValue

const { setValue } = useForm();

// 주소 검색 API 결과를 폼에 반영
const handleComplete = (data) => {
    let fullAddress = data.address;
    setValue("address", fullAddress);
};

// 데이터 불러오기 후 폼 초기화
useQuery(`store-${id}`, fetchStore, {
    onSuccess: (data) => {
        setValue("id", data.id);
        setValue("name", data.name);
        setValue("category", data.category);
        setValue("phone", data.phone);
    },
});

특정 필드의 값을 프로그래밍 방식으로 설정하는 함수이다.
외부 라이브러리나 API에서 받은 데이터를 폼에 반영할 때 유용하다.

reset

const { reset, resetField } = useForm();

// 전체 폼 초기화


// 특정 필드만 초기화
const onSubmit = async (data) => {
    const result = await axios.post("/api/comments", data);
    if (result.status === 200) {
        resetField("body");
    }
};

폼 전체를 초기 상태로 되돌리는 함수이다.
특정 필드만 초기화하려면 resetField를 사용한다.

watch

const { watch } = useForm();

// 특정 필드 감시
const watchedValue = watch("fieldName");

// 모든 필드 감시
const allValues = watch();

// 조건부 렌더링
{watch("category") === "한식" && (
    
)}

특정 필드의 값을 실시간으로 감시하는 함수이다.
입력 값에 따라 다른 필드를 동적으로 변경할 때 사용한다.

📙 유효성 검사 규칙

기본 규칙

required : 필수 입력 항목으로 지정한다.
min / max : 숫자의 최소/최대값을 설정한다.
minLength / maxLength : 문자열의 최소/최대 길이를 설정한다.
pattern : 정규식 패턴을 사용한 검증을 수행한다.

커스텀 검증

 
                /[A-Z]/.test(value) || "대문자를 포함해야 합니다.",
            hasNumber: (value) => 
                /[0-9]/.test(value) || "숫자를 포함해야 합니다.",
            minLength: (value) => 
                value.length >= 8 || "최소 8자 이상이어야 합니다."
        }
    })}
/>

// 비동기 검증
 {
            const exists = await checkUsernameExists(value);
            return !exists || "이미 사용 중인 아이디입니다.";
        }
    })}
/>

validate : 사용자 정의 검증 함수를 작성 가능, 복잡한 검증 로직 구현에 사용한다.

에러 메시지 표시

{errors.name && (
    
        {errors.name.message}
    
)}

// type별 다른 메시지 표시
{errors.name?.type === "required" && (
    
        필수 입력 사항입니다.
    
)}
{errors.name?.type === "minLength" && (
    
        최소 2자 이상 입력해주세요.
    
)}

errors 객체를 통해 검증 실패 시 에러 메시지를 표시할 수 있다.

📒 고급 기능 및 이슈 해결 방법

useFieldArray

import { useForm, useFieldArray } from "react-hook-form";

function DynamicForm() {
    const { control, register } = useForm({
        defaultValues: {
            items: [{ name: "", price: 0 }]
        }
    });

    const { fields, append, remove } = useFieldArray({
        control,
        name: "items"
    });

    return (
        
            {fields.map((field, index) => (
                
                    
                    
                    
                
            ))}
            
        
    );
}

동적으로 입력 필드를 추가/제거할 수 있는 훅이다.
배열 형태의 데이터를 다룰 때 유용하다.

useWatch

import { useForm, useWatch } from "react-hook-form";

function WatchExample() {
    const { control, register } = useForm();

    const watchedValue = useWatch({
        control,
        name: "category",
        defaultValue: ""
    });

    return (
        
            

            {watchedValue === "A" && (
                
            )}
            {watchedValue === "B" && (
                
            )}
        
    );
}

watch보다 더 세밀한 제어가 가능한 훅이다.
특정 필드의 변경을 감지하여 다른 로직을 실행할 수 있다.

리렌더링 최적화

// 비효율적
const allValues = watch();

// 효율적
const specificValue = watch("fieldName");

// 또는 useWatch 사용
const specificValue = useWatch({
    control,
    name: "fieldName"
});

watch 사용 시 불필요한 리렌더링이 발생할 수 있다.
useWatch나 컨트롤러를 사용하여 최적화할 수 있다.

기본값 설정

// 방법 1: defaultValues 사용 (초기 렌더링에만 적용)
const { register } = useForm({
    defaultValues: {
        name: "기본 이름",
        email: "default@email.com"
    }
});

// 방법 2: setValue 사용 (동적으로 변경 가능)
useEffect(() => {
    setValue("name", fetchedData.name);
    setValue("email", fetchedData.email);
}, [fetchedData]);

// 방법 3: reset 사용 (전체 폼 초기화)
useEffect(() => {
    reset(fetchedData);
}, [fetchedData]);

수정 폼에서 기본값을 설정할 때는 useForm의 defaultValues를 사용하거나 setValue를 사용한다.
defaultValues는 초기 렌더링 시에만 적용된다.

타입 지정

interface FormData {
    name: string;
    email: string;
    age: number;
    category: string;
}

const {
    register,
    handleSubmit,
    formState: { errors },
} = useForm();

// register 사용 시 자동완성 지원

 // 타입 에러

제네릭을 사용하여 폼 데이터의 타입을 명확하게 지정한다.
타입 안정성을 보장하고 자동완성을 활용할 수 있다.

비동기 제출 처리

const {
    handleSubmit,
    formState: { isSubmitting },
} = useForm();

const onSubmit = async (data) => {
    try {
        await api.post("/endpoint", data);
        toast.success("성공!");
    } catch (error) {
        toast.error("실패!");
    }
};

async/await를 사용하여 비동기 로직을 처리한다.
로딩 상태를 관리하여 사용자 경험을 개선한다.

📓 참고

[ react-hook-form 공식문서] (https://react-hook-form.com/)

[TIL] Prisma

Wed, 07 May 2025 02:46:14 GMT

📚 prisma

📕 prisma 란?

소개

Node.js 기반의 ORM(Object-Relational Mapping)도구이다.
데이터베이스와의 상호작용을 단순화하고 개발 생산성을 높이는 데 도움을 주는 도구이다.
SQL 쿼리를 직접 작성하는 대신 자바스크립트 코드로 쿼리를 작성할 수 있게 해주며, 타입 세이프한 쿼리 작성을 통해 런타임 에러를 방지해준다.
데이터베이스 스키마 변경을 감지하고 자동으로 마이그레이션을 처리해준다.
복잡한 쿼리 및 데이터베이스 관계를 다루기 위한 강력한 문법을 제공한다.

구성요소

Prisma Client : 프리즈마의 Node.js & TypeScript 용 쿼리 작성 클라이언트
Prisma Migrate : 프리즈마의 마이그레이션 시스템
Prisma Studio : 프리즈마의 데이터를 보고 편집하는 GUI

📗 Prisma 기능

Prisma Client

데이터베이스와 상호작용하기 위한 자바스크립트 코드를 자동으로 생성해준다.
데이터베이스의 스키마를 정의하고 관리한다.
데이터베이스 스키마 변경을 추적하고 적용할 수 있는 마이그레이션 기능을 제공한다.
복잡한 데이터베이스 관계를 정의하고 쿼리 기능을 제공한다.

Prisma 스키마

Model : 데이터 베이스의 특정 테이블이나 컬렉션과 대응한다.
Field : 모델 내에서 필드는 해당 모델이 가지는 데이터 속성을 나타낸다. 데이터 타입과 제약조건을 지정할 수 있다.
Relation : 모델 간의 연결을 나타낸다. 외래 키를 관리하고 연관된 데이터를 쿼리할 수 있다.

📘 Prisma 사용법

초기 셋팅

Prisma Schema에 generator를 정의한다.

generator client {
    provider = "prisma-client-js"
}

prisma/client 패키지 설치 후 prisma를 생성한다.

yarn add @prisma/client
prisma generator

Prisma Client를 인스턴스화해서 사용할 수 있다.

import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

CRUD 문법 예시

데이터를 생성하기 위해서 create API를 사용한다.

const user = await prisma.user.create({
    data: {
        email: "user@prisma.io",
        name : "user",
    },
})

prisma로 데이터를 조회하기 위해서는 findMany 또는 findUnique와 같은 메서드를 사용하면 된다.
where, orderBy, include, select 등의 옵션으로 쿼리를 조절 할 수 있다.

const users = await prisma.user.findMany({
    where: {
        age: {
            gte: 18
        }
    },
    orderBy: {
        name: "asc"
    },
    include: {
        posts: true
    },
    select: {
        id: true,
        name: true
    }
});

데이터를 수정하기 위해 Update 메서드를 사용한다.
하나만 수정하기 위해서는 Update 메서드를 사용하고, 여러 레코드를 한번에 업데이트 하려면 updateMany 메서드를 사용한다.

const updateUser = await prisma.user.update({
    where: {
        id: 1
    },
    data: {
        name: "Upadated Name"
    }
});

데이터를 삭제하기 위해서는 delete 메서드를 사용한다.
하나만 삭제하기 위해서는 delete 메서드, 여러 레코드 삭제를 위해서는 deleteMany 메서드를 사용한다.

const deleteUser = await prisma.user.delete({
    where: {
        id: 1
    }
});

const deleteUsers = await prisma.user.deleteMany({
    where: {
        email: {
            contains: "prisma.io",
        },
    },
});

마이그레이션

스키마를 DB에 반영하기 위해서는 마이그레이션 명령어를 작성한다.

npx prisma migrate dev
npx prisma migrate dev --name init

마이그레이션 된 파일들은 prisma/migration에 생성. 현재 날짜와 시간, 그리고 —name 문자열 조합의 이름을 가진다.

ㄴprisma
    ㄴschema/prisma
    ㄴmigrations
        ㄴ20250413052907_init
            ㄴmigration.sql

마이그레이션 파일들은 직접 수정하면 안 된다.
항상 prisma migrate 명령어를 통해서만 파일 생성 / 디비 수정을 해야한다.
다음과 같은 파일이 만들어지면, 실제 테이블이 DB에도 만들어지며, 데이터 CRUD가 가능해진다.

📙 prisma 셋팅방법

셋팅 방법

yarn add --dev prisma
npx prisma init

// supabase db url .env 에 설정 이후

yarn add @prisma/client

// 연결 확인
npx prisma studio 

// 스키마 파일 작성 후 마이그레이션 진행

새 프로젝트 시작 (개발 환경)

// 초기 설정
npx prisma init

// schema.prisma 작성 (모델 정의)

// 마이그레이션 생성 및 DB 반영
npx prisma migrate dev --name init

// prisma 클라이언트 생성
npx prisma generate

기존 데이터베이스에서 시작할 때

// 초기 설정
npx prisma init

// 기존 DB에서 모델 불러오기
npx prisma db pull

// prisma 클라이언트 생성
npx prisma generate

📒 prisma data seed

data seed 란?

초기 데이터나 테스트 데이터를 생성하고 채우는 과정이다.
스키마 모델링 이후, 마이그레이션 명령어를 입력하면 된다.

package.json 파일에 seed 스크립트 추가한다.

yarn add —dev ts-node

"prisma" : {
  "seed" : "ts-node --compiler-options
  {\"module\":\"CommonJS\"} prisma/seed.ts"
},

Prisma 폴더 내에 seed.ts 파일 생성 후 seed 코드를 작성한다.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function seedData() {
    // seed 코드 작성
}

async function main() {
    await seedData();
}

main()
    .catch((e) => {
        console.log(e);
        process.exit(1);
    })
    .finally(() => {
        prisma.$disconnect();
    });

seed 함수 예시

async function seedData() {
    data?.["DATA"]?.map(async (store) => {
        const storeData = {
            phone: store?.tel_no,
            ...
        };
        const result = await prisma.store.create({data: storeData});
        console.log(result);
    });
}

npx prisma로 데이터 시드를 실행한다.

npx prisma db seed

[Next.js] CSR vs SSR vs SSG

Tue, 15 Apr 2025 07:07:26 GMT

📚 CSR vs SSR vs SSG

📕 CSR

소개

클라이언트 측에서 페이지 렌더링을 수행하는 방식이다.
사용자의 브라우저에서 JavaScript를 사용하여 페이지를 동적으로 생성한다.
서버는 빈 HTML 페이지만 제공하고, 이후 데이터 & 페이지를 렌더링하는 역할은 클라이언트가 수행한다.
주로 웹 애플리케이션에서 클라이언트 측 라우팅 및 상호작용이 많은 경우에 사용한다.

장점

상호 작용성 : 클라이언트에서 페이지를 렌더링 하므로 사용자와의 상호 작용이 빠르게 이루어진다.
서버 부하 감소 : 서버는 초기 HTML만 제공하고 이후에는 클라이언트에서 데이터를 로드한다.
자연스러운 앱 경험 : 싱글 페이지 애플리케이션 (SPA)으로 구현되는 경우가 많은데, 이는 자연스러운 앱과 유사한 사용자 경험을 제공한다.

단점

SEO 어려움 : 검색엔진은 JS 실행 후의 콘텐츠를 색인화하기 때문에, 비교적 설정하기 까다롭다.
그 외 : 초기 로딩 후 콘텐츠 표시까지 시간이 걸리는 문제, 성능 문제, JS에 의존하는 문제 등이 있다.

📗 SSR

소개

서버에서 페이지를 미리 생성한 뒤, 사용자가 요청 할 때마다 페이지를 렌더링하는 방식이다.
사용자가 페이지에 접속할 때 서버에서 미리 HTML을 생성하고 클라이언트로 보낸다.
사용자에게 초기 내용을 빠르게 표시하고 검색 엔진 최적화를 개선하는데 도움을 준다.
주로 동적 콘텐츠를 포함하고 있는 웹 애플리케이션에 적합하다.

장점

SEO 최적화 : 서버에서 렌더링 된 페이지들은 검색 엔진에서 쉽게 색인화 가능
초기 로딩 속도 개선 : 사용자에게 초기 컨텐츠를 더 빠르게 표시할 수 있다.
데이터 최신화 : 매 요청마다 최신 데이터를 가져올 수 있다.

단점

서버 부하 : 매 요청마다 서버에서 페이지를 가져오면서 서버 자원을 많이 사용할 수 있다.
느린 네트워크 연결 : 서버에서 HTML을 생성해서 가져오는데, 느린 네트워크 영향을 받으면 초기 로딩이 느려질 수 있다.

📘 SSG

소개

SSG는 페이지를 사전에 빌드 시점에 한 번 생성하고 정적 파일로 제공하는 방식이다.
여러번 요청을 해도 빌드된 파일을 제공한다. (변화 X)
기본적으로 Next는 SSG 방식으로 데이터를 페칭한다.
하지만 정적 데이터를 사용하므로 동적 콘텐츠에는 제한이 있다.
주로 블로그, 포트폴리오 웹 사이트, 회사 홈페이지 등 정적인 사이트에 사용한다.

장점

SEO 우수 : 초기 로딩 속도가 빨라 SEO가 우수하다.
서버 부하 낮음 : 미리 빌드된 페이지를 제공하므로 서버 부하가 낮다.

단점

동적 데이터에 제한적이다.
업데이트 된 데이터에 대한 재빌드가 필요하다.

📙 요약

CSR vs SSR vs SSG

CSR : 초기 로딩이 빠르지만 SEO가 어려우며 클라이언트에서 데이터 로딩 필요
SSR : 초기 로딩이 빠르고 SEO가 우수하지만 서버부하가 증가할 수 있음
SSG : 초기 로딩이 빠르고 SEO 가 우수하며 서버부하가 낮지만 동적 데이터에 제한이 있음

⇒ next.js는 세가지 방법 모두 지원! 적절하게 사용하는것이 중요

[TIL] Firebase

Wed, 12 Mar 2025 08:59:34 GMT

📚 Firebase

📕 Firebase란?

소개

실시간 데이터베이스, 인증, 스토리지, 분석 등 다양한 기능을 제공하는 모바일 및 웹앱 개발 플랫폼이다.
2011년 스타트업에서 시작했다. (실시간 채팅 기능) → 2014년 구글이 인수했다. (백엔드 서버리스)
백엔드 서버를 구축하고 관리할 필요 없이 google cloud platform 이용해 빠르고 효율적인 개발이 가능하다.
특히 실시간 기능 서비스나, 클라이언트 사이드 집중하고싶을 때, 초기 프로토타입 개발에 유용하다.

주요 기능

Authentication : 다중 플랫폼 로그인을 간편하게 구현할 수 있다.
- 이메일 인증, 소셜 미디어 계정 인증, 전화번호 인증방식을 제공한다.
- 보안 강화, 사용자 인증 과정 안전하게 처리한다.
Firestore : NoSQL 데이터베이스이다.
- Firebase에서 제공하는 NoSQL 형식의 클라우드 데이터 베이스이다.
- 실시간 데이터 동기화를 지원한다. (ex. 실시간 채팅)
Storage: 사진 및 동영상을 저장할 수 있다.
- 사용자의 파일 저장 및 공유가 가능하고, 강력한 보안을 기대할 수 있다.
Hosting : 웹앱 호스팅이 가능하다.
- 정적 및 동적 콘텐츠 모두 호스팅 가능하며, 웹 앱을 간단 배포할 수 있다.

📗 Firebase 특징

장점

백엔드 서버없이 개발이 가능해 시간이 절약되고, 클라이언트에 집중 가능하다.
사용자 데이터 실시간 공유, 실시간 채팅 등 실시간 데이터 베이스 기반 기능 개발이 쉽다.
google cloud platform 서비스 간편하게 이용 및 분석 가능하다.

단점

NoSQL 데이터 베이스의 간단한 쿼리만 사용 가능하다.
확장성이 중요한 경우 비용이 빠르게 증가할 수 있다.
타 백엔드 서비스로 전환하는 경우 추가적인 작업이 필요하다. (마이그레이션 어려움)

📘 Firebase 설정 방법

프로젝트 생성

프로젝트 만들기

Firebase 앱 설정

생성된 Firebase 프로젝트 페이지에서, “웹”을 선택하고 앱의 별칭을 입력할 수 있다.
Firebase SDK를 추가하는 과정에서, Firebase가 제공하는 구성 객체를 복사한다.

React 프로젝트에 Firebase 설치

yarn add firebase

React 앱에서 Firebase 초기화

import firebase from 'firebase/app';

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appID: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

React 앱에서 firebase 사용

import 'firebase/auth';
import 'firebase/firestore';

const auth = firebase.auth();
const db = firebase.firestore();

[CSS] 인접 형제 선택자

Thu, 27 Feb 2025 22:00:58 GMT

📚 인접 형제 선택자

📕 + 선택자

기본 문법

A + B {
...
}

A와 같은 부모를 가지면서, 바로 다음에 나오는 B 요소만 선택된다.
A와 B 사이에 다른 요소가 있으면 적용되지 않는다.

예제

첫번째 제목
이 문장은 빨간색이 됩니다.
이 문장은 영향을 받지 않습니다.

h1 + p {
 color: red;
}

첫 번째
바로 뒤에 오는
만 빨간색으로 변경된다.
두 번째
는 스타일이 적용되지 않는다.
h1과 같은 부모를 가진 p 중에서 바로 뒤에 위치한 한 개만 선택되는 것이다.

📗 ~ 선택자

기본 문법

A ~ B { 
  ...
}

같은 부모를 가진 A 뒤에 위치하는 모든 B 요소를 선택한다.
바로 뒤가 아니라도 선택 가능하다. (형제 관계만 유지하면 된다.)

예제

input#img-1:checked ~ .carousel__dots label#img-dot-1,
input#img-2:checked ~ .carousel__dots label#img-dot-2,
input#img-3:checked ~ .carousel__dots label#img-dot-3 {
  background-color: black;
  opacity: 1;
}

input#img-1:checked ~ .carousel__dots label#img-dot-1
- #img-1이 체크되면 #img-dot-1의 스타일이 변경된다.
현재 선택된 슬라이드에 해당하는 도트 버튼을 강조하는 역할을 한다.

📘 ~ vs +(인접 형제 선택자)의 차이

선택자	의미	적용 대상
`A + B`	A 바로 뒤에 나오는 B	A와 바로 인접한 B 1개
`A ~ B`	A 뒤에 나오는 모든 B	A와 같은 부모를 가진 모든 B

예제

h1 + p { color: red; } /* h1 바로 뒤의 p만 선택 */
h1 ~ p { color: blue; } /* h1 뒤에 오는 모든 p 선택 */

[TIL] VueJS

Wed, 19 Feb 2025 12:50:29 GMT

📚 Vue.js

📕 현대적 웹 프레임워크의 정립

정립 과정

MVVM 패턴의 등장 : 화면과 데이터의 분리, 템플릿과 데이터의 변화를 통해 화면을 제어한다.
SPA (Single Page Application) 가 대중화 되었다.
모듈화와 빌드 도구가 등장하였다.
컴포넌트 기반 개발이 등장하였다.
현대 프레임워크가 정립되었다.

MVVM에서 컴포넌트로의 진화

MVVM 패턴을 통해 개발이 훨씬 간단해지고 규모가 커졌다.
대규모 서비스 개발 과정에서 UI들이 반복적으로 나타나는 것 발견하였다.
화면과 기능이 결합되어 반복적으로 등장하는 UI 형태를 재사용하고자 하는 요구가 발생하게 되었다.
별도의 재사용 가능한 컴포넌트로 만들어 조립해서 개발하는 방식이 등장하였다.

📗 Vue.js 소개

등장 배경

knockout.js, angular.js 등의 프레임워크들의 발전을 바탕으로 등장하게 되었다.
더 직관적이고 간소화된 현대적 MVVM 프레임워크 개념으로 정립되었다.

📘 Vue.js 핵심 개념

Directive

지시어를 분리하여 독립적이고 간결한 지시어로 작성한다. (knockout의 data-bind)
- Text Binding :
  {{message}}
- Attribute Binding :
  :id=””>,:src=””>
- Event Listener :
  @click=””>

양방향 바인딩

value의 변화에 model의 값을 변경, model 값의 변경에 따라 Control의 value값을 변경하는 기능이다.
- v-model=”data”/>

구조 변화

조건부 렌더링 : 조건이 되었을 때만 보이는 지시자, 주로 템플릿과 사용한다.