odada

프론트엔드 개발 월별 계획

oodada — Wed, 15 Jan 2025 13:52:14 +0900

Phase 1: 프로젝트 초기 설정 (1월 3주차)

1주차: 개발 환경 구성

Next.js 프로젝트 생성 및 기본 설정
TypeScript, ESLint, Prettier 설정
shadcn/ui, Tailwind CSS 설정
기본 디렉토리 구조 설정

2주차: 기본 컴포넌트 및 상태관리 설정

공통 컴포넌트 개발
- Layout (Header, Sidebar)
- Button, Input, Table 등 기본 UI 컴포넌트
- Form 컴포넌트
Zustand 상태관리 설정
- 인증 상태 관리
- UI 상태 관리
- 기본 데이터 상태 관리

Phase 2: 페이지 구현 (2월 ~ 4월)

2월: 인증 및 기본 페이지

로그인/회원가입 페이지
대시보드 레이아웃
My Page 구현
메인 대시보드 UI

3월: Order & RMA 페이지

Order 관련 페이지
- 제품 리스트 페이지
- 주문 프로세스 페이지
- 주문 이력 페이지
RMA 관련 페이지
- RMA 신청 페이지
- RMA 상태 조회 페이지
- RMA 이력 페이지

4월: Inventory & Training 페이지

Inventory 관련 페이지
- 재고 조회 페이지
- 입/출고 관리 페이지
Training 관련 페이지
- 교육 과정 목록 페이지
- 교육 신청 페이지
- 수료증 발급 페이지

Phase 3: 기능 고도화 (5월 ~ 6월)

5월: 검색 및 필터링

검색 기능 구현
- 전역 검색
- 페이지별 상세 검색
필터링 기능 구현
- 날짜 필터
- 상태 필터
- 카테고리 필터
정렬 기능 구현
페이지네이션 구현

6월: 데이터 관리 및 사용자 경험

데이터 테이블 기능 확장
- 데이터 정렬
- 컬럼 커스터마이징
- CSV 내보내기
차트 및 데이터 시각화
사용자 설정 기능
알림 시스템 구현

Phase 4: API 통신 및 안정화 (7월)

7월 1-2주차: API 통합

Mock API를 실제 API로 교체
SAP 연동
- Customer Code 검증
- Part Number 검증
- Order 상태 연동
MES/PLM 연동
- DOA 처리
- Part 사양 조회
에러 처리 구현

7월 3-4주차: 테스트 및 안정화

단위 테스트 작성
통합 테스트
성능 최적화
버그 수정
문서화

세부 작업 우선순위

1순위: 핵심 기능

로그인/인증
Order 시스템
RMA 관리
Inventory 조회

2순위: 확장 기능

Training 시스템
상세 검색/필터링
데이터 시각화
사용자 설정

3순위: 부가 기능

알림 시스템
데이터 내보내기
리포트 생성
관리자 기능

협업 포인트

백엔드 팀과의 협업

API 스펙 논의: 2월 말
연동 테스트: 6월 초
통합 테스트: 7월 초

디자인 팀과의 협업

디자인 시스템 협의: 1월 말
컴포넌트 디자인 검토: 2월 초
UI/UX 피드백: 매월 말

기획팀과의 협업

요구사항 구체화: 프로젝트 시작 전
기능 우선순위 조정: 매월 초
사용성 테스트: 6월 말

위험 요소 및 대응 계획

예상 위험

API 연동 지연
복잡한 비즈니스 로직
성능 이슈
브라우저 호환성

대응 방안

Mock 데이터를 활용한 병행 개발
단계적 기능 구현
초기부터 성능 고려
크로스 브라우저 테스트 자동화

Next.js와 MongoDB 연동하여 CRUD API 만들기

oodada — Thu, 26 Dec 2024 09:22:29 +0900

0. 주요 변경사항 정리

MongoDB 연결 설정 추가
- 환경 변수 (MONGODB_URI) 설정
- 데이터베이스 연결 유틸리티 생성
- Mongoose 모델 정의
API 라우트 변경
- MongoDB CRUD 작업으로 변경
클라이언트 컴포넌트 수정
- id 대신 _id 사용
- 날짜 형식 처리 추가

1. MongoDB 설정

MongoDB Atlas 가입하기

1-1. MongoDB Atlas 설정

1. MongoDB Atlas에서 연결 문자열을 가져오는 방법:

"Connect" 버튼을 클릭합니다
"Connect your application"을 선택합니다
Driver는 "Node.js"를 선택합니다
거기서 보이는 연결 문자열을 복사합니다 (예: mongodb+srv://username:<password>@cluster0...)

2. 프로젝트에 환경 변수 설정:

프로젝트 루트 폴더에 .env 파일을 생성합니다

아래와 같이 작성합니다:

MONGODB_URI=mongodb+srv://username:<password>@cluster0.xxxxx.mongodb.net/<database>?retryWrites=true&w=majority

<password>는 MongoDB Atlas에서 생성한 데이터베이스 사용자의 실제 비밀번호로 교체
<database>는 사용하고 싶은 데이터베이스 이름으로 교체 (예: "blog")

3. Network Access 설정:

왼쪽 메뉴에서 "Network Access"를 클릭합니다
"Add IP Address" 버튼 클릭
개발 중이므로 "Allow Access from Anywhere"를 선택하고 "0.0.0.0/0" 입력
Confirm 버튼 클릭

4. Database Access 설정:

왼쪽 메뉴에서 "Database Access"를 클릭합니다
"Add New Database User" 버튼 클릭
Username과 Password를 설정합니다 (이 정보는 연결 문자열에 사용됩니다)
"Add User" 버튼 클릭

1-2. 프로젝트에 MongoDB 설치

npm install mongodb mongoose

1-3. 환경 변수 설정

.env 파일 생성:

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/<database>?retryWrites=true&w=majority

2. MongoDB 연결 설정

연결 유틸리티는 "데이터베이스로 가는 도로" 같은 것
모델은 "데이터를 담을 상자의 설계도" 같은 것

2-1. MongoDB 연결 유틸리티 생성

역할 : 데이터 베이스 연결을 관리
주요 기능
- MongoDB와의 연결 상태를 관리 : 매 요청마다 새로운 연결을 만들지 않음
- 연결이 이미 있으면 재사용(캐싱) : 연결을 재사용하여 성능 향상
- 없으면 새로 연결 : 안정적인 데이터 베이스 연결 유지

작동방식

if (이미_연결되어있나?) {
기존_연결_재사용();
} else {
새로운_연결_생성();
}

moongose를 사용하여 MongoDB와 연결 Doc

src/lib/mongodb.js 파일 생성:

import mongoose from 'mongoose';

// MongoDB 연결 문자열을 환경변수에서 가져옴
const MONGODB_URI = process.env.MONGODB_URI;

// 연결 문자열이 없으면 에러 발생
if (!MONGODB_URI) {
  throw new Error('MONGODB_URI must be defined');
}

// 전역 변수에 mongoose 연결 정보를 저장
// 이렇게 하면 서버가 재시작되어도 연결이 유지됨
let cached = global.mongoose;

// 처음 실행될 때는 cached가 없으므로 초기화
if (!cached) {
  cached = global.mongoose = {
    conn: null,     // 현재 연결 객체
    promise: null   // 연결 시도중인 Promise
  };
}

async function connectDB() {
  // 이미 연결되어 있다면 그 연결을 재사용
  if (cached.conn) {
    return cached.conn;
  }

  // 연결 시도중이 아니라면 새로운 연결 시도
  if (!cached.promise) {
    const opts = {
      bufferCommands: false,  // 연결되기 전에 명령어 버퍼링 비활성화
    };

    // MongoDB 연결 시도
    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }

  try {
    // 연결이 완료될 때까지 대기
    cached.conn = await cached.promise;
  } catch (e) {
    // 연결 실패시 promise 초기화하고 에러 던지기
    cached.promise = null;
    throw e;
  }

  return cached.conn;
}

export default connectDB;

2-2. Post 모델 생성

역할 : MongoDB의 데이터를 다루는 객체
주요 기능
- 게시글의 데이터 구조 정의 (제목, 내용, 날짜 등) : 일관된 데이터 구조 유지
- 필수 입력값 지정 : 데이터 유효성 검사 자동화
- 데이터 유효성 검사 규칙 설정 : MongoDB 작업을 더 쉽게 수행

예시

{
title: { // 제목 필드
  type: String,        // 문자열 타입
  required: true,      // 필수 입력
  trim: true          // 앞뒤 공백 제거
},
content: { // 내용 필드
  type: String,
  required: true
}
}

models/Post.js 파일 생성:

import mongoose from 'mongoose';

// 이미 모델이 있다면 그것을 사용, 없다면 새로 생성
const PostSchema = new mongoose.Schema({
  title: {
    type: String,
    required: [true, '제목을 입력해주세요.'], // 필수 입력
    trim: true, // 앞뒤 공백 제거
  },
  content: {
    type: String,
    required: [true, '내용을 입력해주세요.'],
  },
  createdAt: {
    type: Date,
    default: Date.now, // 기본값은 현재 시간
  }
});

// 모델이 이미 있다면 그것을 사용, 없다면 새로 생성
export default mongoose.models.Post || mongoose.model('Post', PostSchema);

3. API 라우트 수정

3-1. 전체 게시글 API (`app/api/posts/route.js`)

import { NextResponse } from 'next/server';
// MongoDB 연결을 위한 유틸리티 함수 가져오기
import connectDB from '@/lib/mongodb';
// MongoDB의 Post 모델 가져오기 
import Post from '@/models/Post';

export async function GET() {
 try {
   // MongoDB 연결
   await connectDB();
   // Post 모델을 사용해 모든 게시글을 찾고, 생성일 기준 내림차순 정렬
   const posts = await Post.find({}).sort({ createdAt: -1 });
   return NextResponse.json(posts);
 } catch (error) {
   return NextResponse.json(
     { error: '게시글을 불러오는데 실패했습니다.' },
     { status: 500 }
   );
 }
}

export async function POST(req) {
 try {
   // MongoDB 연결
   await connectDB();
   const data = await req.json();

   if (!data.title || !data.content) {
     return NextResponse.json(
       { error: '제목과 내용은 필수입니다.' },
       { status: 400 }
     );
   }

   // Post 모델을 사용해 새 게시글 생성
   const post = await Post.create(data);
   return NextResponse.json(post, { status: 201 });
 } catch (error) {
   return NextResponse.json(
     { error: '게시글 작성에 실패했습니다.' },
     { status: 500 }
   );
 }
}

3-2. 개별 게시글 API (`app/api/posts/[id]/route.js`)

import { NextResponse } from 'next/server';
import Post from '@/models/Post';
// MongoDB의 ObjectId 검증을 위한 mongoose import
import mongoose from 'mongoose';
// MongoDB 연결을 위한 유틸리티 함수 가져오기
import connectDB from '@/lib/mongodb';

// MongoDB의 ObjectId가 유효한지 검사하는 함수
const isValidObjectId = (id) => mongoose.Types.ObjectId.isValid(id);

export async function GET(req, { params }) {
 try {
   // MongoDB 연결
   await connectDB();

   // Next.js 13에서는 params를 비동기로 처리해야 함
   const resolvedParams = await Promise.resolve(params);

   // 게시글 ID가 유효한 MongoDB ObjectId 형식인지 검사
   if (!isValidObjectId(resolvedParams.id)) {
     return NextResponse.json(
       { error: '유효하지 않은 게시글 ID입니다.' },
       { status: 400 }
     );
   }

   // Post 모델을 사용해 특정 ID의 게시글 찾기
   const post = await Post.findById(resolvedParams.id);
   if (!post) {
     return NextResponse.json(
       { error: '게시글을 찾을 수 없습니다.' },
       { status: 404 }
     );
   }

   return NextResponse.json(post);
 } catch (error) {
   return NextResponse.json(
     { error: '게시글을 불러오는데 실패했습니다.' },
     { status: 500 }
   );
 }
}

export async function PUT(req, { params }) {
 try {
   // MongoDB 연결
   await connectDB();
   const resolvedParams = await Promise.resolve(params);

   // ID 유효성 검사
   if (!isValidObjectId(resolvedParams.id)) {
     return NextResponse.json(
       { error: '유효하지 않은 게시글 ID입니다.' },
       { status: 400 }
     );
   }

   const data = await req.json();
   // findByIdAndUpdate: ID로 게시글을 찾아 업데이트
   // $set: MongoDB 업데이트 연산자, new: true는 업데이트된 문서 반환
   const post = await Post.findByIdAndUpdate(
     resolvedParams.id,
     { $set: data },
     { new: true, runValidators: true }
   );

   if (!post) {
     return NextResponse.json(
       { error: '게시글을 찾을 수 없습니다.' },
       { status: 404 }
     );
   }

   return NextResponse.json(post);
 } catch (error) {
   return NextResponse.json(
     { error: '게시글 수정에 실패했습니다.' },
     { status: 500 }
   );
 }
}

export async function DELETE(req, { params }) {
 try {
   // MongoDB 연결
   await connectDB();
   const resolvedParams = await Promise.resolve(params);

   // ID 유효성 검사
   if (!isValidObjectId(resolvedParams.id)) {
     return NextResponse.json(
       { error: '유효하지 않은 게시글 ID입니다.' },
       { status: 400 }
     );
   }

   // findByIdAndDelete: ID로 게시글을 찾아 삭제
   const post = await Post.findByIdAndDelete(resolvedParams.id);
   if (!post) {
     return NextResponse.json(
       { error: '게시글을 찾을 수 없습니다.' },
       { status: 404 }
     );
   }

   return NextResponse.json({ message: '게시글이 삭제되었습니다.' });
 } catch (error) {
   return NextResponse.json(
     { error: '게시글 삭제에 실패했습니다.' },
     { status: 500 }
   );
 }
}

4. 클라이언트 컴포넌트 수정

기존 클라이언트 컴포넌트의 대부분은 그대로 사용할 수 있습니다. MongoDB의 _id를 사용하도록 수정이 필요한 부분만 변경하면 됩니다.

4-1. 게시글 목록 페이지 수정 (`app/posts/page.js`)

// posts.map() 부분 수정
// mongodb는 자동으로 생성하는 고유 식별자를 _id로 사용
{posts.map((post) => (
  <Link
      key={post._id} // id 대신 _id 사용
      href={`/posts/${post._id}`} // id 대신 _id 사용
      className="cursor-pointer block"  // block 추가하여 전체 영역 클릭 가능하게
    >
    <h2>{post.title}</h2>
    <p>{post.content}</p>
    <span>{new Date(post.createdAt).toLocaleDateString()}</span>
  </Link>
))}

4-2. 게시글 상세 페이지 수정 (`app/posts/[id]/page.js`)

// app/posts/[id]/edit/page.js
import { use } from "react";
import EditForm from "./editForm";

export default function EditPage({ params }) {
  // next.js 13부터 params가 promise로 전달됨 (비동기 데이터)
  // Promise는 바로 사용할 수 없음
  // `use()` 훅을 사용하여 unwrap 해야 함
  const resolvedParams = use(params);
  return <EditForm postId={resolvedParams.id} />;
}

axios로 받은 응답에는 여러 정보가 포함되어 있는데, 실제 데이터는 data 속성에 들어있습니다.

{
  data: {
    // 실제 서버에서 받은 데이터
    title: "게시글 제목",
    content: "게시글 내용"
  },
  status: 200,        // HTTP 상태 코드
  statusText: "OK",   // 상태 메시지
  headers: {},        // 응답 헤더
  config: {}          // 요청 설정
}

// app/posts/[id]/editForm.js
'use client';

// ... imports 동일

export default function EditForm({ postId }) {
  // ... router와 state 설정 동일

  useEffect(() => {
    const fetchPost = async () => {
      try {
        // MongoDB에 저장된 특정 게시글을 ID로 조회
        const { data } = await axios.get(`/api/posts/${postId}`);
        setTitle(data.title);
        setContent(data.content);
      } catch (error) {
        console.error('Error fetching post:', error);
        alert('게시글을 불러올 수 없습니다.');
        router.push('/posts');
      }
    };

    fetchPost();
  }, [postId, router]);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // MongoDB의 게시글 데이터 업데이트
      await axios.put(`/api/posts/${postId}`, { title, content });
      router.push('/posts');
    } catch (error) {
      console.error('Error updating post:', error);
      alert('수정에 실패했습니다.');
    }
  };

  // ... return 부분 동일
}

4-2. 날짜 형식 수정

날짜 포맷팅 함수는 여러 컴포넌트에서 재사용할 수 있으므로, utils 폴더에 따로 만드는 것이 좋습니다

// utils/formatDate.js
export const formatDate = (date) => {
  // MongoDB의 Date 객체를 로컬 시간으로 변환
  return new Date(date).toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// app/posts/page.js 또는 다른 컴포넌트
import { formatDate } from '@/utils/formatDate';

// 컴포넌트 내부에서 사용
<span>{formatDate(post.createdAt)}</span>
))}

프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드

oodada — Thu, 26 Dec 2024 09:21:38 +0900

프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드

MongoDB 공식 문서: https://www.mongodb.com/docs/
Mongoose 공식 문서: https://mongoosejs.com/docs/

1. 데이터베이스가 뭔가요?

프론트엔드에서 우리는 보통 이런 형태로 데이터를 다룹니다:

const posts = [
  {
    id: 1,
    title: "첫 번째 글",
    content: "내용입니다"
  },
  {
    id: 2,
    title: "두 번째 글",
    content: "내용입니다"
  }
];

하지만 이렇게 하면 서버를 재시작할 때마다 데이터가 사라지죠. 이 데이터를 영구적으로 저장하고 관리하는 곳이 바로 '데이터베이스'입니다.

2. MongoDB는 무엇인가요?

MongoDB는 JavaScript 객체와 매우 비슷한 형태로 데이터를 저장하는 데이터베이스입니다.

React의 state와 비교

// React에서 state 사용
const [post, setPost] = useState({
  title: "제목",
  content: "내용"
});

// MongoDB에 저장된 데이터
{
  _id: "자동생성되는ID",
  title: "제목",
  content: "내용"
}

React에서 state를 사용하는 것처럼, MongoDB는 데이터를 저장하고 관리합니다. 단지 서버를 껐다 켜도 데이터가 유지된다는 점이 다릅니다!

3. Mongoose는 무엇인가요?

Mongoose는 MongoDB를 더 쉽게 사용할 수 있게 해주는 도구입니다.

PropTypes와 비교

React에서 props의 타입을 체크하기 위해 PropTypes를 사용하듯이, Mongoose는 데이터의 형태를 미리 정의하고 체크합니다.

// React PropTypes
Post.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  views: PropTypes.number
};

// Mongoose Schema
const postSchema = new mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  views: { type: Number, default: 0 }
});

4. 실제 사용 예시

4-1. 데이터베이스 연결

마치 React에서 context를 설정하는 것처럼, 데이터베이스 연결을 설정합니다

환경 변수 파일에 MongoDB URI를 추가합니다:

// .env
MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/<database>?retryWrites=true&w=majority

연결 유틸리티 함수를 작성합니다:

// src/lib/mongodb.js
import mongoose from 'mongoose';

async function connectDB() {
  // MongoDB에 연결
  await mongoose.connect(process.env.MONGODB_URI);
}

export default connectDB;

4-2. 포스트 모델 정의하기

React 컴포넌트를 만드는 것처럼, 데이터의 형태를 정의합니다:

// models/Post.js
import mongoose from 'mongoose';

// 데이터 형태 정의 (마치 interface나 type 정의하듯이)
const postSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true    // 필수값 (props의 isRequired와 비슷)
  },
  content: {
    type: String,
    required: true
  },
  createdAt: {
    type: Date,
    default: Date.now  // 기본값 설정
  }
});

// 모델 생성 (마치 컴포넌트를 export 하듯이)
// 이미 생성된 모델이 있다면 재사용
const Post = mongoose.models.Post || mongoose.model('Post', postSchema);
export default Post;

4-3. API 라우트에서 사용하기

프론트엔드에서 axios로 API를 호출하면, 이렇게 처리합니다:

// app/api/posts/route.js
import { NextResponse } from 'next/server';
import connectDB from '@/lib/mongodb';
import Post from '@/models/Post';

// GET 요청 처리 (/api/posts)
export async function GET() {
  try {
    // 1. 데이터베이스 연결
    await connectDB();

    // 2. 전체 게시글 가져오기 (마치 setState 하듯이)
    // sort()로 최신 게시글부터 가져오기
    const posts = await Post.find().sort({ createdAt: -1 });

    // 3. 클라이언트에 데이터 반환
    return NextResponse.json(posts);
  } catch (error) {
    return NextResponse.json(
      { error: '게시글을 불러오는데 실패했습니다.' },
      { status: 500 }
    );
  }
}

// POST 요청 처리 (/api/posts)
export async function POST(req) {
  try {
    // 1. 데이터베이스 연결
    await connectDB();

    // 2. 클라이언트가 보낸 데이터 가져오기
    const data = await req.json();

    // 3. 새 게시글 생성 (마치 setState 하듯이)
    const post = await Post.create(data);

    // 4. 생성된 게시글 반환
    return NextResponse.json(post, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: '게시글 작성에 실패했습니다.' },
      { status: 500 }
    );
  }
}

4-4. 프론트엔드에서 사용하기

이제 평소처럼 axios로 API를 호출하면 됩니다:

// pages/posts.js
import axios from 'axios';

// 게시글 목록 가져오기
const fetchPosts = async () => {
  const { data } = await axios.get('/api/posts');
  setPosts(data);
};

// 새 게시글 작성하기
const createPost = async (postData) => {
  const { data } = await axios.post('/api/posts', postData);
  setPosts(prev => [...prev, data]);
};

5. 정리

브라우저 → (프론트엔드 async) → 서버 → (라우트 async) → 데이터베이스

MongoDB = 데이터를 저장하는 창고
Mongoose = 그 창고를 더 잘 사용할 수 있게 도와주는 도구
프론트엔드 = 평소처럼 API를 호출
서버 = 이 호출을 받아서 MongoDB에 저장하거나 가져오는 작업을 수행

이제 서버를 껐다 켜도 데이터가 사라지지 않고, 여러 사용자가 같은 데이터를 공유할 수 있게 됩니다!

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

oodada — Thu, 26 Dec 2024 09:20:46 +0900

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

1. 우리가 아는 것에서 시작하기

프론트엔드에서 데이터를 다루는 법부터 시작해볼게요:

1-1. React에서의 데이터 저장

// React에서 게시글 목록 관리하기
const [posts, setPosts] = useState([
  {
    id: 1,
    title: "첫 번째 글",
    content: "안녕하세요"
  },
  {
    id: 2,
    title: "두 번째 글",
    content: "반갑습니다"
  }
]);

1-2. 근데 여기에는 문제가 있어요

새로고침하면 데이터가 사라져요
다른 사용자와 데이터를 공유할 수 없어요
데이터가 많아지면 관리가 어려워요

이런 문제를 해결하기 위해 데이터베이스가 필요합니다!

2. 데이터베이스의 두 가지 타입

2-1. MySQL (엄격한 규칙의 데이터베이스)

엑셀 스프레드시트를 생각해보세요:

모든 열(column)이 미리 정의되어 있어요
각 행(row)은 같은 구조를 가져야 해요

// MySQL 테이블 구조
const posts = {
  // 이 구조에서 벗어날 수 없어요!
  columns: {
    id: '번호',
    title: '제목',
    content: '내용',
    author: '작성자'
  },
  // 모든 데이터는 위 구조를 따라야 해요
  rows: [
    [1, '안녕하세요', '내용입니다', '김철수'],
    [2, '반갑습니다', '두번째 글', '이영희']
  ]
}

2-2. MongoDB (자유로운 규칙의 데이터베이스) : nosql

JavaScript 객체와 매우 비슷해요:

원하는 대로 데이터 구조를 만들 수 있어요
각 문서(document)마다 다른 형태를 가질 수 있어요

// MongoDB 컬렉션 구조
const posts = [
  {
    _id: 1,
    title: "안녕하세요",
    content: "첫 번째 글입니다",
    // 여기에 원하는 필드를 자유롭게 추가할 수 있어요
    tags: ["인사", "소개"],
    comments: []
  },
  {
    _id: 2,
    title: "반갑습니다",
    content: "두 번째 글입니다",
    // 다른 문서와 다른 구조를 가질 수 있어요
    author: {
      name: "이영희",
      email: "lee@test.com"
    }
  }
];

3. 실제 프론트엔드 개발에서는 어떻게 쓰나요?

3-1. MySQL을 사용할 때

// 프론트엔드에서 API 호출
const getPosts = async () => {
  // 서버에서는 SQL 쿼리로 데이터를 가져옴
  // SELECT * FROM posts WHERE author = '김철수';
  const response = await axios.get('/api/posts');
  setPosts(response.data);
};

3-2. MongoDB를 사용할 때

// 프론트엔드에서 API 호출
const getPosts = async () => {
  // 서버에서는 MongoDB 쿼리로 데이터를 가져옴
  // Post.find({ author: '김철수' });
  const response = await axios.get('/api/posts');
  setPosts(response.data);
};

3-3. 프론트엔드 입장에서는...

API 호출하는 방식은 동일해요

받는 데이터 형태가 조금 달라요

// MySQL에서 받은 데이터
const mysqlData = [
{
 id: 1,
 title: "제목",
 content: "내용",
 // 정해진 필드만 옴
}
];

// MongoDB에서 받은 데이터
const mongoData = [
{
_id: "507f1f77bcf86cd799439011", // MongoDB의 특별한 ID 형식
title: "제목",
content: "내용",
// 추가 필드들이 있을 수 있음
comments: [],
tags: []
}
];


## 4. 어떤 걸 선택해야 할까요?

### 4-1. MySQL이 좋을 때
1. 데이터 구조가 명확할 때
   - 예: 회원가입 정보 (이름, 이메일, 비밀번호...)
   - 예: 주문 정보 (상품, 수량, 가격...)

2. 데이터 간의 관계가 복잡할 때
   - 예: 쇼핑몰 (주문-상품-사용자-리뷰...)

### 4-2. MongoDB가 좋을 때
1. 데이터 구조가 자주 바뀔 때
   - 예: 블로그 포스트 (글마다 다른 형식)
   - 예: SNS 게시물 (사진, 동영상, 링크 등 다양한 형식)

2. 빠른 개발이 필요할 때
   - JavaScript 객체처럼 자유롭게 데이터 저장 가능
   - 스키마 변경이 쉬움

## 5. 실제 프로젝트 예시

### 5-1. 블로그 프로젝트
MongoDB가 좋아요:
```javascript
const blogPosts = [
  {
    title: "일반 글",
    content: "텍스트만 있는 글"
  },
  {
    title: "사진 글",
    content: "text",
    images: ["image1.jpg", "image2.jpg"],
    imageLayout: "gallery"
  },
  {
    title: "비디오 글",
    content: "text",
    video: "video.mp4",
    thumbnail: "thumb.jpg"
  }
];

5-2. 쇼핑몰 프로젝트

MySQL이 좋아요:

// 주문 정보는 항상 같은 구조를 가져요
const orders = {
  columns: {
    id: '주문번호',
    userId: '사용자ID',
    productId: '상품ID',
    quantity: '수량',
    price: '가격',
    status: '주문상태'
  }
};

정리

MySQL은 엑셀처럼 정해진 형식이 있어요
- 데이터가 정형화되어 있을 때 좋아요
- 은행, 쇼핑몰 같은 서비스에 적합해요
MongoDB는 JavaScript 객체처럼 자유로워요
- 데이터 구조가 유연해야 할 때 좋아요
- 블로그, SNS 같은 서비스에 적합해요
프론트엔드 개발자 입장에서는
- API 호출 방식은 동일해요
- 받는 데이터 형식만 조금 달라요
- MongoDB가 JavaScript와 비슷해서 더 친숙할 수 있어요

Node.js 모듈과 객체

oodada — Wed, 25 Dec 2024 18:11:57 +0900

1. 모듈(Module)이란?

프로그램을 기능별 단위로 분리한 코드 모음
함수, 변수, 객체 등을 포함
하나의 .js 파일이 하나의 모듈

- 모듈의 장점

재사용성: 한 번 만든 모듈을 여러 프로젝트에서 재사용
유지보수: 기능별로 분리되어 있어 관리가 용이
캡슐화: 관련 코드를 하나의 단위로 묶어서 관리
의존성 관리: 필요한 기능만 선택적으로 가져와 사용

- 대표적인 웹서비스 공통 모듈 예시

회원가입 모듈
로그인 모듈
게시판 모듈
댓글 모듈

- 모듈 사용법

모듈 내보내기 (Export)

// module.js
const greeting = 'Hello, Module!';
const sayHi = () => console.log(greeting);

// module.exports = { 내보낼 내용 }
module.exports = {
    greeting,
    sayHi
};

모듈 가져오기 (Import)

// main.js
// require('가져올 파일 경로')
const myModule = require('./module');

console.log(myModule.greeting); // Hello, Module!
myModule.sayHi(); // Hello, Module!

실행

# node 파일 이름
$ node main.js

- 모듈 사용 시나리오

프로젝트/
├── modules/
│   ├── auth.js        (인증 관련 모듈)
│   ├── board.js       (게시판 관련 모듈)
│   └── comment.js     (댓글 관련 모듈)
└── app.js             (메인 애플리케이션)

2. 모듈의 종류

위에서 설명한 모듈처럼 require, exports를 통해 원하는 모듈을 개인적으로 만들어 사용해도 되지만, Node.js에서는 이미 많은 모듈들이 내장되어 있고 npm을 통해 다른 모듈들을 설치하여 사용할 수 있다.

기본(코어)모듈 : Node.js 설치 시 기본적으로 제공되는 모듈
외부 모듈(서드 파티 모듈) : npm을 통해 설치한 모듈

- 전역 객체(Global Object)

Node.js에서는 전역 객체를 사용할 수 있다. 전역 객체는 모든 모듈에서 사용할 수 있는 객체로, global이라는 이름으로 사용할 수 있다.

// global 객체 사용
global.console.log('Hello, Global Object!');

require(), setTimeout(), console.log() 등의 함수들도 전역 객체에 해당하며 앞에 global을 붙이지 않아도 사용할 수 있다.

- 기본(코어)모듈

Node.js에서 기본적으로 제공하는 모듈로, 별도의 설치 없이 바로 사용할 수 있다.

fs (File System) : 파일 시스템 관련 기능
http : 웹 서버 생성 및 요청, 응답 처리
os (Operating System) : 운영체제 정보
path : 파일 경로 관련 기능
url : URL 처리 기능
util : 각종 편의 기능

- 외부 모듈(서드 파티 모듈)

npm(Node Package Manager)을 통해 설치한 모듈로, 다른 개발자들이 만든 모듈을 사용할 수 있다.

express : 웹 프레임워크
mongoose : MongoDB ODM(Object Data Modeling)
nodemailer : 이메일 전송
socket.io : 웹 소켓 통신
request : HTTP 요청
cheerio : 웹 스크래핑

3. ES Modules의 사용

최신 JavaScript에서 도입된 표준 모듈 시스템으로, 주로 웹 개발에서 사용된다.
.mjs' 확장자를 사용하거나, package.json 파일에"type": "module"`을 추가하여 사용한다.

// module.js
export default function hello() {
    console.log('hello');
}

// main.js

// import 모듈명 from '모듈의 경로';
import hello from './module.js';

hello(); // hello

모듈의 내보내기(export), 가져오기(import)

모듈을 내보내기 위해서는 export 키워드를 사용한다.
모듈을 가져오기 위해서는 import 키워드를 사용한다.

// module.js

// 기본(default)  내보내기
export default 123;

// 이름 붙여서 내보내기
export const str = 'abc'; // 문자열
export const arr = []; // 배열
export const obj = () => {}; // 화살표 함수
export function obj() {} // 일반 함수

// main.js

// 기본(default) 가져오기
// import 모듈명 from '모듈의 경로';
import num from './module.js';

// 이름 붙여서 가져오기
// import { 이름 } from '모듈의 경로';
import { str as xyz, arr, obj } from './module.js';

console.log(num); // 123
console.log(xyz); // abc (str을 xyz로 가져옴)
console.log(arr); // []
console.log(obj); // [Function: obj]

모든 내용을 가져오기

// main.js

// 모든 내용 가져오기
// import * as 모듈명 from '모듈의 경로';
import * as abc from './module.js';

console.log(abc); // { default: 123, str: 'abc', arr: [], obj: [Function: obj] }

모듈을 한번에 가져와 사용하기

// a.js
export const a = () => 123;

// b.js
export const b = () => 456;

// main.js

import { a } from './a.js';
import { b } from './b.js';

console.log(a()); // 123
console.log(b()); // 456

위와 같이 모듈을 가져오는 것은 번거롭다.
모듈을 한번에 가져오기 위해서는 index.js 파일을 만들어 사용한다.

// index.js
export { a } from './a.js';
export { b } from './b.js';

// main.js
import { a, b } from './index.js';

console.log(a()); // 123
console.log(b()); // 456

React에서의 모듈 사용

React에서는 컴포넌트를 모듈로 사용한다.
컴포넌트를 내보내기, 가져오기하여 사용한다.

// Button.js
import React from 'react';

const Button = () => {
    return <button>Button</button>;
};

export default Button;

// App.js
import React from 'react';
import Button from './Button';

const App = () => {
    return (
        <div>
            <h1>App</h1>
            <Button />
        </div>
    );
};

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

자바스크립트 비동기 처리

oodada — Wed, 25 Dec 2024 18:11:31 +0900

콜 스택(Call Stack) & 이벤트 루프(Event Loop) & 콜백 큐(Callback Queue)

콜 스택(Call Stack)

자바스크립트는 싱글 스레드 언어이기 때문에, 콜 스택이 하나만 존재한다.
콜 스택은 함수가 호출되면, 해당 함수를 콜 스택에 쌓아놓고 실행한다.
함수가 실행이 끝나면, 콜 스택에서 해당 함수를 제거한다.

function first() {
  console.log('첫번째 함수');
  second();
}

function second() {
  console.log('두번째 함수');
}

first();

// 실행 순서
// 첫번째 함수
// 두번째 함수

이벤트 루프(Event Loop)

자바스크립트는 이벤트 중심 언어이기 때문에, 이벤트 루프가 존재한다.
이벤트 루프는 콜 스택과 콜백 큐를 감시하면서, 콜 스택이 비어있을 때 콜백 큐에 있는 함수를 콜 스택에 넣어 실행한다.

콜백 큐(Callback Queue)

콜백 큐는 비동기 함수의 콜백 함수를 담아두는 큐이다.
콜백 큐에 있는 함수는 콜 스택이 비어있을 때, 이벤트 루프에 의해 콜 스택에 넣어 실행된다.

console.log('시작');
setTimeout(() => {
    console.log('타이머 완료');
}, 0);
console.log('끝');

// 출력: 시작 -> 끝 -> 타이머 완료

실제 동작 과정

동기 코드는 즉시 콜 스택에서 실행됩니다
setTimeout 같은 비동기 작업은 Web API로 보내집니다
Web API에서 작업이 완료되면 콜백은 콜백 큐로 이동합니다
이벤트 루프는 콜 스택이 비었는지 확인하고, 비었다면 콜백 큐의 첫 번째 작업을 콜 스택으로 가져옵니다

"자바스크립트는 마치 멀티태스킹을 하는 것처럼 여러 작업을 처리할 수 있습니다. 시간이 오래 걸리는 작업(예: 서버에서 데이터 가져오기)을 실행하더라도, 그동안 다른 작업들을 계속할 수 있습니다. 마치 라면을 끓이면서 그동안 핸드폰을 하는 것처럼..."

콜백 함수

콜백(Callback) 함수는 영문 그대로, 나중에 실행되는 함수를 뜻한다.

콜백 함수의 비동기 처리

자바스크립트는 이벤트 중심 언어이기 때문에
특정 이벤트가 발생하고, 그에 대한 결과가 나올 때까지 기다리지 않고 다음 코드를 실행한다.

// 먼저 호출했지만 3초 뒤에 실행되기 때문에 2초 뒤에 실행되는 함수보다 나중에 실행된다.
setTimeout(() => {
  console.log('첫번째 실행');
}, 3000);

setTimeout(() => {
  console.log('두번째 실행');
}, 2000);

// 실행 순서
// 두번째 실행
// 첫번째 실행

콜백 함수의 동기 처리

첫번째를 먼저 실행하고 두번째를 실행하고 싶으면
'콜백 함수'를 이용해 비동기 작업을 동기적으로 처리해주어야 한다.

setTimeout(() => {
  setTimeout(() => {
    console.log('두번째 실행');
  }, 2000);
  console.log('첫번째 실행');
}, 3000);


// 실행 순서
// 첫번째 실행
// 두번째 실행

사용자 정의 함수의 동기 처리

아래 예제를 실행해보면, 첫번째 실행 -> 두번째 실행 -> 세번째 실행 순으로 실행되고
동기적으로 처리된다.

function faker(callback) {
  callback();
}

console.log('첫번째 실행');

faker(() => {
  console.log('두번째 실행');
});

console.log('세번째 실행');

// 실행 순서
// 첫번째 실행
// 두번째 실행
// 세번째 실행

위 세 가지 실행부는 모두 동기적이기 때문에, 콜백 큐를 사용하지 않고 모두 콜 스택을 거쳐 실행된다.

API 비동기 처리

console.log('첫번째 실행');

setTimeout(() => {
  console.log('세번째 실행');
}, 0);

console.log('두번째 실행');

// 실행 순서
// 첫번째 실행
// 두번째 실행
// 세번째 실행

console.log('첫번째 실행')이 콜 스택에 들어가서 실행됩니다.
setTimeout이 콜 스택에 들어가면서
- 콜백 함수는 Web APIs로 보내집니다
- 타이머가 완료되면 콜백 함수는 콜백 큐로 이동합니다
console.log('두번째 실행')이 콜 스택에 들어가서 실행됩니다.
콜 스택이 비워지면, 이벤트 루프가 콜백 큐의 콜백 함수를 콜 스택으로 가져옵니다.
console.log('세번째 실행')이 마지막으로 실행됩니다.

콜백 지옥(Callback Hell)

콜백 함수를 중첩해서 사용하다 보면, 코드가 복잡해지고 가독성이 떨어지는 현상을 말한다.

setTimeout(() => {
  console.log('첫번째 실행');
  setTimeout(() => {
    console.log('두번째 실행');
    setTimeout(() => {
      console.log('세번째 실행');
    }, 1000);
  }, 1000);
}, 1000);

이러한 콜백 지옥을 해결하기 위해, Promise나 async/await을 사용한다.

Promise

Promise는 코드의 중첩이 발생하는 콜백 지옥을 해결하기 위한 객체이다.
Promise는 단어 그대로 '약속'을 의미하며, 비동기 작업이 완료되었을 때, 성공했는지 실패했는지 알려주는 객체이다.

커피 주문 시나리오로 보는 Promise

1. 커피 주문

function order(sec, callback) {
  setTimeout(() => {
    callback(new Date().toISOString());
  }, sec * 1000);
}

order(1, (time) => {
  console.log(`커피 주문`, time);
});

order(2, (time) => {
  console.log(`시럽 추가 주문`, time);
});

order(3, (time) => {
  console.log(`휘핑 추가 주문`, time);
});

// 실행 순서
// 동시에 실행

위 코드는 동시에 실행되기 때문에, 순서가 보장되지 않는다.
실행 순서를 보장하기 위해 비동기 처리를 해야 한다.

function order(sec, callback) {
  setTimeout(() => {
    callback(new Date().toISOString());
  }, sec * 1000);
}

order(1, (time) => {
  console.log(`커피 주문`, time);
  order(2, (time) => {
    console.log(`시럽 추가 주문`, time);
    order(3, (time) => {
      console.log(`휘핑 추가 주문`, time);
    });
  });
});

// 실행 순서
// 커피 주문 -> 시럽 추가 주문 -> 휘핑 추가 주문

이런 콜백 지옥을 해결하기 위해 Promise를 사용한다.

1. 커피 주문 = Promise 생성

const orderCoffee = new Promise((resolve, reject) => {
  // 바리스타가 커피 만드는 과정
});

커피를 주문하면 진동벨(Promise)을 줍니다
이 진동벨로 커피가 완성되었는지 알 수 있어요

2. Promise의 3가지 상태

대기중(Pending): "커피 제조중입니다" (진동벨 대기중)
성공(Fulfilled): "삐삐! 커피가 준비되었습니다" (진동벨 울림)
실패(Rejected): "죄송합니다. 머신 고장으로 제조가 불가능합니다" (진동벨 오류)

3. 실제 코드로 보는 커피 주문

const orderCoffee = new Promise((resolve, reject) => {
  console.log("바리스타가 커피를 만들기 시작합니다!");

  setTimeout(() => {
    const isSuccess = true;  // 커피가 잘 만들어졌다고 가정

    if(isSuccess) {
      resolve("주문하신 아메리카노 나왔습니다! ☕");
    } else {
      reject("죄송합니다. 머신 고장으로 제조가 불가능합니다  ");
    }
  }, 3000);  // 3초 동안 커피 제조중
});

// 커피 주문 결과 처리
orderCoffee
  .then((result) => {
    console.log(result);  // "주문하신 아메리카노 나왔습니다! ☕"
  })
  .catch((error) => {
    console.log(error);  // "죄송합니다. 머신 고장으로 제조가 불가능합니다  "
  });

4. Promise의 장점

콜백: "커피 주문하고, 시럽 추가하고, 휘핑 추가하고..." (복잡)
Promise: 진동벨 하나로 모든 과정을 깔끔하게 처리 (.then 체이닝)

5. Promise 체이닝

Promise는 .then을 이용해 여러 개의 비동기 작업을 순차적으로 처리할 수 있다.

// 콜백 지옥 버전
orderCoffee(function(coffee) {
  addSyrup(coffee, function(withSyrup) {
    addWhippedCream(withSyrup, function(complete) {
      console.log("주문 완료!");
    });
  });
});

// Promise 버전 (깔끔!)
orderCoffee()
  .then(coffee => addSyrup(coffee))
  .then(withSyrup => addWhippedCream(withSyrup))
  .then(() => console.log("주문 완료!"))
  .catch(error => console.log("주문 실패:", error));

async/await

async/await는 Promise를 더 쉽게 사용할 수 있도록 ES8에서 도입된 문법이다.

무인 카페 주문 시나리오로 보는 async/await

1. 기본 개념

// 기존 Promise 방식 (진동벨)
orderCoffee()
  .then(coffee => console.log("커피 완성!"))
  .catch(error => console.log("주문 실패"));

// async/await 방식 (셀프 주문기)
async function orderCoffee() {
  try {
    const coffee = await makeCoffee();  // 커피가 완성될 때까지 기다림
    console.log("커피 완성!");
  } catch(error) {
    console.log("주문 실패");
  }
}

2. Promise vs async/await 주문 비교

// 진동벨(Promise) 방식
const orderByBell = () => {
  getCoffee()
    .then(coffee => addSyrup(coffee))
    .then(withSyrup => addWhippedCream(withSyrup))
    .then(() => console.log("주문 완성!"))
    .catch(error => console.log("주문 실패"));
}

// 셀프 주문기(async/await) 방식
const orderBySelf = async () => {
  try {
    const coffee = await getCoffee();        // 1. 커피 추출 기다리기
    const withSyrup = await addSyrup(coffee);     // 2. 시럽 추가 기다리기
    const completed = await addWhippedCream(withSyrup); // 3. 휘핑 추가 기다리기
    console.log("주문 완성!");
  } catch(error) {
    console.log("주문 실패");
  }
}

// 실행
orderByBell();  // 진동벨 주문
orderBySelf();  // 셀프 주문기 주문

3. async/await 장점

쉽고 직관적인 코드 작성이 가능하다.

async: "셀프 주문기를 사용하겠습니다"
await: "이 작업이 끝날 때까지 기다립니다"
try-catch: "주문 실패시 환불해드립니다"

next.js로 CRUD API 서버 만들기

oodada — Mon, 9 Dec 2024 22:54:30 +0900

my-next-server라는 이름으로 next.js 서버를 만들어보자.

github 주소 : https://github.com/odada-o/-template-next-js-crud

1. Next.js 설치

npx create-next-app ./

2. 간단한 서버 만들기

브라우저에서 http://localhost:3000/api/hello로 접속했을 때, 안녕하세요!라는 메시지를 JSON 형식으로 응답하는 서버를 만들어봅시다.

API Route 파일 생성

app/api/hello/route.ts 파일을 생성합니다.
API Route 파일은 GET(), POST(), PUT(), DELETE() 함수를 내보내는 파일입니다.

my-next-server/
├── app/
│   └── api/
│       └── hello/
│           └── route.js
│   └── hello/
│       └── page.js

GET() 함수는 HTTP GET 요청을 처리하는 함수입니다.
NextResponse는 Next.js에서 응답을 생성하는 함수입니다.
NextResponse.json() 함수는 JSON 형식의 응답을 생성하는 함수입니다.

// src/app/api/hello/route.ts
import { NextResponse } from 'next/server';

export const helloPosts = [
  { id: 1, title: "안녕1" },
  { id: 2, title: "안녕2" }
];

// GET /api/hello 주소로 요청이 오면 실행되는 함수
// async 키워드를 사용하여 비동기 함수로 만듭니다
export async function GET() {
  // 클라이언트에게 JSON 응답을 반환합니다
  // return NextResponse.json({ message: '안녕하세요!' });
  return NextResponse.json(helloPosts);
}

test

http://localhost:3000/api/hello로 GET 요청을 보내면, {"message":"안녕하세요!"}가 출력됩니다.

3. CRUD API 만들기

3-1. 파일 구조

my-next-server/
├── app/
│   ├── api/
│   │   ├── posts/
│   │   │   ├── route.js        # 전체 게시글 API
│   │   │   └── [id]/
│   │   │       └── route.js    # 개별 게시글 API
│   ├── posts/
│   │   ├── page.js             # 게시글 목록
│   │   ├── write/
│   │   │   └── page.js         # 글쓰기 페이지
│   │   └── [id]/
│   │       ├── page.js         # 상세 페이지
│   │       └── edit/
│   │           └── page.js     # 수정 페이지
└── data/
    └── posts.js                # 임시 데이터 저장소

3-2. 게시글 API 만들기

먼저 axios를 설치합니다:

npm install axios

데이터 저장소 생성

// data/posts.js
export const posts = [
  { id: 1, title: '첫 번째 글', content: '안녕하세요!', createdAt: '2024-01-01' },
  { id: 2, title: '두 번째 글', content: '반갑습니다!', createdAt: '2024-01-02' }
];

API Route 파일 생성

이제 axios를 사용하여 게시글을 관리하는 API를 만들어봅시다.
axios는 fetch보다 더 간단하게 HTTP 요청을 처리할 수 있게 해주는 라이브러리입니다.

// app/api/posts/route.js
import { NextResponse } from 'next/server';
import axios from 'axios';
import posts from '@/data/posts';

// 전체 게시글 조회 - GET 요청 처리
// 게시글 목록 페이지로 이동하면 실행됨
export async function GET() {
  try {
    // 만약 api 서버로 요청을 보내서 게시글 목록을 가져오고 싶다면
    // const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    // const posts = response.data;

    // 로컬 데이터를 바로 반환합니다
    return NextResponse.json(posts);
  } catch (error) {
    // 에러가 발생하면 에러 메시지와 함께 500 상태 코드 반환
    return NextResponse.json(
      { error: '게시글을 불러오는데 실패했습니다.' },
      { status: 500 }
    );
  }
}

// 새 게시글 작성 - POST 요청 처리
// 글쓰기 페이지에서 제출하면 실행됨
export async function POST(req) {

  // 글을 작성하면 req 객체에는 다음과 같은 정보가 들어있습니다
  // {
  //   headers: Headers { host: 'localhost:3000', 'content-type': 'application/json', ... },
  //   method: 'POST',
  //   url: 'http://localhost:3000/api/posts',
  //   body: { title: '새 글', content: '내용입니다' }
  //   (단, 직접 접근은 불가능하며 req.json()으로 파싱해야 함)
  // }

  try {
    // 요청 본문에서 데이터 추출
    // data = { title: '새 글', content: '새 글 내용입니다' }
    const data = await req.json();

    // 제목이나 내용이 없으면 400 에러 반환
    if (!data.title || !data.content) {
      return NextResponse.json(
        { error: '제목과 내용은 필수입니다.' },
        { status: 400 } // 400: Bad Request
      );
    }

    // newPost 객체 생성
    const newPost = {
      id: posts.length + 1,
      title: data.title,
      content: data.content,
      createdAt: new Date().toLocaleDateString()
    };

    // 서버의 데이터 베이스(posts)에 새 게시글 추가
    posts.push(newPost);

    // 클라이언트에게 새 게시글 반환
    return NextResponse.json(newPost, { status: 201 });

  } catch (error) {
    return NextResponse.json(
      { error: '게시글 작성에 실패했습니다.' },
      { status: 500 }
    );
  }
}

Next.js의 req 객체는 다음과 같은 주요 정보를 포함합니다:

headers: 요청 헤더 정보 (Content-Type 등)
method: HTTP 메서드 (POST)
url: 요청 URL
body: 요청 본문 (단, 직접 접근은 불가능하며 req.json()으로 파싱해야 함)
query: 쿼리 스트링 정보

Request headers: Headers {
  host: 'localhost:3000',
  'content-type': 'application/json',
  ...
}
Request method: POST
Request URL: http://localhost:3000/api/posts
Parsed data: { title: '새 글', content: '새 글 내용입니다' }

3-3. Thunder Client로 API 테스트하기

1. Thunder Client 설치

VSCode의 확장 프로그램에서 Thunder Client 설치
왼쪽 사이드바에 번개 모양 아이콘이 생성됩니다

2. GET 요청 테스트

Thunder Client 아이콘 클릭
'New Request' 클릭
GET http://localhost:3000/api/posts 입력
Send 버튼 클릭
응답으로 게시글 목록이 표시됩니다

3. POST 요청 테스트

'New Request' 클릭
POST http://localhost:3000/api/posts 입력
Body 탭 선택 후 JSON 형식 선택

아래 내용 입력:

{
"title": "세 번째 게시글",
"content": "반가워요!"
}

Send 버튼 클릭
새로운 게시글이 생성되고 응답으로 반환됩니다

4. 게시글 상세 API 추가

이제 개별 게시글에 대한 조회/수정/삭제 API를 구현해봅시다.

GET /api/posts/[id]: 특정 게시글 조회
PUT /api/posts/[id]: 게시글 수정
DELETE /api/posts/[id]: 게시글 삭제

`params` 객체

params 객체는 URL에서 동적으로 변하는 값을 담는 객체입니다.

/api/posts/1  → params.id는 "1"
/api/posts/2  → params.id는 "2"
/api/posts/99 → params.id는 "99"

우리의 파일 구조를 보면

/api/posts/[id]/route.js

여기서 [id]라는 폴더 이름이면 Next.js는 대괄호([]) 안에 있는 이름을 params의 속성으로 만들어줍니다.

export async function GET({ params }) {
    console.log(params);  // { id: '1' } 이런 식으로 출력됨
    console.log(params.id);  // '1' 처럼 해당 값만 출력

    // 문자열로 오기 때문에 숫자로 변환해서 사용
    // posts 배열에서 id와 일치하는 게시글 찾기
    const post = posts.find(post => post.id === parseInt(params.id));
    ...
}

쉽게 말해서 params는 URL의 변하는 부분을 손쉽게 가져다 쓸 수 있게 해주는 도구입니다.

// app/api/posts/[id]/route.js
import { NextResponse } from 'next/server';
import posts from '@/data/posts';

// 특정 게시글 조회 - GET 요청 처리
// 게시글 상세 페이지로 이동하면 실행됨
// response 인수 대신 params 인수를 사용하여 URL 파라미터를 전달받음
export async function GET(request, { params }) {
  // params = { id: '1' }
 try {
   // URL 파라미터로 전달된 id 값과 일치하는 게시글 찾기
   const post = posts.find(post => post.id === parseInt(params.id));

   // 게시글이 없을 경우 404 응답
   if (!post) {
     return NextResponse.json(
       { error: '게시글을 찾을 수 없습니다.' },
       { status: 404 }
     );
   }

   return NextResponse.json(post);
 } catch (error) {
   return NextResponse.json(
     { error: '게시글을 불러오는데 실패했습니다.' },
     { status: 500 }
   );
 }
}

// 게시글 수정 - PUT 요청 처리
// 수정할 내용을 입력하고 PUT 요청을 보내면 실행됨
export async function PUT(req, { params }) {
  try {
    const data = await req.json();
    // data = { title: '수정된 제목', content: '수정된 내용' }

    // id와 일치하는 게시글의 인덱스 찾기
    const index = posts.findIndex(post => post.id === parseInt(params.id));
    if (index === -1) {
      return NextResponse.json(
        { error: '게시글을 찾을 수 없습니다.' },
        { status: 404 }
      );
    }

    // posts = [
    //   { id: 1, title: '첫글' },    // p.id === 1 비교 -> true
    //   { id: 2, title: '둘째글' },  // 여기까지 안 감
    //   { id: 3, title: '셋째글' }   // 여기까지 안 감
    // ]

    // 첫번째 요소 에서 p.id === 1 비교 -> true 가 되므로
    // index = 0 이 됨
    posts[index] = {
      ...posts[index],
      title: data.title || posts[index].title,
      content: data.content || posts[index].content
    };

    // 게시글 업데이트 - 제목이나 내용이 없으면 기존 값 유지
    // posts[0] = 
    // { 
    // id: 1, title: '첫 번째 글', content: '안녕하세요!', createdAt: '2024-01-01', 
    // title: '수정된 제목', 
    // content: '수정된 내용' 
    // }

    // 클라이언트에게 수정된 게시글 (post[0]) 반환
    return NextResponse.json(posts[index]);
  } catch (error) {
    return NextResponse.json(
      { error: '게시글 수정에 실패했습니다.' },
      { status: 500 }
    );
  }
}

// 게시글 삭제 - DELETE 요청 처리
export async function DELETE(req, { params }) {
  try {
    // id와 일치하는 게시글의 인덱스 찾기
    const index = posts.findIndex(p => p.id === parseInt(params.id));
    if (index === -1) {
      return NextResponse.json(
        { error: '게시글을 찾을 수 없습니다.' },
        { status: 404 }
      );
    }

    // 게시글 삭제
    // slice() 함수는 배열의 일부를 추출하여 새로운 배열을 만듭니다
    // splice(시작 인덱스, 삭제할 요소 개수) 함수는 배열에서 요소를 삭제합니다
    posts.splice(index, 1);
    return NextResponse.json({ message: '게시글이 삭제되었습니다.' });
  } catch (error) {
    return NextResponse.json(
      { error: '게시글 삭제에 실패했습니다.' },
      { status: 500 }
    );
  }
}

Thunder Client로 테스트하기

GET 요청

GET http://localhost:3000/api/posts/1 요청으로 특정 게시글 조회

PUT 요청

PUT http://localhost:3000/api/posts/1
Body:
{
  "title": "수정된 제목",
  "content": "수정된 내용"
}

DELETE 요청

DELETE http://localhost:3000/api/posts/1 요청으로 게시글 삭제

5. 클라이언트 페이지 구현하기

이제 axios를 사용하여 API와 통신하는 클라이언트 페이지들을 만들어봅시다.

동기와 비동기

5-0. API Route(/api/posts) 와 데이터 파일(/data/posts.js)의 차이점

`/data/posts.js` 로 직접 접근하면

이는 실제 소스 코드 파일입니다
보안상 클라이언트에서 직접 접근할 수 없습니다
서버의 파일 시스템에 있는 실제 파일입니다

`/api/posts` API Route 로 접근하면

이는 서버에서 실행되는 엔드포인트입니다
API Route 내부에서 posts.js 데이터를 안전하게 불러와서 클라이언트에 전달합니다
데이터 처리, 필터링, 보안 검사 등을 수행할 수 있습니다

// data/posts.js (서버의 데이터 파일)
export const posts = [
  { id: 1, title: "글1" },
  { id: 2, title: "글2" }
];

// api/posts/route.js (API Route)
import { posts } from '@/data/posts';

// 이 파일이 `/api/posts` 엔드포인트로 요청되면
// 데이터 파일에서 데이터를 불러와서 클라이언트에 전달합니다
export async function GET() {
  return NextResponse.json(posts);
}

// 클라이언트 컴포넌트
// 브라우저에서 `/api/posts` 로 GET요청을 보냅니다.
// 위 요청이 위의 GET함수로 전달됩니다.
axios.get('/api/posts')

5-1. 글 목록 페이지 (`/posts`)

axios로 받은 응답에는 여러 정보가 포함되어 있는데, 실제 데이터는 data 속성에 들어있습니다.

{
  data: {
    // 실제 서버에서 받은 데이터
    title: "게시글 제목",
    content: "게시글 내용"
  },
  status: 200,        // HTTP 상태 코드
  statusText: "OK",   // 상태 메시지
  headers: {},        // 응답 헤더
  config: {}          // 요청 설정
}

// app/posts/page.js
'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation'; // 페이지 이동을 위한 라우터
import axios from 'axios';

export default function PostsPage() {
  const router = useRouter(); // 라우터 객체
  const [posts, setPosts] = useState([]); // 게시글 상태
  const [loading, setLoading] = useState(true); // 로딩 상태

  useEffect(() => {
    // axios.get().then().catch()으로 비동기 처리
    axios
      .get('/api/posts') // 브라우저에서 /api/posts로 GET 요청을 보냅니다
      .then((res) => {
        setPosts(res.data); // 데이터를 상태에 저장
        setLoading(false); // 로딩 시 false로 변경
      })
      .catch((error) => {
        console.error('Error:', error);
        setLoading(false);
      });
  }, []);

  const handleDelete = async (id) => {
    // 삭제를 취소하면 함수 종료
    if (!confirm('정말 삭제하시겠습니까?')) return;

    try {
      const res = await axios.delete(`/api/posts/${id}`); // 브라우저에서 /api/posts/1로 DELETE 요청을 보냅니다
      // 서버에서 응답이 오면
      if (res.status === 200) {
        setPosts(posts.filter((post) => post.id !== id)); // 삭제된 게시글 제외
      } else {
        alert('삭제에 실패했습니다.'); 
      }
    } catch (error) {
      alert('오류가 발생했습니다.');
    }
  };

  // 상세 페이지로 이동하는 함수
  const handlePostClick = (id) => {
    router.push(`/posts/${id}`);
  };

  if (loading) return <div>로딩 중...</div>;

  return (
    <div>
      <h1>게시글 목록</h1>
      <Link href="/posts/write">글쓰기</Link>

      <div>
        {posts.map((post) => (
          <Link
              key={post.id}
              href={`/posts/${post.id}`}
              className="cursor-pointer block"  // block 추가하여 전체 영역 클릭 가능하게
            >
            <h2>{post.title}</h2>
            <p>{post.content}</p>
            <span>{new Date(post.createdAt).toLocaleDateString()}</span>
          </Link>
        ))}
      </div>
    </div>
  );
}

5-2. 글쓰기 페이지 (`/posts/write`)

// app/posts/write/page.js
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import axios from 'axios';

export default function WritePage() {
  const router = useRouter();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const res = await axios.post('/api/posts', { title, content });

      if (res.status === 201) { // HTTP 201 Created
        router.push('/posts');
      } else {
        alert('글 작성에 실패했습니다.');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('오류가 발생했습니다.');
    }
  };

  return (
    <div>
      <h1>글쓰기</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>제목</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />
        </div>
        <div>
          <label>내용</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            required
          />
        </div>
        <button type="button" onClick={() => router.back()}>취소</button>
        <button type="submit">등록</button>
      </form>
    </div>
  );
}

5-3. 글 상세 페이지 (`/posts/[id]`)

const resolvedParams = use(params);

params의 상태

// pages/posts/[id]/page.jsx 파일에서
// URL이 /posts/1 이라면

// params는 이런 형태의 Promise
params = Promise.resolve({ id: '1' })
// 바로 params.id 접근 불가


2. use() 훅의 역할
```javascript
// use() 훅이 Promise를 풀어서(unwrap) 일반 객체로 변환
const resolvedParams = use(params);

// resolvedParams는 이제 일반 객체가 됨
resolvedParams = { id: '1' }
// 이제 resolvedParams.id 접근 가능

코드 예시

// ❌ 잘못된 방법
console.log(params.id)  // undefined

// ✅ 올바른 방법
const resolvedParams = use(params);
console.log(resolvedParams.id) // '1'

// API 호출할 때도
axios.get(/api/posts/${resolvedParams.id}) // OK!


```typescript
// app/posts/[id]/page.js
'use client';
import { useState, useEffect, use } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import axios from 'axios';

export default function PostDetailPage({ params }) {
  const router = useRouter();
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const resolvedParams = use(params); // params 객체를 풀어서 사용

  useEffect(() => {
    axios
      .get(`/api/posts/${resolvedParams.id}`)
      .then((res) => {
        setPost(res.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error:', error);
        setLoading(false);
        alert('게시글을 불러올 수 없습니다.');
        router.push('/posts');
      });
  }, [resolvedParams.id, router]);

  const handleDelete = async () => {
    if (!confirm('정말 삭제하시겠습니까?')) return;

    try {
      const res = await axios.delete(`/api/posts/${resolvedParams.id}`);
      if (res.status === 200) {
        router.push('/posts');
      } else {
        alert('삭제에 실패했습니다.');
      }
    } catch (error) {
      alert('오류가 발생했습니다.');
    }
  };

  if (loading) return <div>로딩 중...</div>;
  if (!post) return <div>게시글을 찾을 수 없습니다.</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>작성일: {post.createdAt}</p>
      <div>
        <p>{post.content}</p>
      </div>
      <div>
        <Link href="/posts">목록</Link>
        <Link href={`/posts/${resolvedParams.id}/edit`}>수정</Link>
        <button onClick={handleDelete}>삭제</button>
      </div>
    </div>
  );
}

5-4. 글 수정 페이지 (`/posts/[id]/edit`)

// app/posts/[id]/edit/page.js
import EditForm from "./editForm";

export default function EditPage({ params }) {
  return <EditForm postId={params.id} />;
}

// app/posts/[id]/edit/EditForm.js
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import axios from 'axios';

export default function EditForm({ postId }) {
  const router = useRouter();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const { data } = await axios.get(`/api/posts/${postId}`);
        setTitle(data.title);
        setContent(data.content);
      } catch (error) {
        console.error('Error fetching post:', error);
        alert('게시글을 불러올 수 없습니다.');
        router.push('/posts');
      }
    };

    fetchPost();
  }, [postId, router]);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await axios.put(`/api/posts/${postId}`, { title, content });
      router.push('/posts');
    } catch (error) {
      console.error('Error updating post:', error);
      alert('수정에 실패했습니다.');
    }
  };

  return (
    <div className="p-4 max-w-xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">글 수정</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <label className="block font-medium">제목</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
            className="w-full p-2 border rounded"
          />
        </div>
        <div className="space-y-2">
          <label className="block font-medium">내용</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            required
            className="w-full p-2 border rounded h-32"
          />
        </div>
        <div className="flex gap-2">
          <button 
            type="button" 
            onClick={() => router.back()}
            className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
          >
            취소
          </button>
          <button 
            type="submit"
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
          >
            수정
          </button>
        </div>
      </form>
    </div>
  );
}

node.js로 API 통신 구현하기

oodada — Mon, 9 Dec 2024 22:54:04 +0900

ㅇㅇ

Express 모듈을 사용하여 서버 만들기

oodada — Mon, 9 Dec 2024 22:51:43 +0900

Express 모듈을 사용하여 서버 만들기

1. Express 란?

http, url, fs 등 Node.js의 기본 모듈을 사용하여 서버를 만들 수 있지만, Express 모듈을 사용하면 더 쉽고 강력한 서버를 만들 수 있습니다.
자바의 Spring, Python의 Django와 같이 Node.js의 대표적인 웹 프레임워크로 Request, Response 객체를 사용하여 HTTP 요청을 처리할 수 있습니다.

- Express를 사용하는 이유

간단하고 직관적인 API
미들웨어를 통한 유연한 기능 확장
강력한 라우팅 시스템
큰 커뮤니티와 풍부한 생태계

- 참조

프레임워크란 개발자가 웹 개발에 필요한 기능을 미리 구현해 놓은 것으로, 개발자가 필요한 기능을 사용하기만 하면 되기 때문에 개발 시간을 단축할 수 있습니다. 웹을 만드는 회사는 대부분 프레임워크를 사용하여 개발합니다.

라이브러리란 개발자가 필요한 기능을 직접 구현해야 하는 것으로, 개발자가 직접 구현해야 하기 때문에 개발 시간이 더 오래 걸릴 수 있습니다.

자바스크립트의 클라이언트 사이드 프레임워크: React, Vue, Angular
자바스크립트의 서버 사이드 프레임워크: Express, Koa, Nest.js

2. Express 설치와 사용

- Express 설치

# 프로젝트 초기화
npm init -y

# Express 설치
npm install express

- nodemon 설치

nodemon은 파일이 수정될 때마다 서버를 자동으로 재시작해주는 패키지로 개발 시간을 단축할 수 있음.

# nodemon 설치
npm install -g nodemon

- package.json 수정

{
  "name": "my-express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js" // nodemon으로 서버 실행
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

3. Express 서버 만들기

- Express 서버 만들기

get() 메서드: 해당 경로로 GET 요청이 오면 콜백 함수를 실행.
send() 메서드: 클라이언트에 응답을 보냄.

// index.js
const express = require('express');
const app = express();

// 기본 라우트에 GET 요청이 오면 콜백 함수 실행
app.get('/', (req, res) => {
  // send() 메서드: 클라이언트에 응답을 보냄.
  // send() 메서드 하나로 응답을 보내고 종료하는 것까지 가능
  res.send('Hello, Express!');
});

// 서버 실행
app.listen(8080, () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

- Express 서버 실행

nodemon index.js

터미널에서 nodemon index.js 명령어를 실행 후, 크롬의 주소창에 http://localhost:8080을 입력하면, "Hello, Express!"가 출력됩니다.

- Express 서버 파일 읽어오기

$ touch index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Express Server</title>
</head>
<body>
  <h1>Express Server</h1>
  <p>파일을 읽어와 응답하는 서버</p>
</body>
</html>

// index.js
const express = require('express');

const app = express();
// 서버가 실행될 포트 설정
// 클라우드 배포에 환경변수의 PORT 사용하거나 로컬 서버 사용
app.set('port', process.env.PORT || 8080);

// 데이터를 get 요청으로 받아올 때
// '/' 경로로 GET 요청이 오면 index.html 파일을 응답으로 보냄
app.get('/', (req, res) => {
  // sendFile() 메서드: 파일을 응답 본문으로 보냄
  res.sendFile(__dirname + '/index.html');
});

// 서버 실행
// app.get('port')로 설정한 포트에서 서버 실행
app.listen(app.get('port'), () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

3. http 요청 메서드

클라이언트(프론트엔드)가 서버(백엔드)에 요청을 보낼 때 사용하는 메서드로 요청의 목적을 명시하기 위해 사용됨.

GET: 데이터 가져올 때 사용
HEAD: 문서 정보를 가져올 때 사용
POST: 데이터 전송할 때 사용
PUT: 데이터 업데이트할 때 사용
PATCH: 데이터 일부 업데이트할 때 사용
DELETE: 데이터 삭제할 때 사용

4. Express 서버에 라우트 추가하기

post() 메서드: 해당 경로로 POST 요청이 오면 콜백 함수를 실행.
URL 파라미터: :를 사용하여 동적인 URL을 사용할 수 있음.
req.params: URL 파라미터를 조회할 수 있음.

// index.js
const express = require('express');
const app = express();

app.set('port', process.env.PORT || 8080);

// 전체 게시글 목록 조회
app.get('/posts', (req, res) => {
   res.send('전체 게시글 목록');
});

// 새 게시글 작성
app.post('/posts', (req, res) => {
   res.send('새 게시글이 작성되었습니다.');
});

// 특정 게시글 조회
app.get('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글 내용`);
});

// 특정 게시글 수정
app.put('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글이 수정되었습니다.`);
});

// 특정 게시글 삭제
app.delete('/posts/:id', (req, res) => {
   res.send(`${req.params.id}번 게시글이 삭제되었습니다.`);
});

// 서버 실행
app.listen(app.get('port'), () => {
   console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

전체 게시글 목록 보기 : GET http://localhost:8080/posts
특정 게시글 보기 : GET http://localhost:8080/posts/1
새 게시글 작성 : POST http://localhost:8080/posts
게시글 수정 : PUT http://localhost:8080/posts/1
게시글 삭제 : DELETE http://localhost:8080/posts/1

5. Express 서버에 미들웨어 추가하기

- 미들웨어란?

요청(req)과 응답(res) 사이에 실행되는 함수.
요청과 응답을 조작하거나, 요청에 대한 응답을 보내기 전에 중간 처리를 할 수 있음.

- 미들웨어 추가하기

app.use() 메서드를 사용하여 미들웨어를 추가.

// index.js
const express = require('express');
const app = express();

app.set('port', process.env.PORT || 8080);

// 1. 로깅 미들웨어 - 어떤 요청이 왔는지 확인
app.use((req, res, next) => {
    console.log('-------------------');
    console.log('새로운 요청이 왔어요!');
    console.log('요청 종류:', req.method);
    console.log('요청 주소:', req.url);
    console.log('-------------------');
    next(); // 
});

// 게시글 목록 조회
app.get('/posts', (req, res) => {
    res.send('전체 게시글 목록');
});

// 게시글 작성
app.post('/posts', (req, res) => {
    console.log('작성된 글:', req.body);  // JSON 미들웨어 덕분에 사용 가능
    res.send('게시글이 작성되었습니다.');
});

app.listen(app.get('port'), () => {
    console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

localhost:3000에 접속하면, 콘솔에 요청 방식(GET)과 요청 주소(/)가 출력됨.
localhost:3000/users에 접속하면, 콘솔에 요청 방식(GET)과 요청 주소(/users)가 출력됨.

6. Express 서버에 정적 파일 제공하기

- 정적 파일이란?

서버에서 변경 없이 그대로 클라이언트에 전달되는 파일.

html 내부에 이미지를 띄우려면 이미지 파일을 서버에서 클라이언트로 전달해야 함.
html은 이미지 파일이 있는 경로를 참조하여 이미지를 띄움.
HTML, CSS, JavaScript, 이미지, 폰트 등.

- 정적 파일 제공하기

public 폴더에 cat.jpg 파일을 생성.

my-express-app/
├── public/                # 정적 파일들이 위치할 폴더
│   ├── images/           # 이미지 파일들
│   │   └── cat.jpg
│   ├── css/             # CSS 파일들
│   │   └── style.css
│   └── index.html       # 메인 HTML 파일
└── index.js             # 서버 파일

// index.js
const express = require('express');
const app = express();

// 정적 파일 제공
app.use(express.static('public'));

// 서버 실행
app.listen(8080, () => {
  console.log('서버가 http://localhost:8080 에서 실행 중입니다.');
});

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Express Static</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>Express Static</h1>
  <img src="/images/cat.jpg" alt="Cat">
</body>
</html>

localhost:8080에 접속하면, public/index.html 파일이 출력됨.
localhost:8080/images/cat.jpg에 접속하면, public/images/cat.jpg 파일이 출력됨.
localhost:8080/css/style.css에 접속하면, public/css/style.css 파일이 출력됨.

node.js로 서버 만들기

oodada — Mon, 9 Dec 2024 22:50:38 +0900

node.js로 서버 만들기 - node.js 배우기

1. 서버란?

서버와 클라이언트

서버는 요청을 받는 응답자이고, 클라이언트는 요청을 보내는 요청자입니다.

클라이언트: 웹 브라우저(Chrome, Safari).
서버: 네이버, 구글 같은 웹사이트를 운영하는 컴퓨터.

쉽게 서버의 동작 이해하기

브라우저에서 "구글 검색"을 입력(요청)하면,
구글의 서버가 요청을 받아서 검색 결과를 준비(처리)한 뒤,
준비된 검색 결과를 브라우저로 보냄(응답).

서버의 예

웹 서버: 웹사이트를 보여주는 서버.
- 예: 네이버, 구글, 유튜브.
파일 서버: 파일을 저장하고 전송하는 서버.
- 예: Google Drive, Dropbox.
게임 서버: 온라인 게임에서 플레이어 간 연결을 관리하는 서버.
- 예: LOL, PUBG.
호스팅 서버: 웹사이트를 저장하고 관리하는 서버.
- 예: AWS, Azure.

2. 프로젝트 시작

- 프로젝트 생성

NPM 명령어 로 프로젝트를 생성합니다.
node-server 프로젝트 폴더를 생성하고, npm init 명령어로 package.json 파일을 생성합니다.

$ mkdir node-server
$ cd node-server
$ npm init -y

2. 서버 만들기

서버 만들기 전에 w3schools의 Node.js HTTP 모듈을 참고하세요.

- 간단한 HTTP 서버 만들기

HTTP 서버는 클라이언트(브라우저)의 요청을 받고, 이에 응답하는 프로그램입니다.
Node.js는 http 모듈을 사용해 쉽게 서버를 생성할 수 있습니다.

http.createServer() 메서드로 서버를 생성합니다.
server.listen() 메서드로 서버를 실행합니다.

// server.js
// Node.js의 기본 내장 모듈인 'http' 모듈을 불러옵니다.
const http = require('http');

// http 서버를 생성하는 메서드
// 콜백 함수로 request(요청)과 response(응답) 객체를 매개변수로 받습니다.
const server = http.createServer((req, res) => {
    // 요청이 들어오면 응답합니다.
    res.writeHead(200, { 'Content-Type': 'text/html' }); // 응답 헤더 설정
    res.write('<h1>Hello, Node.js!</h1>'); // 응답 본문
    res.end('<p>http 모듈 공부 중...</p>'); // 응답 종료
});

// 서버가 8080 포트에서 실행되도록 설정합니다.
// .listen() : 특정 포트에서 서버를 실행하고 클라이언트의 요청을 기다립니다.
server.listen(8080, () => {
    console.log('8080 포트에서 서버가 실행 중입니다.');
});

localhost는 자신의 컴퓨터를 가리키는 주소입니다.
8080은 서버가 실행될 포트 번호입니다.

$ node server.js
8080 포트에서 서버가 실행 중입니다.

내장 모듈 : https://www.w3schools.com/nodejs/nodejs_modules.asp

- http 상태 코드

HTTP 상태 코드는 클라이언트의 요청에 대한 서버의 응답 상태를 나타내는 코드입니다.

1xx: 처리중(Informational) / 요청을 받았으며 프로세스를 계속합니다.
2xx: 성공(Success) / 요청을 성공적으로 받았으며 이해했고 수용했습니다.
3xx: 리다이렉션(Redirection) / 요청을 완료하기 위해 추가 동작이 필요합니다.
4xx: 클라이언트 오류(Client Error) / 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
5xx: 서버 오류(Server Error) / 서버가 유효한 요청에 대해 충족을 실패했습니다.

참고: MDN HTTP 상태 코드

주요 상태 코드

200: OK / 요청이 성공했습니다.
404: Not Found / 요청한 페이지를 찾을 수 없습니다.
500: Internal Server Error / 서버에 오류가 발생했습니다.

- 리스닝 이벤트(이벤트 리스너)

Node.js에서 리스닝 이벤트는 특정 상황(이벤트)이 발생했을 때 실행되는 코드
서버가 클라이언트의 요청을 받아들이기 시작할 때 발생하는 이벤트입니다.

server.listen() 메서드는 서버를 실행하고 클라이언트의 요청을 기다리는 메서드입니다.
서버가 정상적으로 실행되면 listening 이벤트가 발생합니다.
server.on('listening', 콜백함수)로 리스닝 이벤트를 등록할 수 있습니다.
server.on('error', 콜백함수)로 에러 이벤트를 등록할 수 있습니다.

// server.js

const http = require('http');

// 서버 생성
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write('<h1>Hello, Node.js!</h1>');
    res.end('<p>http 모듈 공부 중...</p>');
});

// `listening` 이벤트 등록
server.on('listening', () => {
  console.log('서버가 정상적으로 실행되었습니다!');
});

// `error` 이벤트 등록
server.on('error', (error) => {
  console.error('서버 실행 중 오류 발생:', error.message);
});

// 서버 실행
server.listen(8080, () => {
  console.log('8080 포트에서 서버가 실행 중입니다.');
});

$ node server.js
8080 포트에서 서버가 실행 중입니다.
서버가 정상적으로 실행되었습니다!

크롬의 주소창에 http://localhost:8080을 입력하면, "Hello, Node.js!"가 출력됩니다.

참고

터미널에서는 메시지가 보이지만, 크롬의 개발자 도구 콘솔창에서 메시지가 보이지 않는 이유는 터미널 출력(console.log)와 클라이언트(브라우저) 출력이 서로 다른 개념이기 때문입니다.

이유

서버 측 로그
- console.log는 Node.js 서버에서 실행되는 코드에서 발생한 로그를 출력하기 때문에
- 위 메시지는 서버의 터미널에서만 확인할 수 있습니다.
클라이언트(브라우저) 로그
- 브라우저의 개발자 도구 콘솔창은 서버에서 받은 HTML, JavaScript 등의 응답에서 발생한 로그를 보여주는 곳입니다.
- 현재 서버가 브라우저로 응답한 HTML에는 클라이언트 측 로그를 출력하는 코드가 없기 때문에 크롬 콘솔창에서 메시지가 보이지 않습니다.

참고

파일을 수정할 때마다 서버를 재시작하는 것이 번거롭다면, nodemon 패키지를 사용해보세요.

$ npm install -g nodemon
$ nodemon server.js

{
  "scripts": {
    "start": "nodemon server.js"
  }
}

$ npm start

- 파일을 보내는 응답 코드

응답 콜백에 html을 직접 넣어주는 것이 아니라 파일을 따로 만들어 파일시스템(fs)을 이용해 읽어서 보내는 방법

fs 파일을 읽어오는 모듈
fs.promises.readFile() 파일을 읽어오는 메서드
res.end(data)로 파일을 응답 본문으로 보내면서 요청 종료

$ touch index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Node.js로 서버 만들기</title>
</head>
<body>
    <h1>Node.js로 서버 만들기</h1>
    <p>파일을 읽어와 응답하는 서버</p>
</body>
</html>

aync/await 문법을 사용하면 비동기 처리를 동기 처리처럼 작성할 수 있습니다.
try-catch 문법을 사용하면 에러 처리를 쉽게 할 수 있습니다.

// fs-test.js
const http = require('http');
const fs = require('fs');

const server = http.createServer(async (req, res) => {
    try {
        // fs.promises.readFile() : 파일을 읽어오는 메서드
        const data = await fs.promises.readFile('./index.html');
        // 200이면 성공
        res.writeHead(200, { 'Content-Type': 'text/html' });
        // 파일을 읽어온 data를 응답 본문으로 보내면서 요청 종료
        res.end(data);
    } catch (error) {
        console.error(error);
        // 500이면 서버 오류
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        // 에러 메시지를 응답 본문으로 보내면서 요청 종료
        res.end(error.message);
    }
});

// 8080 서버 실행
server.listen(8080, () => {
    console.log('8080 포트에서 서버가 실행 중입니다.');
});

3. 요청 객체(req), 응답 객체(res)

Node.js의 HTTP 모듈을 사용하면 서버에서 요청 객체(req)와 응답 객체(res)를 사용할 수 있습니다.

- 요청 객체(req)

req.url : 클라이언트가 요청한 URL 주소
req.method : 클라이언트가 요청한 HTTP 메서드
req.headers : 클라이언트의 요청 헤더 정보

- 응답 객체(res)

res.writeHead(상태코드, 헤더객체) : 응답 헤더 설정
res.write(데이터) : 응답 본문 작성
res.end(데이터) : 응답 종료

- REST를 통한 페이지 라우팅

REST(Representational State Transfer)는 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모델입니다.

req.url로 요청한 URL 주소를 확인하고, 해당 URL에 따라 다른 응답을 보내는 방식
if문을 사용해 URL에 따라 다른 응답을 보내는 방식을 라우팅이라고 합니다.
이렇게 URL에 따라 다른 응답을 보내는 것을 RESTful API라고 합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Node.js로 서버 만들기</title>
</head>
<body>
    <h1>Main</h1>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>About : Node.js로 서버 만들기</title>
</head>
<body>
    <h1>About</h1>
</body>
</html>

// rest.js
const http = require('http');
const fs = require('fs');

const server = http.createServer(async (req, res) => {
    try {
        if (req.url === '/') {
            const data = await fs.promises.readFile('./index.html');
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(data);
        } else if (req.url === '/about') {
            const data = await fs.promises.readFile('./about.html');
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(data);
        } else {
            res.writeHead(404, { 'Content-Type': 'text/html' });
            res.end('<h1>404 Not Found</h1>');
        }
    } catch (error) {
        console.error(error);
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end(error.message);
    }
});

server.listen(8080, () => {
    console.log('8080 포트에서 서버가 실행 중입니다.');
});

서버를 실행하고, 크롬의 주소창에 http://localhost:8080, http://localhost:8080/about를 입력해보세요.

크롬 브라우저에서 개발자 도구를 열고 Network 탭을 확인하면, 요청과 응답 상태 코드를 확인할 수 있습니다.

4. 쿼리스트링(Query String)

쿼리스트링(Query String)은 URL 주소에 데이터를 포함하여 서버로 전달하는 방식입니다.

req.url로 요청한 URL 주소를 확인하고, URL에 포함된 쿼리스트링을 분석하는 방식
URL에 ?를 사용해 쿼리스트링을 추가하고, &로 여러 개의 쿼리스트링을 구분합니다.
url.parse() 메서드로 URL을 분석하고, querystring 모듈로 쿼리스트링을 분석합니다.

- 기본 구조

http://localhost:8080/?name=Node.js&age=20

? : 쿼리스트링의 시작
name=Node.js : name이 Node.js인 쿼리스트링
& : 쿼리스트링 구분자
size=230 : size가 230인 쿼리스트링

- url.parse() 메서드

url.parse() 메서드로 URL을 분석하면, URL의 여러 정보를 객체로 반환합니다.
url.parse(주소) : URL을 분석하여 URL 객체를 반환합니다.
url.parse(주소, true) : URL을 분석하여 URL 객체와 쿼리스트링 객체를 반환합니다.

// 이런 URL이 있다면
'http://localhost:8080/search?category=shoes&color=black&size=260'

// url.parse()로 분석하면 이렇게 분리됩니다
{
  protocol: 'http:',
  host: 'localhost:8080',
  pathname: '/search',
  query: 'category=shoes&color=black&size=260'
}

- querystring 모듈

querystring 모듈은 URL의 쿼리스트링을 객체로 변환하거나, 객체를 쿼리스트링으로 변환하는 모듈입니다.
querystring.parse(쿼리스트링) : 쿼리스트링을 객체로 변환합니다.
querystring.stringify(객체) : 객체를 쿼리스트링으로 변환합니다.

const querystring = require('querystring');
const parsedQuery = querystring.parse(parsedUrl.query);
// 이제 parsedQuery는 객체 형태가 됩니다
{
  category: 'shoes',
  color: 'black',
  size: '260'
}

- 실제 사용 예시

1) URL 주소에 쿼리스트링 추가

https://shop.com/?category=shoes&color=black&size=260

이는 다음을 의미합니다.

카테고리 : 신발
색상 : 검정
사이즈 : 260

// querystring.js
const http = require('http');
const url = require('url');
// querystring 모듈을 불러옵니다.
const querystring = require('querystring');

const server = http.createServer((req, res) => {
    // URL 문자열을 URL 객체로 변환
    const parsedUrl = url.parse(req.url);
    // URL 객체에서 쿼리스트링을 객체로 변환
    const query = querystring.parse(parsedUrl.query);

    // 상품 검색 처리
    if (query.category || query.color || query.size) {
        // 검색 조건 메시지 생성
        let searchMessage = '<h2>검색 조건:</h2>';
        if (query.category) searchMessage += `<p>카테고리: ${query.category}</p>`;
        if (query.color) searchMessage += `<p>색상: ${query.color}</p>`;
        if (query.size) searchMessage += `<p>사이즈: ${query.size}</p>`;

        // 검색 결과 메시지 (실제로는 데이터베이스 조회 결과가 들어갈 부분)
        const resultMessage = `
            <h2>검색 결과:</h2>
            <div>
                <h3>상품명: ${query.color} ${query.category}</h3>
                <p>사이즈: ${query.size}</p>
                <p>가격: 89,000원</p>
            </div>
        `;

        // HTML 응답
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        res.end(`
            <h1>쇼핑몰 상품 검색</h1>
            ${searchMessage}
            ${resultMessage}
        `);
    } else {
        // 검색 조건이 없을 때
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        res.end(`
            <h1>상품을 검색해주세요</h1>
            <p>예시: /?category=shoes&color=black&size=260</p>
        `);
    }
});

// 서버 실행
server.listen(8080, () => {
    console.log('쇼핑몰 서버가 8080 포트에서 실행 중입니다.');
});

서버를 실행하고, 크롬의 주소창에 http://localhost:8080/?category=shoes&color=black&size=260를 입력해보세요.

Node.js 기본 개념과 특징

oodada — Mon, 9 Dec 2024 22:50:08 +0900

Node.js 기본 개념과 특징

Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 구축된 JavaScript 런타임입니다. 이는 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 환경입니다.

주요 개념과 특징

1. 모듈 시스템

Node.js의 모듈 시스템은 필요한 기능을 "블록"처럼 가져다 사용하는 구조입니다.

요리시 레시피를 가져와 사용하는 것과 같아요.
필요한 재료를 가져와 사용하고, 요리를 시작합니다.

// fs 모듈을 가져와 사용합니다
// 재료를 가져옵니다 (require)
const fs = require('fs');

// 요리를 시작합니다 (파일 생성)
fs.writeFileSync('example.txt', 'Hello, Node.js!');
console.log('파일이 생성되었습니다!');

비동기와 콜백

Node.js는 시간이 오래 걸리는 작업을 "대기"하지 않고, 작업이 끝나면 알려주는 방식입니다.

음식점 홀직원은 한 명이지만, 주방에 요리사가 따로 있어요.
직원은 주문을 받고 주방에 요리를 맡기고 다음 손님을 받을 수 있습니다.

// 음식점에 직원이 한명입니다 (단일 스레드)
console.log("직원: 1번 손님 주문 받기 시작");

// 주문을 주방(다른 작업자)에 넘깁니다 (비동기 작업)
setTimeout(() => {
    console.log('요리사: 1번 손님 요리 시작');
}, 2000); // 2초 뒤에 완료

// 직원은 기다리지 않고 다음 손님 받습니다
console.log("직원: 2번 손님 주문 받기 시작");

3. 이벤트 기반 프로그래밍

Node.js는 "어떤 일이 발생하면 처리"하는 방식을 채택하고 있습니다.

음식점에서 손님이 오면 직원이 처리하는 방식과 같아요.
손님이 오면 직원이 처리하고, 다음 손님이 오면 다시 처리합니다.

const button = document.querySelector('button');

// 클릭 이벤트를 처리하는 코드
button.addEventListener('click', () => {
    console.log('버튼이 클릭되었습니다!');
});

4. npm으로 패키지 사용하기

npm은 Node.js의 패키지 관리자로, 다른 개발자가 만든 유용한 도구를 가져다 쓸 수 있게 해줍니다.

요리할 때, "소스 만들기" 대신 마트에서 이미 만들어진 소스를 사는 것과 같아요.
npm 패키지는 필요한 소스를 쉽게 가져다 쓸 수 있게 해줍니다.

npm install swiper
npm install axios

5. 파일 시스템 작업

Node.js는 fs 모듈을 사용해 파일을 읽고 쓰는 작업을 쉽게 할 수 있습니다.

컴퓨터를 사용하는 것처럼, 파일을 만들고, 내용을 읽거나 쓸 수 있어요.
예를 들어, "오늘의 일기장"을 작성하는 작업을 할 수 있습니다.

// fs 모듈을 가져와 사용합니다
const fs = require('fs');

// 파일 생성
// writeFile(파일명, 내용, 콜백함수)
fs.writeFile('diary.txt', '오늘 Node.js를 배웠다!', (err) => {
    if (err) throw err;
    console.log('일기가 저장되었습니다!');

    // 파일 읽기
    // readFile(파일명, 인코딩, 콜백함수)
    fs.readFile('diary.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log('읽은 내용:', data);
    });
});

6. 웹 서버 만들기

Node.js는 http 모듈을 사용해 간단한 웹 서버를 만들 수 있습니다.

가게를 열고 손님이 오면 주문을 받고 음식을 제공하는 것과 같아요.

// http 모듈을 가져와 사용합니다
const http = require('http');

// 웹 서버 생성
// createServer(요청, 응답)
const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('어서 오세요! Node.js 식당입니다!');
});

// 서버 실행
// listen(포트번호, 콜백함수)
server.listen(3000, () => {
    console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});

Next.js + TypeScript 핵심 예제

oodada — Tue, 26 Nov 2024 15:55:36 +0900

Next.js + TypeScript 핵심 가이드

1. 기본 타입 정의와 인터페이스

타입 정의의 기본

type Todo = {
  id: number;
  text: string;
  done: boolean;
  createdAt: Date;
}

// 인터페이스 정의
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';  // 리터럴 타입
}

2. 컴포넌트 Props 타입 지정

// props 타입 정의
interface ButtonProps {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

// 컴포넌트에서 사용
const Button: React.FC<ButtonProps> = ({ text, onClick, variant = 'primary' }) => {
  return (
    <button onClick={onClick} className={variant}>
      {text}
    </button>
  );
}

3. 페이지 컴포넌트와 라우팅 타입

// pages/users/[id].tsx
interface UserPageProps {
  user: User;  // 위에서 정의한 User 인터페이스 사용
}

export default function UserPage({ user }: UserPageProps) {
  return <div>{user.name}</div>
}

4. API 응답 타입 정의

// api 응답 타입
interface ApiResponse<T> {
  data: T;
  message: string;
  status: number;
}

// 사용 예시
async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

5. 이벤트 핸들링

// 이벤트 타입 지정
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  // 제출 로직
};

6. 상태 관리 (useState)

// 상태 타입 지정
const [user, setUser] = useState<User | null>(null);
const [todos, setTodos] = useState<Todo[]>([]);

7. Context API 타입

// context 타입 정의
interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | null>(null);

대한민국 공공데이터 포털 사용 가이드

oodada — Wed, 20 Nov 2024 13:42:48 +0900

대한민국 공공데이터 포털 사용 가이드

1. 회원가입 및 로그인

https://www.data.go.kr 접속
상단 회원가입 클릭
일반회원 또는 기업회원으로 가입
이메일 인증 완료

2. API 키 발급

로그인 후 마이페이지 접속
"API 키 발급/관리" 메뉴 선택
"일반 인증키" 또는 "서비스 인증키" 발급
인증키 발급 후 활성화까지 1-2시간 소요될 수 있음

3. 데이터 검색

방법 1: 검색창 이용

상단 검색창에 키워드 입력
'OpenAPI' 항목 체크하여 검색
필터 기능을 통해 원하는 조건으로 검색 가능

방법 2: 카테고리 이용

분류별 검색
주제별, 기관별 등 원하는 카테고리 선택
새로운 데이터 추천 서비스 활용

4. 활용신청

// 기본 API 호출 구조
const API_KEY = '발급받은_인증키';
const url = `http://api.data.go.kr/...?serviceKey=${API_KEY}`;

// 데이터 가져오기 기본 함수
async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

5. 인기 API 예시

기상청 날씨 API

const WEATHER_API = `http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst?serviceKey=${API_KEY}&numOfRows=10&pageNo=1&base_date=20240320&base_time=0600&nx=55&ny=127`;

대중교통 API

const BUS_API = `http://ws.bus.go.kr/api/rest/buspos/getBusPosByRtid?serviceKey=${API_KEY}&busRouteId=100100118`;

미세먼지 API

const DUST_API = `http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty?serviceKey=${API_KEY}&returnType=json&numOfRows=100&pageNo=1&sidoName=서울&ver=1.0`;

6. Next.js 활용 예시

"use client"
import { useEffect, useState } from 'react';

export default function DataPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const API_KEY = process.env.NEXT_PUBLIC_DATA_API_KEY;
    const url = `http://apis.data.go.kr/...?serviceKey=${API_KEY}`;

    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <div>로딩중...</div>;
  if (!data) return <div>데이터가 없습니다</div>;

  return (
    <div>
      <h1>공공데이터 결과</h1>
      {/* 데이터 표시 로직 */}
    </div>
  );
}

7. 주의사항

보안

API 키는 반드시 .env 파일에 보관
.env 파일은 .gitignore에 추가하여 보호
공개 저장소에 API 키 노출 주의

기술적 고려사항

CORS 이슈 발생 시 프록시 서버 사용 검토
일일 트래픽 제한 확인 필수
데이터 업데이트 주기 확인
에러 처리 로직 구현

활용

서비스 활용 전 라이선스 확인
적절한 에러 처리 구현
캐싱 전략 수립
사용량 모니터링

참고 링크

React Native 심화

oodada — Sat, 2 Nov 2024 22:52:31 +0900

React Native 심화

1. 네비게이션

Stack Navigation

// 기본 스택 네비게이션 설정
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tab Navigation

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

2. API 연동

Fetch 사용하기

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

Axios 사용하기

import axios from 'axios';

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (error) {
        console.error(error);
      }
    }
    fetchData();
  }, []);
}

3. 로컬 데이터 저장

AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

// 데이터 저장
const storeData = async value => {
  try {
    await AsyncStorage.setItem('my-key', JSON.stringify(value));
  } catch (e) {
    console.error(e);
  }
};

// 데이터 불러오기
const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('my-key');
    return value != null ? JSON.parse(value) : null;
  } catch (e) {
    console.error(e);
  }
};

4. 푸시 알림

Expo Notifications

import * as Notifications from 'expo-notifications';

// 알림 권한 요청
async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') {
    alert('알림 권한이 필요합니다!');
    return;
  }

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token;
}

// 로컬 알림 보내기
async function scheduleNotification() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: '알림 제목',
      body: '알림 내용입니다.',
    },
    trigger: { seconds: 2 },
  });
}

5. 성능 최적화

React.memo 사용

const MyComponent = React.memo(function MyComponent(props) {
  return (
    <View>
      <Text>{props.text}</Text>
    </View>
  );
});

useCallback 활용

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handlePress = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <ChildComponent onPress={handlePress} />;
}

6. 앱 배포

Android 배포 준비

앱 서명 키 생성
build.gradle 설정
릴리즈 빌드 생성

iOS 배포 준비

Apple Developer 계정 설정
인증서 및 프로비저닝 프로파일 설정
Xcode에서 빌드 및 아카이브

7. 테스트

Jest 사용하기

import renderer from 'react-test-renderer';

test('컴포넌트 렌더링 테스트', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

8. 애니메이션

Animated 사용

import { Animated } from 'react-native';

function FadeInView() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>페이드인 효과</Text>
    </Animated.View>
  );
}

9. 상태 관리

Recoil 사용

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// 아톰 생성
const counterState = atom({
  key: 'counterState',
  default: 0,
});

// 셀렉터 생성
const doubledCounterState = selector({
  key: 'doubledCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const doubledCount = useRecoilValue(doubledCounterState);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Text>Doubled Count: {doubledCount}</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Increment"
      />
    </View>
  );
}

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

React Native 시작하기

oodada — Sat, 2 Nov 2024 22:49:41 +0900

React Native 시작하기

학습 팁

공식 문서를 자주 참고하세요
Expo Snack으로 코드를 실험해보세요
작은 프로젝트부터 시작하세요
컴포넌트를 재사용 가능하게 설계하세요
스타일링에 시간을 투자하세요

1. React Native란?

https://reactnative.dev/
https://expo.dev/

React Native는 페이스북이 개발한 모바일 앱 개발 프레임워크입니다. React의 문법을 사용하여 iOS와 Android 앱을 동시에 개발할 수 있습니다.

장점

하나의 코드로 iOS/Android 개발 가능
JavaScript/React 지식 활용 가능
빠른 개발 속도와 실시간 미리보기 (Hot Reload)
네이티브 성능 제공

React vs React Native

// React (웹)
<div>
  <h1>안녕하세요</h1>
  <p>환영합니다</p>
</div>

// React Native (모바일)
<View>
  <Text>안녕하세요</Text>
  <Text>환영합니다</Text>
</View>

2. 개발 환경 설정

필수 설치 항목

https://docs.expo.dev/get-started/create-a-project/

Node.js
npm 또는 yarn
Expo CLI 또는 React Native CLI
Android Studio (안드로이드 개발시)
Xcode (iOS 개발시, Mac 필수)

Expo CLI로 시작하기

# Expo CLI 설치
npm install -g expo-cli

# 프로젝트 생성
expo init MyFirstApp

# 프로젝트 실행
cd MyFirstApp
npm start

3. 기본 컴포넌트

주요 컴포넌트

https://reactnative.dev/docs/components-and-apis

View: 레이아웃을 구성하는 컨테이너
Text: 텍스트 표시
Image: 이미지 표시
ScrollView: 스크롤 가능한 영역
TextInput: 입력 필드

import { View, Text, Image, ScrollView, TextInput } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1, padding: 20 }}>
      {/* 텍스트 표시 */}
      <Text>안녕하세요!</Text>

      {/* 이미지 표시 */}
      <Image
        source={require('./assets/icon.png')}
        style={{ width: 100, height: 100 }}
      />

      {/* 입력 필드 */}
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        placeholder="여기에 입력하세요"
      />

      {/* 스크롤 가능한 영역 */}
      <ScrollView>
        <Text>스크롤 내용...</Text>
      </ScrollView>
    </View>
  );
}

기본 스타일링

https://reactnative.dev/docs/style

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
    marginBottom: 10,
  },
});

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>스타일 예시</Text>
    </View>
  );
}

4. 기본 기능 구현

컴포넌트 : https://reactnative.dev/docs/components-and-apis

버튼과 터치 이벤트

https://reactnative.dev/docs/button

import { TouchableOpacity, Alert } from 'react-native';

function MyButton() {
  return (
    <TouchableOpacity
      style={{ padding: 10, backgroundColor: 'blue' }}
      onPress={() => Alert.alert('버튼이 눌렸습니다!')}
    >
      <Text style={{ color: 'white' }}>눌러보세요</Text>
    </TouchableOpacity>
  );
}

상태 관리

https://reactnative.dev/docs/intro-react#state

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>카운트: {count}</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>증가</Text>
      </TouchableOpacity>
    </View>
  );
}

5. 실습 예제: 간단한 할일 목록 앱

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

export default function TodoApp() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim().length > 0) {
      setTasks([...tasks, { id: Math.random().toString(), text: task }]);
      setTask('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>할일 목록</Text>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={task}
          onChangeText={setTask}
          placeholder="할일을 입력하세요"
        />
        <TouchableOpacity
          style={styles.addButton}
          onPress={addTask}
        >
          <Text style={styles.buttonText}>추가</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.task}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
  },
  addButton: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
  },
  task: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
});

React Recoil 로 todolist 제작하기

oodada — Sat, 2 Nov 2024 20:57:14 +0900

React Recoil

리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.

state 와 props를 사용해서 컴포넌트 간에 데이터를 전달

React Context API를 사용해서 컴포넌트 간에 데이터를 전달
Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용

Recoil이란

Recoil은 React 상태 관리를 위한 라이브러리로, 전역 상태를 관리하기 위한 간단한 방법입니다.
Recoil은 atom과 selector를 사용하여 상태를 관리합니다.

Recoil 문법

atom을 사용하여 상태를 생성합니다.
useRecoilState를 사용하여 상태를 사용합니다.
selector를 사용하여 파생된 상태를 생성합니다.

Recoil 사용하기

atom을 사용하여 상태를 생성합니다.

import { atom } from 'recoil';

const myState = atom({
  key: 'myState', // unique ID (with respect to other atoms/selectors)
  default: defaultValue, // default value (aka initial value)
});

useRecoilState를 사용하여 상태를 사용합니다.

import { useRecoilState } from 'recoil';

const [state, setState] = useRecoilState(myState);

Recoil을 사용한 Theme 예제

import React from 'react';
import { atom, useRecoilState } from 'recoil';

const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

const themeState = atom({
  key: 'themeState',
  default: themes.light,
});

function App() {
  return (
    <ThemeProvider>
      <Toolbar />
    </ThemeProvider>
  );
}

function ThemeProvider({ children }) {
  const [theme, setTheme] = useRecoilState(themeState);

  return <div style={{ background: theme.background, color: theme.foreground }}>{children}</div>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const [theme] = useRecoilState(themeState);
  return <button style={{ background: theme.background, color: theme.foreground }}>I am styled by theme context!</button>;
}

export default App;

Recoil을 이용한 앱 만들기

주문 페이지

여러 컴포넌트의 가격과 옵션을 공유하여 총액을 계산하여 보여주는 페이지를 만들어보겠습니다.

import React from 'react';
import { atom, useRecoilState } from 'recoil';

const orderState = atom({
  key: 'orderState',
  default: {
    price: 0,
    option: 'none',
  },
});

function App() {
  return (
    <OrderProvider>
      <Order />
      <Total />
    </OrderProvider>
  );
}

function OrderProvider({ children }) {
  return <div>{children}</div>;
}

function Order() {
  const [order, setOrder] = useRecoilState(orderState);

  const handleChange = e => {
    let price = 0;
    switch (e.target.value) {
      case 'sugar':
        price = 1000;
        break;
      case 'milk':
        price = 1500;
        break;
      case 'none':
      default:
        price = 0;
        break;
    }
    setOrder({ ...order, option: e.target.value, price: price });
  };

  return (
    <div>
      <h1>Order</h1>
      <select
        value={order.option}
        onChange={handleChange}
      >
        <option value="none">None</option>
        <option value="sugar">Sugar</option>
        <option value="milk">Milk</option>
      </select>
    </div>
  );
}

function Total() {
  const [order] = useRecoilState(orderState);

  return (
    <div>
      <h1>Total</h1>
      <p>Price: {order.price}원</p>
      <p>Option: {order.option}</p>
    </div>
  );
}

export default App;

- 할 일 관리 앱 Recoil 사용하기

// src/context/TodoContext.js
import React from 'react';
import { atom, useRecoilState } from 'recoil';

const initialState = [
  {
    id: 1,
    isDone: false,
    task: '고양이 밥주기',
    createdDate: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    task: '감자 캐기',
    createdDate: new Date().getTime(),
  },
  {
    id: 3,
    isDone: false,
    task: '고양이 놀아주기',
    createdDate: new Date().getTime(),
  },
];

const todoState = atom({
  key: 'todoState',
  default: initialState,
});

export function useTodoState() {
  return useRecoilState(todoState);
}

// src/components/App.js
import React from 'react';
import TodoHd from './TodoHd';
import TodoEditor from './TodoEditor';
import TodoList from './TodoList';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <div>
        <TodoHd />
        <TodoEditor />
        <TodoList />
      </div>
    </RecoilRoot>
  );
}

export default App;

// src/components/TodoList.js
import React, { useState } from 'react';
import TodoItem from './TodoItem';
import { useTodoState } from '../context/TodoContext';

export default function TodoList() {
  const [todo, setTodo] = useTodoState();
  const [search, setSearch] = useState('');

  const onChangeSearch = e => {
    setSearch(e.target.value);
  };

  const filteredTodo = () => {
    return todo.filter(item => item.task.toLowerCase().includes(search.toLowerCase()));
  };

  return (
    <div>
      <h2>할 일 목록  </h2>
      <input
        value={search}
        onChange={onChangeSearch}
        placeholder="검색어를 입력하세요"
      />
      <ul>
        {filteredTodo().map(item => (
          <TodoItem
            key={item.id}
            {...item}
          />
        ))}
      </ul>
    </div>
  );
}

// src/components/TodoEditor.js
import React, { useState } from 'react';
import { useTodoState } from '../context/TodoContext';

export default function TodoEditor() {
  const [todo, setTodo] = useTodoState();
  const [task, setTask] = useState('');

  const onChangeTask = e => {
    setTask(e.target.value);
  };

  const onSubmit = () => {
    if (!task) {
      return;
    }
    setTodo([{ id: Date.now(), isDone: false, task, createdDate: new Date().getTime() }, ...todo]);
    setTask('');
  };

  const onKeyDown = e => {
    if (e.key === 'Enter') {
      onSubmit();
    }
  };

  return (
    <div className="TodoEditor">
      <h2>새로운 Todo 작성하기 ✏ </h2>
      <div>
        <input
          value={task}
          onChange={onChangeTask}
          onKeyDown={onKeyDown}
          placeholder="할 일을 추가로 입력해주세요."
        />
        <button onClick={onSubmit}>추가</button>
      </div>
    </div>
  );
}

// src/components/TodoItem.js
import React from 'react';
import { useTodoState } from '../context/TodoContext';

export default function TodoItem({ id, isDone, task, createdDate }) {
  const [todo, setTodo] = useTodoState();

  const onUpdate = () => {
    setTodo(todo.map(it => (it.id === id ? { ...it, isDone: !it.isDone } : it)));
  };

  const onDelete = () => {
    setTodo(todo.filter(it => it.id !== id));
  };

  return (
    <div>
      <li key={id}>
        <input
          type="checkbox"
          checked={isDone}
          onChange={onUpdate}
        />
        <span style={{ textDecoration: isDone ? 'line-through' : 'none' }}>{task}</span>
        <span>{new Date(createdDate).toLocaleDateString()}</span>
        <button onClick={onDelete}>삭제</button>
      </li>
    </div>
  );
}

조건부 렌더링 (Conditional Rendering) - React 배우기

oodada — Sat, 2 Nov 2024 19:50:41 +0900

조건부 렌더링 (Conditional Rendering)

조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.
React에서는 삼항 연산자나 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.

1. 삼항 연산자

삼항 연산자는 조건에 따라 다른 값을 반환하는 연산자입니다.

import React from 'react';

function App() {
  const isLogin = true;

  return <div className="App">{isLogin ? <p>로그인 중</p> : <p>로그인 해주세요</p>}</div>;
}

export default App;

2. && 연산자

&& 연산자는 조건이 참일 때만 결과를 반환하는 연산자입니다.

import React from 'react';

function App() {
  const isLogin = true;

  return <div className="App">{isLogin && <p>로그인 중</p>}</div>;
}

export default App;

삼항 연산자와 && 연산자는 각각의 상황에 따라 사용하면 됩니다.
삼항 연산자는 조건이 참일 때와 거짓일 때 모두 결과를 반환할 때 사용하고, && 연산자는 조건이 참일 때만 결과를 반환할 때 사용합니다.

3. 조건부 렌더링 예제

아래 코드는 isLogin 상태에 따라 다른 결과를 보여주는 예제입니다.

import React, { useState } from 'react';

function App() {
  const [isLogin, setIsLogin] = useState(false);

  const handleLogin = () => {
    setIsLogin(true);
  };

  const handleLogout = () => {
    setIsLogin(false);
  };

  return (
    <div className="App">
      {isLogin ? (
        <div>
          <p>로그인 중</p>
          <button onClick={handleLogout}>로그아웃</button>
        </div>
      ) : (
        <div>
          <p>로그인 해주세요</p>
          <button onClick={handleLogin}>로그인</button>
        </div>
      )}
    </div>
  );
}

export default App;

isLogin 상태가 true이면 "로그인 중"과 "로그아웃" 버튼을 보여주고, false이면 "로그인 해주세요"와 "로그인" 버튼을 보여줍니다.
"로그인" 버튼을 클릭하면 handleLogin 함수가 호출되어 isLogin 상태를 true로 변경하고, "로그아웃" 버튼을 클릭하면 handleLogout 함수가 호출되어 isLogin 상태를 false로 변경합니다.

React의 핵심 개념

oodada — Sun, 27 Oct 2024 21:09:42 +0900

React의 핵심 개념

React를 시작하는 개발자들을 위한 핵심 개념들을 정리해보았습니다. react의 핵심 개념을 이해하고, 실제 프로젝트에 적용해보면서 경험을 쌓는 것이 중요합니다.

리액트 홈

1. React란?

https://odada.me/250

React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

리액트는 하나의 html 페이지만 존재하는 웹사이트(웹애플리케이션)으로 다른 컨텐츠 페이지를 불러들어오는 구조입니다.

이미지출처: 소플의 리액트

- 설치

node.js 설치 후, 터미널에서 아래 명령어로 설치합니다.

npx create-react-app@latest ./

- 실행

npm start

1. 컴포넌트 (Components)

https://odada.me/254

React의 가장 기본이 되는 개념으로, UI를 구성하는 블록입니다.
재사용 가능하며, 독립적으로 동작합니다.

- 함수형 컴포넌트 예시

함수형 컴포넌트는 순수 함수로, 입력값(props)에 따라 UI를 반환합니다.
함수형 컴포넌트는 간단하고 가독성이 좋으며, React Hooks를 사용할 수 있습니다.
클래스 컴포넌트보다 성능이 좋기 때문에 최근에는 함수형 컴포넌트를 권장합니다.

function SignupForm(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <SignupForm name="odada" />;
}

export default App;

- 클래스형 컴포넌트 예시

클래스형 컴포넌트는 React.Component 클래스를 상속받아 구현합니다.
render 메서드를 구현하여 UI를 반환합니다.
this.props로 부모 컴포넌트에서 전달받은 데이터를 사용할 신₩ 있습니다.

class SignupForm extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

class App extends React.Component {
  render() {
    return <SignupForm name="odada" />;
  }
}

export default App;

2. JSX

JavaScript XML의 약자로, React에서 UI를 표현할 때 사용하는 문법입니다.

- JSX 규칙

반드시 하나의 부모 요소로 감싸져야 함
모든 태그는 닫혀있어야 함
JavaScript 표현식은 중괄호 {} 안에 작성

const element = ({ name }) => {
  return (
    <>
      <h1>Hello! {name}</h1>
      <p>Good to see you here.</p>
    </>
  );
};

- JSX 사용 예시

function App() {
  return (
    <ul>
      <NewsItem />
      <NewsItem />
      <NewsItem />
    </ul>
  );
}

function NewsItem() {
  return (
    <li>
      <strong>제목 1</strong>
      <p>내용 1</p>
      <LikeButton />
    </li>
  );
}

function LikeButton() {
  return <button>좋아요</button>;
}

export default App;

3. Props

https://odada.me/271

컴포넌트 간에 데이터를 전달하는 방법입니다.

- Props의 특징

읽기 전용 (불변성)
부모에서 자식으로만 전달 가능
객체, 함수 등 모든 JavaScript 값을 전달할 수 있음

// 부모 컴포넌트
function ParentComponent() {
  return <ChildComponent message="Hello from parent" />;
}

// 자식 컴포넌트
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

- Props 사용 예시

function App() {
  return (
    <ul>
      <NewsItem
        title="제목1"
        content="내용1"
      />
      <NewsItem
        title="제목2"
        content="내용2"
      />
      <NewsItem
        title="제목3"
        content="내용3"
      />
    </ul>
  );
}

function NewsItem({ title, content }) {
  return (
    <li>
      <strong>{title}</strong>
      <p>{content}</p>
      <LikeButton />
    </li>
  );
}

function LikeButton() {
  return <button>좋아요</button>;
}

export default App;

4. 이벤트 처리

https://odada.me/273

React의 이벤트는 카멜케이스를 사용하며, JSX에 함수로 전달합니다.

function handleClick(e) {
  e.preventDefault();
  console.log('버튼이 클릭되었습니다.');
}

return <button onClick={handleClick}>Click me</button>;

5. 조건부 렌더링

조건에 따라 다른 내용을 렌더링하는 방법입니다.

function Greeting({ isLogin }) {
  return isLogin ? <p>로그인되었습니다.</p> : <p>로그인이 필요합니다.</p>;
}

6. Hooks

함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능입니다.

- 주요 Hook들

useState

상태를 추가하고, 상태를 변경할 수 있게 해줍니다.

const [state, setState] = useState(initialState);

useEffect

컴포넌트가 렌더링될 때, 업데이트될 때, 언마운트될 때 등 특정 시점에 작업을 수행할 수 있게 해줍니다.

useEffect(() => {
  // 컴포넌트가 마운트될 때 실행
  return () => {
    // 클린업 함수
  };
}, [dependencies]);

useContext

컴포넌트 트리 전체에서 전역적으로 사용할 수 있는 값을 공유할 수 있게 해줍니다.

const value = useContext(MyContext);

useRef

DOM 요소에 직접 접근하거나, 컴포넌트의 인스턴스 변수를 사용할 수 있게 해줍니다.

const inputRef = useRef();

useMemo

연산량이 많은 함수의 반환값을 캐싱하여 성능을 최적화할 수 있게 해줍니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. State

https://odada.me/274

컴포넌트 내부에서 관리되는 데이터입니다.

- State 사용 규칙

setState로만 값을 변경해야 함
비동기적으로 처리됨
이전 상태를 기반으로 업데이트할 때는 함수형 업데이트 사용

function Counter() {
  const [count, setCount] = useState(0);
  // const result = useState(0);
  // const count = result[0];
  // const setCount = result[1];

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

- props 사용 예시

function App() {
  return (
    <ul>
      <NewsItem
        title="제목1"
        content="내용1"
      />
      <NewsItem
        title="제목2"
        content="내용2"
      />
      <NewsItem
        title="제목3"
        content="내용3"
      />
    </ul>
  );
}

function NewsItem({ title, content }) {
  return (
    <li>
      <strong>{title}</strong>
      <p>{content}</p>
      <LikeButton />
    </li>
  );
}

function LikeButton() {
  const [like, setLike] = useState(false);

  return <button onClick={() => setLike(prevLike => !prevLike)}>{like ? '좋아요 취소' : '좋아요'}</button>;
}

export default App;

8. 생명주기 (Lifecycle)

https://odada.me/313

컴포넌트의 생성부터 소멸까지의 과정을 말합니다.

- 주요 생명주기

마운트 (Mount) : 컴포넌트가 생성되어 DOM에 추가될 때
업데이트 (Update) : 컴포넌트의 상태나 props가 변경될 때
언마운트 (Unmount) : 컴포넌트가 DOM에서 제거될 때

function LifecycleComponent() {
  useEffect(() => {
    console.log('컴포넌트 마운트');

    return () => {
      console.log('컴포넌트 언마운트');
    };
  }, []);

  useEffect(() => {
    console.log('컴포넌트 업데이트');
  });

  return <div>컴포넌트 생명주기</div>;
}

export default LifecycleComponent;

- 배경색 변경 예시

import React, { useState, useEffect } from 'react';

function BackgroundColor({ color }) {
  useEffect(() => {
    document.body.style.backgroundColor = color; // 마운트 시 배경색 변경
    return () => {
      document.body.style.backgroundColor = ''; // 언마운트 시 배경색 초기화
    };
  }, [color]); // color 값이 변경될 때만 실행

  return null;
}

function App() {
  const [color, setColor] = useState('yellow');

  return (
    <div>
      <BackgroundColor color={color} />
      <button onClick={() => setColor('red')}>빨간색</button>
      <button onClick={() => setColor('blue')}>파란색</button>
      <button onClick={() => setColor('green')}>초록색</button>
    </div>
  );
}

export default App;

9. 리스트와 키

배열 데이터를 렌더링할 때는 각 항목을 구분할 수 있는 key가 필요합니다.

const mockupNews = [
  { id: 1, title: '제목1', content: '내용1' },
  { id: 2, title: '제목2', content: '내용2' },
  { id: 3, title: '제목3', content: '내용3' },
];

function NewsList() {
  return (
    <ul>
      {mockupNews.map(news => (
        <li key={news.id}>
          <strong>{news.title}</strong>
          <p>{news.content}</p>
        </li>
      ))}
    </ul>
  );
}

10. useContext

https://odada.me/319

컴포넌트 트리 전체에서 전역적으로 사용할 수 있는 값을 공유할 수 있게 해줍니다.

const MyContext = React.createContext(defaultValue);

function App() {
  return (
    <MyContext.Provider value={/* 어떤 값 */}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

- 뉴스 useContext 사용 예시

// context/NewsContext.js
import React from 'react';

const NewsContext = React.createContext();

export default NewsContext;

// data/mockupNews.js
const mockupNews = [
  { id: 1, title: '제목1', content: '내용1' },
  { id: 2, title: '제목2', content: '내용2' },
  { id: 3, title: '제목3', content: '내용3' },
];

export default mockupNews;

// components/NewsItem.js
import React, { useContext } from 'react';
import NewsContext from '../context/NewsContext';

function NewsItem() {
  const news = useContext(NewsContext);

  return (
    <li>
      <strong>{news.title}</strong>
      <p>{news.content}</p>
    </li>
  );
}

export default NewsItem;

// App.js
import React from 'react';
import NewsContext from './context/NewsContext';
import mockupNews from './data/mockupNews';
import NewsItem from './components/NewsItem';

function App() {
  return (
    <NewsContext.Provider value={mockupNews}>
      <ul>
        <NewsItem />
        <NewsItem />
        <NewsItem />
      </ul>
    </NewsContext.Provider>
  );
}

export default App;

- Recoil 사용 예시

// atoms/newsAtom.js
import { atom } from 'recoil';

export const newsState = atom({
  key: 'newsState',
  default: [
    { id: 1, title: '제목1', content: '내용1' },
    { id: 2, title: '제목2', content: '내용2' },
    { id: 3, title: '제목3', content: '내용3' },
  ],
});

// components/NewsItem.js
import React from 'react';
import { useRecoilValue } from 'recoil';
import { newsState } from '../atoms/newsAtom';

function NewsItem({ id }) {
  const news = useRecoilValue(newsState).find(item => item.id === id);

  return (
    <li>
      <strong>{news.title}</strong>
      <p>{news.content}</p>
    </li>
  );
}

export default NewsItem;

// App.js
import React from 'react';
import { RecoilRoot } from 'recoil';
import NewsItem from './components/NewsItem';

function App() {
  return (
    <RecoilRoot>
      <ul>
        <NewsItem id={1} />
        <NewsItem id={2} />
        <NewsItem id={3} />
      </ul>
    </RecoilRoot>
  );
}

export default App;

11. API 통신

https://odada.me/309 , https://odada.me/319

실무에서는 API 통신을 위한 코드를 별도의 파일이나 폴더로 분리하여 관리하는 것이 일반적입니다. 이렇게 하면 코드의 재사용성과 유지보수성이 높아집니다. 예를 들어, data 폴더를 만들어 API 통신 관련 코드를 작성할 수 있습니다.

https://newsapi.org/ 에서 API 키를 발급받아 사용할 수 있습니다.

- API 통신 예시

data 폴더를 만들고, api.js 파일을 생성합니다.

// data/api.js
import axios from 'axios';

export const fetchNews = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return response.data;
  } catch (error) {
    console.error('Error fetching news:', error);
    throw error;
  }
};

- 뉴스 컴포넌트에서 API 호출

// .env
NEWS_API_KEY = YOUR_API_KEY;

// data/api.js
import axios from 'axios';

const API_URL = `https://newsapi.org/v2/top-headlines?country=kr&apiKey=${process.env.NEWS_API_KEY}`;

export const fetchNews = async () => {
  try {
    const response = await axios.get(API_URL);
    return response.data.articles;
  } catch (error) {
    console.error('Error fetching news:', error);
    throw error;
  }
};

// components/NewsList.js
import React, { useEffect } from 'react';
import { useRecoilState } from 'recoil';
import { newsState } from '../atoms/newsAtom';
import { fetchNews } from '../data/api';

function NewsList() {
  const [news, setNews] = useRecoilState(newsState);

  useEffect(() => {
    const getNews = async () => {
      try {
        const articles = await fetchNews();
        setNews(articles);
      } catch (error) {
        console.error('Error fetching news:', error);
      }
    };

    getNews();
  }, [setNews]);

  return (
    <ul>
      {news.map(item => (
        <li key={item.id}>
          <strong>{item.title}</strong>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
}

export default NewsList;

// App.js
import React from 'react';
import { RecoilRoot } from 'recoil';
import NewsList from './components/NewsList';

function App() {
  return (
    <RecoilRoot>
      <NewsList />
    </RecoilRoot>
  );
}

export default App;

12. Virtual DOM

React가 실제 DOM 업데이트를 효율적으로 처리하기 위해 사용하는 개념입니다.

실제 DOM과 가상의 DOM을 비교
변경된 부분만 실제 DOM에 적용
성능 최적화에 도움

실무에서 알면 좋은 추가 개념들

1. 상태 관리 라이브러리

Redux : 가장 많이 사용되는 상태 관리 라이브러리
Recoil : Facebook에서 만든 상태 관리 라이브러리
MobX : 상태 관리 라이브러리
Zustand : 간단하고 빠른 상태 관리 라이브러리

2. 라우팅

React Router : React에서 라우팅을 구현할 수 있는 라이브러리
Next.js : React 프레임워크로, SSR(Server Side Rendering)을 지원

https://odada.me/256

import { BrowserRouter, Route, Switch } from 'react-router-dom';

3. 스타일링

https://odada.me/324

styled-components :
Emotion
Tailwind CSS
CSS Modules

4. 성능 최적화

https://odada.me/315

const MemoizedComponent = React.memo(function MyComponent(props) {
  // ... 컴포넌트 로직
});

5. Custom Hooks 작성

커스텀 로직을 재사용할 수 있게 해주는 기능입니다.

function useCustomHook() {
  const [value, setValue] = useState(null);
  // ... 커스텀 로직
  return value;
}

6. 폼 핸들링

React Hook Form
Formik
Yup (유효성 검사)

7. API 통신

axios
React Query (TanStack Query)
SWR

import { useState, useEffect } from 'react';
import axios from 'axios';

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);

  // 게시글 목록 조회
  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setLoading(true);
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setPosts(response.data.slice(0, 5)); // 5개만 가져오기
      } catch (error) {
        console.error('Error fetching posts:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

  if (loading) return <div>로딩중...</div>;

  return (
    <div>
      <h1>게시글 목록</h1>
      {posts.map(post => (
        <div
          key={post.id}
          style={{ margin: '20px 0', padding: '10px', border: '1px solid #ddd' }}
        >
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default PostList;

마치며

위의 개념들을 하나씩 학습하고 실제 프로젝트에 적용해보면서 경험을 쌓는 것이 중요합니다. 특히 초기에는 기본적인 개념들(컴포넌트, props, state)을 확실히 이해하는 것에 집중하시기 바랍니다.

관련 문서나 자세한 내용은 React 공식 문서를 참고하시면 도움이 됩니다.

github 협업하기

oodada — Tue, 22 Oct 2024 21:22:56 +0900

https://devfancy.github.io/Technology-GitHub-Branch-Protection-Rule/

GitHub에 올라간 Branch에 Protection Rule 적용하기

Index

devfancy.github.io

작성중...

사전수업

oodada — Tue, 27 Aug 2024 09:57:54 +0900

웹사이트 제작 기본 프로세스	https://odada.me/291
퍼블리싱 기초	https://odada.me/290
부트스트랩으로 빠르게 포폴 만들기	https://odada.me/350

https://www.w3schools.com/

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://developer.mozilla.org/ko/docs/Web

개발자를 위한 웹 기술 | MDN

웹의 개방성은 개발자들에게 많은 기회를 제공합니다. 하지만 웹 기술을 잘 활용하려면 우선 그 사용 방법을 잘 알아야 합니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.

developer.mozilla.org

https://zoom.us/j/98343749057?pwd=AELWF5sJqJb5LEyd0t8BrT2SCFbrvQ.1

<!DOCTYPE html>

<head>

<title>정미애의 포트폴리오</title>

</head>

<body>

<h1>

<span>RORTFOLIO</span>

<span>odada</span>

</h1>

<p>Did you looking for me?</p>

<dl>

<dt>CONTACT</dt>

<dd>

</dd>

<dd>

</dd>

</dl>

</body>

</html>

부트스트랩으로 빠르게 포트폴리오 만들기

oodada — Mon, 26 Aug 2024 12:15:07 +0900

부트스트랩으로 빠르게 포트폴리오 만들기

1. 포트폴리오란?

포트폴리오는 자신의 업무 능력과 경험을 보여주는 문서입니다. 개인의 업무 능력과 경험을 보여주기 위해 만들어지는 것이기 때문에 자신의 업무 능력과 경험을 잘 보여줄 수 있어야 합니다.

2. 부트스트랩이란?

https://getbootstrap.kr/

부트스트랩은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JavaScript를 사용하여 웹 페이지를 만들 때 사용할 수 있는 여러 가지 디자인 요소와 기능을 제공합니다.

부트스트랩을 사용하면 웹 페이지를 쉽고 빠르게 만들 수 있습니다. 부트스트랩은 반응형 웹 디자인을 지원하기 때문에 모바일 환경에서도 웹 페이지가 잘 보이도록 만들 수 있습니다.

about

oodada — Mon, 12 Aug 2024 16:47:27 +0900

odada

odada (정미애)

odd:odd

작업명: [PC, M] STE
키워드: #React, #styledComponent #Chakra-UI

작업url: https://github.com/oddoddo/--ste-react

작업명: [PC, M] NFT Market BOAspace
키워드: #React, #styledComponent #Chakra-UI

작업url: https://boaspace.io/ https://github.com/oddoddo/boa-space-frontend-

작업명: [PC, M] BOSagora
키워드: #React, #styledComponent #Chakra-UI

작업url: https://bosagora.io/ko/ https://github.com/oddoddo/BOSagora

작업명: [PC, M] fmschool

작업url: https://fmschool.co.kr/
키워드: #React, #styledComponent

작업명: [PC, M] 한국전자인증 웹접근성 평가인증

작업url: https://www.crosscert.com/
키워드: #웹접근성평가인증, #WA

작업명: [PC] 용인시 교통약자 이동지원센터

작업url: https://odada-o.github.io//Dams-yn
키워드: #react #html5 #sass

작업명: [반응형] 카스카디아

작업URL: desktop
mobile
키워드: #html5 #sass #javascript #slick

작업명: [pc] 부산대학교 어린이병원

작업URL: https://odada-o.github.io//pnuh-kids/pnuh-kids/
키워드: #html5 #sass #javascript #slick

작업명: [pc] 부산대학교 재활센터

작업URL: https://odada-o.github.io//pnuh-center/
키워드: #html5 #sass #css3 #javascript #slick

작업명: [tablet] LH 사전 접수

작업URL: https://odada-o.github.io//lh-t/
키워드: #html5 #sass #javascript #slick

작업명: [반응형] 다줌 간편청구

작업URL: https://odada-o.github.io//dazum-easy/
키워드: #html5 #sass #css3 #javascript #slick

작업명: [반응형] 해법 독서논술 이벤트

작업URL: https://odada-o.github.io//hb-event/ >
키워드: #html5 #sass #css3 #jquery #slick

작업명: [반응형] 드림픽쳐스21

작업URL: https://odada-o.github.io//dp21/
키워드: #design #html5 #sass #css3 #javascript #slick

작업명: [PC] 환경지킴이 복무관리시스템

작업URL: https://odada-o.github.io//5rc/s101.html
키워드: #XD #html5 #css3 #jQuery #slick

작업명: [PC] 이천동행누리센터

작업URL: https://www.2000happydream.or.kr/
키워드: #웹접근성 #html5 #css3 #jQuery #slick

작업명: [반응형] OCI

작업URL: https://odada-o.github.io//oci/
키워드: #html5, #css3, #jQuery, #swiper, #css3amimate

작업명: [반응형] 광주MBC

작업URL: https://odada-o.github.io//kjmbc/
키워드: #html5, #css3, #jQuery, #swiper, #css3amimate

작업명: [반응형] 벽초지수목원

작업URL: http://www.bcj.co.kr/
키워드: #html5, #css3, #jQuery, #swiper, #css3amimate

작업명: [PC] 현대인재개발센터

작업URL: https://odada-o.github.io//hyundaihrd/
키워드: #html5, #css3, #jQuery, #swiper, #css3amimate

작업명: [반응형] 수원화성 군공항이전사업

작업URL: https://odada-o.github.io//suwon/
키워드: #html5, #css3, #jQuery, #swiper, #fullpage

작업명: [반응형] POA 국제식물검역인증원 인터랙션

작업URL: https://www.ipab.or.kr/
키워드: #html, #css, #반응형, #jQuery, #웹표준

작업명: [반응형] Bullbull

작업URL: https://odada-o.github.io//bullbull/
키워드: #Photoshop, #html, #css, #반응형, #jQuery, #bootstrap

작업명: [반응형] 온라인MICE연수원

작업URL: http://5gamm.co.kr/!list.html
키워드: #Photoshop, #Illustrator, #html, #css, #반응형, #jQuery

dk techin

작업명: M) kakao 선물하기
작업영역: 퍼블리싱

작업 URL: https://www.kakaocorp.com/service/KakaoGift

작업명: PC) Daum 백과
작업영역: 퍼블리싱

작업URL: http://100.daum.net/

작업명: M) Daum 웹툰
작업영역: 퍼블리싱

작업URL: http://m.webtoon.daum.net/m/

작업명: App) Daum 뮤직
작업영역: 퍼블리싱

작업URL: http://m.music.daum.net/

작업명: M) Daum 운세
작업영역: 퍼블리싱

작업URL: http://m.fortune.daum.net/

작업명: PC) kakao Mobile AD
작업영역: 퍼블리싱

작업URL: http://ads.kakao.com/

작업명: PC) TISTORY 관리
작업영역: 퍼블리싱

작업URL: https://www.tistory.com/

작업명: PC) 키즈짱 디즈니존
작업영역: 퍼블리싱

작업URL

작업명: PC) 라이프 솔루션
작업영역: 퍼블리싱

작업URL

작업명: M,PC) kakaopay event
작업영역: 퍼블리싱

작업URL: daumkakao/pc_kakaopay.html

작업명: M) EVENT
작업영역: 퍼블리싱

작업URL

작업명: PC) 이벤트
작업영역: 퍼블리싱

작업URL

woongjin passone

작업명: KG패스원 기업교육
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: NH농협 직무교육
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: 동국제강그룹 직무교육 반응형웹
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: KG패스원 손익관리시스템
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: KG패스원 직무교육 사이트 개편
작업영역: 디자인 + 퍼블리싱

작업 URL: http://hrd.passone.net/main/

작업명: SK네트웍스 직무교육 사이트
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: 대한병원협회 직무교육
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: 아주그룹 직무교육 인트로
작업영역: 디자인 + 퍼블리싱

작업 URL

paxnet

작업명: PC) 팍스넷
작업영역: 디자인 + 퍼블리싱

작업 URL: http://paxnet.moneta.co.kr/

작업명: PC) 모네타 부동산
작업영역: 디자인 + 퍼블리싱

작업 URL: http://www.moneta.co.kr/

작업명: PC) 퇴직연금
작업영역: 디자인 + 퍼블리싱

작업 URL

작업명: PC) 한화증권 실전투자대회
작업영역: 디자인 + 퍼블리싱

작업 URL: ./_past/game/html/!list.html ./_past/game/html/main.html

도서

작업명: 플래시 8 Motion Action 저

작업URL: 네이버책 플래시 8 Motion Action
키워드: #flash #제우미디어

작업명: 플래시 MX 모션 & 액션 저

작업URL: 네이버책 플래시 MX 모션 & 액션
키워드: #flash #제우미디어

타입 가져오기, 내보내기

oodada — Thu, 18 Jul 2024 22:03:39 +0900

ts 가져오기, 내보내기

타입스크립트에서는 import와 export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다.

// export.ts
interface User {
    name: string;
    age: number;
    role: boolean;
}

export function introduce(user: User) {
    return `${user.name}는 ${user.age}살이며, 관리자인가요? ${user.role ? '네' : '아니요'}`;
}

// import.ts
import { introduce } from './export';

const userA = {
    name: '김가을',
    age: 2,
    role: false,
};

const userB = {
    name: '김겨울',
    age: 3,
    role: true,
};

const message1 = introduce(userA);
const message2 = introduce(userB);

console.log(message1);
console.log(message2);

타입 제너릭

oodada — Thu, 18 Jul 2024 22:02:56 +0900

제너릭 (Generics)

제너릭은 타입을 파라미터로 전달하여 타입 안정성을 확보하는 방법입니다.

함수

interface Obj {
    x: number;
}
type Arr = [number, number];

function toArray(a: string, b: string): string[];
function toArray(a: number, b: number): number[];
function toArray(a: boolean, b: boolean): boolean[];
function toArray(a: Obj, b: Obj): Obj[];
function toArray(a: Arr, b: Arr): Arr[];
function toArray(a: any, b: any) {
    return [a, b];
}

console.log(
    toArray('a', 'b'),
    toArray(1, 2),
    toArray(true, false),
    toArray({ x: 1 }, { x: 2 }),
    toArray([1, 2], [3, 4]),
);

위의 오버로딩 함수를 제너릭으로 변경하면 다음과 같습니다.

interface Obj {
    x: number;
}
type Arr = [number, number];

// 제너릭 문법을 사용하여 타입을 파라미터로 전달한다.
function toArray<T, U>(a: T, b: U): [T, U] {
    return [a, b];
}

console.log(
    toArray<string, string>('a', 'b'), // 꺽쇠 괄호 안에 타입을 명시적으로 지정 // 추론 가능하여 생략 가능하다.
    toArray<number, number>(1, 2),
    toArray<boolean, boolean>(true, false),
    toArray<Obj, Obj>({ x: 1 }, { x: 2 }),
    toArray<Arr, Arr>([1, 2], [3, 4, 5]), // 오류 발생 Arr 타입에서 요소의 개수가 다르기 때문
);

클래스

class User {
    public name;
    constructor(name: string) {
        this.name = name;
    }
    getName(): string {
        return this.name;
    }
}

const user1 = new User('김가을');
console.log(user1.getName());

위 코드를 축약하면...

class User {
    constructor(public name: string) {}
    getName(): string {
        return this.name;
    }
}

(...)

위 코드를 제너릭으로 변경하면 다음과 같습니다.

// 제너릭 문법을 사용하여 타입을 파라미터로 전달한다.
class User<T> {
    constructor(public name: T) {}
    getName(): T {
        return this.name;
    }
}

// 꺽쇠 괄호 안에 타입을 명시적으로 지정
const user1 = new User<string>('김가을');
console.log(user1.getName());

인터페이스

interface User<T> {
    name: string;
    value: T;
}

const user1: User<string> = {
    name: '김가을',
    value: '귀여움',
};
const user2: User<number> = {
    name: '김겨울',
    value: 22,
};
const user3: User<boolean> = {
    name: '김봄',
    value: true,
};
const user4: User<number[]> = {
    name: '김여름',
    value: [1, 2, 3],
};

제너릭 타입 제약

interface User<T extends string | number> {
    name: string;
    value: T;
}

const user1: User<string> = {
    name: '김가을',
    value: '귀여움',
};
const user2: User<number> = {
    name: '김겨울',
    value: 22,
};

// 제약 조건을 만족하지 않으므로 아래 코드는 오류 발생
const user3: User<boolean> = {
    name: '김봄',
    value: true,
};
const user4: User<number[]> = {
    name: '김여름',
    value: [1, 2, 3],
};

타입 별칭, this, 오버로딩, 클래스

oodada — Thu, 18 Jul 2024 22:02:18 +0900

타입 별칭 (Type Aliases)

타입 별칭은 새로운 타입을 정의하는 용도로 사용됩니다. 타입 별칭은 기존 타입을 참조하여 새로운 타입을 정의할 수 있습니다.

type User =
    | {
          name: string;
          age: number;
          role: boolean;
      }
    | [string, number, boolean];

const user1: User = {
    name: '김가을',
    age: 2,
    role: false,
};

const user2: User = ['김겨울', 22, true];

명시적 this

인터페이스를 사용하여 클래스의 메서드 체이닝을 구현할 수 있습니다. 이때 인터페이스에 명시적 this를 사용하여 메서드 체이닝을 구현할 수 있습니다.

interface Cat {
    name: string;
    age: number;
}

const cat: Cat = {
    name: '김가을',
    age: 2,
};

// 문법: this: Type
function setName(this: Cat, name: string) {
    console.log(`이름을 변경합니다: ${this.name} -> ${name}`);
    // 일반 함수에서의 this는 호출 시점에 결정된다.
    // setName 함수를 호출할 때 this는 cat 객체를 가리킨다.
    // setName 함수 내부에서 this는 cat 객체를 가리키므로 cat 객체의 name 프로퍼티를 변경할 수 있다.
    // any 타입을 사용하지 않고 명시적으로 this를 지정하여 타입 안정성을 확보할 수 있다.
    // Cat interface를 사용하여 this가 Cat 타입임을 명시적으로 지정한다.
}

setName.call(cat, '김겨울');
// call 메서드를 사용하여 setName 함수를 호출할 때 this를 cat 객체로 지정한다.
// setName 함수를 cat 객체의 메서드로 호출할 수 있다.

오버로딩 (Overloading)

오버로딩은 함수의 이름은 같지만 매개변수의 타입 또는 개수가 다른 여러 함수를 정의하는 방법입니다.

function add1(a: number, b: number) {
    return a + b;
}

function add2(a: string, b: string) {
    return a + b;
}

add1(1, 2); // 3
add2('겨울이', ' 바보'); // 'helloworld'
add1(1, '겨울이'); // 오류 발생
add2(1, 2); // 오류 발생

function add(a: number, b: number): number; // 타입 선언
function add(a: string, b: string): string; // 타입 선언
// 함수 구현
function add(a: any, b: any) {
    return a + b;
}

add(1, 2); // 3
add('가을이', ' 바보');
add(1, ' 바보'); // 2가지 중 하나의 타입만 사용할 수 있다.

클래스

접근 제한자 (Access Modifiers)

접근 제한자는 클래스의 멤버에 접근할 수 있는 범위를 지정하는 용도로 사용됩니다. 접근 제한자는 public, protected, private 키워드로 지정할 수 있습니다.

public: 외부에서 접근 가능, 클래스 바디에서 생략 가능
protected: 상속받은 클래스에서 접근 가능
private: 클래스 내부에서만 접근 가능 (비공개)

class Animal {
    // 속성 타입 지정
    public name: string = ''; // 외부에서 접근 가능
    protected age: number = 0; // 상속받은 클래스에서 접근 가능
    private weight: number = 0; // 클래스 내부에서만 접근 가능

    constructor(name: string, age: number, weight: number) {
        this.name = name;
        this.age = age;
        this.weight = weight;
    }
    // 메서드에 public을 붙이면 외부에서 접근 가능
    public print() {
        console.log(`이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`);
    }
}

class Cat extends Animal {
    print() {
        console.log(`${this.name}은 ${this.age}살이고, 몸무게는 ${this.weight}kg입니다.`);
    }
}

const cat = new Animal('김겨울', 2, 3);
cat.print(); // '이름: 김겨울, 나이: 2, 몸무게: 3'

const cat2 = new Cat('김가을', 3, 6);
cat2.print(); // '김가을은 3살입니다.'

console.log(cat.name); // '김겨울'
console.log(cat.age); // 상속받은 클래스에서 접근 가능
console.log(cat.weight); // 클래스 내부에서만 접근 가능

각각의 속성과 constructor의 매개변수가 동일한 이름을 가지고 있을 때는 생성자의 매개변수에 접근 제한자를 붙여서 속성을 선언할 수 있습니다.

class Animal {
    constructor(
        public name: string = '',
        protected age: number = 0,
        private weight: number = 0,
    ) {}

    public print() {
        console.log(`이름: ${this.name}, 나이: ${this.age}, 몸무게: ${this.weight}`);
    }
}

class Cat extends Animal {
    print() {
        console.log(`${this.name}은 ${this.age}살이고, 몸무게는 ${this.weight}kg입니다.`);
    }
}

const cat = new Animal('김겨울', 2, 3);
cat.print(); // '이름: 김겨울, 나이: 2, 몸무게: 3'

const cat2 = new Cat('김가을', 3, 6);
cat2.print(); // '김가을은 3살입니다.'

console.log(cat.name); // '김겨울'
console.log(cat.age); // 상속받은 클래스에서 접근 가능
console.log(cat.weight); // 클래스 내부에서만 접근 가능

타입 인터페이스 (Interface)

oodada — Thu, 18 Jul 2024 22:01:33 +0900

인터페이스 (Interface)

인터페이스란 객체 데이터의 타입을 지정하는 용도로 사용되는 문법입니다. 인터페이스는 객체의 구조를 정의하는 형태로 사용되며, 객체의 타입을 지정하는 역할을 합니다.

// 인터페이스 정의 (대문자로 시작)
interface User {
    name: string;
    age: number;
    isAdult: boolean;
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

const user2: User = {
    name: '김가을',
    age: 2,
    // `isAdult` 프로퍼티가 누락되어 타입 오류가 발생합니다.
    // isAdult: false,
};

위 코드에서 user2 객체는 isAdult 프로퍼티가 누락되어 타입 오류가 발생합니다.

선택적 프로퍼티 (Optional Properties)

선택적으로 사용할 수 있는 프로퍼티를 정의할 때는 프로퍼티 이름 뒤에 ? 기호를 붙입니다.

interface User {
    name: string;
    age: number;
    isAdult?: boolean; // ? 기호를 붙여 선택적 프로퍼티로 지정
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

const user2: User = {
    name: '김가을',
    age: 2,
    // `isAdult` 프로퍼티가 누락되어도 타입 오류가 발생하지 않습니다.
};

읽기 전용 프로퍼티 (Readonly Properties)

읽기 전용 프로퍼티를 정의할 때는 프로퍼티 이름 앞에 readonly 키워드를 붙입니다.

interface User {
    readonly name: string; // readonly 키워드를 붙여 읽기 전용 프로퍼티로 지정
    age: number;
    isAdult?: boolean;
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

user1.age = 30; // age 프로퍼티는 읽기/쓰기 모두 가능
user1.name = '홍길동'; // name 프로퍼티는 읽기 전용이므로 오류 발생

const user2: User = {
    name: '김가을',
    age: 2,
};

함수 인터페이스 (Function Interface) - 호출 시그니처 (Call Signature)

함수 인터페이스는 함수의 타입을 지정하는 용도로 사용됩니다. 함수 인터페이스는 함수의 매개변수와 반환 타입을 정의하는 형태로 사용됩니다.

interface GetName {
    (param: string): string; // 매개변수와 반환 타입을 정의
    // 매개변수의 이름은 상관없으며, 반환 타입과 갯수만 일치하면 됩니다.
}

interface User {
    name: string;
    age: number;
    getName: GetName;
    // getName: (param: string) => string;
}

const user1: User = {
    name: '김가을',
    age: 2,
    getName(name: string) {
        return `내 이름은 ${name}입니다.`;
    },
};

console.log(user1.getName);

인덱스 가능 타입 (Indexable Types) - 인덱스 시그니처 (Index Signature)

인덱스 가능 타입은 객체의 프로퍼티 이름이 동적으로 변하는 경우 사용됩니다. 인덱스 시그니처는 객체의 프로퍼티 이름과 값의 타입을 정의하는 형태로 사용됩니다.

interface animals {
    [item: number]: string; // 인덱스 시그니처
    // 위와 같이 number로 지정하면 배열처럼 사용할 수 있다.
}

const arr: animals = ['dog', 'cat', 'fish'];
console.log(arr[0]); // 'dog'
console.log(arr[1]); // 'cat'
console.log(arr[2]); // 'fish'

interface User {
    [index: string]: unknown; // 인덱스 시그니처
    // unknown은 모든 타입을 의미한다.
}

const obj: User = {
    name: '김가을',
    age: '2',
};

console.log(obj['name']); // '김가을'
console.log(obj['age']); // '2'

obj['name'] = '김봄'; // '김가을' -> '김봄'
obj['email'] = 'eehd@mail.com'; // 'undefined' -> 'eehd@mail.com'
console.log(obj);

확장 인터페이스 (Extending Interfaces)

인터페이스는 다른 인터페이스를 확장할 수 있습니다. 인터페이스 확장은 기존 인터페이스의 프로퍼티를 상속받아 사용할 수 있습니다.

interface User {
    name: string;
    age: number;
}

interface Admin extends User {
    role: string;
}

const user: User = {
    name: '김가을',
    age: 2,
    // role: '사용자', // User 인터페이스에는 role 프로퍼티가 없어 타입 오류 발생
};

const admin: Admin = {
    name: '김겨울',
    age: 22,
    role: '관리자',
};

상속 인터페이스 (Interface Inheritance)

인터페이스는 클래스를 상속할 수 있습니다. 인터페이스 상속은 클래스의 프로퍼티를 상속받아 사용할 수 있습니다.

interface User {
    name: string;
    age: number;
}

// 위 인터페이스를 상속받아 새로운 인터페이스를 만들 수 있다.
interface User {
    role: string;
    // 후속 인터페이스에서 동일한 프로퍼티를 재정의해야 합니다.
}

const user1: User = {
    name: '김가을',
    age: 2,
    role: '사용자',
};

타입 추론, 할당, 단언, 가드

oodada — Thu, 18 Jul 2024 22:01:04 +0900

타입 추론 (Type Inference)

최대한 타입을 적게 명시하여 코드를 간결하게 작성하는 것이 좋음

타입 추론이란 TypeScript가 자동으로 타입을 추론하는 것
변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용

let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
str = 123; // Error: Type '123' is not assignable to type 'string'

01. 변수 추론

초기화된 변수

let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
let num = 123;
let bool = true;

기본값이 설정된 매개변수

// a와 b의 타입을 명시하지 않아도 타입스크립트가 number 타입으로 추론
function add(a: number, b = 2) {
    return a + b;
}

console.log(add()); // 3

반환값이 있는 함수

// 반환값이 있는 함수는 타입스크립트가 반환값의 타입을 추론
function hello(name: string) {
    return `Hello, ${name}!`;
}

console.log(hello('TypeScript')); // Hello, TypeScript!

타입 단언 (Assertion)

타입 단언(Type Assertion)은 타입스크립트 컴파일러에게 "내가 더 잘 알고 있어" 라고 말해주는 방법입니다. 타입 단언은 다른 언어에서 비슷한 개념으로 "타입 캐스팅(Type Casting)" 이라고도 불립니다.

01. `as` 키워드

as 키워드를 사용하는 방법은 JSX를 사용할 때 <타입> 문법과 혼동을 피하기 위해 도입된 방법입니다.

const el = document.querySelector('body'); // HTMLElement | null
el.textContent = '주말이 끝났다'; // `el`는 `null`일 수 있습니다.

document.querySelector는 선택자 문자열을 인수로 받아 해당 선택자와 일치하는 문서 내 첫 번째 요소를 반환합니다. 만약 문서 내에 해당 요소가 존재하지 않는다면, 반환 값은 null이 됩니다.

이런 상황에서 타입스크립트는 null일 가능성을 고려하여 el 변수의 타입을 HTMLElement | null로 간주합니다. 따라서 el 변수를 개발자가 명확하게 HTMLElement 타입으로 단언해주어야 합니다.

const el = document.querySelector('body') as HTMLElement;
el.textContent = '주말이 끝났다'; // `el`은 `null`일 수 없습니다.

이 경우, el 변수는 HTMLElement 타입으로 단언되었기 때문에 null일 가능성이 없어졌습니다.

02. non-null 단언 연산자 (`!`)

! 연산자는 null 또는 undefined가 아님을 단언하는 연산자입니다. 이 연산자는 변수 뒤에 붙여 사용합니다.

const el = document.querySelector('body')!;
el.textContent = '주말이 끝났다'; // `el`은 `null`일 수 없습니다.

! 연산자를 사용하면 null 또는 undefined가 아님을 단언할 수 있습니다. 하지만, ! 연산자를 남발하면 코드의 가독성이 떨어지고, null 또는 undefined로 인한 오류가 발생할 수 있습니다. 따라서, ! 연산자 사용은 신중하게 사용해야 합니다.

03. `as` 키워드 vs `<타입>` 문법

아래 예제에서 getNumber 함수는 number, null, 또는 undefined 값을 받을 수 있습니다. 그러나 null 또는 undefined 값을 받았을 때 toFixed 메서드를 호출하려 하면 오류가 발생합니다. 이 문제를 해결하려면 함수 내부에서 타입 단언 또는 null 및 undefined 체크를 해줘야 합니다.

function getNumber(x: number | null | undefined) {
    return Number(x.toFixed(2)); // 오류 발생
}

getNumber(3.14);
getNumber(null);

- `as` 키워드 사용

function getNumber(x: number | null | undefined) {
    return Number((x as number).toFixed(2)); // 타입 단언
}

getNumber(3.14);
getNumber(null);

- `non-null` 단언 연산자 사용

function getNumber(x: number | null | undefined) {
    return Number(x!.toFixed(2)); // non-null 단언 연산자
}

getNumber(3.14);
getNumber(null);

- 조건문 사용

function getNumber(x: number | null | undefined) {
    if (x === null || x === undefined) {
        return 0;
    }
    return Number(x.toFixed(2));
}

getNumber(3.14);
getNumber(null);

할당 단언 (Non-null Assertion)

타입스크립트에서는 타입을 명시적으로 지정하지 않은 변수에 값을 할당할 때 오류가 발생합니다. 이때, 변수 뒤에 ! 연산자를 붙여 할당 단언을 사용하면 오류를 해결할 수 있습니다.

let num!: number;
// num = 10;
console.log(num); // 변수가 할당되기 전에 사용하면 오류 발생

num = 10;

타입 가드 (Type Guard)

타입 가드(Type Guard)는 런타임에 발생하는 오류를 줄이기 위해 사용하는 타입스크립트의 기능입니다. 타입 가드는 작성된 코드가 실제로 잘 동작할 수 있도록 코드 상에서 방어 역할을 합니다.

// Element | null 타입을 Element 타입으로 단언
function logText(el: Element) {
    console.log(el.textContent);
}

const el = document.querySelector('div');
logText(el); // el이 null일 가능성이 있어 오류 발생

위 코드에서 logText 함수는 Element 타입을 인수로 받습니다. 그러나 document.querySelector 메서드는 Element 또는 null을 반환할 수 있습니다. 따라서 el 변수를 Element 타입으로 단언해주어야 합니다.

function logText(el: Element) {
    console.log(el.textContent);
}

const el = document.querySelector('div') as Element;
logText(el);

as 키워드를 사용하여 el 변수를 Element 타입으로 단언하면 빨간 줄은 사라지지만 콘솔창에서는 오류가 발생합니다. 이는 el 변수가 null일 가능성이 있기 때문입니다.

// Element 타입을 반환하는 함수
function logText(el: Element | null) {
    if (el === null) {
        return;
    }
    console.log(el.textContent);
}

const el = document.querySelector('div');
logText(el);

if 문을 사용하여 el 변수가 null인지 확인한 후, el 변수를 Element 타입으로 사용하면 오류가 발생하지 않습니다.

타입 종류 (TypeScript Types)

oodada — Thu, 18 Jul 2024 21:58:56 +0900

타입 종류 (TypeScript Types)

01. 타입 종류

- 문자

let str: string = '문자열'

let str: string;
let name: string = '김가을';
let hello: string = `안녕하세요. ${blue}님`;

- 숫자

let num: number = 123

let num: number; // undefined
num = 123; // 123
console.log(num);

let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d;
let infinity: number = Infinity;
let nan: number = NaN;

- 불리언

let bool: boolean = true

let bool: boolean;
let isTrue: boolean = true;
let isFalse: boolean = false;

- 배열

let arr: 배열타입[] = [값, 값, 값]

let arr: number[] = [1, 2, 3];
let animals: string[] = ['사자', '호랑이', '코끼리'];
let empty: never[] = []; // 빈 배열
let union: (string | number)[] = ['one', 2]; // 유니언 타입
let any: any[] = [1, 'two', true]; // any 타입

- 튜플 : 고정된 요소 수 만큼의 타입을 미리 선언 후 배열을 표현

let tuple: [타입, 타입, ...] = [값, 값, ...]

let tuple: [string, number] = ['one', 1];
let person: [string, number] = ['김겨울', 30];

- 객체

let obj: { key: 타입, key: 타입 } = { key: 값, key: 값 }

let obj: { name: string; age: number } = { name: '김겨울', age: 30 };
let person: { name: string; age: number; etc?: boolean } = { name: '김가을', age: 30, etc: true };
// ? : 선택적 프로퍼티
// etc?: boolean : etc 키는 있을 수도 있고 없을 수도 있음

- 객체 interface

객체의 타입을 미리 정의하여 사용
재사용성이 가능하고 가독성이 좋음

interface 인터페이스 { key: 타입, key: 타입 }

// interface 명명규칙 : 대문자로 시작
interface IPerson {
    name: string;
    age: number;
    etc?: boolean;
}

let userA: IPerson = { name: '김겨울', age: 3 };
let userB: IPerson = { name: '김가을', age: 2, etc: true };

- 함수 타입

let 함수명: (매개변수: 타입) => 반환타입 = (매개변수) => { ... }

const sum: (a: number, b: number) => number = (a, b) => {
    return a + b;
};

sum(1, 2); // 3

// void : 반환값이 없을 때 사용
const hello: (name: string) => void = name => {
    console.log(`Hello, ${name}!`);
};

hello('TypeScript'); // Hello, TypeScript!

06. React에서 ts 사용하기

타입스크립트를 사용하면 컴포넌트의 타입을 지정하여 개발할 수 있음

- 컴포넌트 생성

컴포넌트를 생성할 때 타입을 지정하기 위해 React.FC<Props>를 사용

const 컴포넌트명: React.FC<Props> = ({ props }) => { ... }

문법

import React from 'react';

// Props 타입 정의
type Props = {
    name: string;
};

// 컴포넌트 정의
const 컴포넌트이름: React.FC<Props> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

예시

// src/components/Hello.tsx
import React from 'react';

type HelloProps = {
    name: string;
};

const Hello: React.FC<HelloProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

- useState 사용하기

const [state, setState] = useState<타입>(초기값)

// src/components/Counter.tsx
import React, { useState } from 'react';

const Counter: React.FC = () => {
    const [count, setCount] = useState<number>(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setCount(count - 1)}>-1</button>
        </div>
    );
};

export default Counter;

- useReducer 사용하기

const [state, dispatch] = useReducer<Reducer<상태타입, 액션타입>>(reducer, 초기값)

// src/components/Counter.tsx
import React, { useReducer } from 'react';

type Action = { type: 'INCREASE' } | { type: 'DECREASE' };

function reducer(state: number, action: Action): number {
    switch (action.type) {
        case 'INCREASE':
            return state + 1;
        case 'DECREASE':
            return state - 1;
        default:
            throw new Error('Unhandled action');
    }
}

const Counter: React.FC = () => {
    const [count, dispatch] = useReducer(reducer, 0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
        </div>
    );
};

export default Counter;

- useContext 사용하기

const value = useContext<타입>(Context)

// src/components/Counter.tsx
import React, { useContext } from 'react';
import { CounterContext } from '../contexts/CounterContext';

const Counter: React.FC = () => {
    const { count, dispatch } = useContext(CounterContext);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
        </div>
    );
};

export default Counter;

- useRef 사용하기

const ref = useRef<타입>(null)

// src/components/Counter.tsx
import React, { useRef } from 'react';

const Counter: React.FC = () => {
    const inputRef = useRef<HTMLInputElement>(null);

    return (
        <div>
            <input ref={inputRef} />
            <button onClick={() => inputRef.current?.focus()}>Focus</button>
        </div>
    );
};

export default Counter;

- interface 사용하기

import { 인터페이스 } from '파일경로'

// src/interfaces/index.ts
export interface HelloProps {
    name: string;
}

// src/components/Hello.tsx
import React from 'react';
import { HelloProps } from '../interfaces';

const Hello: React.FC<HelloProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

- 타입스크립트로 리액트 컴포넌트 작성 시 주의사항

컴포넌트의 props나 state를 정의할 때 interface나 type으로 정의
컴포넌트의 props나 state를 정의할 때 React.FC를 사용하여 정의

javascript 커리큘럼

oodada — Sun, 7 Jul 2024 20:34:45 +0900

- JS 목차

js 핵심 개념	https://odada.me/334
react 핵심 개념	https://odada.me/353
node.js, npm 개념 잡기	https://odada.me/246

변수 (Variable)	https://odada.me/335
데이터 (Data)	https://odada.me/232
연산자 (Operator)	https://odada.me/233
구문 (Statement)	https://odada.me/235
함수 (Function)	https://odada.me/236

node.js, npm	https://odada.me/246
모듈 (Module)	https://odada.me/266

클래스 (Class)	https://odada.me/247

표준내장객체 객체 - 문자열(String)	https://odada.me/261
표준내장객체 객체 - 숫자(Number), 수학(Math)	https://odada.me/262
표준내장객체 객체 - 날짜(Date)	https://odada.me/263
표준내장객체 객체 - 배열(Array)	https://odada.me/264
표준내장객체 객체 - 객체(Object)	https://odada.me/265

비동기 (Async)	https://odada.me/337
비동기2 (Async)	https://odada.me/309

DOM	https://odada.me/338
이벤트 (Events)	https://odada.me/339

이벤트(Events) - javascript 기본

oodada — Sat, 6 Jul 2024 22:26:47 +0900

Javascript Event

Event란?

Event는 웹 페이지에서 발생하는 모든 일을 의미한다.

사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직이는 등의 모든 행위를 의미한다.
이벤트는 브라우저에서 발생하는 것이기 때문에 브라우저에서만 사용할 수 있다.

간단한 예제

버튼을 클릭하면 target의 글자색이 빨간색으로 바뀌는 예제를 만들어보겠습니다.

<button>change color</button>
<div id="target">Hello</div>

const button = document.querySelector('button');
const target = document.querySelector('#target');

button.addEventListener('click', () => {
    target.style.color = 'red';
});

Event 종류

HTML DOM Events 에서 확인할 수 있고 가장 많이 사용되는 이벤트는 다음과 같다.

click : 클릭
mouseover : 마우스가 요소 위에 올라갈 때
mouseout : 마우스가 요소에서 벗어날 때
keydown : 키보드를 누를 때
keyup : 키보드를 뗄 때
submit : 폼을 제출할 때
change : input 요소의 값이 변경될 때

Event 객체

이벤트가 발생하면 이벤트 객체가 생성되고 이벤트에 대한 정보를 가지고 있다.

document.querySelector('button').addEventListener('click', event => {
    console.log(event);
});

Event 객체의 속성

type : 이벤트의 종류
target : 이벤트가 발생한 요소
currentTarget : 이벤트가 발생한 요소
preventDefault() : 이벤트의 기본 동작을 막는다.
stopPropagation() : 이벤트의 전파를 막는다.

Event 객체의 메소드

addEventListener() : 이벤트 리스너를 등록한다.
removeEventListener() : 이벤트 리스너를 제거한다.

Event 전파

이벤트는 전파되는데, 이벤트가 발생한 요소에서 시작해서 상위 요소로 전파된다.

이벤트 전파는 캡처링과 버블링 두 가지 방식이 있다.

- 이벤트 전파의 두 가지 방식

캡처링(Capturing)
- 이벤트가 상위 요소에서 시작하여 하위 요소로 전파됩니다.
- 이벤트 리스너를 등록할 때 세 번째 인수로 true를 전달하여 캡처링 모드를 활성화합니다.
버블링(Bubbling)
- 이벤트가 하위 요소에서 시작하여 상위 요소로 전파됩니다.
- 기본 모드이며, 이벤트 리스너를 등록할 때 세 번째 인수를 생략하거나 false로 설정합니다.

- 캡처링

버튼을 클릭하면 캡처링 모드에서는 body -> div -> button 순으로 콘솔에 출력됩니다.

<div style="padding: 50px; background-color: lightgray;">
    <button style="padding: 20px;">Click Me</button>
</div>

document.querySelector('button').addEventListener(
    'click',
    () => {
        console.log('button');
    },
    true,
);

document.querySelector('div').addEventListener(
    'click',
    () => {
        console.log('div');
    },
    true,
);

document.querySelector('body').addEventListener(
    'click',
    () => {
        console.log('body');
    },
    true,
);

- 버블링

버튼을 클릭하면 버블링 모드에서는 button -> div -> body 순으로 콘솔에 출력됩니다.

document.querySelector('button').addEventListener('click', () => {
    console.log('button');
});

document.querySelector('div').addEventListener('click', () => {
    console.log('div');
});

document.querySelector('body').addEventListener('click', () => {
    console.log('body');
});

Event 객체의 전파 방지

stopPropagation() 메소드를 사용하여 이벤트 전파를 막을 수 있다.

document.querySelector('button').addEventListener('click', event => {
    event.stopPropagation();
    console.log('button');
});

document.querySelector('div').addEventListener('click', () => {
    console.log('div');
});

document.querySelector('body').addEventListener('click', () => {
    console.log('body');
});

Event 객체의 기본 동작 막기

preventDefault() 메소드를 사용하여 이벤트의 기본 동작을 막을 수 있다.

document.querySelector('a').addEventListener('click', event => {
    event.preventDefault();
    console.log('a');
});

버튼을 클릭하면 button만 출력됩니다. stopPropagation() 메서드가 이벤트 전파를 막기 때문입니다.

Event 객체의 활용

이벤트 객체를 활용하여 버튼을 클릭하면 target의 글자색을 빨간색으로 바꾸고, 이벤트가 발생한 요소의 글자색을 파란색으로 바꾸는 예제를 만들어보겠습니다.

<button>change color</button>
<div id="target">Hello</div>

document.querySelector('button').addEventListener('click', event => {
    const target = document.querySelector('#target');
    target.style.color = 'red';
    event.target.style.color = 'blue';
});

DOM - javascript 기본

oodada — Sat, 6 Jul 2024 22:26:00 +0900

DOM(Document Object Model)

JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp

1. DOM이란?

DOM은 HTML 문서를 객체로 표현한 것으로,
자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.

const h1El = document.querySelector('h1');
console.log(h1El.textContent);

2. Node vs Element(요소)

Node(노드) : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.
Element(요소) : HTML 요소를 의미한다.
Node는 Element의 상위 개념이다.

<div class="container">
    <!-- 주석 -->
    <div class="item">1</div>
    text1
    <div
        id="item1"
        class="item"
    >
        2
    </div>
    text2
</div>

const container = document.querySelector('.container');

// container의 자식 노드들을 출력한다.
console.log(container.childNodes); // NodeList(5) [text, div.item, text, div.item, text]

// container의 자식 요소들을 출력한다.
console.log(container.children); // HTMLCollection(2) [div.item, div.item]

console.dir(container); // container의 속성들을 출력한다.

3. 검색과 탐색

- `document.getElementById()`

id 속성을 이용해 요소를 찾는다.
id는 문서 내에서 유일해야 한다.
id가 없으면 null을 반환한다.

const item = document.getElementById('item1');
console.log(item); // <div id="item1" class="item">2</div>

- `document.querySelector()`

CSS 선택자를 이용해 요소를 찾는다.
첫 번째로 일치하는 요소를 반환한다.
일치하는 요소가 없으면 null을 반환한다.

const item = document.querySelector('.item:nth-child(2)');
console.log(item); // <div id="item1" class="item">2</div>

- `document.querySelectorAll()`

CSS 선택자를 이용해 요소를 찾는다.
일치하는 모든 요소를 반환한다.
일치하는 요소가 없으면 빈 NodeList를 반환한다.
NodeList 객체는 forEach() 메소드를 사용할 수 있다.

const items = document.querySelectorAll('.item');
console.log(items); // NodeList(2) [div.item, div.item]

items.forEach(item => {
    console.log(item); // 각 item 요소를 출력한다.
});

- `Node.parentElement`

부모 요소를 반환한다.
부모 요소가 없으면 null을 반환한다.

const item = document.querySelector('.item');
console.log(item.parentElement); // <div class="container">...</div>

- `Element.closest()`

가장 가까운 조상 요소를 반환한다.
일치하는 요소가 없으면 null을 반환한다.

const item = document.querySelector('.item');
console.log(item.closest('div')); // <div class="item">...</div> : item 요소 자신
console.log(item.closest('body')); // <body>...</body> : item 요소의 부모 요소
console.log(item.closest(.header)); // null : item 요소의 조상 요소 중 header 클래스를 가진 요소가 없다.

- `Node.previousSibling`, `Node.nextSibling`

노드의 이전 형제 요소, 다음 형제 요소를 반환한다.
형제 요소가 없으면 null을 반환한다.

const item = document.querySelector('.item');
console.log(item.previousSibling); // #text : 이전 형제 요소
console.log(item.nextSibling); // #text : 다음 형제 요소
// node에서 text는 줄바꿈, 공백 등을 의미한다.

console.log(item.previousSibling.parentElement); // <div class="container">...</div> : 이전 형제 요소의 부모 요소

- `Element.previousElementSibling`, `Element.nextElementSibling`

요소의 이전 형제 요소, 다음 형제 요소를 반환한다.
형제 요소가 없으면 null을 반환한다.

const item = document.querySelector('.item');
console.log(item.previousElementSibling); // null : 이전 형제 요소
console.log(item.nextElementSibling); // <div class="item">2</div> : 다음 형제 요소

- `Element.children`

요소의 자식 요소들을 반환한다.
자식 요소가 없으면 빈 HTMLCollection을 반환한다.

const container = document.querySelector('.container');
console.log(container.children); // HTMLCollection(2) [div.item, div.item]

- `Element.firstElementChild`, `Element.lastElementChild`

요소의 첫 번째 자식 요소, 마지막 자식 요소를 반환한다.
자식 요소가 없으면 null을 반환한다.

const container = document.querySelector('.container');
console.log(container.firstElementChild); // <div class="item">1</div> : 첫 번째 자식 요소
console.log(container.lastElementChild); // <div id="item1" class="item">2</div> : 마지막 자식 요소

DOM

4. 생성, 조회, 수정, 삭제

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

- `document.createElement()`

메모리에만 존재하는 새로운 HTML 요소를 생성해 반환한다.

const newItem = document.createElement('div');
newItem.textContent = '3';
console.log(newItem); // <div>3</div>

- `Element.prepend()`, `Element.append()`

요소의 첫 번째 자식 요소, 마지막 자식 요소로 추가한다.

const container = document.querySelector('.container');
container.prepend(new Comment('prepend comment')); // 주석을 추가한다.
container.append(newItem); // newItem을 마지막 자식 요소로 추가한다.
container.append('text'); // text를 마지막 자식 요소로 추가한다.

- `Element.remove()`

요소를 삭제한다.

const item = document.querySelector('.item');
item.remove();

- `Element.insertAdjacentElement()`

지정한 위치에 새로운 요소를 추가한다.
대상요소.insertAdjacentElement('위치', 추가할요소)

<!-- 'beforebegin' -->
<div class="target">
    <!-- 'afterbegin' -->
    <div class="item">1</div>
    <div class="item">2</div>
    <!-- 'beforeend' -->
</div>
<!-- 'afterend' -->

const target = document.querySelector('.item');
const newItem = document.createElement('span');
newItem.textContent = '새로운 아이템';

target.insertAdjacentElement('beforebegin', newItem);
target.insertAdjacentElement('afterbegin', '새로운 고양이');

- `Node.insertBefore()`

'부모 노드'의 '자식 노드'로 '기준 노드' 앞에 '추가할 노드'를 추가한다.
부모노드.insertBefore(추가할노드, 기준노드)

const container = document.querySelector('.container');
container.insertBefore(newItem, container.firstElementChild);

- `Node.contains()`

'해당 노드'가 다른 노드의 자식인지 확인한다.
부모노드.contains(자식노드)

const container = document.querySelector('.container');

console.log(document.body.contains(container)); // true
console.log(container.contains(newItem)); // true
console.log(container.contains(document.body)); // false

- `Node.textContent`

노드의 텍스트 내용을 반환한다.
노드의 텍스트 내용을 수정할 수 있다.

const item = document.querySelector('.item');
console.log(item.textContent); // 2

item.textContent = '3';
console.log(item.textContent); // 3

- `Element.innerHTML`

요소의 HTML 내용을 반환한다.
요소의 HTML 내용을 수정할 수 있다.

const container = document.querySelector('.container');
console.log(container.innerHTML); // <div class="item">1</div><div class="item">2</div>

// comment tagged templates 확장 프로그램을 사용하면 html,css의 색상이 달라진다.
container.innerHTML = /* html */ `
    <div class="item">3</div>
`;
console.log(container.innerHTML); // <div class="item">3</div>

container.innerHTML += /* html */ `
    <div class="item" style="border: 1px solid;">4</div>
`;
console.log(container.innerHTML); // <div class="item">3</div><div class="item">4</div>

- `E.dataset`

요소의 data-* 속성을 가져오거나 수정할 수 있다.

- `Element.tagName`

요소의 태그 이름을 반환한다.

const item = document.querySelector('.item');
console.log(item.tagName); // DIV

- `Element.Id`

요소의 id 속성 값을 얻거나 반환할 수 있다.

const item = document.querySelector('.item');
console.log(item.id); // item1

item.id = 'new-item';
console.log(item.id); // new-item

- `Element.className`

요소의 class 속성 값을 얻거나 반환할 수 있다.
하지만 문자열로 반환되기 때문에 classList를 사용하는 것이 좋다.

const item = document.querySelector('.item');
console.log(item.className); // item

item.className += 'new-item active';
console.log(item.className); // new-item

- `Element.classList`

요소의 클래스 속성을 다루는 객체이다.
add() : 클래스 추가
remove() : 클래스 삭제
toggle() : 클래스 토글
contains() : 클래스 포함 여부 확인

<ul class="list">
    <li>1</li>
    <li>2</li>
</ul>

const listEl = document.querySelector('.list li');

listEl.classList.add('active');
listEl.classList.remove('active');
listEl.addEventListener('click', () => {
    listEl.classList.toggle('active');
});

모든 li 요소에 대해 클래스를 추가하거나 제거하려면, querySelectorAll 메서드를 사용하여 모든 li 요소를 선택하고, 이를 반복하여 각 요소에 대해 이벤트 리스너를 추가해야 합니다.

// 모든 li 요소를 선택
const listItems = document.querySelectorAll('.list li');

// 모든 li 요소에 대해 반복
listItems.forEach(listEl => {
    // 'active' 클래스를 추가했다가 제거
    listEl.classList.add('active');
    listEl.classList.remove('active');

    // 클릭 이벤트 리스너 추가
    listEl.addEventListener('click', () => {
        listEl.classList.toggle('active');
    });
});

- `Element.style`

요소의 style 속성(인라인 스타일)을 css 속성 값을 가져오거나 수정할 수 있다.

const item = document.querySelector('.item');

// 개별 지정
item.style.width = '100px';
item.style.color = 'red';
item.style.backgroundColor = 'yellow';
item.style.fontSize = '20px';

// cssText
item.style.cssText = 'width: 100px; color: red; background-color: yellow; font-size: 20px;';

// 한 번에 지정
Object.assign(item.style, {
    width: '100px',
    color: 'red',
    backgroundColor: 'yellow',
    fontSize: '20px',
});

// getPropertyValue
console.log(item.style);
console.log(item.style.width); // 100px
console.log(item.style.fontSize); // 20px

- `window.getComputedStyle()`

요소의 모든 CSS 속성 값을 가져온다.

.item {
    width: 100px;
    font-size: 20px;
}

const item = document.querySelector('.item');
const style = window.getComputedStyle(item);

console.log(style.width); // 100px
console.log(style.fontSize); // 20px

- `Element.getAttribute()`, `Element.setAttribute()`

요소의 속성을 가져오거나 수정할 수 있다.

const item = document.querySelector('.item');

item.setAttribute('title', 'Hello, world!'); // title 속성을 추가한다.
console.log(item.getAttribute('title')); // Hello, world!

- `Element.hasAttr()`, `Element.removeAttr()`

요소가 속성을 가지고 있는지 확인하거나 삭제할 수 있다.

const item = document.querySelector('.item');

console.log(item.hasAttribute('title')); // true

item.removeAttribute('title');
console.log(item.hasAttribute('title')); // false

5. 크기와 위치

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

<style>
    body {
        height: 1000px;
        padding: 500px 0;
    }
    .container {
        overflow: auto;
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 10px solid;
    }

    .item {
        height: 100px;
        margin-top: 100px;
        border: 1px solid red;
    }
</style>

- `window.innerWidth`, `window.innerHeight`

브라우저의 너비, 높이를 반환한다.

console.log(window.innerWidth);
console.log(window.innerHeight);

- `window.scrollX`, `window.scrollY`

페이지의 최상단 기준으로 스크롤한 양을 반환한다.

console.log(window.scrollX);
console.log(window.scrollY);

- `window.scrollTo()`, `window.scrollBy()`

스크롤을 지정한 양만큼 이동시킨다.
window.scrollBy(x, y) : 현재 스크롤 위치에서 지정한 양만큼 이동한다.
window.scrollTo(x, y) : 페이지의 최상단을 기준으로 지정한 위치로 이동한다.

// 페이지의 최상단을 기준으로 100px 아래로 이동한다.
window.scrollTo({
    top: 100,
    behavior: 'smooth',
});

// 현재 스크롤 위치에서 100px 아래로 이동한다.
window.scrollBy(0, 100);

- `Element.clientWidth`, `Element.clientHeight`

테두리(border)와 스크롤바를 제외한 요소의 너비, 높이를 반환한다.

const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.clientWidth, container.clientHeight);
console.log(item.clientWidth, item.clientHeight);

- `Element.offsetWidth`, `Element.offsetHeight`

테두리(border)와 스크롤바를 포함한 요소의 너비, 높이를 반환한다.

const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.offsetWidth, container.offsetHeight);
console.log(item.offsetWidth, item.offsetHeight);

- `Element.scrollWidth`, `Element.scrollHeight`

요소의 콘텐츠가 너비, 높이를 반환한다.

const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.scrollWidth, container.scrollHeight);
console.log(item.scrollWidth, item.scrollHeight);

- `Element.offsetTop`, `Element.offsetLeft`

부모 요소를 기준으로 요소의 상단, 왼쪽 위치를 반환한다.

const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.offsetTop, container.offsetLeft);
console.log(item.offsetTop, item.offsetLeft);

- `Element.getBoundingClientRect()`

테두리(border)를 포함한 요소의 크기와
브라우저의 뷰포트를 기준으로 요소의 상대 위치 정보를 반환한다.

const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.getBoundingClientRect());
console.log(item.getBoundingClientRect());

비동기(Async) - javascript 기본

oodada — Sat, 6 Jul 2024 22:17:17 +0900

동기(Synchronous)와 비동기(Asynchronous)

01. 개요

- 동기 처리

동기 처리란, 작업을 순차적으로 처리하는 것을 말한다.

자바스크립트 코드는 기본적으로 동기적으로 처리된다.
동기적으로 처리되는 코드는 위에서부터 아래로 순차적으로 실행되며, 어떤 작업이 끝나야 다음 작업을 수행할 수 있다.

하지만, 동기적으로 처리되는 코드는 작업이 끝날 때까지 다른 작업을 수행할 수 없다는 단점이 있다.

은행에서 번호 순서대로 업무를 처리하는 것, 순차적으로 처리되는 것

console.log('은행 1번 번호표 업무 시작');
console.log('은행 1번 번호표 업무 끝');

console.log('은행 2번 번호표 업무 시작');
console.log('은행 2번 번호표 업무 끝');

- 비동기 처리

비동기 처리란, 작업을 동시에 처리하는 것을 말한다.

비동기 처리는 이러한 단점을 보완하기 위해 등장했다.
비동기 처리는 작업을 동시에 처리할 수 있으며, 작업이 끝나지 않아도 다른 작업을 수행할 수 있다.

비동기처리의 예: 커피 주문 시 앞번호가 먼저 나오는 것, 동시에 처리되는 것

setTimeout(() => {
    console.log('느린 미니언즈 라떼');
}, 1000);
console.log('빠른 아메리카노');

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(res => res.json())
    .then(data => console.log(data));

console.log('데이터 요청 중...');

fetch API를 사용하여 서버에서 데이터를 가져올 수 있습니다.
fetch 함수는 비동기 방식으로 서버에 데이터를 요청하고,
요청이 완료되면 then 메서드를 통해 데이터를 처리합니다.
따라서 '데이터 요청 중...'이 먼저 출력되고, 서버 응답이 완료되면 데이터가 출력됩니다.

- 비동기 처리의 장점

효율성: 비동기 처리는 결과를 기다리지 않고 다른 작업을 수행할 수 있기 때문에 시스템 자원을 효율적으로 활용할 수 있습니다.
응답성: 사용자 경험을 향상시키는 데 유용하며, UI가 멈추지 않고 반응을 계속 유지할 수 있습니다.
병렬 처리: 여러 작업을 병렬로 처리함으로써 전체적인 처리 속도를 높일 수 있습니다.

- 비동기 처리의 실무 예시

Ajax (Asynchronous JavaScript and XML): 웹 애플리케이션에서 페이지를 전체적으로 새로 고침하지 않고 서버와 통신할 수 있게 합니다.
Promise 및 async/await: JavaScript에서 비동기 작업을 다루기 위한 문법으로, 비동기 코드의 가독성을 높입니다.
Node.js의 비동기 I/O: Node.js는 비동기 방식으로 파일 시스템, 데이터베이스, 네트워크 요청 등을 처리하여 높은 성능을 제공합니다.
비동기 API 호출: 클라이언트 애플리케이션에서 서버 API를 호출할 때, 비동기 요청을 통해 다른 작업을 차단하지 않고 처리가 가능합니다.
실시간 데이터 처리: 채팅 애플리케이션, 실시간 알림 시스템 등에서 비동기 처리를 통해 즉각적인 데이터 업데이트가 가능합니다.

이 중 가장 많이 사용되는 방식은 Promise 및 async/await입니다. 이에 대해 자세히 알아보겠습니다.

02. 콜백(Callback) 패턴

콜백(Callback): 비동기 처리를 위해 다른 함수에 인자로 넘겨주는 함수로, 비동기 작업이 완료되면 콜백 함수가 실행됩니다.

const a = () => console.log("a");
const b = () => console.log("b");

a(); // a
b(); // b

위 코드는 동기적으로 실행되기 때문에 a 함수가 먼저 실행되고, b 함수가 실행됩니다.
숫자 2가 먼저 출력되게 하려면 어떻게 해야 할까요?

// 비동기 처리를 사용하기 위해 setTimeout 함수를 사용합니다.
// a 함수가 실행되고 1초 후에 b 함수가 실행됩니다.
const a = () => {
    setTimeout(() => {
        console.log("a");
    }, 1000);
};

const b = () => console.log("b");

a(); // a
b(); // b

위 코드는 비동기적으로 실행되기 때문에 a 함수가 실행되고, 1초 후에 1이 출력됩니다.
이처럼 콜백 함수를 사용하면 비동기 작업을 순차적으로 처리할 수 있습니다.
만약 출력하는 숫자 1과 2를 순차적으로 출력하려면 어떻게 해야 할까요?

// 콜백 함수를 사용하여 비동기 작업을 순차적으로 처리합니다.
const a = callback => {
    setTimeout(() => {
        console.log("a"); // a
        callback(); // b
    }, 1000);
};

const b = () => console.log("b");

a(b); // a, b

위 코드는 a 함수가 실행되고, 1이 출력된 후에 콜백 함수가 실행되어 b 함수가 실행됩니다.
이처럼 콜백 함수를 사용하면 비동기 작업을 순차적으로 처리할 수 있습니다.

03. Promise 패턴

new Promise((resolve, reject) => { ... });

Promise: 비동기 작업이 완료되었을 때 결과를 반환하거나 에러를 처리할 수 있는 객체로, 비동기 작업을 보다 효율적으로 처리할 수 있습니다. Promise 객체를 사용하면 콜백 함수의 중첩 문제(콜백 지옥)를 해결할 수 있으며, 비동기 코드의 가독성을 높여줍니다.

프로미스는 세 가지 상태를 가진다.

대기(pending) : 비동기 처리가 아직 수행되지 않은 상태
이행(fulfilled) : 비동기 처리가 성공적으로 수행된 상태
거부(rejected) : 비동기 처리가 실패한 상태

프로미스를 사용하여 비동기 처리를 하려면, new Promise()를 사용하여 프로미스 객체를 생성하고, resolve와 reject를 사용하여 프로미스의 상태를 변경한다.

// Promise 객체 생성
// new Promise((resolve, reject) => {...})를 통해 새로운 프로미스 객체 생성
// 이 객체는 비동기 작업을 수행할 콜백 함수를 인자로 받으며,
// 이 콜백 함수는 resolve와 reject라는 두 개의 함수를 매개변수로 가집니다.
// resolve, reject 함수는 프로미스의 상태를 변경하는 역할을 합니다.
const a = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 1초 후에
            console.log(1);
            resolve(); // 성공 시 호출
        }, 1000);
    });
};

const b = () => console.log(2);

// 아래 코드는 역시나 콜백 지옥에 빠집니다.
// then 메서드를 사용하여 비동기 작업을 순차적으로 처리할 수 있습니다.
// a 함수가 실행되고 완료된 후에 b 함수가 실행되고, c 함수가 실행됩니다.
a().then(() => {
    b()
});

위 코드에서는 a, b, c, d 함수가 각각 1초씩 기다린 후 콘솔에 숫자를 출력하는 비동기 작업을 수행합니다. 각 함수는 Promise 객체를 반환하며, 이 객체는 작업이 성공했을 때 resolve를 호출합니다.

- 콜백지옥 해결

// b 함수 호출 시 return 키워드로 반환하게 되면
// promise 객체를 반환하게 되어 then 메서드를 연달아 사용할 수 있습니다.
a()
    .then(() => {
        return b();
    })

위 코드와 같이 각 then 메서드 내에서 다음 비동기 함수를 반환하도록 변경하여, then 체인을 형성합니다. 이렇게 하면 콜백 지옥을 피할 수 있습니다.

- 화살표 축약

a()
    .then(() => b())

화살표 함수의 축약 형태로, 함수 내부가 한 줄로 표현될 때 중괄호를 생략할 수 있습니다.

- 단축 표현

// resolve는 하나의 함수 데이터를 받아서 return으로 처리할 수 있습니다.
// 해서 b, c, d 함수 데이터 자체로 전달할 수 있습니다.
a()
    .then(b)
    .then(() => {
        console.log('done');
    });

- Promise.all

// Promise.all 메서드를 사용하여 여러 개의 비동기 작업을 동시에 처리할 수 있습니다.
Promise.all([a(), b()]).then(() => {
    console.log('모든 작업이 완료되었습니다.');
});

- Promise를 활용한 실무 예시

JSONPlaceholder에서 제공하는 API를 사용하여 사용자 정보를 가져와 출력해보겠습니다.
fetch(): 네트워크 요청을 보내는 API로, Promise 객체를 반환하여 비동기 작업을 처리합니다.
Resolve: Promise 객체가 성공적으로 처리되었을 때 호출되는 콜백 함수로, 비동기 작업이 완료되면 결과를 반환합니다.

// userId 매개변수를 받아 사용자 정보를 가져오는 함수를 구현합니다.
const getUser = userId => {
    // Promise 객체를 반환합니다. resolve 함수를 사용하여 비동기 작업이 완료되면 결과를 반환합니다.
    return new Promise(resolve => {
        // fetch 함수를 사용하여 JSONPlaceholder API를 호출합니다.
        fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
            // fetch 함수가 성공적으로 호출되면 response 객체를 반환합니다.
            // json 메서드를 사용하여 response 객체를 JSON 형태로 변환합니다.
            .then(res => res.json())
            // response 객체가 성공적으로 변환되면 data 객체를 반환합니다.
            .then(data => resolve(data));
    });
};

// 사용자 데이터를 가져오는 함수를 호출합니다.
getUser(1)
    // getUser 함수가 성공적으로 호출되면 data 객체를 반환합니다.
    .then(data => {
        console.log(`사용자 ID 1의 이름은 ${data.name} 입니다.`);
        return getUser(2);
    })
    .then(data => {
        console.log(`사용자 ID 2의 이름은 ${data.name} 입니다.`);
        return getUser(3);
    })
    .then(data => {
        console.log(`사용자 ID 3의 이름은 ${data.name} 입니다.`);
    });

위 코드는 사용자 ID 1, 2, 3의 사용자 정보를 차례대로 가져와 출력합니다.
getUser 함수는 Promise 객체를 반환하며, 사용자 정보를 가져온 후에 다음 사용자 정보를 가져옵니다.
이처럼 Promise를 사용하면 비동기 작업을 순차적으로 처리할 수 있습니다.

04. async/await 패턴

async/await: Promise를 더욱 간결하게 사용할 수 있는 문법으로, 비동기 작업을 동기적으로 처리할 수 있습니다.

// async 함수를 사용하여 비동기 작업을 처리합니다.
const a = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1);
            resolve();
        }, 1000);
    });
};

// awite 함수를 사용하여 a함수를 실행하고 완료된 후에 b함수를 실행합니다.
// await 키워드는 뒷 부분의 비동기 작업이 완료될 때까지 기다립니다.
// await a();
// b();

// async 함수를 사용하여 비동기 작업을 순차적으로 처리합니다.
// await 키워드를 사용할 때는 async 함수 내부에서만 사용할 수 있기 때문에
// main 함수를 async 함수로 선언합니다.
const main = async () => {
    await a(); // 1
    b(); // 2
};

main(); // 1, 2

위 코드는 async 함수를 사용하여 비동기 작업을 순차적으로 처리합니다.
main 함수는 async 함수로 선언되어 있으며, await 키워드를 사용하여 비동기 작업을 순차적으로 처리합니다.

- async/await를 활용한 실무 예시

위 사용자 정보 API 예시를 async/await를 사용하여 구현해보겠습니다.

const getUser = userId => {
    return new Promise(resolve => {
        fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
            .then(res => res.json())
            .then(data => resolve(data));
    });
};

// await 키워드를 사용하여 비동기 작업을 순차적으로 처리합니다.
// const user1 = await getUser(1);
// console.log(`사용자 ID 1의 이름은 ${user1.name} 입니다.`);

// const user2 = await getUser(2);
// console.log(`사용자 ID 2의 이름은 ${user2.name} 입니다.`);

// const user3 = await getUser(3);
// console.log(`사용자 ID 3의 이름은 ${user3.name} 입니다.`);

// await 키워드를 사용할 때는 async 함수로 묶어주어야 합니다.
const main = async () => {
    const user1 = await getUser(1);
    console.log(`사용자 ID 1의 이름은 ${user1.name} 입니다.`);

    const user2 = await getUser(2);
    console.log(`사용자 ID 2의 이름은 ${user2.name} 입니다.`);

    const user3 = await getUser(3);
    console.log(`사용자 ID 3의 이름은 ${user3.name} 입니다.`);
};

main();

위 코드는 async/await를 사용하여 사용자 ID 1, 2, 3의 사용자 정보를 차례대로 가져와 출력합니다.
main 함수는 async 함수로 선언되어 있으며, await 키워드를 사용하여 비동기 작업을 순차적으로 처리합니다.

05. Resolve, Reject, Error Handling

Resolve: Promise 객체가 성공적으로 처리되었을 때 호출되는 콜백 함수로, 비동기 작업이 완료되면 결과를 반환합니다.
Reject: Promise 객체가 실패했을 때 호출되는 콜백 함수로, 비동기 작업이 실패하면 에러를 반환합니다.
Error Handling: Promise 객체가 실패했을 때 에러를 처리하는 방법으로, catch 메서드를 사용하여 에러를 처리합니다.

// 사용자 데이터를 가져오는 함수
const getUser = userId => {
    // resolve, reject 함수를 사용하여 비동기 작업이 성공 또는 실패했을 때 결과를 반환합니다.
    return new Promise((resolve, reject) => {
        fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
            .then(response => {
                // fetch 함수가 성공적으로 호출되면 response 객체를 반환합니다.
                // response 객체가 정상적이지 않을 경우 에러를 반환합니다.
                if (!response.ok) {
                    throw new Error('네트워크 응답이 정상적이지 않습니다: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => resolve(data))
            // fetch 함수가 실패했을 경우 에러를 반환합니다.
            .catch(error => reject(error));
    });
};

// 사용자 데이터를 가져오는 함수를 호출합니다.
getUser(1)
    .then(data => {
        console.log(`사용자 ID 1의 이름은 ${data.name} 입니다.`);
        return getUser(2);
    })
    .then(data => {
        console.log(`사용자 ID 2의 이름은 ${data.name} 입니다.`);
        return getUser(3);
    })
    .then(data => {
        console.log(`사용자 ID 3의 이름은 ${data.name} 입니다.`);
    })
    // catch 메서드를 사용하여 에러를 처리합니다.
    .catch(error => {
        console.error('사용자 정보를 가져오는 중 오류가 발생했습니다.');
    })
    // finally 메서드를 사용하여 작업이 완료되었을 때 메시지를 출력합니다.
    .finally(() => {
        console.log('사용자 정보를 가져오는 작업이 완료되었습니다.');
    });

// async/await를 사용하여 에러를 처리합니다.
const main = async () => {
    try {
        const user1 = await getUser(1);
        console.log(`사용자 ID 1의 이름은 ${user1.name} 입니다.`);

        const user2 = await getUser(2);
        console.log(`사용자 ID 2의 이름은 ${user2.name} 입니다.`);

        const user3 = await getUser(3);
        console.log(`사용자 ID 3의 이름은 ${user3.name} 입니다.`);
    } catch (error) {
        console.error('사용자 정보를 가져오는 중 오류가 발생했습니다.');
    } finally {
        console.log('사용자 정보를 가져오는 작업이 완료되었습니다.');
    }
};

위 코드는 async/await를 사용하여 사용자 ID 1, 2, 3의 사용자 정보를 차례대로 가져와 출력합니다.
getWeather 함수는 Promise 객체를 반환하며, fetch 함수가 성공적으로 호출되면 response 객체를 반환합니다.
response 객체가 정상적이지 않을 경우 에러를 반환하며, fetch 함수가 실패했을 경우 에러를 반환합니다.
catch 메서드를 사용하여 에러를 처리하며, finally 메서드를 사용하여 작업이 완료되었을 때 메시지를 출력합니다.

06. axios

axios: HTTP 클라이언트 라이브러리로, 비동기 방식으로 서버와 데이터를 주고받을 수 있습니다.

axios

- 문법

const axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });

- axios를 활용한 실무 예시

cdn : <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

const getUser = userId => {
    return new Promise((resolve, reject) => {
        axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
            .then(response => resolve(response.data))
            .catch(error => reject(error));
    });
};

// async/await를 사용하여 에러를 처리
const main = async () => {
    try {
        const user1 = await getUser(1);
        console.log(`사용자 ID 1의 이름은 ${user1.name} 입니다.`);

        const user2 = await getUser(2);
        console.log(`사용자 ID 2의 이름은 ${user2.name} 입니다.`);

        const user3 = await getUser(3);
        console.log(`사용자 ID 3의 이름은 ${user3.name} 입니다.`);
    } catch (error) {
        console.error('사용자 정보를 가져오는 중 오류가 발생했습니다.');
    } finally {
        console.log('사용자 정보를 가져오는 작업이 완료되었습니다.');
    }
};

주요 변경사항:

fetch → axios.get 으로 변경
response.json() 과정이 필요 없음 (axios는 자동으로 JSON 변환)
response.ok 체크가 필요 없음 (axios는 에러 상태코드를 자동으로 catch로 보냄)
response.data로 바로 데이터에 접근 가능

axios가 더 간단하고 편리하죠!

06. fetch API

fetch(주소, 옵션)
네트워크를 통해 리소스를 요청(Request) 및 응답(Response)하는 API로,
Promise 객체를 반환하여 비동기 작업을 처리합니다.

console 창에서 fetch 함수를 사용하여 JSONPlaceholder API를 호출해보겠습니다.

// fetch 함수를 사용하여 JSONPlaceholder API를 호출합니다.
console.log(fetch('https://jsonplaceholder.typicode.com/users'));

콘솔창의 promise instance를 클릭하면
then, catch, finally 메서드를 사용할 수 있도록 지정된 것을 확인할 수 있습니다.

fetch 함수를 사용하여 JSONPlaceholder API를 호출하면, Promise 객체를 반환합니다.

fetch('https://jsonplaceholder.typicode.com/users').then(res => console.log(res));

json 메서드를 사용하여 response 객체를 JSON 형태로 변환할 수 있습니다.

fetch('https://jsonplaceholder.typicode.com/users').then(res => console.log(res.json()));

그러면 json 형태로 변환된 데이터를 확인할 수 있습니다.

fetch 함수를 사용하여 JSONPlaceholder API를 호출하면, JSON 형태로 변환된 데이터를 반환합니다.

fetch('https://jsonplaceholder.typicode.com/users', {
    // HTTP 요청 메서드를 지정합니다.
    method: 'POST',
    // 서버로 전송되는 데이터의 형식을 지정합니다.
    headers: {
        'Content-Type': 'application/json',
    },
    // 서버로 전송되는 데이터를 지정합니다.
    // body 옵션에 명시하는 데이터는 문자열 형태로 지정해야 합니다.
    // JSON.stringify 메서드를 사용하여 JSON 형태로 변환합니다.
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1,
    }),
})
    .then(res => res.json()) // JSON 형태로 변환된 데이터를 반환합니다.
    .then(json => console.log(json)); // JSON 형태로 변환된 데이터를 출력합니다.

// .then(res => {
//     return res.json();
// });

fetch 함수가 promise 객체를 반환하므로, async/await를 사용하여 비동기 작업을 처리할 수 있습니다.

const main = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');
    const json = await res.json();
    console.log(json);
};

main();

변수(Variable) - javascript 기본

oodada — Sun, 23 Jun 2024 21:08:25 +0900

JS변수(Variable)

변수 선언

변수 선언은 var, let, const 키워드를 사용한다.

var a = 1;
let b = 2;
const c = 3;

var : 변수 재선언 가능
let : 변수 재선언 불가능
const : 변수 재선언 불가능, 상수 선언

변수 타입

number : 숫자
string : 문자열
boolean : 참 & 거짓
null & undefined : 값 없음
object : 객체
array : 배열

변수 이름 규칙

변수명은 문자, 숫자, 언더스코어(_), 달러 기호($)로 구성
변수명은 숫자로 시작할 수 없음
변수명은 대소문자를 구분
예약어(this, if 등) 사용 불가능

변수 할당

= : 할당 연산자

let a = 1;

변수 재할당

변수에 새로운 값을 할당하는 것

let a = 1;
a = 2;

변수 참조

변수에 할당된 값을 참조하는 것

let a = 1;
let b = a;

변수 범위

global : 전역 변수
local : 지역 변수

let a = 1; // global

function test() {
    let b = 2; // local
}

변수 호이스팅

변수 호이스팅은 변수를 선언하기 전에 참조할 수 있는 현상

console.log(a); // undefined
var a = 1;

변수 스코프

변수 스코프는 변수의 유효 범위가 어디까지인지를 나타냄

let a = 1; // global

function test() {
    let b = 2; // local
    console.log(a); // 1
    console.log(b); // 2
}

console.log(a); // 1
console.log(b); // b는 지역 변수이기 때문에 전역에서 참조할 수 없음

변수 형 변환

Number : 숫자로 변환

const a = '1';
const b = '2';

console.log(a + b); // 12
console.log(Number(a) + Number(b)); // 3

String : 문자열로 변환

const a = 1;
const b = 2;

console.log(a + b); // 3
console.log(String(a) + String(b)); // 12

Boolean : 참 & 거짓

const a = 1;
const b = 2;

console.log(a === b); // false
console.log(Boolean(a === b)); // false
// a와 b가 같은지 비교한 결과를 boolean으로 변환

javascript 핵심 요약

oodada — Thu, 30 May 2024 17:48:27 +0900

javascript 핵심 요약

자바스크립트는 웹페이지를 동적으로 만들어주는 언어로 웹페이지를 꾸미거나 사용자와 상호작용을 할 수 있게 해준다.
TIOBE 프로그래밍 언어 순위에서 2024년 기준 6위에 위치하고 있다.

자바스크립트 소개

자바스크립트 소개
자바스크립트는 HTML 콘텐츠를 변경할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo">JavaScript can change HTML content.</p>

        <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>
            Click Me!
        </button>
    </body>
</html>

자바스크립트는 HTML 속성을 변경할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
        <img id="myImage" src="pic_bulboff.gif" style="width:100px" />
        <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
    </body>
</html>

자바스크립트는 HTML 스타일을 변경할 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo" style="color: red;">Hello JavaScript!</p>

        <button type="button" onclick="document.getElementById('demo').style.color = 'blue'">Click Me!</button>
    </body>
</html>

자바스크립트는 HTML 요소를 숨길 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo">Hello JavaScript!</p>

        <button type="button" onclick="document.getElementById('demo').style.display = 'none'">Click Me!</button>
    </body>
</html>

자바스크립트는 HTML 요소를 보여줄 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo" style="display: none;">Hello JavaScript!</p>

        <button type="button" onclick="document.getElementById('demo').style.display = 'block'">Click Me!</button>
    </body>
</html>

자바스크립트의 사용

자바스크립트 사용하기
<script> 태그를 사용하여 자바스크립트 코드를 작성할 수 있다.
<script> 태그는 HTML 문서의 <head> 또는 <body> 태그 안에 작성할 수 있다.

<!DOCTYPE html>
<html>
    <body>
        <h2>JavaScript in Body</h2>

        <p id="demo">A Paragraph.</p>

        <button type="button" onclick="myFunction()">Try it</button>

        <script>
            function myFunction() {
                document.getElementById('demo').innerHTML = 'Paragraph changed.'
            }
        </script>
    </body>
</html>

<script> 태그를 사용하여 외부 자바스크립트 파일을 불러올 수 있다.
<script> 태그의 src 속성에 외부 자바스크립트 파일의 경로를 지정하면 된다.

<!DOCTYPE html>
<html>
    <body>
        <h2>JavaScript in Body</h2>

        <p id="demo">A Paragraph.</p>

        <button type="button" onclick="myFunction()">Try it</button>

        <script src="myScript.js"></script>
    </body>
</html>

자바스크립트의 기본 문법

1. 변수(Variable)

변수는 어떠한 값(Value)을 저장하는 공간(Stronge Location)으로써 값을 저장하고 사용하기 위해 사용한다. 변수를 선언할 때는 let, const, var 키워드를 사용한다.

변수 이름 규칙

변수 이름은 문자, 숫자, 밑줄(_), 달러 기호($)로 구성할 수 있으며, 대소문자를 구분한다.
변수 이름은 숫자로 시작할 수 없다.
예약어(if, while, for 등)는 변수 이름으로 사용할 수 없다.

변수의 의미

변수란 데이터를 저장하는 메모리 공간을 의미한다. 변수에 값을 저장하면 변수에 저장된 값은 메모리에 저장된다.

변수란 변할 수 있는 것으로 어떠한 값을 담는 상자라고 생각하면 된다.
- 예를 들어, let a = 1이라고 선언하면 a라는 변수에 1이라는 값을 담는다라는 의미이다.
- 그리고 이것을 변수에 값을 할당한다라고 표현한다.
- 그동안 사용했던 같다라는 의미의 =(등호)는 프로그래밍에서는 할당한다라는 의미로 사용된다.
변수를 사용하는 이유는 값을 재사용하기 위해서이다.
- 예를 들어, let a = 1이라고 선언하면 a라는 변수에 1이라는 값을 담는다.
- 그리고 이 값을 재사용할 때 a라는 변수를 사용하면 된다.
- 이렇게 되면 1이라는 값을 여러 번 사용할 때 1이라는 값을 여러 번 쓰지 않아도 되기 때문에 편리하다.
변수에 줄 수 있는 값은 숫자, 문자, 불리언, 객체, 배열 등 다양한 데이터 타입이 있다.

// a라는 변수에 1이라는 값을 할당한다.
let a = 1
// b라는 변수에 2이라는 값을 할당한다.
const b = 2
// c라는 변수에 3이라는 값을 할당한다.
var c = 3

console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

변수 선언

변수를 선언할 때는 let, const, var 키워드를 사용한다.

1. `let`

let은 변수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 있다.

let a = 1
a = 2

console.log(a) // 2

2. `const`

const는 상수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 없다.

const b = 1

b = 2 // TypeError: Assignment to constant variable.

3. `var`

var는 변수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 있다.
var 재할당 오류가 발생하지 않기 때문에 let, const를 사용하는 것이 좋다.

var c = 1
c = 2

console.log(c) // 2

2. 데이터 타입(Data Type)

자바스크립트의 데이터 타입이란 변수에 저장할 수 있는 값의 종류를 의미한다.

Number : 숫자 타입으로 정수, 실수, NaN, Infinity 등의 값을 저장한다.
String : 문자열 타입으로 문자열을 저장한다.
Boolean : 불리언 타입으로 참(true)과 거짓(false)을 저장한다.
Object : 객체 타입으로 객체를 저장한다.
Array : 배열 타입으로 배열을 저장한다.
Function : 함수 타입으로 함수를 저장한다.

- Number

숫자 타입으로 정수, 실수, NaN, Infinity 등의 값을 저장한다.

let a = 1
let b = 2

console.log(a) // 1
console.log(b) // 2

- String

문자열 타입으로 문자열을 저장한다.

let a = 'Hello'
let b = 'World'

console.log(a) // Hello
console.log(b) // World

- Boolean

불리언 타입으로 참(true)과 거짓(false)을 저장한다.

let a = true
let b = false

console.log(a) // true
console.log(b) // false

- Object

객체 타입으로 객체를 저장한다.

let a = { name: 'John', age: 20 }
let b = { name: 'Jane', age: 25 }

console.log(a) // { name: 'John', age: 20 }
console.log(b) // { name: 'Jane', age: 25 }

- Array

배열 타입으로 배열을 저장한다.

let a = [1, 2, 3]
let b = [4, 5, 6]

console.log(a) // [1, 2, 3]
console.log(b) // [4, 5, 6]

- Function

함수 타입으로 함수를 저장한다.

let a = function () {
    console.log('Hello')
}

let b = function () {
    console.log('World')
}

a() // Hello
b() // World

3. 연산자(Operator)

연산자는 피연산자(Operand)를 대상으로 연산을 수행하는 기호이다.

산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)
대입 연산자 : 할당(=), 더하기 후 할당(+=), 빼기 후 할당(-=), 곱하기 후 할당(*=), 나누기 후 할당(/=), 나머지 후 할당(%=)
비교 연산자 : 같다(===), 같지 않다(!==), 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=)
논리 연산자 : 논리곱(&&), 논리합(||), 논리부정(!)
삼항 연산자 : 조건 ? 참 : 거짓
타입 연산자 : typeof

- 산술 연산자

산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%) 연산을 수행한다.

let a = 1
let b = 2

console.log(a + b) // 3
console.log(a - b) // -1
console.log(a * b) // 2
console.log(a / b) // 0.5
console.log(a % b) // 1

- 대입 연산자

대입 연산자는 변수에 값을 할당하는 연산을 수행한다.

let a = 1

a += 2
console.log(a) // 3

a -= 2
console.log(a) // 1

a *= 2
console.log(a) // 2

a /= 2
console.log(a) // 1

a %= 2
console.log(a) // 1

- 비교 연산자

비교 연산자는 두 값을 비교하는 연산을 수행한다.

let a = 1
let b = 2

console.log(a === b) // false
console.log(a !== b) // true
console.log(a > b) // false
console.log(a < b) // true
console.log(a >= b) // false
console.log(a <= b) // true

- 논리 연산자

논리 연산자는 논리곱(&&), 논리합(||), 논리부정(!) 연산을 수행한다.
논리곱(&&) : 두 값이 모두 참일 때 참을 반환한다.
논리합(||) : 두 값 중 하나라도 참일 때 참을 반환한다.
논리부정(!) : 값이 참이면 거짓을 반환하고 거짓이면 참을 반환한다.

let a = true
let b = false

console.log(a && b) // false
console.log(a || b) // true
console.log(!a) // false
console.log(!b) // true

- 삼항 연산자

삼항 연산자는 조건을 판단하여 참일 때와 거짓일 때의 값을 반환한다.

let a = 1
let b = 2

let result = a > b ? 'a가 크다' : 'b가 크다'

console.log(result) // b가 크다

4. 조건문(Conditional Statement)

조건문은 조건식을 판단하여 해당하는 코드 블록을 실행하는 제어문이다.

if문 : 조건식이 참일 때 코드 블록을 실행한다.
if-else문 : 조건식이 참일 때 코드 블록을 실행하고 거짓일 때 다른 코드 블록을 실행한다.
if-else if-else문 : 여러 조건식을 판단하여 해당하는 코드 블록을 실행한다.

- if문

if문은 조건식이 참일 때 코드 블록을 실행한다.

let a = 1

if (a === 1) {
    console.log('a는 1이다.')
}

- if-else문

if-else문은 조건식이 참일 때 코드 블록을 실행하고 거짓일 때 다른 코드 블록을 실행한다.

let a = 1

if (a === 1) {
    console.log('a는 1이다.')
} else {
    console.log('a는 1이 아니다.')
}

- if-else if-else문

if-else if-else문은 여러 조건식을 판단하여 해당하는 코드 블록을 실행한다.

let a = 1

if (a === 1) {
    console.log('a는 1이다.')
} else if (a === 2) {
    console.log('a는 2이다.')
} else {
    console.log('a는 1도 2도 아니다.')
}

5. 반복문(Loop Statement)

반복문은 조건식이 참일 때 코드 블록을 반복 실행하는 제어문이다.

for문 : 조건식이 참일 때 코드 블록을 반복 실행한다.
while문 : 조건식이 참일 때 코드 블록을 반복 실행한다.

- for문

for문은 조건식이 참일 때 코드 블록을 반복 실행한다.

for (let i = 0; i < 5; i++) {
    console.log(i)
}

- while문

while문은 조건식이 참일 때 코드 블록을 반복 실행한다.

let i = 0

while (i < 5) {
    console.log(i)
    i++
}

6. 함수(Function)

함수는 코드 블록을 하나로 묶어서 재사용할 수 있는 기능이다.

함수 선언

함수를 선언할 때는 function 키워드를 사용한다.

function hello() {
    console.log('Hello')
}

hello() // Hello

함수 표현식

함수를 변수에 할당할 때는 함수 표현식을 사용한다.

let hello = function () {
    console.log('Hello')
}

hello() // Hello

화살표 함수

화살표 함수는 function 키워드를 생략하여 함수를 선언한다.

let hello = () => {
    console.log('Hello')
}

hello() // Hello

7. 객체(Object)

객체는 여러 개의 프로퍼티(Property)와 메소드(Method)를 하나로 묶은 복합 데이터 타입이다.

객체 생성

객체를 생성할 때는 중괄호({})를 사용한다.

let person = {
    name: 'John',
    age: 20,
    hello: function () {
        console.log('Hello')
    },
}

console.log(person.name) // John
console.log(person.age) // 20
person.hello() // Hello

객체 프로퍼티

객체의 프로퍼티는 객체의 속성을 의미한다.

let person = {
    name: 'John',
    age: 20,
}

console.log(person) // { name: 'John', age: 20 }
console.log(person.name) // John
console.log(person.age) // 20

객체 메소드

객체의 메소드는 객체의 동작을 의미한다.
w3c Object Methods

let person = {
    name: 'John',
    age: 20,
    hello: function () {
        console.log('Hello')
    },
}

person.hello() // Hello

8. 배열(Array)

배열은 여러 개의 요소(Element)를 하나로 묶은 복합 데이터 타입이다.

배열 생성 & 요소

배열을 생성할 때는 대괄호([])를 사용한다.
배열의 요소는 배열의 값이다.

let arr = [1, 2, 3]

console.log(arr[0]) // 1
console.log(arr[1]) // 2
console.log(arr[2]) // 3

배열 메소드

배열의 메소드는 배열의 동작을 의미한다.
w3c Array Methods

let arr = [1, 2, 3]

arr.push(4)
console.log(arr) // [1, 2, 3, 4]

arr.pop()
console.log(arr) // [1, 2, 3]

9. 콜백 함수(Callback Function)

콜백 함수는 함수의 인자로 전달되어 특정 시점에 호출되는 함수이다.

function hello(callback) {
    console.log('Hello')
    callback()
}

hello(function () {
    console.log('World')
})

10. 이벤트(Event)

이벤트는 사용자의 동작에 의해 발생하는 사건을 의미한다.
w3c Event

let button = document.querySelector('button')

button.addEventListener('click', function () {
    console.log('Click')
})

11. DOM(Document Object Model)

DOM은 웹 페이지의 요소를 객체로 표현한 모델을 의미한다.
w3c DOM

let button = document.querySelector('button')

button.addEventListener('click', function () {
    console.log('Click')
})

12. AJAX(Asynchronous JavaScript And XML)

AJAX는 비동기적으로 서버와 통신하는 기술을 의미한다.
w3c AJAX

let xhr = new XMLHttpRequest()

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true)
xhr.send()

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
    }
}

13. ES6(ECMAScript 6)

ES6는 ECMAScript 6의 줄임말로 자바스크립트의 표준을 의미한다.

let, const : 변수를 선언할 때 사용하는 키워드로 let은 변수를 선언할 때 사용하고 const는 상수를 선언할 때 사용한다.
화살표 함수 : 함수를 선언할 때 사용하는 키워드로 function 키워드를 생략하여 함수를 선언한다.
템플릿 리터럴 : 문자열을 표현할 때 사용하는 키워드로 백틱(`)을 사용하여 문자열을 표현한다.
구조 분해 할당 : 배열이나 객체의 값을 추출하여 변수에 할당하는 기능이다.
클래스 : 객체를 생성할 때 사용하는 키워드로 class 키워드를 사용하여 객체를 생성한다.
모듈 : 코드를 모듈화하여 재사용할 수 있는 기능이다.

// math.js
export function sum(a, b) {
    return a + b
}

// index.js
import { sum } from './math.js'

console.log(sum(1, 2)) // 3

14. Babel

Babel은 자바스크립트 코드를 ES5로 변환하는 도구이다.

// ES6
let a = 1

// Babel
;('use strict')

var a = 1

15. Webpack

Webpack은 모듈 번들러로 여러 개의 파일을 하나로 묶어주는 기능을 제공한다.

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
}

16. NPM(Node Package Manager)

NPM은 자바스크립트 패키지 매니저로 자바스크립트 라이브러리를 설치하고 관리하는 기능을 제공한다.

// package.json
{
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

17. Node.js

Node.js는 자바스크립트 런타임 환경으로 자바스크립트를 실행할 수 있는 환경을 제공한다.

// app.js
console.log('Hello Node.js')

18. Express

Express는 Node.js 웹 프레임워크로 웹 서버를 구축할 수 있는 기능을 제공한다.

// app.js
const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.send('Hello Express')
})

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000')
})

19. React

React는 페이스북에서 개발한 자바스크립트 라이브러리로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// App.js
import React from 'react'

function App() {
    return <h1>Hello React</h1>
}

export default App

20. Vue

Vue는 에반 유(Evan You)가 개발한 자바스크립트 프레임워크로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// App.vue
<template>
    <h1>Hello Vue</h1>
</template>

<script>
export default {
    name: 'App',
}
</script>

21. Angular

Angular는 구글에서 개발한 자바스크립트 프레임워크로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// app.component.ts
import { Component } from '@angular/core'

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'Hello Angular'
}

22. TypeScript

TypeScript는 마이크로소프트에서 개발한 자바스크립트의 상위 집합으로 정적 타입을 지원하는 기능을 제공한다.

// app.ts
function hello(name: string): string {
    return `Hello ${name}`
}

console.log(hello('TypeScript')) // Hello TypeScript

23. Next.js

Next.js는 Vercel에서 개발한 리액트 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// pages/index.js
export default function Home() {
    return <h1>Hello Next.js</h1>
}

24. Nuxt.js

Nuxt.js는 Nuxt 커뮤니티에서 개발한 뷰 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// pages/index.vue
<template>
    <h1>Hello Nuxt.js</h1>
</template>

25. NestJS

NestJS는 Kamil Myśliwiec이 개발한 Node.js 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// app.controller.ts
import { Controller, Get } from '@nestjs/common'

@Controller()
export class AppController {
    @Get()
    getHello(): string {
        return 'Hello NestJS'
    }
}

26. GraphQL

GraphQL은 페이스북에서 개발한 쿼리 언어로 데이터를 요청할 때 사용하는 기능을 제공한다.

// schema.graphql
type Query {
    hello: String
}

// resolvers.js
const resolvers = {
    Query: {
        hello: () => 'Hello GraphQL',
    },
}

// index.js
const { ApolloServer, gql } = require('apollo-server')

const typeDefs = gql`
    type Query {
        hello: String
    }
`

const resolvers = {
    Query: {
        hello: () => 'Hello GraphQL',
    },
}

const server = new ApolloServer({ typeDefs, resolvers })

server.listen().then(({ url }) => {
    console.log(`Server ready at ${url}`)
})

27. MongoDB

MongoDB는 NoSQL 데이터베이스로 데이터를 저장하고 관리하는 기능을 제공한다.

// app.js
const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost:27017/test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})

const Cat = mongoose.model('Cat', { name: String })

const kitty = new Cat({ name: 'Zildjian' })
kitty.save().then(() => console.log('meow'))

28. MySQL

MySQL은 오픈 소스 관계형 데이터베이스로 데이터를 저장하고 관리하는 기능을 제공한다.

// app.js
const mysql = require('mysql')

const connection = mysql.createConnection({
    host: 'localhost',
    user: '',
    password: '',
    database: '',
})

29. airbnb

airbnb는 에어비앤비에서 만든 자바스크립트 스타일 가이드로 코드의 품질을 향상시키는 기능을 제공한다.

// .eslintrc.js
module.exports = {
    extends: ['airbnb-base'],
    rules: {
        'no-console': 'off',
    },
}

30. Prettier

Prettier는 코드 포맷터로 코드의 일관성을 유지하는 기능을 제공한다.

// .prettierrc.js
module.exports = {
    singleQuote: true,
    semi: false,
}

GSAP을 이용한 Parallax Scrolling

oodada — Wed, 29 May 2024 14:52:11 +0900

GSAP을 이용한 Parallax Scrolling

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
javascript, css, 라이브러리 등을 이용하여 구현

GSAP이란?

웹 페이지나 웹 앱에서 다양한 애니메이션 효과를 만들 수 있도록 도와주는 강력한 도구로 널리 사용됩니다.

GSAP
이 라이브러리는 웹 개발자들에게 다양한 기능과 API를 제공하여 스무스하고 반응적인 웹 애니메이션을 쉽게 구현할 수 있게 해줍니다.
GSAP (GreenSock Animation Platform)은 HTML5 기반의 애니메이션 라이브러리로, CSS, SVG, Canvas, WebGL 등 다양한 요소에 애니메이션을 적용할 수 있습니다.
ScrollTrigger는 GSAP의 플러그인으로, 스크롤에 따라 요소에 애니메이션을 적용할 수 있습니다.
GSAP 코드펜 : GSAP의 다양한 예제를 확인할 수 있습니다.

GSAP, ScrollTrigger 설치하기

DOCS : GSAP, ScrollTrigger 설치

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

npm install gsap
npm install gsap@3.6.0
npm install gsap@3.6.0 scrolltrigger

See the Pen GSAP Basic Tween by odada (@odada) on CodePen.

GSAP 사용법

gsap.to('요소', { 옵션, 시간 })

GSAP docs
요소에 애니메이션을 적용
gsap.to() : 현재 상태에서 시작하여 지정된 상태로 애니메이션을 적용
gsap.from() : 지정된 상태에서 시작하여 현재 상태로 애니메이션을 적용
gsap.fromTo() : 지정된 상태에서 시작하여 지정된 상태로 애니메이션을 적용

gsap.to(".box1", {
        x: 400,
        y: 400,
        rotation: 45,
        backgroundColor: "blue",
        duration: 2,
      });

Timeline 사용법

gsap.timeline()

Timeline docs
여러 개의 애니메이션을 순차적으로 실행
add() : 해당 요소에 애니메이션을 추가
addLabel() : 해당 요소에 레이블을 추가
play() : 애니메이션을 실행
pause() : 애니메이션을 일시정지
reverse() : 애니메이션을 역방향으로 실행
time() : 애니메이션의 시간을 설정
seek() : 애니메이션의 위치를 설정
duration() : 애니메이션의 지속 시간을 설정
repeat() : 애니메이션을 반복
yoyo() : 애니메이션을 왕복
progress() : 애니메이션의 진행 상태를 설정
kill() : 애니메이션을 중지

const tl = gsap.timeline();

tl.to(".box2", { y: 200, duration: 2 })
  .to(".box2", { x: 200, duration: 2 })
  .to(".box2", { rotation: 45, scale: 2 })
  .to(".box2", { backgroundColor: "red", duration: 2 });

ScrollTrigger 사용법

ScrollTrigger docs
스크롤에 따라 요소에 애니메이션을 적용
trigger : 트리거가 되는 요소
start : 트리거가 되는 요소의 시작 위치
end : 트리거가 되는 요소의 끝 위치
scrub : 스크롤 속도에 따라 애니메이션 속도가 달라짐
pin : 해당 요소를 고정
markers : 해당 요소의 트리거를 표시

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box1", {
  x: 400,
  y: 400,
  backgroundColor: "blue",
  duration: 2,
  scrollTrigger: {
    trigger: ".section1", // 객체 기준 범위
    start: "0 30%", // 시작 위치
    end: "100% 60%", // 끝 위치
    scrub: true, // 스크롤 속도에 따라 애니메이션 속도 조절
    // markers: true, // 개발 가이드선
  },
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section2", // 객체 기준 범위
    start: "0 0", // 시작 위치
    end: "+=400", // 끝 위치
    scrub: 0.7, // 스크롤 속도에 따라 애니메이션 속도 조절
    markers: true, // 개발 가이드선
    pin: true,
  },
});

tl.to(".box2", {
  y: 200,
  duration: 2,
})
  .to(".box2", {
  x: 200,
  duration: 2,
})
  .to(".box2", {
  rotation: 45,
  scale: 2,
});

Parallax Scrolling을 이용한 Header, topButton 애니메이션

See the Pen gsap, scrolltoplugin by odada (@odada) on CodePen.

- 200px 이상 스크롤 시, Header 숨기기

/**
 * 페이지 스크롤에 따른 요소 제어
 */
// 페이지 스크롤에 영향을 받는 요소들을 검색!
const headerEl = document.querySelector('#header');
const toTopEl = document.querySelector('#to-top');
// 페이지에 스크롤 이벤트를 추가!
// 스크롤이 지나치게 자주 발생하는 것을 조절(throttle, 일부러 부하를 줌)
window.addEventListener(
    'scroll',
    _.throttle(function () {
        // 페이지 스크롤 위치가 200px 이상.
        if (window.scrollY > 200) {
            // Badge 요소 숨기기!
            // gsap.to(요소, 시간, 옵션);
            gsap.to(headerEl, {
                opacity: 0,
                display: 'none',
                duration: 0.6,
            });
            // 상단으로 스크롤 버튼 보이기!
            gsap.to(toTopEl, {
                right: '30px',
                // x: 0,
                duration: 0.2,
            });

            // 페이지 스크롤 위치가 500px이 넘지 않으면.
        } else {
            // 스크롤이 200px 이하일 경우
            // Badge 요소 보이기!
            gsap.to(headerEl, {
                opacity: 1,
                display: 'block',
                duration: 0.6,
            });
            // 상단으로 스크롤 버튼 숨기기!
            gsap.to(toTopEl, {
                right: '-50px',
                // x: 100,
                duration: 0.2,
            });
        }
    }, 300),
);
// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener('click', function () {
    // 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
    gsap.to(window, {
        scrollTo: 0,
        duration: 0.7,
    });
});

/**
 * 순서대로 나타나는 기능
 */
// 나타날 요소들(.fade-in) 찾기.
const fadeEls = document.querySelectorAll('.visual .fade-in');
// 나타날 요소들을 하나씩 반복해서 처리!
fadeEls.forEach(function (fadeEl, index) {
    // 각 요소들을 순서대로(delay) 보여지게 함!
    gsap.to(fadeEl, {
        delay: (index + 1) * 0.7,
        opacity: 0.5,
        duration: 1,
    });
});

- ScrollUp, ScrollDown 애니메이션

// 페이지 스크롤에 따른 요소 제어
const headerEl = document.querySelector('#header');
const toTopEl = document.querySelector('#to-top');

// 이전 스크롤 위치 저장 변수
let lastScrollY = window.scrollY;

window.addEventListener(
    'scroll',
    _.throttle(function () {
        // 현재 스크롤 위치
        const currentScrollY = window.scrollY;

        // 스크롤 다운
        if (currentScrollY > lastScrollY) {
            gsap.to(headerEl, {
                opacity: 0,
                display: 'none',
                duration: 0.6,
            });
            gsap.to(toTopEl, {
                right: '30px',
                duration: 0.2,
            });
        }
        // 스크롤 업
        else {
            gsap.to(headerEl, {
                opacity: 1,
                display: 'block',
                duration: 0.6,
            });
            gsap.to(toTopEl, {
                right: '-50px',
                duration: 0.2,
            });
        }

        // 이전 스크롤 위치 업데이트
        lastScrollY = currentScrollY;
    }, 300),
);

// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener('click', function () {
    // 페이지 위치를 최상단으로 부드럽게(0.7초 동안) 이동.
    gsap.to(window, {
        scrollTo: 0,
        duration: 0.7,
    });
});

// 순서대로 나타나는 기능
const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
    gsap.to(fadeEl, {
        delay: (index + 1) * 0.7,
        opacity: 1,
        duration: 1,
    });
});

AOS를 이용한 Parallax Scrolling

oodada — Wed, 29 May 2024 14:47:35 +0900

AOS를 이용한 Parallax Scrolling

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
javascript, css, 라이브러리 등을 이용하여 구현

AOS(Animate On Scroll) 란?

스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리로 패럴랙스 스크롤링을 구현할 수 있음

aos : https://michalsnik.github.io/aos/
v1 : https://github.com/michalsnik/aos
v2 : https://github.com/michalsnik/aos/tree/v2

AOS 설치

태그 내에 AOS 라이브러리를 추가

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

태그 닫는 태그 바로 위에 AOS 라이브러리를 추가

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init()
</script>

AOS 초기화

AOS.init() : AOS를 초기화
AOS.init({}) : AOS를 초기화하면서 옵션을 설정 (https://github.com/michalsnik/aos?tab=readme-ov-file#1-initialize-aos)

AOS 옵션

offset : 요소가 화면에 보이기 전에 애니메이션이 시작되는 위치
delay : 애니메이션이 시작되는 지연 시간
duration : 애니메이션의 지속 시간
easing : 애니메이션의 가속도
once : 애니메이션을 한 번만 실행
anchor-placement : 애니메이션이 실행되는 기준점

AOS 사용

- AOS 효과를 각 요소에 적용

AOS 효과를 적용할 요소에 data-aos 속성을 추가

<div data-aos="fade-up">Fade Up</div>

AOS 효과를 적용할 요소에 추가할 수 있는 속성
- data-aos : 애니메이션 효과
- data-aos-offset : 요소가 화면에 보이기 전에 애니메이션이 시작되는 위치
- data-aos-delay : 애니메이션이 시작되는 지연 시간
- data-aos-duration : 애니메이션의 지속 시간
- data-aos-easing : 애니메이션의 가속도
- data-aos-mirror : 애니메이션을 반복
- data-aos-once : 애니메이션을 한 번만 실행
- data-aos-anchor-placement : 애니메이션이 실행되는 기준점

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
></div>

위와 같이 속성을 추가하면 스크롤에 따라 요소에 애니메이션 효과가 적용됩니다. 하지만 옵션이 너무 많아서 코드가 복잡해질 수 있습니다. 반복되는 코드를 줄이기 위해 자바스크립트로 옵션을 설정할 수 있습니다.

- AOS 초기화 시 옵션 설정

<div data-aos="fade-up">Fade Up</div>

AOS.init({
    offset: 200,
    delay: 50,
    duration: 1000,
    easing: 'ease-in-out',
    mirror: true,
    once: false,
    anchorPlacement: 'top-center',
})

AOS 예제

See the Pen Parallax Scrolling - AOS by odada (@odada) on CodePen.

Javascript를 이용한 Parallax Scrolling

oodada — Wed, 29 May 2024 14:29:19 +0900

Javascript를 이용한 Parallax Scrolling

패럴랙스 스크롤링이란?

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
javascript, css, 라이브러리 등을 이용하여 구현

js를 이용한 패럴랙스 스크롤링

window.addEventListener('scroll', function() {})
window.scrollY : 현재 스크롤된 y축의 위치

- translate, transform, scrollY 등을 이용하여 패럴랙스 스크롤링 구현

js를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할 수 있다.

<div class="item">item</div>

<script>
    const item = document.querySelector('.item')

    item.style.color = 'red'
    item.style.fontSize = '20px'
    item.style.transform = 'translate(100px, 100px) rotate(45deg) scale(1.5)'
</script>

- 윈도우의 스크롤 값 가져오기

window.addEventListener('scroll', function () {
    const scrolled = window.scrollY // 윈도우의 스크롤값
    console.log('scrollY : ' + scrolled) // 스크롤값
    console.log('scrollY : ' + scrolled * 0.5) // 스크롤값의 50%
})

- 예제

See the Pen Parallax Scrolling - JS by odada (@odada) on CodePen.

<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title"
        >텍스트는 빠르고 <br />
        배경은 느림</strong
    >
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>

window.addEventListener('scroll', function () {
    // 스크롤 이벤트 리스너 등록
    const sections = document.querySelector('.section') // 모든 섹션을 가져옴

    const background = sections.querySelector('.background') // 배경 요소
    const title = sections.querySelector('.title') // 제목 요소
    const circle = sections.querySelector('.circle') // 원 요소
    const square = sections.querySelector('.square') // 사각형 요소

    const scrolled = window.scrollY // 윈도우의 스크롤값

    console.log('scrollY : ' + scrolled)

    background.style.transform = `translateY(${scrolled * 0.8}px)`
    // 제목을 스크롤 속도의 80%(빠르게)로 이동
    title.style.transform = `scale(${scrolled * 0.001})`
    // 배경을 스크롤 속도의 30%(느리게)로 이동
    circle.style.transform = `translate(${scrolled * 0.5}px, ${scrolled * 0.5}px)`
    // circle 왼쪽에서 오른쪽으로 이동
    square.style.transform = `translate(${scrolled * -0.5}px, ${scrolled * 0.5}px)`
    // square 오른쪽에서 왼쪽으로 이동
})

구역별 패럴랙스 스크롤링

for each문을 이용하여 각 섹션에 대해 애니메이션 적용

- for each 란?

배열의 각 요소에 대해 주어진 함수를 실행
배열의 각 요소에 대해 반복문을 실행

const items = ['item1', 'item2', 'item3']

items.forEach(function (item) {
    console.log(item)
})

- for each문을 이용하여 각 섹션에 대해 애니메이션 적용

See the Pen Parallax Scrolling - JS by odada (@odada) on CodePen.

<div class="extra-content">
    <p>Parallax Scrolling (JS)</p>
</div>
<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title">느림의 중요성을 깨달은 달팽이</strong>
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>
<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title">그냥 느린 가을이</strong>
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>

window.addEventListener('scroll', function () {
    // 스크롤 이벤트 리스너 등록
    const sections = document.querySelectorAll('.section') // 모든 섹션을 가져옴

    sections.forEach(function (section) {
        // 각 섹션에 대해 반복
        let bounds = section.getBoundingClientRect() // 섹션의 위치와 크기 정보를 가져옴
        const background = section.querySelector('.background') // 배경 요소
        const title = section.querySelector('.title') // 제목 요소
        const circle = section.querySelector('.circle') // 원 요소
        const square = section.querySelector('.square') // 사각형 요소

        if (bounds.top < window.innerHeight && bounds.bottom >= 0) {
            // 섹션이 뷰포트 내에 있을 때
            var scrolled = window.pageYOffset - section.offsetTop // 섹션의 시작점에서 스크롤된 거리를 계산
            background.style.transform = `translateY(${scrolled * 0.8}px)` // 제목을 스크롤 속도의 80%(빠르게)로 이동
            title.style.transform = `translateY(${scrolled * 0.3}px)` // 배경을 스크롤 속도의 30%(느리게)로 이동
            circle.style.transform = `translate(${scrolled * 0.5}px, ${scrolled * 0.5}px)` // circle 왼쪽에서 오른쪽으로 이동
            square.style.transform = `translate(${scrolled * -0.5}px)` // square 오른쪽에서 왼쪽으로 이동
        }
    })
})

CSS를 이용한 Parallax Scrolling

oodada — Tue, 28 May 2024 14:54:52 +0900

CSS를 이용한 Parallax Scrolling

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
javascript, css, 라이브러리 등을 이용하여 구현

1. Perspective

- perspective 속성

css perspective 속성을 이용한 패럴랙스 스크롤링

해당 요소의 z = 0 평면과 사용자 사이의 거리
transform 효과를 주고자 하는 부모 요소에 적용
perspective에 따른 변형 효과
- perspective: 100px; => 100px만큼 멀어져 보임
- perspective가 클수록 (거리가 멀수록) 변형 효과가 줄어듦
- perspective가 작을수록 (거리가 가까울수록) 변형 효과가 커짐
- w3c schools perspective

See the Pen Untitled by odada (@odada) on CodePen.

<h1>The perspective Property</h1>

<div class="container">
    perspective 0
    <div class="item">item2</div>
</div>

<div class="container perspective300">
    perspective 300
    <div class="item">item1</div>
</div>

<div class="container perspective100">
    perspective 100
    <div class="item">item1</div>
</div>

<div class="container perspective50">
    perspective 50
    <div class="item">item1</div>
</div>

.container {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 60px;
    border: 1px solid blue;
}

.perspective300 {
    perspective: 300px;
}

.perspective100 {
    perspective: 100px;
}

.perspective50 {
    perspective: 50px;
}

.item {
    position: absolute;
    padding: 50px;
    border: 1px solid black;
    background: rgba(100, 100, 100, 0.5);
    transform-style: preserve-3d;
    transform: rotateX(45deg);
}

- perspective-origin 속성

사용자가 3D 요소를 바라보는 시점을 설정

perspective-origin: x y; => perspective의 원점을 x, y로 설정
perspective-origin: 50% 50%; => perspective의 원점을 중앙으로 설정
perspective-origin: 0% 0%; => perspective의 원점을 왼쪽 상단으로 설정
perspective-origin: 100% 100%; => perspective의 원점을 오른쪽 하단으로 설정
w3c schools perspective-origin

.container {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 60px;
    border: 1px solid blue;
}

.perspective300 {
    perspective: 300px;
    perspective-origin: 50% 50%; // Default
}

.perspective100 {
    perspective: 100px;
    perspective-origin: 0% 0%; // Top left
}

.perspective50 {
    perspective: 50px;
    perspective-origin: 100% 100%; // Bottom right
}

.item {
    position: absolute;
    padding: 50px;
    border: 1px solid black;
    background: rgba(100, 100, 100, 0.5);
    transform-style: preserve-3d;
    transform: rotateX(45deg);
}

2. Parallax Scrolling

- CSS를 이용한 패럴랙스 스크롤링

css perspective 속성을 이용한 패럴랙스 스크롤링

container에 perspective 속성을 이용하여 입체감을 주는 효과
해당 요소의 z = 0 평면과 사용자 사이의 거리
item에 transform translateZ()를 이용하여 z축 방향을 이동

See the Pen Parallax Scrolling - CSS by odada (@odada) on CodePen.

<div class="parallax">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <strong class="title">Parallax Scolling (CSS)</strong>
</div>

.parallax {
    height: 100vh;
    overflow-x: hidden;
    perspective: 1px;
}

.parallax div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 50px;
    color: #fff;
}

.parallax .item1 {
    background-color: #333;
    height: 150rem;
}

.parallax .item2 {
    top: 800px;
    background-color: aqua;
    height: 500px;
    transform: translateZ(-2px);
    color: red;
}

.parallax .item3 {
    top: 900px;
    background-color: blueviolet;
    height: 500px;
    transform: translateZ(-1px);
    opacity: 0.7;
}

firebase를 이용한 Next.js 블로그 앱 만들기

oodada — Sun, 5 May 2024 01:45:35 +0900

Next.js 블로그 앱 만들기

Next.js를 사용하여 블로그 애플리케이션을 만들어보겠습니다. 블로그 애플리케이션은 다음과 같은 기능을 구현할 수 있습니다.

Next.js 기초 및 설정 포스트를 참고하여 Next.js 프로젝트를 생성합니다.

next.js 블로그 앱 만들기 github 바로가기

1. 프로젝트 개요

1.1. 프로젝트 목표

Next를 사용하여 블로그 앱을 만들어보자.
Firebase로 사용자 인증을 구현하고 로그인, 회원가입, 로그아웃 기능을 구현한다.
Firebase의 기본 개념을 익히고 데이터 조회, 추가, 수정, 삭제를 구현한다.

1.2. 프로젝트 환경

Next.js(create-next-app) 프로젝트 생성
Firebase (Firestore, Authentication)를 이용한 데이터 관리 및 사용자 인증
Firebase Firestore를 이용한 게시판 CRUD(Create, Read, Update, Delete) 구현

1.3. 프로젝트 구조

블로그 애플리케이션은 다음과 같은 구조로 구성됩니다. components 디렉토리에 레이아웃 컴포넌트와 포스트 관련 컴포넌트를 생성하고, pages 디렉토리에 메인 페이지와 포스트 페이지를 생성할 수 있습니다.
public 디렉토리에 이미지와 스타일 파일을 저장할 수 있습니다.

next-blog/
├── public/
│   ├── images/
│   │   └── logo.png
│   ├── styles/
│   │   └── main.css
├── src/
│   ├── components/
│   │   ├── Layout/
│   │   │   └── Layout.tsx
│   │   │   └── Header.tsx
│   │   │   └── Footer.tsx
│   │   ├── Post/
│   │   │   └── PostList.tsx    # 포스트 목록 컴포넌트
│   │   │   └── PostItem.tsx    # 포스트 아이템 컴포넌트
│   │   │   └── PostDetail.tsx  # 포스트 상세 컴포넌트
│   │   │   └── PostEdit.tsx    # 포스트 수정 컴포넌트
│   │   │   └── PostNew.tsx     # 포스트 작성 컴포넌트
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── post
│   │   │   ├── index.tsx    # 포스트 목록 페이지
│   │   │   ├── [id].tsx     # 포스트 상세 페이지
│   │   │   ├── edit.tsx     # 포스트 수정 페이지
│   │   │   └── new.tsx      # 포스트 작성 페이지
│   │   ├── login.tsx    # 로그인 페이지
│   │   ├── signup.tsx   # 회원가입 페이지
│   ├── types/               # 타입 정의
│   │   └── types.ts
│   ├── data/                # 데이터 관리
│   │   └── data.ts
│   ├── firebase/            # Firebase 설정
│   │   ├── firebase.ts     # Firebase 초기화 파일
│   │   ├── auth.ts        # Firebase Authentication 설정
│   │   └── firestore.ts    # Firestore CRUD 기능 구현 파일
│   ├── styles/
│   │   ├── globals.css
│   │   ├── Home.module.css
│   │   └── Post.module.css
├── .gitignore
├── package.json
├── README.md
└── tsconfig.json

3.2. Firestore 프로젝트 구조

src/
│
├── components/   # UI 컴포넌트 폴더
│
├── firebase/     # Firebase 설정과 관련 기능을 포함하는 폴더
│   ├── config.ts # Firebase 초기화 파일
│   └── firestore.ts  # Firestore CRUD 기능 구현 파일
│
├── pages/        # Next.js 페이지
│
└── types/        # TypeScript 타입 정의 폴더

2. 프로젝트 준비

2.2. Firebase 프로젝트 생성

Firebase Console에 접속합니다.

[프로젝트 만들기] 버튼을 클릭해 새 프로젝트를 만들어줍니다.

프로젝트 이름을 입력하고, [계속] 버튼을 클릭합니다.

현 프로젝트에서는 Google Analytics를 사용하지 않으므로 선택 해제하고, [프로젝트 만들기] 버튼을 클릭합니다.

프로젝트가 생성되면, [계속] 버튼을 클릭합니다.

Firebase 프로젝트가 생성되면, 앱 추가 화면이 나타납니다. 웹 앱을 추가하려면, </> 아이콘을 클릭합니다.

앱의 이름을 입력하고, Firebase Hosting을 설정하지 않으므로 Firebase Hosting 설정 해제합니다. [앱 등록] 버튼을 클릭합니다.

2.3. Firebase SDK 설정

- 패키지 설치

Firebase SDK 설정을 위한 구성 요소를 추가하기 위해 npm 패키지를 설치합니다.

npm install firebase

- Firebase 초기화 관리

Firebase SDK 설정을 위한 구성 요소를 추가합니다. Firebase SDK 구성을 위한 설정 파일을 생성합니다.

mkdir -p src/firebase
touch src/firebase/firebase.ts

Firebase SDK 설정을 위한 구성 요소를 추가합니다. Firebase SDK 구성을 위한 설정 파일을 생성합니다.

// src/firebase/firebase.ts
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'
import 'firebase/auth' // Firebase Authentication 기능을 사용하기 위한 import
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)

export default app

- Firebase 사용하기

pages/_app.tsx 파일에서 Firebase SDK 구성을 위한 설정 파일을 import 합니다.

// pages/_app.tsx
import { AppProps } from 'next/app'
import Layout from '@/components/layout/Layout'
import app from '@/firebase/firebase' // Firebase SDK 구성을 위한 설정 파일 import

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

export default MyApp

- 환경 변수 설정

Firebase 설정에 필요한 환경 변수들은 .env.local 파일에 저장해야 합니다. Next.js에서는 NEXTPUBLIC 접두어를 사용하여 클라이언트 사이드에서도 환경 변수를 접근할 수 있게 설정합니다.

# .env.local
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

.env.local 파일은 .gitignore 파일에 추가하여 깃허브에 올리지 않도록 설정합니다.

# .gitignore
.env.local

코드에 환경 변수를 사용할 때는 process.env.NEXTPUBLIC 접두어를 사용하여 환경 변수를 사용합니다.

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

2.4. Firebase Authentication 설정

- Firebase Authentication 활성화

Firebase Console에서 Authentication 메뉴로 이동합니다.

[시작하기] 버튼을 클릭하여 Firebase Authentication을 활성화합니다.

Firebase Authentication이 활성화되면, [로그인 방법] 탭으로 이동합니다.

[google] 로그인 방법을 활성화합니다.

Firebase Authentication 설정이 완료되었습니다.

- Firebase Authentication 패키지 설치

- Firebase 인증 설정

이제 인증 기능을 초기화하는 코드를 작성합니다.

src/firebase/auth.ts 파일은 Firebase와 Next.js 프로젝트의 인증 기능을 통합하기 위해 사용자 정의 설정과 함수를 포함하는 파일입니다. 이 파일을 작성하는 목적은 Firebase Authentication 서비스와의 상호 작용을 관리하고, 이를 프로젝트 전반에 걸쳐 쉽게 사용할 수 있도록 하는 것입니다. 이 파일에서 구현하는 주요 기능은 다음과 같습니다:

Firebase 앱 초기화: 프로젝트에 필요한 Firebase 서비스를 사용하기 위해 Firebase 앱을 초기화합니다.
인증 관련 함수 제공: 로그인, 회원가입, 로그아웃과 같은 인증 관련 함수를 제공합니다.
인증 상태 관리: 사용자의 로그인 상태를 추적하고, 이를 앱의 다른 부분에서 쉽게 사용할 수 있게 합니다.

참조 및 작성 방법 :
Firebase 공식 문서와 Next.js의 인증 패턴을 참조하여 auth.ts 파일을 작성합니다. 아래는 Firebase 공식 문서와 Next.js의 인증 패턴을 참조할 수 있는 링크입니다.

Firebase 공식 문서: Firebase의 다양한 기능을 설정하고 사용하는 방법에 대한 자세한 지침이 포함되어 있습니다. 특히, Firebase 웹 문서에서 제공하는 인증 관련 메서드들의 사용 방법을 참조할 수 있습니다.
Next.js 예제 및 튜토리얼: Next.js 커뮤니티와 공식 문서에서 제공하는 인증 튜토리얼을 통해 Next.js에서 인증 시스템을 구현하는 베스트 프랙티스를 배울 수 있습니다.

// src/firebase/firebase.ts
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

// Firebase 앱 설정
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Firebase 앱 초기화
const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)

// src/firebase/auth.tsx
// auth.tsx
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
import { auth } from './firebase'
import {
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signOut,
    onAuthStateChanged,
    GoogleAuthProvider,
    signInWithPopup,
    User,
} from 'firebase/auth'

// 컨텍스트 타입 정의
interface AuthContextType {
    user: User | null
    login: (email: string, password: string) => Promise<void>
    register: (email: string, password: string) => Promise<void>
    logout: () => Promise<void>
    loginWithGoogle: () => Promise<void>
}

// AuthContext 컨텍스트 생성
const AuthContext = createContext<AuthContextType>({
    user: null,
    login: async () => {},
    register: async () => {},
    logout: async () => {},
    loginWithGoogle: async () => {},
})

// AuthProvider 컴포넌트 정의
export const AuthProvider = ({ children }: { children: ReactNode }) => {
    const [user, setUser] = useState<User | null>(null)

    // 사용자 상태 업데이트
    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, setUser)
        return () => unsubscribe()
    }, [])

    // 로그인 함수
    const login = async (email: string, password: string) => {
        await signInWithEmailAndPassword(auth, email, password)
    }

    // 회원가입 함수
    const register = async (email: string, password: string) => {
        await createUserWithEmailAndPassword(auth, email, password)
    }

    // 로그아웃 함수
    const logout = async () => {
        await signOut(auth)
    }

    // Google 로그인 함수
    const loginWithGoogle = async () => {
        const provider = new GoogleAuthProvider()
        try {
            await signInWithPopup(auth, provider)
        } catch (error) {
            console.error('Google 로그인 실패:', error)
        }
    }

    return (
        <AuthContext.Provider value={{ user, login, register, logout, loginWithGoogle }}>
            {children}
        </AuthContext.Provider>
    )
}

// 사용자 정의 훅
export const useAuth = () => useContext(AuthContext)

- 로그인 및 회원가입 기능 포함된 헤더

이제 로그인 및 회원가입 기능이 포함된 헤더를 만들어보겠습니다.

// components/Layout/Header.tsx
import Link from 'next/link'
import { useAuth } from '@/firebase/auth'

const Header = () => {
    const { user, loginWithGoogle, logout } = useAuth()

    return (
        <header>
            <h1>
                <Link href="/">logo</Link>
            </h1>

            <nav>
                <ul>
                    <li>
                        <Link href="/about">About</Link>
                    </li>
                    <li>
                        <Link href="/post">Post</Link>
                    </li>
                </ul>
            </nav>

            <div className="space-x-4">
                {user ? (
                    <button onClick={logout} className="p-2 bg-red-500 rounded">
                        로그아웃
                    </button>
                ) : (
                    <>
                        <button onClick={loginWithGoogle} className="p-2 bg-blue-500 rounded">
                            Google로 로그인
                        </button>
                        <Link href="/login">
                            <button className="p-2 bg-green-500 rounded">로그인</button>
                        </Link>
                        <Link href="/signup">
                            <button className="p-2 bg-yellow-500 rounded">회원가입</button>
                        </Link>
                    </>
                )}
            </div>
        </header>
    )
}

export default Header

- 로그인 페이지

// pages/login.tsx
import { useState } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '@/firebase/auth'

const Login = () => {
    const { login, loginWithGoogle } = useAuth()
    const router = useRouter()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState('')

    const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()
        try {
            await login(email, password)
            router.push('/')
        } catch (err) {
            setError('로그인 실패: 잘못된 이메일 또는 비밀번호입니다.')
        }
    }

    return (
        <div>
            <h2>로그인</h2>
            {error && <p>{error}</p>}
            <form onSubmit={handleLogin}>
                <label>
                    이메일:
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                </label>
                <label>
                    비밀번호:
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                </label>
                <button type="submit">로그인</button>
            </form>
            <button onClick={loginWithGoogle}>Google로 로그인</button>
        </div>
    )
}

export default Login

- 회원가입 페이지

// pages/signup.tsx
// pages/register.tsx
import { useState } from 'react'
import { useRouter } from 'next/router'
import { useAuth } from '@/firebase/auth'

const Signup = () => {
    const { register } = useAuth()
    const router = useRouter()
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [error, setError] = useState('')

    const handleRegister = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()
        try {
            await register(email, password)
            router.push('/')
        } catch (err) {
            setError('회원가입 실패: 이메일 형식이 올바르지 않거나 비밀번호가 너무 짧습니다.')
        }
    }

    return (
        <div>
            <h2>회원가입</h2>
            {error && <p>{error}</p>}
            <form onSubmit={handleRegister}>
                <label>
                    이메일:
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                </label>
                <label>
                    비밀번호:
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                </label>
                <button type="submit">회원가입</button>
            </form>
        </div>
    )
}

export default Signup

- AuthProvider 감싸기

마지막으로 AuthProvider 컴포넌트를 모든 페이지에 적용하기 위해 pages/_app.tsx 파일을 다음과 같이 수정합니다:

// pages/_app.tsx
import { AppProps } from 'next/app'
import Layout from '../components/Layout/Layout'
import { AuthProvider } from '../src/firebase/auth'
import app from '../src/firebase/firebase' // Firebase SDK 구성을 위한 설정 파일 import
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <AuthProvider>
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </AuthProvider>
    )
}

export default MyApp

3. Firebase Firestore 설정

firebase firestore를 사용하여 데이터베이스를 생성하고, 데이터를 추가, 조회, 수정, 삭제하는 방법을 알아보겠습니다.

3.1. Firestore 데이터베이스 생성

Firebase Console에서 Firestore 메뉴로 이동합니다.
[데이터베이스 만들기] 버튼을 클릭합니다.
[시작하기] 버튼을 클릭합니다.
[보안 규칙] 설정을 테스트 모드로 설정합니다.
[다음] 버튼을 클릭합니다.
[데이터베이스 만들기] 버튼을 클릭합니다.

3.2. Firestore 데이터베이스 설정

Firestore 데이터베이스를 설정합니다.

// firebase/firebase.ts
import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore' // Firestore를 위한 import 추가

// Firebase 앱 설정
const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

// Firebase 앱 초기화
const app = initializeApp(firebaseConfig)

// 인증 서비스 인스턴스 생성
export const auth = getAuth(app)

// Firestore 서비스 인스턴스 생성
export const db = getFirestore(app) // Firestore 인스턴스를 추가하고 export합니다.

// src/firebase/firestore.ts
import { db } from './firebase'
import { collection, getDocs, addDoc, doc, updateDoc, deleteDoc } from 'firebase/firestore'

// 추가 (Create)
export async function addDocument(collectionName: string, data: object) {
    try {
        const docRef = await addDoc(collection(db, collectionName), data)
        console.log('Document written with ID:', docRef.id)
    } catch (e) {
        console.error('Error adding document:', e)
    }
}

// 조회 (Read)
export async function getAllDocuments(collectionName: string) {
    const querySnapshot = await getDocs(collection(db, collectionName))
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} =>`, doc.data())
    })
}

// 수정 (Update)
export async function updateDocument(collectionName: string, docId: string, newData: object) {
    const docRef = doc(db, collectionName, docId)
    try {
        await updateDoc(docRef, newData)
        console.log('Document updated')
    } catch (e) {
        console.error('Error updating document:', e)
    }
}

// 삭제 (Delete)
export async function deleteDocument(collectionName: string, docId: string) {
    const docRef = doc(db, collectionName, docId)
    try {
        await deleteDoc(docRef)
        console.log('Document deleted')
    } catch (e) {
        console.error('Error deleting document:', e)
    }
}

3.4. Firestore 데이터베이스 추가

Firestore 데이터베이스를 사용하여 데이터를 추가, 조회, 수정, 삭제하는 방법을 알아보겠습니다.

// src/pages/new.tsx
import React, { useState } from 'react'
import { addDocument } from '@/firebase/firestore'

const AddPostPage: React.FC = () => {
    const [title, setTitle] = useState('')
    const [content, setContent] = useState('')

    // 폼 제출 시 Firestore에 데이터를 추가하는 함수 호출
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()
        // 입력된 데이터 유효성 검사
        if (title.trim() === '' || content.trim() === '') {
            alert('제목과 내용을 입력하세요!')
            return
        }

        // Firestore에 문서 추가
        try {
            await addDocument('posts', { title, content })
            alert('새 게시물이 추가되었습니다!')
            setTitle('')
            setContent('')
        } catch (error) {
            console.error('게시물 추가 중 오류 발생:', error)
            alert('게시물 추가에 실패했습니다.')
        }
    }

    return (
        <div>
            <h1>게시물 추가하기</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label htmlFor="title">제목:</label>
                    <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div>
                    <label htmlFor="content">내용:</label>
                    <textarea id="content" value={content} onChange={(e) => setContent(e.target.value)} />
                </div>
                <button type="submit">추가하기</button>
            </form>
        </div>
    )
}

export default AddPostPage

3.5. Firestore 데이터 수정

// src/components/PostEdit.tsx
import React, { useState, useEffect } from 'react'
import { updateDocument } from '@/firebase/firestore'

interface PostEditProps {
    id: string
    initialTitle: string
    initialContent: string
    onCancel: () => void
    onUpdate: () => void
}

const PostEdit: React.FC<PostEditProps> = ({ id, initialTitle, initialContent, onCancel, onUpdate }) => {
    const [title, setTitle] = useState(initialTitle)
    const [content, setContent] = useState(initialContent)

    const handleUpdate = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault()
        await updateDocument('posts', id, { title, content })
        onUpdate() // 성공 시 부모 컴포넌트에 알리기 위해 사용
    }

    return (
        <div>
            <h2>Edit Post</h2>
            <form onSubmit={handleUpdate}>
                <div>
                    <label htmlFor="title">Title:</label>
                    <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div>
                    <label htmlFor="content">Content:</label>
                    <textarea id="content" value={content} onChange={(e) => setContent(e.target.value)} />
                </div>
                <button type="submit">Update</button>
                <button type="button" onClick={onCancel}>
                    Cancel
                </button>
            </form>
        </div>
    )
}

export default PostEdit

3.7. Firestore 데이터 조회

데이터를 조회하고 수정, 삭제 버튼을 추가하여 데이터를 수정하거나 삭제할 수 있습니다.

// src/components/PostsList.tsx
// src/components/PostsList.tsx
import React, { useState, useEffect } from 'react'
import { db } from '@/firebase/firebase'
import { collection, getDocs, query, orderBy } from 'firebase/firestore'
import { deleteDocument } from '@/firebase/firestore'
import PostEdit from './PostEdit'

interface Post {
    id: string
    title: string
    content: string
}

const PostsList: React.FC = () => {
    const [posts, setPosts] = useState<Post[]>([])
    const [editingPostId, setEditingPostId] = useState<string | null>(null)

    // Firestore에서 모든 글을 가져와 상태로 설정
    const fetchPosts = async () => {
        const querySnapshot = await getDocs(query(collection(db, 'posts'), orderBy('title')))
        const postsData = querySnapshot.docs.map((doc) => ({
            id: doc.id,
            title: doc.data().title,
            content: doc.data().content,
        }))
        setPosts(postsData)
    }

    useEffect(() => {
        fetchPosts()
    }, [])

    // 글 삭제
    const handleDelete = async (id: string) => {
        await deleteDocument('posts', id)
        fetchPosts() // 목록을 다시 불러옵니다.
    }

    // 글 편집 완료
    const handleUpdate = () => {
        setEditingPostId(null)
        fetchPosts() // 업데이트된 목록을 불러옵니다.
    }

    return (
        <div>
            <h2>Posts List</h2>
            {editingPostId ? (
                <PostEdit
                    id={editingPostId}
                    initialTitle={posts.find((post) => post.id === editingPostId)?.title ?? ''}
                    initialContent={posts.find((post) => post.id === editingPostId)?.content ?? ''}
                    onCancel={() => setEditingPostId(null)}
                    onUpdate={handleUpdate}
                />
            ) : (
                <>
                    {posts.length > 0 ? (
                        <ul>
                            {posts.map((post) => (
                                <li key={post.id}>
                                    <h3>{post.title}</h3>
                                    <p>{post.content}</p>
                                    <button onClick={() => setEditingPostId(post.id)}>Edit</button>
                                    <button onClick={() => handleDelete(post.id)}>Delete</button>
                                </li>
                            ))}
                        </ul>
                    ) : (
                        <p>No posts found.</p>
                    )}
                </>
            )}
        </div>
    )
}

export default PostsList

// src/pages/post/index.tsx
import PostsList from '@/components/PostsList'

const PostsPage: React.FC = () => {
    return (
        <div>
            <h1>Posts</h1>
            <PostsList />
        </div>
    )
}

export default PostsPage

Next.js 기초 및 설정

oodada — Sun, 5 May 2024 01:31:36 +0900

Next.js 기초 및 설정

1. Next.js 란?

Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링과 정적 파일 생성 등을 지원하여 개발자가 보다 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다. 이 프레임워크는 React의 기능을 확장하여 더욱 강력한 기능을 제공하며, SSR(Server-Side Rendering), CSR(Client-Side Rendering), Static Site Generation 등의 다양한 렌더링 방식을 지원합니다.

2. Next.js 특징

서버 사이드 렌더링(SSR): Next.js는 서버 사이드 렌더링을 지원하여 초기 로딩 시에 페이지를 서버에서 렌더링하여 사용자에게 보여줍니다. 이를 통해 SEO(Search Engine Optimization)를 개선하고, 초기 로딩 속도를 향상시킵니다.
정적 파일 생성(Static Site Generation): Next.js는 페이지의 정적 HTML 파일을 빌드할 수 있는 정적 사이트 생성 기능을 제공합니다. 이를 통해 서버 부하를 줄이고, 사용자 경험을 개선할 수 있습니다.
동적 라우팅(Dynamic Routing): Next.js는 동적 라우팅을 지원하여 페이지 경로를 동적으로 생성할 수 있습니다. 이를 통해 유연한 라우팅 구조를 구축할 수 있습니다.
API Routes: Next.js는 API Routes를 제공하여 서버리스(serverless) 함수를 생성할 수 있습니다. 이를 통해 서버리스 아키텍처를 쉽게 구현할 수 있습니다.
개발 환경 설정 간소화: Next.js는 기본적으로 웹팩(Webpack)과 바벨(Babel)을 내장하고 있어 개발 환경 설정을 간소화합니다. 또한, 기본적으로 코드 스플리팅(Code Splitting), CSS 모듈화(CSS Modules) 등의 기능을 지원하여 개발자가 보다 효율적으로 개발할 수 있도록 돕습니다.

** 코드 스플리팅(Code Splitting)이란? **

코드 스플리팅(Code Splitting)은 웹 애플리케이션의 자바스크립트 코드를 여러 개의 번들로 분리하는 기술을 말합니다. 이를 통해 사용자가 방문한 페이지에 필요한 코드만 로드하여 초기 로딩 속도를 향상시킬 수 있습니다.

** CSS 모듈화(CSS Modules)이란? **

CSS 모듈화(CSS Modules)는 CSS 파일을 모듈화하여 컴포넌트 단위로 스타일을 적용할 수 있는 기술을 말합니다. 이를 통해 컴포넌트 간의 스타일 충돌을 방지하고, 코드의 일관성을 유지할 수 있습니다.

3. Next.js(Typesrcipt) 시작하기

Next.js 프로젝트를 Typesrcipt 버전으로 시작해보겠습니다. Typesrcipt는 정적 타입을 지원하여 코드의 안정성을 높이고, 개발 생산성을 향상시킬 수 있는 언어입니다. Next.js와 Typesrcipt를 함께 사용하면, 더욱 안정적이고 효율적인 웹 애플리케이션을 구축할 수 있습니다.

next-blog-app 디렉토리에 터미널을 열고 다음과 같이 명령어를 실행합니다.

프로젝트 생성: npx create-next-app ./ 명령어를 사용하여 Next.js 프로젝트를 생성합니다.
프로젝트 실행: npm run dev 명령어를 사용하여 Next.js 프로젝트를 실행합니다.
페이지 생성: pages 디렉토리에 페이지를 생성하여 Next.js 애플리케이션을 구축합니다.

npx create-next-app ./
cd next-blog-app
npm run dev # or yarn dev

위와 같은 방법을 사용하여 Next.js 프로젝트를 생성 시 질문에 따라 Typesrcipt 를 사용할 것인지, ESLint 와 Tailwind 를 사용할 것인지 등을 선택할 수 있습니다.

Typesrcipt: Typesrcipt 를 사용할 것인지 선택합니다.
ESLint: ESLint 를 사용하여 코드 스타일을 검사할 것인지 선택합니다. (yes)
Tailwind CSS: Tailwind CSS 를 사용하여 스타일을 작성할 것인지 선택합니다. (yes)
src 디렉토리에 컴포넌트를 생성하여 사용할 것인지 선택합니다. (yes)
App Router 를 사용하여 라우팅을 구현할 것인지 선택합니다. (yes)
import alias 를 사용하여 모듈을 더 쉽게 불러올 것인지 선택합니다. (yes)

- src/ 디렉토리 사용 여부

src/ 디렉토리를 사용할지 여부는 프로젝트의 구조와 개발 환경에 따라 다를 수 있지만 사용하는 것을 권장합니다.

프로젝트 구조의 명확성: src/ 디렉토리를 사용하면 프로젝트의 주요 소스 코드가 담긴 디렉토리를 명확하게 구분할 수 있습니다. 이는 프로젝트의 구조를 더 쉽게 이해하고 유지보수하기 쉽게 만듭니다.
코드의 일관성: src/ 디렉토리를 사용하면 프로젝트의 모든 소스 코드를 한 곳에 모아둘 수 있습니다. 이를 통해 코드의 일관성을 유지하고 관리하기 쉽게 만들 수 있습니다.
프로젝트 확장성: src/ 디렉토리를 사용하면 향후 프로젝트를 확장할 때 더 유연하게 구조를 조정할 수 있습니다. 새로운 기능이나 모듈을 추가할 때 기존의 구조를 유지하면서 쉽게 통합할 수 있습니다.

4. Next.js 프로젝트 구조

next-blog-app/
├── src/
│   ├── pages/        # 라우팅과 관련된 페이지 컴포넌트
│   ├── components/   # 재사용 가능한 UI 컴포넌트
│   ├── styles/       # 스타일 관련 파일
│   └── utils/        # 유틸리티 함수
├── public/           # 정적 파일들이 저장되는 디렉토리
├── .next/            # Next.js 빌드 시 생성되는 파일들이 저장되는
├── node_modules/     # 프로젝트에 설치된 모듈들이 저장되는 디렉토리
├── package.json      # 프로젝트 정보와 의존성 모듈들이 정의된 파일
└── README.md         # 프로젝트의 설명이 작성된 파일

Next.js 프로젝트 구조화

next.js Routing

Next.js 페이지는 pages 디렉토리에 생성하여 사용할 수 있습니다. 페이지는 파일 이름에 따라 경로가 자동으로 생성되며, 동적 라우팅을 사용하여 동적 경로를 생성할 수 있습니다.

pages 디렉토리의 파일명은 소문자로 작성하며, 파일명에 따라 경로가 자동으로 생성됩니다.

next-blog-app/
├── src/
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── post/
│   │   │   └── index.tsx
│   │   │   └── [id].tsx
│   │   └── about.tsx
└── ...

pages 디렉토리에 페이지를 생성하고, 파일명에 따라 경로가 자동으로 생성됩니다. index.tsx 파일은 / 경로로 접근할 수 있으며, [id].tsx 파일은 /post/:id 경로로 접근할 수 있습니다.

- 페이지 라우팅

// src/pages/index.tsx

export default function Home() {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

// src/pages/post/index.tsx

const Post = () => {
    return (
        <div>
            <h1>Post</h1>
        </div>
    )
}

export default Post

// src/pages/_app.tsx
import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
}

export default MyApp

서버를 실행하고 http://localhost:3000 경로로 접속하면, Home 페이지가 렌더링됩니다. http://localhost:3000/post 경로로 접속하면, Post 페이지가 렌더링됩니다.

pages 디렉토리에 페이지를 생성하고, React 컴포넌트로 구성할 수 있습니다. 페이지는 export default 키워드를 사용하여 내보내며, pages 디렉토리의 파일명에 따라 경로가 자동으로 생성됩니다.

main 페이지가 렌더링되지 않을 경우, app 폴더의 page.tsx 을 삭제하면 해결됩니다.

Next.js 레이아웃 구성

Next.js 레이아웃은 components 디렉토리에 컴포넌트를 생성하여 사용할 수 있습니다. 레이아웃은 페이지의 공통 요소를 구성할 때 사용하며, outlet 컴포넌트를 사용하여 페이지 컨텐츠를 렌더링할 수 있습니다.

next-blog-app/
├── components/
│   └── layout/
│       └── Layout.tsx
│       └── Header.tsx
│       └── Footer.tsx

Next.js 레이아웃 적용

Next.js 레이아웃은 페이지에서 Layout 컴포넌트를 사용하여 적용할 수 있습니다. 페이지에서 Layout 컴포넌트를 사용하면, 페이지의 공통 요소를 효율적으로 구성할 수 있습니다.

// src/components/layout/Layout.tsx
import Link from 'next/link'
import React from 'react'

const Header = () => {
    return (
        <header>
            <h1>
                <Link href="/">logo</Link>
            </h1>

            <nav>
                <ul>
                    <li>
                        <Link href="/about">About</Link>
                    </li>
                    <li>
                        <Link href="/post">Post</Link>
                    </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header

// src/components/layout/Header.tsx
export default function Header() {
    return (
        <header>
            <h1>Header</h1>
        </header>
    )
}

// src/components/layout/Footer.tsx
export default function Footer() {
    return (
        <footer>
            <h1>Footer</h1>
        </footer>
    )
}

Layout 컴포넌트를 생성하여 레이아웃을 구성하고, Header 컴포넌트와 Footer 컴포넌트를 생성하여 레이아웃에 적용할 수 있습니다. 이렇게 구성한 레이아웃은 React Router를 사용하여 페이지 간의 이동 시 공통 요소를 효율적으로 구성할 수 있습니다.

// src/pages/_app.tsx
import { AppProps } from 'next/app' // AppProps 타입을 불러옵니다.
import Layout from '@/components/layout/Layout'

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

export default MyApp

_app.tsx 파일을 생성하여 레이아웃을 적용할 수 있습니다. _app.tsx 파일은 Next.js 애플리케이션의 전역 레이아웃을 설정할 때 사용되며, Layout 컴포넌트를 사용하여 페이지의 공통 요소를 구성할 수 있습니다.

// src/pages/_document.tsx
import Document, { Html, Head, Main, Nextsrcipt } from 'next/document'

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link rel="icon" href="/favicon.ico" />
                </Head>
                <body>
                    <Main />
                    <Nextsrcipt />
                </body>
            </Html>
        )
    }
}

export default MyDocument

_document.tsx 파일을 생성하여 HTML 문서의 레이아웃을 설정할 수 있습니다. _document.tsx 파일은 모든 페이지에 공통으로 적용되는 HTML 문서의 레이아웃을 설정할 때 사용되며, Head 컴포넌트를 사용하여 메타 태그나 스타일 시트를 적용할 수 있습니다.

Next.js 페이지 링크

Next.js 페이지 간의 이동은 Link 컴포넌트를 사용하여 구현할 수 있습니다. Link 컴포넌트는 페이지 간의 이동을 자동으로 처리하며, 페이지를 미리 로드하여 사용자 경험을 향상시킵니다.

// pages/home/index.tsx

import Link from 'next/link'

export default const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <Link href="/post">
                Go to Post
            </Link>
        </div>
    )
}

Next.js 정적 파일 제공

Next.js는 public 디렉토리를 사용하여 정적 파일을 제공할 수 있습니다. public 디렉토리에 저장된 파일은 / 경로로 접근할 수 있으며, 이미지, CSS 파일, JS 파일 등을 저장할 수 있습니다.

next-blog-app/
├── public/
│   ├── images/
│   │   └── logo.png
│   ├── styles/
│   │   └── main.css

public 디렉토리에 images 디렉토리와 styles 디렉토리를 생성하고, 이미지 파일과 CSS 파일을 저장할 수 있습니다. 이렇게 저장된 파일은 /images/logo.png, /styles/main.css 경로로 접근할 수 있습니다.

Typesrcipt Type 정의

Next.js 프로젝트에서 타입을 정의할 때는 types 디렉토리를 사용하여 타입을 정의할 수 있습니다. types 디렉토리에 타입을 정의하고, 필요한 파일에서 타입을 불러와 사용할 수 있습니다.

next-blog-app/
src/
├── types/
│   └── types.ts       # 타입 정의를 모아둔 디렉토리와 파일
|   └── utils.ts       # 유틸리티 함수를 모아둔 디렉토리와 파일
├── data/
│   └── posts.ts       # 데이터를 모아둔 디렉토리와 파일

Typesrcipt를 사용하여 타입을 정의

// src/types/types.ts
// Post 타입을 정의합니다.
export interface Post {
    id: number
    title: string
    content: string
    author: string
    date: string // 날짜는 ISO 형식 (예: "2024-01-01")으로 나타냅니다.
    tags?: string[] // 태그는 선택적으로 배열 형태로 나타냅니다.
    // undefined일 수 있기 때문에 옵셔널 체이닝 연산자(?.)를 사용합니다.
}

Post 타입을 사용하여 데이터를 정의

// src/data/posts.ts
import { Post } from '@/types/types'

// Post 타입을 사용하여 데이터를 정의합니다.
// posts 배열에 Post 타입의 데이터를 저장합니다.
export const posts: Post[] = [
    {
        id: 1,
        title: 'Javasrcipt 클로저 이해하기',
        content: `
        클로저는 자바스크립트에서 중요한 개념입니다. 클로저는 함수가 선언된 시점의 스코프(변수 범위)를 기억하여, 나중에 그 함수가 호출될 때 해당 스코프에 접근할 수 있게 합니다. 
        예를 들어, 내부 함수가 외부 함수의 변수를 기억하고 있는 경우를 생각해 봅시다. 클로저를 잘 이해하면, 고급 자바스크립트 프로그래밍 기법을 쉽게 다룰 수 있습니다. 이 글에서는 클로저의 기초 개념과, 클로저를 활용한 실전 예제를 알아보겠습니다.
        `,
        author: '홍길동',
        date: '2024-05-10',
        tags: ['Javasrcipt', '클로저', '프로그래밍'],
    },
    {
        id: 2,
        title: 'CSS Grid 레이아웃 가이드',
        content: `
        CSS Grid 레이아웃은 반응형 디자인을 구현하기 위한 강력한 도구입니다. 그리드 시스템을 사용하면 여러 개의 행과 열을 활용하여 복잡한 레이아웃을 손쉽게 구성할 수 있습니다. 
        이 가이드에서는 Grid의 기본 개념을 소개하고, 실제 프로젝트에서 그리드 레이아웃을 활용하는 방법을 단계별로 설명합니다. 그리드 아이템 간의 간격 조절부터 다양한 행과 열의 크기 조절에 이르기까지, 이 글을 통해 여러분은 더욱 유연한 웹 디자인을 만들 수 있을 것입니다.
        `,
        author: '이영희',
        date: '2024-05-08',
        tags: ['CSS', '웹 디자인', '그리드 레이아웃'],
    },
    {
        id: 3,
        title: 'Python 데이터 클래스 활용하기',
        content: `
        데이터 클래스는 파이썬에서 클래스 구조를 간단하게 정의할 수 있는 방법을 제공합니다. 일반 클래스를 사용할 때보다 코드가 훨씬 간결해지며, 기본적인 기능(예: __init__, __repr__)도 자동으로 제공됩니다.
        이 글에서는 데이터 클래스의 사용법과 주요 기능을 살펴보고, 이를 통해 파이썬 코드의 효율성을 높이는 방법을 알아보겠습니다. 또한, 데이터 클래스의 커스터마이징 방법과 기존 클래스와의 비교를 통해 다양한 활용 사례를 소개합니다.
        `,
        author: '김철수',
        date: '2024-05-05',
        tags: ['Python', '데이터 클래스', '프로그래밍'],
    },
]

Components 구성

next-blog-app/
├── src/
├── ├── components/
│   ├── ├── post/
│   │   │   ├── PostList.tsx
│   │   │   ├── PostItem.tsx
│   │   │   ├── PostDetail.tsx

PostItem 컴포넌트를 생성하여 Post 데이터를 렌더링

// components/post/PostItem.tsx
// Type-Only Import 문법을 사용하여 타입만 불러옵니다.
import type { Post } from '@/type/types'
import Link from 'next/link' // Link 컴포넌트를 임포트합니다.

// PostProps 타입을 정의합니다.
interface PostProps {
    post: Post
}

const PostItem = ({ post }: PostProps) => {
    return (
        <div>
            {/* 제목을 Link 컴포넌트로 감싸고 href에 동적 경로를 지정합니다. */}
            <h2>
                <Link href={`/post/${post.id}`}>{post.title}</Link>
            </h2>
            <p style={{ whiteSpace: 'nowrap', width: '80%', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                {post.content}
            </p>
            <p>{post.date}</p>
        </div>
    )
}

export default PostItem

// components/Post/PostList.tsx
import React from 'react'
import { posts } from '@/data/posts'
import PostItem from '@/components/post/PostItem'

const PostList = () => {
    return (
        <div>
            {posts.map((post) => (
                <PostItem key={post.id} post={post} />
            ))}
        </div>
    )
}

export default PostList

- 페이지에 데이터 렌더링

// pages/post/index.tsx
import PostList from '@/components/post/PostList'

const PostPage = () => {
    return (
        <div>
            <h1>Post</h1>
            <PostList />
        </div>
    )
}

export default PostPage

Post 컴포넌트를 사용하여 데이터를 렌더링할 수 있습니다. Post 컴포넌트에 Post 타입의 데이터를 전달하고, posts 배열을 사용하여 데이터를 렌더링합니다.

- 페이지에 동적 라우팅 적용

// components/post/PostDetail.tsx
import type { Post } from '@/type/types'
import Link from 'next/link' // Link 컴포넌트를 임포트합니다.

// PostProps 타입을 정의합니다.
interface PostProps {
    post: Post
}

const PostDetail = ({ post }: PostProps) => {
    return (
        <div>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
            <p>{post.author}</p>
            <p>{post.date}</p>
            {/* && 연산자를 사용하여 tags가 존재하는 경우에만 출력합니다. */}
            <ul>{post.tags && post.tags.map((tag, index) => <li key={index}>{tag}</li>)}</ul>
        </div>
    )
}

export default PostDetail

// pages/post/[id].tsx
import { GetStaticProps, GetStaticPaths } from 'next'
import { posts } from '@/data/posts' // 가정한 경로
import PostDetail from '@/components/post/PostDetail'

// PostType 타입을 정의합니다.
interface PostType {
    id: number
    title: string
    content: string
    author: string
    date: string
    tags?: string[]
}

// PostType 타입을 사용하여 PostProps 타입을 정의합니다.
interface PostProps {
    post: PostType
}

// getStaticPaths 함수를 사용하여 동적 경로를 생성합니다.
// async 함수를 사용하여 비동기 처리를 수행합니다.
export const getStaticPaths: GetStaticPaths = async () => {
    // posts 배열의 id 값을 사용하여 동적 경로를 생성합니다.
    const paths = posts.map((post) => ({
        params: { id: post.id.toString() },
        // id 값을 문자열로 변환하여 params에 저장합니다.
        // 예: { params: { id: '1' } }
    }))

    return {
        paths, // 생성된 동적 경로를 반환합니다.
        fallback: false, // fallback을 false로 설정하여 없는 페이지는 404 페이지를 반환합니다.
    }
}

// getStaticProps 함수를 사용하여 각 동적 경로에 필요한 데이터를 전달합니다.
// async 함수를 사용하여 비동기 처리를 수행합니다.
export const getStaticProps: GetStaticProps<PostProps, { id: string }> = async ({ params }) => {
    // params.id 값을 사용하여 해당 포스트를 찾습니다.
    const post = posts.find((post) => post.id === Number(params?.id))
    // params.id는 문자열이므로 Number로 변환합니다.
    // params가 undefined인 경우를 대비하여 옵셔널 체이닝 연산자(?.)를 사용해 에러를 방지합니다.

    if (!post) {
        return { notFound: true } // 포스트가 없는 경우 404 페이지를 반환
    }

    return {
        props: {
            post,
        },
    }
}

// Post 컴포넌트를 정의합니다.
const Post: React.FC<PostProps> = ({ post }) => {
    return (
        <div>
            <h1>Post</h1>
            <PostDetail post={post} />
        </div>
    )
}

export default Post

Tailwind CSS 적용

next-blog-app/
src/
├── styles/
│   ├── globals.css
│   ├── Home.module.css
│   ├── Post.module.css

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* styles/Home.module.css */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

/* styles/Post.module.css */
.post {
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.postTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.postContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80%;
    margin-top: 1rem;
    color: #666;
}

.postAuthor {
    margin-top: 0.5rem;
    color: #999;
}

.postDate {
    margin-top: 0.5rem;
    color: #999;
}

.postTags {
    margin-top: 0.5rem;
    color: #999;
}

컴포넌트에 스타일 적용

// components/Post/Post.tsx
import type { Post } from '@/type/types'
import Link from 'next/link'
import styles from '@/styles/Post.module.css'

// PostProps 타입을 정의합니다.
interface PostProps {
    post: Post
}

const PostItem = ({ post }: PostProps) => {
    return (
        <div className={styles.post}>
            {/* 제목을 Link 컴포넌트로 감싸고 href에 동적 경로를 지정합니다. */}
            <h2>
                <Link href={`/post/${post.id}`}>
                    <span className={styles.postTitle}>{post.title}</span>
                </Link>
            </h2>
            <p className={styles.postContent}>{post.content}</p>
            <p className={styles.postDate}>{post.date}</p>
        </div>
    )
}

export default PostItem

Post 컴포넌트에 Post.module.css 파일을 적용하여 스타일을 적용할 수 있습니다. Post.module.css 파일을 사용하여 컴포넌트에 스타일을 적용하고, styles 객체를 사용하여 클래스 이름을 지정할 수 있습니다.

Next.js 빌드 및 실행

next-blog-app/
├── .next/
└── ...

Next.js 프로젝트를 빌드하고 실행하는 방법

# Next.js 프로젝트 빌드
npm run build # or yarn build

# Next.js 프로젝트 실행
npm run start # or yarn start

npm run build 명령어를 사용하여 Next.js 프로젝트를 빌드하고, npm run start 명령어를 사용하여 Next.js 프로젝트를 실행할 수 있습니다. 빌드된 파일은 .next 디렉토리에 저장되며, 실행 시 .next 디렉토리의 파일을 사용하여 Next.js 애플리케이션을 실행합니다.

Next.js 프로젝트 배포

Next.js 프로젝트를 배포할 때는 Vercel, Netlify, AWS, Heroku 등의 클라우드 서비스를 사용하여 배포할 수 있습니다. 이 중에서 Vercel은 Next.js를 만든 회사이며, Next.js 프로젝트를 쉽게 배포할 수 있는 플랫폼을 제공합니다.

Vercel: Next.js를 만든 회사이며, Next.js 프로젝트를 쉽게 배포할 수 있는 플랫폼을 제공합니다.
Netlify: 정적 사이트를 무료로 호스팅할 수 있는 플랫폼을 제공합니다.
AWS: 클라우드 서비스를 제공하는 아마존 웹 서비스입니다.
Heroku: 클라우드 플랫폼을 제공하는 회사로, 다양한 언어와 프레임워크를 지원합니다.

Rudux로 전역 상태 관리하기

oodada — Sat, 4 May 2024 19:16:07 +0900

Redux로 전역 상태 관리하기

Redux 소개

Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.

- Redux 특징

Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.
State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.
Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.

- Redux 구조

Actions: 상태 변경을 위한 객체
Reducers: 상태를 변경하는 함수
Store: 애플리케이션의 상태를 저장하는 객체

store/
|-- actions/
|   |-- todoAction.js
|   |-- cartAction.js
|
|-- reducers/
|   |-- todoReducer.js
|   |-- cartReducer.js
|
|-- index.js

Redux를 사용하면 상태를 컴포넌트 간에 쉽게 공유할 수 있습니다. 또한, 상태 변경을 추적하기 쉽고, 상태 변경에 따른 로직을 쉽게 구현할 수 있습니다.

Redux 사용하기

Redux를 사용하려면 다음과 같은 단계를 따르면 됩니다.

Redux 설치: Redux를 설치합니다.
Actions 정의: 상태 변경을 위한 액션을 정의합니다.
Reducers 정의: 상태를 변경하는 리듀서를 정의합니다.
Store 생성: 애플리케이션의 상태를 저장하는 스토어를 생성합니다.
Store 연결: 스토어를 컴포넌트에 연결합니다.

1. Redux 설치

Redux를 설치하려면 다음 명령어를 실행합니다.

npm install @reduxjs/toolkit react-redux
yarn add @reduxjs/toolkit react-redux

2. Actions 정의

액션은 상태 변경을 위한 객체입니다. 액션은 다음과 같이 정의할 수 있습니다.

// store/action.js
const action = {
    type: 'ADD_TODO', // 액션 타입
    payload: 'Learn Redux', // 액션 데이터
}

3. Reducers 정의

리듀서는 상태를 변경하는 함수입니다. 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환합니다.

// store/reducer.js
const reducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            }
        default:
            return state
    }
}

4. Store 생성

스토어는 애플리케이션의 상태를 저장하는 객체입니다. 스토어를 생성하려면 다음과 같이 createStore 함수를 사용합니다.

// store/index.js
import { createStore } from 'redux'

const store = createStore(reducer)

여러 개의 리듀서를 사용할 때는 combineReducers 함수를 사용합니다.

// store/index.js
import { createStore, combineReducers } from 'redux'
import todoReducer from './reducers/todoReducer'
import cartReducer from './reducers/cartReducer'

const rootReducer = combineReducers({
    todo: todoReducer,
    cart: cartReducer,
})

const store = createStore(rootReducer)

5. Store 연결

스토어를 컴포넌트에 연결하려면 다음과 같이 Provider 컴포넌트를 사용합니다.

// App.js
import { Provider } from 'react-redux'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
)

[실습] 할 일 관리 앱에 Redux 적용하기

할 일 관리 앱에 Redux를 적용해보겠습니다.

// src/store/actions/todoAction.js
// 액션 타입 정의 (대문자로 작성)
export const ADD_TODO = 'ADD_TODO' // 할 일 추가
export const UPDATE_TODO = 'UPDATE_TODO'
export const DELETE_TODO = 'DELETE_TODO'

// 액션 생성자 함수
export const addTodo = (task) => ({
    type: ADD_TODO, // 액션 타입
    payload: { id: Date.now(), isDone: false, task, createdDate: new Date().getTime() }, // 액션 페이로드
})

export const updateTodo = (id) => ({
    type: UPDATE_TODO,
    payload: id,
})

export const deleteTodo = (id) => ({
    type: DELETE_TODO,
    payload: id,
})

// src/store/reducers/todoReducer.js
import { ADD_TODO, UPDATE_TODO, DELETE_TODO } from '../actions/todoAction'

// 초기 상태
const initialState = {
    todos: [
        {
            id: 1,
            isDone: false,
            task: '고양이 밥주기',
            createdDate: new Date().getTime(),
        },
        {
            id: 2,
            isDone: false,
            task: '감자 캐기',
            createdDate: new Date().getTime(),
        },
        {
            id: 3,
            isDone: false,
            task: '고양이 놀아주기',
            createdDate: new Date().getTime(),
        },
    ],
}

// 리듀서 함수
const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return {
                // 기존 상태를 변경하지 않고 새로운 상태를 반환합니다.
                // redux는 불변성을 유지하고 이전 상태를 변경하지 않아야 합니다.
                ...state, // 기존 상태를 복사합니다.
                todos: [action.payload, ...state.todos], // 새로운 할 일을 추가합니다.
            }
        case UPDATE_TODO:
            return {
                ...state,
                todos: state.todos.map((it) => (it.id === action.payload ? { ...it, isDone: !it.isDone } : it)),
            }
        case DELETE_TODO:
            return {
                ...state,
                todos: state.todos.filter((it) => it.id !== action.payload),
            }
        default:
            return state
    }
}

export default todoReducer

// src/store/index.js
import todoReducer from './reducers/todoReducer'
import { combineReducers, createStore } from 'redux'

const rootReducer = combineReducers({
    // todoReducer를 todo라는 이름으로 사용합니다.
    todo: todoReducer,
    // cart: cartReducer,
})

const store = createStore(rootReducer)

export default store

// src/App.js
// Redux를 사용하기 위해 불필요한 TodoProvider 컴포넌트 삭제
// Redux의 Provider 컴포넌트로 감싸줍니다.

import React from 'react'
import TodoHd from './TodoHd'
import TodoEditor from './TodoEditor'
import TodoList from './TodoList'
import { Provider } from 'react-redux' // Redux의 Provider 임포트
import store from './store' // Redux 스토어 임포트

function App() {
    return (
        <Provider store={store}>
            {' '}
            {/* Redux의 Provider로 감싸기 */}
            <div>
                <TodoHd />
                <TodoEditor />
                <TodoList />
            </div>
        </Provider>
    )
}

export default App

// src/components/TodoEditor.js
// Redux와의 연동을 위해 더 이상 useTodoContext 훅 사용하지 않음
// 액션 함수를 디스패치하기 위해 useDispatch 훅을 사용
// TodoEditor 컴포넌트에서는 더 이상 useState 훅을 사용하여 상태를 관리하지 않음
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addTodo } from '../../store/actions/todoAction'

export default function TodoEditor() {
    const [task, setTask] = useState('')
    const dispatch = useDispatch() // useDispatch 훅으로 디스패치 함수 가져오기

    const onSubmit = () => {
        if (!task) return
        dispatch(addTodo(task)) // 액션 함수 디스패치
        setTask('')
    }

    const onKeyDown = (e) => {
        if (e.key === 'Enter') {
            onSubmit()
        }
    }

    return (
        <div>
            <h3>새로운 Todo 작성하기 ✏</h3>
            <div>
                <input
                    type="text"
                    ref={(inputRef) => inputRef && inputRef.focus()}
                    placeholder="할 일을 추가로 입력해주세요."
                    onChange={(e) => setTask(e.target.value)}
                    onKeyDown={onKeyDown}
                    value={task}
                />
                <button onClick={onSubmit}>할 일 추가</button>
            </div>
        </div>
    )
}

// src/components/TodoList.js
// Redux와의 연동을 위해 useSelector 훅을 사용하여 상태를 가져오기
// 액션 함수를 디스패치하기 위해 useDispatch 훅을 사용
import React, { useState } from 'react'
import TodoItem from './TodoItem'
import { useSelector } from 'react-redux' // useDispatch 대신 useSelector 사용

function TodoList() {
    const [search, setSearch] = useState('')
    // useSelector에서 state로 전달되는 객체는 rootReducer에서 정의한 객체입니다.
    // rootReducer에서 todoReducer를 todo라는 이름으로 사용했기 때문에 state.todo로 todo 상태를 가져옵니다.
    // 따라서 state.todo.todo로 todo 상태를 가져올 수 있습니다.
    const todo = useSelector((state) => state.todo.todos) // todo 상태를 가져옵니다.

    const onChangeSearch = (e) => {
        setSearch(e.target.value)
    }

    const filteredTodo = () => {
        // todo 상태가 배열인지 확인하고 배열 메서드를 사용하기
        if (Array.isArray(todo)) {
            return todo.filter((item) => item.task.toLowerCase().includes(search.toLowerCase()))
        } else {
            return []
        }
    }

    return (
        <div>
            <h3>할 일 목록  </h3>
            <input type="text" placeholder="검색어를 입력하세요" onChange={onChangeSearch} value={search} />

            <div>
                {filteredTodo().map((item) => (
                    <TodoItem key={item.id} {...item} />
                ))}
            </div>
        </div>
    )
}

export default TodoList

// src/components/TodoItem.js
// Redux와의 연동을 위해 useDispatch 훅을 사용하여 액션 함수 디스패치
import React from 'react'
import { format } from 'date-fns'
import { useDispatch } from 'react-redux'
import { deleteTodo, updateTodo } from '../../store/actions/todoAction'

function TodoItem({ id, isDone, task, createdDate }) {
    const dispatch = useDispatch()

    return (
        <li key={id}>
            <input type="checkbox" checked={isDone} onChange={() => dispatch(updateTodo(id))} />
            <strong style={{ textDecoration: isDone ? 'line-through' : 'none' }}>{task}</strong>
            <span>{format(new Date(createdDate), 'yyyy.MM.dd')}</span>
            <button onClick={() => dispatch(deleteTodo(id))}>삭제</button>
        </li>
    )
}

export default TodoItem

Redux Toolkit으로 상태 관리하기

- Redux Toolkit이란

Redux를 사용할 때 더 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.
Redux Toolkit을 사용하면 Redux를 더 쉽게 사용할 수 있습니다.

- createSlice란

Redux Toolkit에서 제공하는 함수로, 액션 생성자 함수와 리듀서 함수를 한 번에 생성합니다.
이를 통해 코드의 반복을 줄이고, 코드를 더 간결하게 작성할 수 있습니다.

- Redux Toolkit 사용하기

npm install @reduxjs/toolkit
yarn add @reduxjs/toolkit

// src/store/slices/todoSlice.js
import { createSlice } from '@reduxjs/toolkit'

// 초기 상태
const initialState = {
    todos: [
        {
            id: 1,
            isDone: false,
            task: '고양이 밥주기',
            createdDate: new Date().getTime(),
        },
        {
            id: 2,
            isDone: false,
            task: '감자 캐기',
            createdDate: new Date().getTime(),
        },
        {
            id: 3,
            isDone: false,
            task: '고양이 놀아주기',
            createdDate: new Date().getTime(),
        },
    ],
}

// todoSlice 함수를 사용하여 `slice`를 생성합니다.
// slice는 액션 생성자 함수와 리듀서 함수를 한 번에 생성합니다.
export const todoSlice = createSlice({
    name: 'todo', // 슬라이스 이름
    initialState, // 초기 상태
    // 객체 형태로 리듀서 함수를 정의합니다.
    reducers: {
        addTodo: (state, action) => {
            // state.todos 배열에 새로운 할 일을 추가합니다.
            // action.payload에는 새로운 할 일이 들어있습니다.
            state.todos.push(action.payload) // 새로운 할 일을 추가합니다.
        },
        updateTodo: (state, action) => {
            // state.todos 배열에서 id가 일치하는 할 일을 찾습니다.
            // action.payload에는 할 일의 id가 들어있습니다.
            // 삼항 연산자를 사용하여 isDone 값을 반전시킵니다.
            state.todos = state.todos.map((todo) =>
                todo.id === action.payload ? { ...todo, isDone: !todo.isDone } : todo,
            )
        },
        deleteTodo: (state, action) => {
            state.todos = state.todos.filter((todo) => todo.id !== action.payload)
        },
    },
})

// 액션 생성자 함수 내보내기
export const { addTodo, updateTodo, deleteTodo } = todoSlice.actions

// todoSlice.reducer 내보내기
export default todoSlice.reducer

// src/App.js
// Redux를 사용하기 위해 불필요한 TodoProvider 컴포넌트 삭제
// Redux의 Provider 컴포넌트로 감싸줍니다.
import React, { useReducer, useState } from 'react'
import TodoHd from './components/TodoHd'
import TodoEditor from './components/TodoEditor'
import TodoList from './components/TodoList'
import { Provider } from 'react-redux'
import { configureStore } from '@reduxjs/toolkit'
import todoSlice from '../../store/slices/todoSlice'

// Redux store 생성
// configureStore 함수를 사용하여 Redux store를 생성합니다.
const store = configureStore({
    reducer: {
        todo: todoSlice,
    },
})

const Todo = () => {
    return (
        <Provider store={store}>
            <TodoHd />
            <TodoEditor />
            <TodoList />
        </Provider>
    )
}

export default Todo

// src/components/TodoEditor.js
// Redux와의 연동을 위해 더 이상 useTodoContext 훅 사용하지 않음
// 액션 함수를 디스패치하기 위해 useDispatch 훅을 사용
// TodoEditor 컴포넌트에서는 더 이상 useState 훅을 사용하여 상태를 관리하지 않음

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { addTodo } from '../../../store/slices/todoSlice' // todoSlice에서 액션 함수 가져오기

export default function TodoEditor() {
    const [task, setTask] = useState('')
    const dispatch = useDispatch() // useDispatch 훅으로 디스패치 함수 가져오기

    const onSubmit = () => {
        if (!task) return
        dispatch(
            addTodo({
                id: Date.now(),
                isDone: false,
                task,
                createdDate: new Date().getTime(),
            }),
        ) // 액션 함수 디스패치
        setTask('')
    }

    const onKeyDown = (e) => {
        if (e.key === 'Enter') {
            onSubmit()
        }
    }

    return (
        <div>
            <h3>새로운 Todo 작성하기 ✏</h3>
            <div>
                <input
                    type="text"
                    ref={(inputRef) => inputRef && inputRef.focus()}
                    placeholder="할 일을 추가로 입력해주세요."
                    onChange={(e) => setTask(e.target.value)}
                    onKeyDown={onKeyDown}
                    value={task}
                />
                <button onClick={onSubmit}>할 일 추가</button>
            </div>
        </div>
    )
}

// src/components/TodoList.js
// Redux와의 연동을 위해 useSelector 훅을 사용하여 상태를 가져오기
// 액션 함수를 디스패치하기 위해 useDispatch 훅을 사용
import React, { useState } from 'react'
import TodoItem from './TodoItem'
import { useSelector } from 'react-redux' // useDispatch 대신 useSelector 사용

function TodoList() {
    const [search, setSearch] = useState('')
    // useSelector에서 state로 전달되는 객체는 rootReducer에서 정의한 객체입니다.
    // rootReducer에서 todoReducer를 todo라는 이름으로 사용했기 때문에 state.todo로 todo 상태를 가져옵니다.
    // 따라서 state.todo.todos로 todo 상태를 가져올 수 있습니다.
    const todo = useSelector((state) => state.todo.todos) // todo 상태를 가져옵니다.

    const onChangeSearch = (e) => {
        setSearch(e.target.value)
    }

    const filteredTodo = () => {
        // todo 상태가 배열인지 확인하고 배열 메서드를 사용하기
        if (Array.isArray(todo)) {
            return todo.filter((item) => item.task.toLowerCase().includes(search.toLowerCase()))
        } else {
            return []
        }
    }

    return (
        <div>
            <h3>할 일 목록  </h3>
            <input type="text" placeholder="검색어를 입력하세요" onChange={onChangeSearch} value={search} />

            <div>
                {filteredTodo().map((item) => (
                    <TodoItem key={item.id} {...item} />
                ))}
            </div>
        </div>
    )
}

export default TodoList

// src/components/TodoItem.js
// Redux와의 연동을 위해 useDispatch 훅을 사용하여 액션 함수 디스패치
import React from 'react'
import { format } from 'date-fns'
import { useDispatch } from 'react-redux'
import { updateTodo, deleteTodo } from '../../../store/slices/todoSlice' // todoSlice에서 액션 함수 가져오기

function TodoItem({ id, isDone, task, createdDate }) {
    const dispatch = useDispatch()

    return (
        <li key={id}>
            <input type="checkbox" checked={isDone} onChange={() => dispatch(updateTodo(id))} />
            <strong style={{ textDecoration: isDone ? 'line-through' : 'none' }}>{task}</strong>
            <span>{format(new Date(createdDate), 'yyyy.MM.dd')}</span>
            <button onClick={() => dispatch(deleteTodo(id))}>삭제</button>
        </li>
    )
}

export default TodoItem

[React style] chakra-ui theme 설정

oodada — Sat, 13 Apr 2024 22:13:33 +0900

Chakra-ui로 스타일링하기

0. Tailwind CSS vs Chakra UI

- Tailwind CSS

Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다.

- Chakra UI

Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.

- Tailwind CSS와 Chakra UI를 함께 사용

Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리티 클래스를 사용하고, Chakra UI의 컴포넌트를 사용할 수 있습니다.

- 일반적인 회사에서 사용하기 쉬운 라이브러리 선택

일반적인 회사에서 사용하기에 적합한 라이브러리를 선택할 때 고려해야 할 요소는 다음과 같습니다:

프로젝트의 규모와 복잡성: 작고 간단한 프로젝트에는 Tailwind CSS와 같은 유틸리티 우선의 접근법이 더 효과적일 수 있습니다. 반면, 대규모 프로젝트나 애플리케이션에는 Chakra UI와 같은 컴포넌트 기반 라이브러리가 더 적합할 수 있습니다.
팀의 경험과 선호도: 팀 구성원들이 컴포넌트 기반의 개발에 익숙하다면 Chakra UI가 더 적합할 수 있으며, 유틸리티 클래스와 직접적인 스타일링에 익숙하다면 Tailwind CSS가 더 나을 수 있습니다.
맞춤 디자인 시스템의 필요성: 프로젝트가 매우 특정한 디자인 시스템이나 광범위한 맞춤 스타일링을 필요로 한다면, Tailwind CSS가 더 유연한 선택이 될 수 있습니다.

결론적으로, 각 회사의 프로젝트 요구사항, 팀의 스킬셋, 그리고 개발 속도와 유지 보수의 용이성에 따라 적합한 라이브러리를 선택해야 합니다.

1. Chakra UI 란?

Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리입니다. Chakra UI는 컴포넌트 기반의 스타일링을 제공하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.

Chakra UI의 주요 특징은 다음과 같습니다:

컴포넌트 기반 스타일링: Chakra UI는 다양한 컴포넌트를 제공하며, 이를 사용해 스타일을 적용할 수 있습니다.
테마 설정: Chakra UI는 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.
반응형 디자인: Chakra UI는 반응형 디자인을 지원하며, 다양한 디바이스에 대응할 수 있습니다.
접근성: Chakra UI는 접근성을 고려한 컴포넌트를 제공하며, 웹 접근성을 향상시킬 수 있습니다.

1. Chakra-ui 설치

Chakra-ui는 React용 디자인 시스템을 제공하는 라이브러리이다.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Chakra-ui 테마 설정

Chakra-ui의 테마를 설정할 수 있다.
https://v2.chakra-ui.com/docs/styled-system/customize-theme
foundations (디자인 시스템의 기반 요소들을 담당)
- 색상(Color): 프로젝트 전체에서 사용되는 색상 팔레트를 정의합니다.
- 타이포그래피(Typography): 글꼴, 글자 크기, 줄 높이 등의 기본 텍스트 스타일을 설정합니다.
- 공간(Spacing): 마진, 패딩 등의 공간을 일관되게 관리할 수 있는 공간 체계를 정의합니다.
- 경계선 스타일(Border Styles): 예를 들어 borders.js에서는 테두리의 두께, 스타일, 색상 등을 정의할 수 있습니다.
components (특정 UI 컴포넌트의 스타일을 정의하는데 사용)
- Button: button.js 파일에서는 버튼 컴포넌트의 모양, 크기, 색상 변형 등을 정의하고 조정할 수 있습니다.
- Input, Card, Modal 등 다른 컴포넌트들도 각각의 파일에서 커스텀 스타일을 지정할 수 있습니다.

- theme 디렉토리 생성

src 디렉토리에 theme 디렉토리를 생성한다.

|-- theme
    |-- index.js
    |-- styles.js
    |-- foundations
        |-- borders.js
    |-- components
        |-- button.js

- index.js

import { extendTheme } from '@chakra-ui/react';
import { styles } from './styles';
import { buttonStyles } from './components/button';
import { breakpoints } from './foundations/breakpoints';

export default extendTheme(
    styles, 
    buttonStyles, 
    { breakpoints }
);

- styles.js

// theme/chakraStyles.js
import { mode } from '@chakra-ui/theme-tools';
import { lighten } from 'polished';

export const variablesC = {
  $maxW: '1280px',
};

export const globalStyles = {
  colors: {
    primary: '#422afb',
    pirmaryLight: lighten(0.1, '#422AFB'),
    secondary: '#83D9FB',
    secondaryLight: lighten(0.1, '#83D9FB'),
    tertiary: '#22C55F',
    tertiaryLight: lighten(0.1, '#22C55F'),

    bgDefault: '#F5F7FF',

    lineDefault: '#E5E7EB',

    white: '#FFF',
    black: '#000',

    gray: {
      50: '#F9FAFB',
      100: '#F3F4F6',
      200: '#E5E7EB',
      300: '#D1D5DB',
      400: '#9CA3AF',
      500: '#6B7280',
      600: '#4B5563',
      700: '#374151',
      800: '#1F2937',
      900: '#111827',
    },
  },
  radii: {
    none: '0',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '20px',
    full: '9999px',
  },
  styles: {
    global: (props) => ({
      'body, html': {
        minW: '330px',
        fontFamily: '"DM Sans", "sans-serif"',
        letterSpacing: '-0.5px',
        fontSize: '16px',
        fontWeight: '400',
        lineHeight: '1.5',
        color: mode('gray.900', 'white')(props),
        bg: mode('bgDefault', 'navy.900')(props),
      },
      input: {
        color: 'gray.700',
      },
      'ul > li': {
        listStyle: 'none',
      },
      '.blind': {
        position: 'absolute',
        width: 0,
        height: 0,
        margin: -1,
        padding: 0,
        overflow: 'hidden',
        clip: 'rect(0, 0, 0, 0)',
        border: 0,
        lineHeight: 0,
      },
    }),
  },
};

ButtonStyles.js

// theme/components/button.js
import { mode } from '@chakra-ui/theme-tools';
export const buttonStyles = {
  components: {
    Button: {
      baseStyle: {
        borderRadius: '0',
        boxShadow: '45px 76px 113px 7px rgba(112, 144, 176, 0.08)',
        transition: '.25s all ease',
        boxSizing: 'border-box',
        _focus: {
          boxShadow: 'none',
        },
        _active: {
          boxShadow: 'none',
        },
      },
      variants: {
        icon: () => ({
          w: '45px',
          h: '45px',
          minW: 'none',
          bg: 'transparent',
          color: 'gray.500',
          borderRadius: '50%',
          _focus: {
            bg: 'gray.100',
          },
          _active: {
            bg: 'gray.100',
          },
          _hover: {
            bg: 'gray.100',
          },
        }),
      },
    },
  },
};

3. Chakra-ui App 적용

src 디렉토리에 App.jsx 파일에 ChakraProvider를 적용하고 위에서 만든 테마를 적용한다.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { BrowserRouter as Router } from 'react-router-dom';
import Routers from './Routers';
import theme from './theme/theme';

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Router>
        <Routers />
      </Router>
    </ChakraProvider>
  );
};

export default App;

4. Chakra-ui 컴포넌트 적용

src/views/home/Home.jsx 파일을 수정한다.

import React from 'react';
import { Box, Button, Heading } from '@chakra-ui/react';

const Home = () => {
  return (
    <Box>
      <Heading>Home</Heading>
      <Button>Button</Button>
    </Box>
  );
};

React로 웹사이트 만들기

oodada — Fri, 5 Apr 2024 21:52:09 +0900

React 스타일링 (styled-components, styled-reset, tailwind), 반응형 구현하기 - React 배우기

oodada — Fri, 5 Apr 2024 21:49:02 +0900

1. styled-reset

styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다.

styled-reset 사이트

- 설치

npm install styled-reset
yarn add styled-reset

- 사용법

// src/App.js
import React from 'react'
import Routers from './components/Routers'
import { Reset } from 'styled-reset'

const App = () => {
    return (
        <>
            <Reset /> {/* 초기화 */}
            <Routers />
        </>
    )
}

export default App

2. styled-components

styled-components는 CSS in JS 라이브러리로, JavaScript 파일 안에 CSS를 작성할 수 있습니다. 이를 통해 컴포넌트 스타일링을 더욱 편리하게 할 수 있습니다.

styled-components 사이트

- 설치

npm install styled-components
yarn add styled-components

- 사용법

styled 함수를 사용해 스타일을 정의하고, 컴포넌트를 생성합니다. 생성한 스타일드 컴포넌트는 일반 컴포넌트처럼 사용할 수 있습니다.

// src/components/layout/Footer.jsx
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Footer = () => {
    return (
        <FooterWrap>
            <CorpList>
                <li>
                    <Link to="/">이용약관</Link>
                </li>
                <li>
                    <Link to="/">개인정보처리방침</Link>
                </li>
                <li>
                    <Link to="/">고객센터</Link>
                </li>
            </CorpList>
            <div className="mt-10 text-gray-600">Copyright © company. All rights reserved.</div>
        </FooterWrap>
    )
}

const FooterWrap = styled.footer`
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: lightblue;
`

const CorpList = styled.ul`
    display: flex;
    li {
        &::before {
            content: '|';
            margin: 0 2px;
        }
        &:first-child::before {
            content: '';
        }
    }
    a {
        color: red;
        padding: 2rem;
    }
`

export default Footer

- GlobalStyle 적용

createGlobalStyle 함수를 사용해 전역 스타일을 적용할 수 있습니다.

google font 적용하여 noto sans kr 폰트를 사용합니다.
구글폰트 사이트에서 폰트를 찾아 링크를 가져옵니다.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet" />

//theme/globalStyles.js
import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
    * {
        box-sizing: border-box;
    }
    body {
        font-size: 16px;
        line-height: 1.5;
        font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;
        color: $txtDefult;
    }

    /* desktop */
    @media screen and (min-width: 1280px) {
        body {
            font-size: 16px;
        }
    }

    hr {
        display: none;
    }

    input[type='password'] {
        font-family: 'Malgun Gothic';
    }

    /* 웹폰트 사용시 점이 안보임 - 기본 폰트 사용  */
    /* skipnavigation */

    #u-skip {
        position: relative;
        z-index: 3000;

        a {
            position: absolute;
            top: -35px;
            left: 0;
            right: 0;
            display: inline-block;
            padding: 7px 10px 5px;
            background: #333;
            color: #fff;
            text-decoration: none;
            text-align: center;
            opacity: 0;

            &:focus {
                top: 0;
                opacity: 1;
                z-index: 1000;
            }
        }
    }
    .blind, caption, legend {
        overflow: hidden;
        position: absolute;
        width: 0;
        height: 0;
        line-height: 0;
        text-indent: -9999px;
    }
`

export default GlobalStyle

// src/App.js
import React from 'react'
import Routers from './Routers'
import { Reset } from 'styled-reset'
import GlobalStyle from './theme/globalStyles'

const App = () => {
    return (
        <>
            <Reset />
            <GlobalStyle />
            <Routers />
        </>
    )
}

export default App

- ThemeProvider 사용

ThemeProvider 컴포넌트를 사용해 테마를 전역으로 적용할 수 있습니다.

//theme/theme.js
const theme = {
    colors: {
        primary: '#0041da',
        secondary: '#ffcd00',
        red: '#ff0000',
        white: '#fff',
        black: '#000',
        txtDefault: '#222',
        gray: {
            100: '#f7fafc',
            200: '#edf2f7',
            300: '#e2e8f0',
            400: '#cbd5e0',
            500: '#a0aec0',
            600: '#718096',
            700: '#4a5568',
            800: '#2d3748',
            900: '#1a202c',
        },
    },
    breakpoints: {
        sm: '480px',
        md: '768px',
        lg: '992px',
        xl: '1280px',
        xxl: '1440px',
    },
}

export default theme

// src/App.js
import React from 'react'
import { ThemeProvider } from 'styled-components'
import Routers from './Routers'
import { Reset } from 'styled-reset'
import GlobalStyle from './theme/globalStyles'
import theme from './theme/theme'

const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <Reset />
            <GlobalStyle />
            <Routers />
        </ThemeProvider>
    )
}

export default App

// src/components/layout/Footer.jsx
import styled from 'styled-components'

(...)

const FooterWrap = styled.footer`
    (...)
    background-color: ${(props) => props.theme.colors.gray[100]};
`
const CorpList = styled.ul`
    (...)
    a {
        color: ${(props) => props.theme.colors.secondary};
        padding: 2rem;
    }
`

- 공용 Button 컴포넌트

사이트 전체에서 사용할 Button 컴포넌트를 만들어 사용할 수 있습니다.

// src/components/common/Button.jsx
import styled from 'styled-components'

const Button = styled.button`
    padding: 10px 20px;
    border: none;
    background-color: ${(props) => (props.primary ? props.theme.colors.black : props.theme.colors.white)};
    color: ${(props) => (props.primary ? props.theme.colors.white : props.theme.colors.black)};
    cursor: pointer;
    &:hover {
        opacity: 0.8;
    }
`

// Button 컴포넌트를 상속받아서 GhostButton 컴포넌트를 만들 수 있습니다.
export const GhostButton = styled(Button)`
    background-color: transparent;
    color: ${(props) => (props.black ? 'black' : 'white')};
`

export default Button

// src/components/layout/Header.jsx
import React from 'react'
import styled from 'styled-components'
import Button from '../common/Button'

const Header = () => {
    return (
        <HeaderWrap>
            (...)
            <div className="util">
                <Button primary>마이페이지</Button>
                <Button>장바구니</Button>
                <GhostButton>로그인</GhostButton>
            </div>
        </HeaderWrap>
    )
}

export default Header

3. tailwind CSS

tailwind CSS는 CSS 프레임워크로, 클래스 이름을 통해 스타일을 적용할 수 있습니다. 반응형 디자인을 쉽게 구현할 수 있고 빠르게 스타일을 적용할 수 있습니다. 카카오에서 사용하고 있습니다.

tailwind CSS 사이트 바로가기

- 설치

react tailwind 설치하기

npm install -D tailwindcss
npx tailwindcss init

yarn add -D tailwindcss
npx tailwindcss init

- 설정

tailwind.config.js 파일 생성

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,jsx,ts,jsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

/src/style/ 내에 style.css 파일 생성

/* ./src/style/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind에 오렌지색 지렁이가 나오면

vscode의 extension에서
- PostCSS Language Support 플러그인을 설치

style.css 파일을 App.js 파일에서 import

// src/App.js
import React from 'react'
import './style/style.css' // tailwind CSS 적용

const App: React.FC = () => {
    return <>(...)</>
}

export default App

tailwind.config.js 파일에서 테마 설정

tailwind 테마 설정 Doc

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,jsx,ts,jsx}'],
    plugins: [],
    theme: {
        screens: {
            sm: '480px',
            md: '768px',
            lg: '976px',
            xl: '1440px',
        },
        colors: {
            primary: 'red',
            secondary: 'skyblue',
            gray: {
                100: '#f7fafc',
                200: '#edf2f7',
                300: '#e2e8f0',
                400: '#cbd5e0',
                500: '#a0aec0',
                600: '#718096',
                700: '#4a5568',
                800: '#2d3748',
                900: '#1a202c',
            },
        },
        extend: {},
    },
}

- 사용

'Header.jsx' 파일에서 tailwind CSS 적용

// src/components/layout/Header.jsx
import React from 'react'

const Header = () => {
    return (
        <header className="flex items-center justify-between p-4 bg-gray-200">
            <h1 className="text-3xl font-bold underline ">Header</h1>
            <nav id="gnb">
                <ul className="flex gap-4">
                    <li className="text-primary">
                        <Link to="/">Home</Link>
                    </li>
                    <li className="text-primary">
                        <Link to="/about">About</Link>
                    </li>
                    <li className="text-primary">
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <div className="util">
                <Button primary>마이페이지</Button>
                <Button>장바구니</Button>
                {/* <GhostButton>로그인</GhostButton> */}
            </div>
        </header>
    )
}

export default Header

4. twin.macro

twin.macro는 tailwind CSS를 styled-components와 함께 사용할 수 있도록 도와주는 라이브러리입니다.

twin.macro 사이트 바로가기

- 설치

// styled-components
npm install twin.macro styled-components
npm install -D @types/styled-components
npm install -D tailwind-styled-components

// babel-plugin
npm install -D babel-plugin-macross

yarn add twin.macro styled-components
yarn add -D @types/styled-components
yarn add -D tailwind-styled-components
yarn add -D babel-plugin-macross

- 설정 (안해도 될 수 있으니 우선 적용해보고 안되면 설정)

babelMacro를 사용하기 위해 babel-plugin-macros를 설정해야 합니다.

// babel-plugin-macros.config.js
module.exports = {
    twin: {
        preset: 'styled-components',
    },
}

package.json 파일에 babel-plugin-macros 설정을 추가합니다.

// package.json
"babelMacros": {
    "twin": {
        "preset": "styled-components"
    }
}

- 사용

tw 함수를 사용해 tailwind CSS 클래스를 적용할 수 있습니다.

// src/components/layout/Header.jsx
import { Link } from 'react-router-dom'
import tw from 'twin.macro'
import styled from 'styled-components'

const Header = () => {
    return (
        <HeaderWrap>
            <Logo>Header</Logo>
            <nav id="gnb">
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <div className="util">
                <Button primary>마이페이지</Button>
                <Button>장바구니</Button>
                {/* <GhostButton>로그인</GhostButton> */}
            </div>
        </HeaderWrap>
    )
}

const HeaderWrap = tw.header`
    flex items-center justify-between p-4 bg-gray-200
`
const Logo = tw.h1`
    text-3xl font-bold underline
`

export default Header

styled 함수를 사용해 Gnb 스타일을 정의할 수 있습니다.

// src/components/layout/Header.jsx
import { Link } from 'react-router-dom'
import tw from 'twin.macro'
import styled from 'styled-components'

const Header = () => {
    return (
        <HeaderWrap>
            <Logo>Header</Logo>
            <Gnb id="gnb">
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </Gnb>

            <div className="util">
                <Button primary>마이페이지</Button>
                <Button>장바구니</Button>
                {/* <GhostButton>로그인</GhostButton> */}
            </div>
        </HeaderWrap>
    )
}

(...)

const Gnb = styled.nav`
    ul {
        ${tw`flex gap-4`}
        li {
            ${tw`text-primary`}
        }
    }
`

export default Header

- 반응형 디자인

- tailwind CSS 반응형 클래스

tailwind CSS는 반응형 디자인을 쉽게 구현할 수 있도록 클래스를 제공합니다.

sm: 640px 이상
md: 768px 이상
lg: 1024px 이상
xl: 1280px 이상
2xl: 1536px 이상

// src/components/layout/Header.jsx
import tw from 'twin.macro'

const HeaderWrap = tw.header`
    flex flex-col items-center justify-between p-4 bg-gray-200
    md:flex-row
`

- styled-components 반응형 스타일

styled 함수를 사용해 반응형 스타일을 적용할 수 있습니다.

// src/components/layout/Header.jsx
import styled from 'styled-components'

const HeaderWrap = styled.header`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: lightblue;

    @media screen and (min-width: 768px) {
        flex-direction: row;
    }
`

- twin.macro 반응형 스타일

tw 함수를 사용해 반응형 스타일을 적용할 수 있습니다.

// src/components/layout/Header.jsx
import tw from 'twin.macro'

const Gnb = styled.nav`
    ul {
        ${tw`flex flex-col gap-4 md:flex-row md:gap-8`}
        li {
            ${tw`text-primary`}
        }
    }
`

쉽게 배우는 리액트(React.js) 앱 제작 실무 - 기본

oodada — Fri, 29 Mar 2024 12:55:43 +0900

리액트란 무엇인가?	https://odada.me/250
리액트 패키지 설치, 필수 라이브러리	https://odada.me/251
JSX란 무엇인가?	https://odada.me/252
[잠깐] React ES6 기본 문법	https://odada.me/322
리액트 컴포넌트(Component)	https://odada.me/254
리액트 속성(Props, Properties)	https://odada.me/271
리액트 이벤트(Event)	https://odada.me/273
리액트 상태(State)	https://odada.me/274
[실습] React Router Dom을 이용한 레이아웃 구성하기	https://odada.me/256
[실습] styled-component, Chakra-ui, emotion, tailwind 사용하기	https://odada.me/316
리액트 클래스(Class)	https://odada.me/247
리액트 생명주기(LifeCycle), useEffect	https://odada.me/313
[실습] React 할 일 관리 앱 만들기	https://odada.me/311
Context API	https://odada.me/319
useReducer	https://odada.me/317
react-redux
리덕스 툴킷
Next.js
[실습] 감정 일기장 앱 만들기
[배포] 감정 일기장 앱 배포

리액트 ES6 문법 정리 - 기본편

oodada — Fri, 29 Mar 2024 12:52:43 +0900

리액트 ES6 문법 정리

리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다.

1. 변수

변수는 let, const 키워드를 사용하여 선언한다.

변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다.

let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다.
const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다.
var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로 가급적 사용을 지양한다.

// 변경 가능한
let a = 1
a = 2
console.log(a) // 2

// 변경 불가능한
const b = 1
b = 2 // TypeError: Assignment to constant variable.

리액트 애플리케이션에서 콘솔에 로그가 두 번 출력되는 현상

리액트 애플리케이션에서 콘솔에 로그가 두 번 출력되는 현상은 `React.StrictMode` 컴포넌트 때문에 발생합니다. `React.StrictMode`는 개발 모드에서만 활성화되며, 애플리케이션 내부의 잠재적 문제를 식별하기 위해 부수 효과를 포함한 일부 생명주기 메서드를 두 번씩 호출합니다. 이는 앱의 로그인, 상태 업데이트, 재렌더링 등을 검사하여 안전하지 않은 생명주기 사용, 레거시 API의 사용, 예측할 수 없는 부수 효과 등을 찾아내기 위함입니다.

코드에서 ReactDOM.createRoot(...).render(...)에 전달된 <React.StrictMode>가 이러한 행동의 원인입니다. 이 모드는 실제 프로덕션 빌드에서는 아무런 영향을 주지 않으며, 개발 중에만 추가 검사와 경고를 제공합니다. 따라서 콘솔 로그가 두 번 호출되는 것은 이중 렌더링을 통해 문제를 조기에 발견하고자 하는 의도적인 동작입니다.

2. 데이터 타입

리액트에서 데이터를 다루기 위해서는 자바스크립트의 기본 데이터 타입에 대한 이해가 필수적입니다. 이번 장에서는 자바스크립트의 주요 데이터 타입들을 살펴보고, 각 타입이 리액트 개발에서 어떻게 활용되는지 알아보겠습니다.

- 문자열(String)

문자열은 텍스트 데이터를 표현하는 데 사용됩니다. 리액트에서는 컴포넌트의 속성값이나 내용을 표현할 때 자주 사용됩니다. 문자열은 작은 따옴표('')나 큰 따옴표("")로 감싸서 표현합니다.

function Data() {
    const name = '리액트!'
    return <h1>안녕 난 {name}야!</h1>
}

- 숫자(Number)

숫자 타입은 정수나 소수 등의 숫자 데이터를 다룰 때 사용됩니다. 컴포넌트의 크기, 간격, 배열의 인덱스 등 다양한 곳에서 활용됩니다.

function Data() {
    const age = 10
    return <p>{age}년 전에 출시됐어.</p>
}

- 불리언(Boolean)

불리언은 참(true)과 거짓(false)의 두 가지 값만을 가지며, 조건문이나 토글 상태 등을 다룰 때 사용됩니다.

function Data() {
    const visible = true
    return {visible ? <p>보인다!</p> : <p>안보인다!</p>}
}

- 객체(Object)

객체는 키와 값의 쌍으로 이루어진 데이터 구조로, 여러 데이터를 하나의 단위로 그룹화하여 관리할 수 있습니다. 컴포넌트의 상태(state)나 속성(props)을 다룰 때 주로 사용됩니다.

function Data() {
    const user = {
        name: '리액트',
        age: 10,
    }

    return (
        <p>
            {user.name}의 나이는 {user.age}살이야.
        </p>
    )
}

- 배열(Array)

배열은 여러 개의 데이터를 순서대로 나열한 구조입니다. 리스트나 메뉴 항목 등, 순서가 있는 데이터를 표현할 때 유용합니다.
제로 기반 인덱스를 사용하며, 배열의 첫 번째 요소는 0부터 시작합니다.

function Data() {
    const array = [1, 2, 3]

    return (
        <ul>
            <li>{array[0]}</li>
            <li>{array[1]}</li>
            <li>{array[2]}</li>
        </ul>

        // map 함수를 사용하여 반복문을 대신할 수 있다.
        <ul>
            {array.map((item) => (
                <li>{item}</li>
            ))}
        </ul>
    )
}

- 배열 & 객체

배열과 객체는 서로 중첩하여 사용할 수 있습니다.

function Data() {
    const users = [
        {
            id: 1,
            name: '봄',
            age: 2,
        },
        {
            id: 2,
            name: '여름',
            age: 3,
        },
        {
            id: 3,
            name: '가을',
            age: 1,
        },
        {
            id: 4,
            name: '겨울',
            age: 5,
        },
    ]

    return (
        <ul>
            <li>
                {users[0].name}이는 {users[0].age}살
            </li>
            <li>
                {users[1].name}이는 {users[1].age}살
            </li>
            <li>
                {users[2].name}이는 {users[2].age}살
            </li>
        </ul>

        // map 함수를 사용하여 반복문을 대신할 수 있다.
        <ul>
            {users.map((user) => (
                <li key={user.id}>
                    {user.name}이는 {user.age}살
                </li>
            ))}
        </ul>
    )
}

- 함수(Function)

함수는 일련의 처리를 한 덩어리로 묶어 놓은 코드의 집합입니다. 재사용성이 높고, 유지보수가 쉽다는 장점이 있습니다. 리액트에서는 컴포넌트의 생명주기 함수나 이벤트 처리 함수 등을 함수로 정의하여 사용합니다.

// 함수 선언식 (기명 함수)
function Func1() {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

// 함수 표현식 (익명 함수)
const Func2 = function () {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

// 화살표 함수
const Func3 = () => {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

function Data() {
    return (
        <div>
            <Func1 />
            <Func2 />
            <Func3 />
        </div>
    )
}

- undefined & null

undefined는 선언된 변수에 값이 할당되지 않았을 때의 기본값입니다. 반면, null은 개발자가 명시적으로 "값이 없음"을 나타내고자 할 때 사용합니다. 이 두 타입은 데이터가 '없음'을 나타내지만, 사용 의도에 따라 구분해서 사용합니다.

null : 값이 없음을 의미한다.
undefined : 값이 할당되지 않은 상태를 의미한다.

function Data() {
    const info = {
        birth: '2021-01-01',
        phone: null,
    }

    console.log(info.birth) // 2021-01-01
    console.log(info.phone) // null
    console.log(info.address) // undefined

    return (
        {/* 값이 있으면 출력, 없으면 '주소 정보 없음' 출력 */}
        <ul>
            <li>{info.birth || '주소 정보 없음'}</li>
            <li>{info.phone || '주소 정보 없음'}</li>
            <li>{info.address || '주소 정보 없음'}</li>
        </ul>
    )
}

- 실습 문제 1. 데이터 타입과 조건문 활용하기

자바스크립트의 기본 데이터 타입과 조건문을 사용하여 사용자의 로그인 상태를 표시하는 리액트 컴포넌트를 만드세요.

1. `isLogged`이라는 이름의 `const` 변수를 선언하고, 불리언(`true` 또는 `false`) 값을 할당하세요.
2. `isLogged` 값에 따라 "로그인됨" 또는 "로그인되지 않음"을 표시하는 간단한 리액트 컴포넌트를 작성하세요.
3. `isLogged`이 `true`일 경우 `<p>로그인</p>`을, `false`일 경우 `<p>로그아웃</p>`을 반환하도록 조건문을 사용하세요.

3. 연산자

리액트에서 연산자는 데이터를 처리하거나, 조건부 렌더링을 구현할 때 매우 유용하게 사용됩니다. 여기에는 산술 연산자뿐만 아니라, 비교 연산자, 논리 연산자, 삼항 연산자 등이 포함됩니다. 이제 리액트 컴포넌트에서 연산자를 활용하는 몇 가지 예시를 살펴보겠습니다.

- 산술 연산자

산술 연산자는 숫자 데이터를 다룰 때 주로 사용됩니다. 예를 들어, 숫자를 증가시키거나, 감소시키는 카운터 컴포넌트를 구현할 때 활용할 수 있습니다.

+ : 덧셈 연산자
- : 뺄셈 연산자
* : 곱셈 연산자
/ : 나눗셈 연산자
% : 나머지 연산자

function Operator() {
    let a = 1
    let b = 2

    return (
        <div>
            <h2>산술 연산자</h2>
            <p>
                {a} + {b} = {a + b} {/* 1 + 2 = 3 */}
            </p>
            <p>
                {a} - {b} = {a - b} {/* 1 - 2 = -1 */}
            </p>
            <p>
                {a} * {b} = {a * b} {/* 1 * 2 = 2 */}
            </p>
            <p>
                {a} / {b} = {a / b} {/* 1 / 2 = 0.5 */}
            </p>
            <p>
                {a} % {b} = {a % b} {/* 1 % 2 = 1 */}
            </p>
        </div>
    )
}

export default Operator

- 증감 연산자

증감 연산자는 변수의 값을 1씩 증가시키거나 감소시킬 때 사용됩니다. 전위 연산자와 후위 연산자로 나뉘며, 변수의 값을 증가시킨 후에 반환할지, 반환한 후에 증가시킬지를 결정합니다.

++ : 변수의 값을 1 증가시킨다.
-- : 변수의 값을 1 감소시킨다.

function Operator() {
    let c = 1
    let d = 1

    return (
        <div>
            <h2>증감 연산자</h2>
            <p>
                c = {c} {/* 1 */}
            </p>
            <p>
                ++c = {++c} {/* 2 선연산 후출력 */}
            </p>
            <p>
                c = {c} {/* 2 */}
            </p>
            <p>
                d = {d} {/* 1 */}
            </p>
            <p>
                d++ = {d++} {/* 1 선출력 후연산 */}
            </p>
            <p>
                d = {d} {/* 2 */}
            </p>
        </div>
    )
}

export default Operator

- 비교 연산자

비교 연산자는 두 값을 비교하여 참(true) 또는 거짓(false)을 반환합니다. 주로 조건문에서 사용되며, 두 값이 같은지, 다른지, 큰지, 작은지 등을 비교할 때 활용됩니다.

=== : 값과 자료형이 같은지 비교한다.
!== : 값과 자료형이 다른지 비교한다.
> : 왼쪽 값이 오른쪽 값보다 큰지 비교한다.
< : 왼쪽 값이 오른쪽 값보다 작은지 비교한다.
>= : 왼쪽 값이 오른쪽 값보다 크거나 같은지 비교한다.
<= : 왼쪽 값이 오른쪽 값보다 작거나 같은지 비교한다.

function Operator() {
    let e = 1
    let f = 2

    return (
        <div>
            <h2>비교 연산자</h2>
            <p>
                {`${e} === ${f} : ${e === f}`} {/* 1 === 2 : false */}
            </p>
            <p>
                {`${e} !== ${f} : ${e !== f}`} {/* 1 !== 2 : true */}
            </p>
            <p>
                {`${e} > ${f} : ${e > f}`} {/* 1 > 2 : false */}
            </p>
            <p>
                {`${e} < ${f} : ${e < f}`} {/* 1 < 2 : true */}
            </p>
            <p>
                {`${e} >= ${f} : ${e >= f}`} {/* 1 >= 2 : false */}
            </p>
            <p>
                {`${e} <= ${f} : ${e <= f}`} {/* 1 <= 2 : true */}
            </p>
        </div>
    )
}

export default Operator

- 논리 연산자

논리 연산자는 논리적인 연산을 수행할 때 사용됩니다. 주로 조건문에서 사용되며, 두 값이 모두 참일 때 참을 반환하는 AND 연산자(&&), 두 값 중 하나라도 참일 때 참을 반환하는 OR 연산자(||), 값을 부정하는 NOT 연산자(!) 등이 있습니다.

&& : 논리 AND 연산자
|| : 논리 OR 연산자
! : 논리 NOT 연산자

function Operator() {
    return (
        <div>
            <h2>논리 연산자</h2>
            <p>{`true && true = ${true && true}`}</p> {/* 두 조건이 모두 참일 경우 true 반환 */}
            <p>{`true && false = ${true && false}`}</p>{' '}
            {/* 두 조건 중 하나가 거짓이므로 첫 번째 거짓인 값인 false 반환 */}
            <p>{`true || false = ${true || false}`}</p> {/* 두 조건 중 하나라도 참일 경우 true 반환 */}
            <p>{`false || false = ${false || false}`}</p> {/* 두 조건이 모두 거짓일 경우 false 반환 */}
            <p>{`!true = ${!true}`}</p> {/* 부정연산자 : 조건이 참일 경우 false 반환 */}
            <p>{`!false = ${!false}`}</p> {/* 부정연산자 : 조건이 거짓일 경우 true 반환 */}
        </div>
    )
}

export default Operator

- 조건 연산자

조건 연산자는 조건문을 간단하게 표현할 때 사용됩니다. 조건식이 참일 때와 거짓일 때의 값을 각각 반환합니다.

조건 ? 참 : 거짓

function Operator() {
    return (
        <div>
            <h2>조건 연산자</h2>
            <p>{`true ? '참' : '거짓' = ${true ? '참' : '거짓'}`}</p> {/* 조건이 참일 경우 '참' 반환 */}
            <p>{`false ? '참' : '거짓' = ${false ? '참' : '거짓'}`}</p> {/* 조건이 거짓일 경우 '거짓' 반환 */}
        </div>
    )
}

export default Operator

- 전개 연산자

전개 연산자는 배열이나 객체를 복사하거나 합칠 때 사용됩니다. 배열의 경우 배열 내부의 요소를 추출하거나, 객체의 경우 객체 내부의 속성을 추출할 때 사용합니다.

... : 전개 연산자

function Operator() {
    const array1 = [1, 2, 3]
    const array2 = [4, 5, 6]

    const array3 = [...array1, ...array2]

    const object1 = {
        a: 1,
        b: 2,
    }
    const object2 = {
        c: 3,
        d: 4,
    }

    const object3 = { ...object1, ...object2 }

    return (
        <div>
            <h2>전개 연산자</h2>
            <p>{`[1, 2, 3] + [4, 5, 6] = ${array3}`}</p>
            <p>{`{a: 1, b: 2} + {c: 3, d: 4} = ${JSON.stringify(object3)}`}</p>{' '}
            {/* JSON.stringify() : 객체를 문자열로 변환 */}
        </div>
    )
}

export default Operator

4. 함수

리액트에서 함수는 컴포넌트의 생명주기 함수, 이벤트 처리 함수, 상태 업데이트 함수 등 다양한 용도로 사용됩니다. 이번 장에서는 리액트에서 사용되는 주요 함수들을 알아보고, 각 함수의 사용법과 활용 방법을 살펴보겠습니다.

- 화살표 함수

화살표 함수는 ES6에서 도입된 새로운 함수 선언 방식으로, 함수를 간결하게 정의할 수 있습니다. 함수를 선언할 때 function 키워드 대신 => 기호를 사용하여 함수를 정의합니다.

// 함수 선언식
function Func1() {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

// 화살표 함수
const Func2 = () => {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 />
            <Func2 />
        </div>
    )
}

- 화살표 함수 & 반환값

화살표 함수는 return 키워드를 생략할 수 있습니다. 함수 내부의 코드가 한 줄로 표현 가능할 때는 중괄호를 생략하고, 바로 반환할 수 있습니다.

const Func1 = () => (
    <div>
        <h1>안녕 난 리액트야!</h1>
        <p>리액트는 재밌어.</p>
    </div>
)

const Func2 = () => (
    <div>
        <h1>안녕 난 리액트야!</h1>
        <p>리액트는 재밌어.</p>
    </div>
)

function Func() {
    return (
        <div>
            <Func1 />
            <Func2 />
        </div>
    )
}

- 화살표 함수 & 매개변수

화살표 함수는 매개변수를 받아서 처리할 수 있습니다. 매개변수가 하나일 때는 괄호를 생략할 수 있으며, 매개변수가 없을 때는 괄호를 생략할 수 없습니다.

const Func1 = (name, desc) => {
    return (
        <div>
            <h1>안녕 난 {name}야!</h1>
            <p>
                {name}는 {desc}.
            </p>
        </div>
    )
}

const Func2 = () => {
    return (
        <div>
            <h1>안녕 난 리액트야!</h1>
            <p>리액트는 재밌어.</p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 name="리액트" desc="재밌어" />
            <Func2 />
        </div>
    )
}

- 비구조화 할당 (Destructuring Assignment)

비구조화 할당은 ES6(ECMAScript 2015)에서 도입된 기능으로, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 해줍니다. 함수의 매개변수로 객체를 전달할 때, 비구조화 할당을 사용하여 속성을 추출할 수 있습니다.

const Func1 = (props) => {
    // props = { name: '리액트', desc: '재밌어' }

    return (
        <div>
            <h1>안녕 난 {props.name}야!</h1>
            <p>
                {props.name}는 {props.desc}.
            </p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 name="리액트" desc="재밌어" />
        </div>
    )
}

비구조화 할당을 사용하여 속성을 추출할 수 있습니다.

const Func1 = (props) => {
    const { name, desc } = props

    return (
        <div>
            <h1>안녕 난 {name}야!</h1>
            <p>
                {name}는 {desc}.
            </p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 name="리액트" desc="재밌어" />
        </div>
    )
}

비구조화 할당을 사용하여 속성을 추출할 수 있습니다.

const Func1 = ({ name, desc }) => {
    return (
        <div>
            <h1>안녕 난 {name}야!</h1>
            <p>
                {name}는 {desc}.
            </p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 name="리액트" desc="재밌어" />
        </div>
    )
}

- 함수의 전개 연산자

함수의 전개 연산자를 사용하여 객체나 배열을 전달할 수 있습니다. 함수의 매개변수로 객체나 배열을 전달할 때 전개 연산자를 사용하여 속성을 추출할 수 있습니다.

const Func7 = ({ name, desc }) => {
    return (
        <div>
            <h1>안녕 난 {name}야!</h1>
            <p>
                {name}는 {desc}.
            </p>
        </div>
    )
}

function Func() {
    const data = {
        name: '리액트',
        desc: '재밌어',
    }

    return (
        <div>
            <Func7 {...data} />
        </div>
    )
}

기본값 (Default Value)

매개변수에 기본값을 설정할 수 있습니다. 매개변수가 전달되지 않았을 때 기본값으로 설정된 값이 사용됩니다.

const Func1 = ({ name = '리액트', desc = '재밌어' }) => {
    return (
        <div>
            <h1>안녕 난 {name}야!</h1>
            <p>
                {name}는 {desc}.
            </p>
        </div>
    )
}

function Func() {
    return (
        <div>
            <Func1 />
        </div>
    )
}

정답을 확인해보세요.

정답 1.

import React from 'react'

// 사용자의 로그인 상태를 표시하는 리액트 컴포넌트
function UserStatus() {
    const isLogged = true // 로그인 상태를 나타내는 변수 (true 또는 false)

    return (
        <div>
            {/* isLoggedIn 값에 따라 조건부 렌더링 */}
            {isLogged ? <p>로그인</p> : <p>로그아웃</p>}
        </div>
    )
}

export default UserStatus

리액트(React.js) 커리큘럼

oodada — Sun, 24 Mar 2024 09:25:36 +0900

React 목차

과정	주소
react 둘러보기	https://ko.react.dev/
react 핵심 개념	https://odada.me/353
리액트용 ES6 문법	https://odada.me/322
node.js, npm 개념 잡기	https://odada.me/246

리액트란 무엇인가?	https://odada.me/250
리액트 컴포넌트(Component)	https://odada.me/254
리액트 속성(Props, Properties)	https://odada.me/271
리액트 이벤트(Event)	https://odada.me/273
[Hooks] useState	https://odada.me/274

React Router Dom을 이용한 레이아웃 구성하기	https://odada.me/256
[style] styled-reset, styled-component, tailwind 으로 스타일링하기	https://odada.me/324
[style] Chakra-UI 로 스타일링 하기	https://odada.me/326
[실습] React로 반응형 웹사이트 만들기	https://odada.me/255
[실습] React Github, Netlify 배포	https://odada.me/279

[실습] React 할 일 관리 앱 만들기	https://odada.me/314
[Hooks] useContext	https://odada.me/319
[Hooks] useReducer	https://odada.me/317
[Hooks] useEffect, LifeCycle	https://odada.me/313
[Hooks] 최적화	https://odada.me/315

비동기 기본	https://odada.me/337
비동기 예제 (뉴스 api)	https://odada.me/309

TypeScript	https://odada.me/359
React Native
[실습] firebase 를 활용한 블로그 앱 만들기	https://odada.me/329

React 라이브러리

- 프레임워크

라이브러리	사이트	설명
React	https://ko.react.dev/	UI 구축을 위한 JavaScript 라이브러리
React Native	https://reactnative.dev/	모바일 앱 개발을 위한 React 프레임워크
Next.js	https://nextjs.org	React 프레임워크 (SSR/SSG)

- 스타일링

라이브러리	사이트	설명
Styled-components	https://styled-components.com	CSS-in-JS의 대표주자
SASS/SCSS	https://sass-lang.com	CSS 전처리기
Emotion	https://emotion.sh	고성능 CSS-in-JS
Tailwind CSS	https://tailwindcss.com	유틸리티 우선 CSS

- UI 컴포넌트

라이브러리	사이트	설명
Tailwind UI	https://tailwindui.com/	Tailwind 기반 프리미엄 UI 컴포넌트
Material-UI	https://mui.com	Material Design 기반 UI 라이브러리
Ant Design	https://ant.design	기업용 디자인 시스템
Chakra UI	https://www.chakra-ui.com/	접근성 중심 모던 UI 컴포넌트

- 라우팅/네비게이션

라이브러리	사이트	설명
React Router	https://reactrouter.com	웹 애플리케이션 라우팅
React Navigation	https://reactnavigation.org/	React Native 앱 네비게이션

- 상태 관리

라이브러리	사이트	설명
Redux	https://redux.js.org	가장 널리 사용되는 상태 관리 라이브러리
MobX	https://mobx.js.org	단순하고 확장 가능한 상태 관리
Recoil	https://recoiljs.org	Facebook의 실험적 상태 관리
Zustand	https://zustand-demo.pmnd.rs	간단하고 가벼운 상태 관리
React Query	https://tanstack.com/query	서버 상태 관리 특화

- 폼 관리

라이브러리	사이트	설명
Formik	https://formik.org	폼 상태 관리 및 검증
React Hook Form	https://react-hook-form.com	성능 중심 폼 관리
Yup	https://github.com/jquense/yup	폼 유효성 검증

- API/네트워킹

라이브러리	사이트	설명
Axios	https://axios-http.com	HTTP 클라이언트
SWR	https://swr.vercel.app	데이터 페칭
Apollo (GraphQL)	https://www.apollographql.com	GraphQL 클라이언트

- 애니메이션

라이브러리	사이트	설명
React Spring	https://react-spring.dev	물리 기반 애니메이션
Framer Motion	https://www.framer.com/motion	선언적 애니메이션
GSAP	https://greensock.com	전문적 애니메이션

- 유틸리티

라이브러리	사이트	설명
Day.js	https://day.js.org	날짜 처리
Lodash	https://lodash.com	데이터 조작
React Icons	https://react-icons.github.io/react-icons	아이콘 모음

- 테스팅

라이브러리	사이트	설명
Jest	https://jestjs.io	JavaScript 테스트
React Testing Library	https://testing-library.com/react	UI 테스트
Cypress	https://www.cypress.io	E2E 테스트

[Hooks] useContext - React 배우기

oodada — Wed, 20 Mar 2024 12:56:36 +0900

React Context

리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.

state 와 props를 사용해서 컴포넌트 간에 데이터를 전달

useContext 란?

React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법으로
전역 상태를 관리하기 위한 간단한 방법입니다.

Context 문법

생성 : createContext 함수를 사용하여 Context를 생성합니다.
제공 : Context.Provider 컴포넌트를 만나면, value prop을 통해 Context의 값을 제공합니다.
사용 : useContext 컴포넌트를 사용하여 Context의 값을 사용합니다.

Context 사용하기

createContext 함수를 사용하여 Context를 생성합니다.
defaultValue는 Provider를 사용하지 않았을 때 사용할 기본값입니다.

const MyContext = createContext(defaultValue);

Context.Provider 컴포넌트를 사용하여 Context를 제공합니다.
value prop을 통해 Context의 값을 제공합니다.

// 왜 value를 객체로 감싸서 전달하는가?
// 여러 개의 값을 전달하기 위해 객체로 묶어서 전달
// value={{ key1: value1, key2: value2 }}

<MyContext.Provider value={/* 상태 값 */}>
  {/* 여기에 위치한 컴포넌트들은 이 Context의 값을 사용할 수 있음 */}
</MyContext.Provider>

Context의 값을 사용할 때는 useContext hook을 사용합니다.

// 왜 useContext로 데이터를 가져오는가?
// 컴포넌트 계층 구조에 상관없이 Context의 값을 사용할 수 있음
// 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하지 않아도 됨

const value = useContext(MyContext);

왜 주고 받는 구조를 사용하는가?

1. 상태를 전역적으로 공유하기 위해

만약 useContext 없이 컴포넌트 간 데이터를 주고받는다면, 상태를 부모 → 자식 → 손자 순서로 props를 계속 전달해야 합니다. 하지만, Context를 사용하면 컴포넌트 계층과 상관없이 원하는 곳에서 상태를 바로 사용할 수 있습니다.

Without Context (props drilling):

<Parent isLiked={isLiked} toggleLike={toggleLike}>
  <Child isLiked={isLiked} toggleLike={toggleLike}>
    <Grandchild isLiked={isLiked} toggleLike={toggleLike} />
  </Child>
</Parent>

With Context:

<LikeProvider>
  <Parent>
    <Child>
      <Grandchild /> {/* 바로 isLiked와 toggleLike 사용 가능 */}
    </Child>
  </Parent>
</LikeProvider>

like 버튼 만들기

1. Context 없이 만들기

import React, { useState } from "react";

const LikeButton = ({ isLiked, toggleLike }) => {
  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-red-500" : "text-gray-400"}>❤️하트</span>
      </button>
    </div>
  );
};

const FollowButton = () => {
  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-green" : "text-gray-400"}>+팔로우</span>
      </button>
    </div>
  );
}

const App = () => {
  const [isLiked, setIsLiked] = useState(false);

  const toggleLike = () => {
    setIsLiked((prev) => !prev);
  };

  return (
    <div className="p-8">
      <LikeButton isLiked={isLiked} toggleLike={toggleLike} />
      <FollowButton isLiked={isLiked} toggleLike={toggleLike} />
    </div>
  );
};

export default App;

2. Context로 만들기

import React, { createContext, useContext, useState } from "react";

// Context 생성
const ButtonContext = createContext();

const App = () => {
  const [isLiked, setIsLiked] = useState(false);

  const toggleLike = () => {
    setIsLiked((prev) => !prev);
  };

  return (
    // Context Provider로 상태 공유
    <ButtonContext.Provider value={{ isLiked, toggleLike }}>
      <div className="p-8">
        <LikeButton />
        <FollowButton />
      </div>
    </ButtonContext.Provider>
  );
};

const LikeButton = () => {
  // Context에서 상태 가져오기
  const { isLiked, toggleLike } = useContext(ButtonContext);

  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-red-500" : "text-gray-400"}>❤️하트</span>
      </button>
    </div>
  );
};

const FollowButton = () => {
  // Context에서 상태 가져오기
  const { isLiked, toggleLike } = useContext(ButtonContext);

  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-green-500" : "text-gray-400"}>+팔로우</span>
      </button>
    </div>
  );
};

export default App;

3. Custom Hook을 사용하는 경우

src/
├── App.jsx                  # 메인 컴포넌트
├── context/
│   └── ButtonContext.jsx    # Context 및 Provider 정의
├── components/
    ├── LikeButton.jsx       # 좋아요 버튼 컴포넌트
    └── FollowButton.jsx     # 팔로우 버튼 컴포넌트

// src/contexts/ButtonContext.jsx
import React, { createContext, useContext, useState } from "react";

// Context 생성
const ButtonContext = createContext();

// 커스텀 Hook
export const useButtonContext = () => {
  const context = useContext(ButtonContext);
  if (!context) {
    throw new Error("useButtonContext must be used within a ButtonProvider");
  }
  return context;
};

// Provider 컴포넌트
export const ButtonProvider = ({ children }) => {
  const [isLiked, setIsLiked] = useState(false);

  const toggleLike = () => {
    setIsLiked((prev) => !prev);
  };

  return (
    <ButtonContext.Provider value={{ isLiked, toggleLike }}>
      {children}
    </ButtonContext.Provider>
  );
};

// src/components/LikeButton.jsx
import React from "react";
import { useButtonContext } from "../context/ButtonContext";

const LikeButton = () => {
  const { isLiked, toggleLike } = useButtonContext();

  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-red-500" : "text-gray-400"}>❤️하트</span>
      </button>
    </div>
  );
};

export default LikeButton;

// src/components/FollowButton.jsx
import React from "react";
import { useButtonContext } from "../context/ButtonContext";

const FollowButton = () => {
  const { isLiked, toggleLike } = useButtonContext();

  return (
    <div className="flex items-center justify-center mt-10">
      <button onClick={toggleLike} className="text-3xl">
        <span className={isLiked ? "text-green-500" : "text-gray-400"}>+팔로우</span>
      </button>
    </div>
  );
};

export default FollowButton;

// src/App.jsx
import React from "react";
import { ButtonProvider } from "./context/ButtonContext";
import LikeButton from "./components/LikeButton";
import FollowButton from "./components/FollowButton";

const App = () => {
  return (
    <ButtonProvider>
      <div className="p-8">
        <LikeButton />
        <FollowButton />
      </div>
    </ButtonProvider>
  );
};

export default App;

데이터 전달 방식 비교

1. props를 사용하는 경우

import React from 'react';

const UserProfile = ({ name, email, userData }) => {
  return (
    <div className="p-4 border rounded">
      <h2 className="text-xl font-bold">기본 정보</h2>
      <div className="mt-2">
        <p>이름: {name}</p>
        <p>이메일: {email}</p>
      </div>
      <UserInfo age={userData.age} location={userData.location} />
    </div>
  );
};

const UserInfo = ({ age, location }) => {
  return (
    <div className="mt-4 border-t pt-4">
      <h3 className="font-bold">상세 정보</h3>
      <div className="mt-2">
        <p>나이: {age}</p>
        <p>지역: {location}</p>
      </div>
    </div>
  );
};

const User = () => {
  const userData = {
    name: "김철수",
    email: "cheolsu@example.com",
    age: 25,
    location: "서울"
  };

  return (
    <div className="p-8">
      <UserProfile name={userData.name} email={userData.email} userData={userData} />
    </div>
  );
};

export default User;

2. Context를 사용하는 경우

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

const UserProfile = () => {
  const { name, email } = useContext(UserContext);

  return (
    <div className="p-4 border rounded">
      <h2 className="text-xl font-bold">기본 정보</h2>
      <div className="mt-2">
        <p>이름: {name}</p>
        <p>이메일: {email}</p>
      </div>
      <UserInfo />
    </div>
  );
};

const UserInfo = () => {
  const { age, location } = useContext(UserContext);

  return (
    <div className="mt-4 border-t pt-4">
      <h3 className="font-bold">상세 정보</h3>
      <div className="mt-2">
        <p>나이: {age}</p>
        <p>지역: {location}</p>
      </div>
    </div>
  );
};

const User = () => {
  const userData = {
    name: "김철수",
    email: "cheolsu@example.com",
    age: 25,
    location: "서울"
  };

  return (
    <div className="p-8">
      <UserContext.Provider value={userData}>
        <UserProfile />
      </UserContext.Provider>
    </div>
  );
};

export default User;

3. Custom Hook을 사용하는 경우

import React, { createContext, useContext } from 'react';

// Context 생성
const UserContext = createContext();

// Provider 컴포넌트 분리
const UserProvider = ({ children }) => {
  const userData = {
    name: "김철수",
    email: "cheolsu@example.com",
    age: 25,
    location: "서울"
  };

  return (
    <UserContext.Provider value={userData}>
      {children}
    </UserContext.Provider>
  );
};

// 커스텀 훅 생성
const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

const UserProfile = () => {
  const { name, email } = useUser();

  return (
    <div className="p-4 border rounded">
      <h2 className="text-xl font-bold">기본 정보</h2>
      <div className="mt-2">
        <p>이름: {name}</p>
        <p>이메일: {email}</p>
      </div>
      <UserInfo />
    </div>
  );
};

const UserInfo = () => {
  const { age, location } = useUser();

  return (
    <div className="mt-4 border-t pt-4">
      <h3 className="font-bold">상세 정보</h3>
      <div className="mt-2">
        <p>나이: {age}</p>
        <p>지역: {location}</p>
      </div>
    </div>
  );
};

const User = () => {
  return (
    <div className="p-8">
      <UserProvider>
        <UserProfile />
      </UserProvider>
    </div>
  );
};

export default User;

Counter useContext로 변경

// src/reducers/counterReducer.js
export const ACTION_TYPE = {
    INCREMENT: 'INCREMENT',
    DECREMENT: 'DECREMENT',
    RESET: 'RESET',
}

export function counterReducer(state, action) {
    switch (action.type) {
        case ACTION_TYPE.INCREMENT:
            return { ...state, counter: state.counter + 1 }
        case ACTION_TYPE.DECREMENT:
            return { ...state, counter: state.counter - 1 }
        case ACTION_TYPE.RESET:
            return { ...state, counter: 0 }
        default:
            return state
    }
}

// src/components/Counter.js
import React, { useReducer } from 'react'
import { counterReducer, ACTION_TYPE } from '../reducers/counterReducer'

function Counter() {
    const [state, dispatch] = useReducer(counterReducer, {
        counter: 0,
        name: 'counter',
    })

    return (
        <div>
            <h1>
                {state.name}: {state.counter}
            </h1>
            <button onClick={() => dispatch({ type: ACTION_TYPE.INCREMENT })}>+1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.DECREMENT })}>-1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.RESET })}>Reset</button>
        </div>
    )
}

export default Counter

이전 페이지에서 만든 Counter 코드를 useContext를 사용하여 변경해보겠습니다.

// src/contexts/CounterContext.js
import React, { createContext, useReducer } from 'react'
import { counterReducer, ACTION_TYPE } from '../reducers/counterReducer'

const CounterContext = createContext()

export function CounterProvider({ children }) {
    const [state, dispatch] = useReducer(counterReducer, {
        counter: 0,
        name: 'counter',
    })

    return (
        <CounterContext.Provider value={{ state, dispatch }}>
            {children}
        </CounterContext.Provider>
    )
}

export function useCounter() {
    const context = React.useContext(CounterContext)
    if (!context) {
        throw new Error('useCounter must be used within a CounterProvider')
    }
    return context
}

// src/App.js
import React from 'react'
import Counter from './components/Counter'
import { CounterProvider } from './contexts/CounterContext'

function App() {
    return (
        <CounterProvider>
            <Counter />
        </CounterProvider>
    )
}

export default App

// src/components/Counter.js
import React from 'react'
import { useCounter, ACTION_TYPE } from '../contexts/CounterContext'

function Counter() {
    const { state, dispatch } = useCounter()

    return (
        <div>
            <h1>
                {state.name}: {state.counter}
            </h1>
            <button onClick={() => dispatch({ type: ACTION_TYPE.INCREMENT })}>+1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.DECREMENT })}>-1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.RESET })}>Reset</button>
        </div>
    )
}

export default Counter

Counter 컴포넌트에서 useCounter hook을 사용하여 CounterContext의 state와 dispatch를 사용할 수 있습니다.

타입 개요 및 개발환경 구성

oodada — Tue, 19 Mar 2024 10:36:44 +0900

타입 개요 및 개발환경 구성

01. 타입스크립트란?

TypeScript

2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로,
자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어!

02. 타입스크립트의 특징

정적 타입의 컴파일 언어
- 자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인
- 타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인
- 자바스크립트로 변환(컴파일) 후 브라우저에나 Node.js 환경에서 동작

03. 개발환경 구성

- 프로젝트 생성

npm init -y

- 패키지 설치

parcel : 웹 애플리케이션 번들러

npm i -D parcel typescript

{
    "name": "ts-test",
    "version": "1.0.0",
    "description": "",
    // "main": "index.js", // 오류 발생 제거
    "scripts": {
        // 추가
        "dev": "parcel index.html",
        "build": "parcel build index.html"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "parcel": "^2.12.0",
        "typescript": "^5.4.2"
    }
}

- index, ts 파일 생성

ts-test
├── index.html
├── src
    ├── main.ts
├── tsconfig.json
└── package.json

ts 확장자를 html 파일에서 불러오기 위해 type="module" 속성 추가
html은 ts 파일을 브라우저에서 실행할 수 없지만 parcel이 번들링하여 실행 가능

<!-- index.html -->
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Document</title>
        <script
            type="module"
            src="./src/main.ts"
        ></script>
    </head>
    <body></body>
</html>

typescript의 구성옵션을 제공하기 위해 tsconfig.json 파일 생성

npx tsc --init

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2016", // 2016년도 버전으로 자바스크립트를 타입스크립트로 변환
        "module": "ESNext", // ECMAScript의 가장 최신 버전으로 모듈을 사용
        "moduleResolution": "Node", // 모듈 해석 방식을 Node.js의 해석 방식으로 사용
        "esModuleInterop": true, // CommonJS 모듈을 ES6 모듈로 변환
        "lib": ["ESNext", "DOM"], // 사용할 라이브러리를 설정
        "strict": true // 엄격한 타입 검사를 사용
    },
    "include": ["**/*.ts", "**/*.tsx, scr/**/*.ts"], // 타입스크립트 파일을 찾을 위치
    "exclude": ["node_modules"] // 타입스크립트 파일을 제외할 위치
}

// main.ts
// let hello1: string = 123 // 오류 발생
let hello2: string = 'Hello, TypeScript!';

// hello2 = 123 // 오류 발생
hello2 = 'Hello, JavaScript!';

console.log(hello2);

- 개발 서버 실행

html은 ts 파일을 브라우저에서 실행할 수 없지만 parcel이 번들링하여 실행 가능

npm run dev

dist 디렉토리가 생성되고 번들링된 파일이 실행됨
dist > index.html 파일을 살펴보면 main.js 파일이 생성되어 있음
dist > main.js 파일을 살펴보면 번들링된 파일이 생성되어 있음

// let hello1: string = 123 // 오류 발생
let hello2 = 'Hello, TypeScript!';
// hello2 = 123 // 오류 발생
hello2 = 'Hello, JavaScript!';
console.log(hello2);

04. 구문

- 변수 선언

타입스크립트는 변수의 타입을 명시적으로 선언하여 사용

let 변수명: 타입 = 값;

let str: string = '문자열';
let num: number = 123;
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['one', 1];
let obj: { name: string; age: number } = { name: '김겨울', age: 30 };

- 함수 선언

함수의 매개변수와 반환값에 타입을 명시적으로 선언하여 사용

function 함수명(매개변수: 타입): 반환타입 { ... }

function hello(name: string): string {
    return `Hello, ${name}!`;
}

console.log(hello('TypeScript')); // Hello, TypeScript!

- 타입 주석

변수나 함수의 타입을 주석으로 명시

let 변수명: 타입;

let str: string;
let num: number;
let bool: boolean;

- 타입 추론

변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용

let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론
let num = 123;
let bool = true;

- 타입 별칭

타입을 별칭으로 지정하여 사용

type 타입별칭 = 타입;

type Point = { x: number; y: number };
let p: Point = { x: 10, y: 20 };

- interface

객체의 타입을 정의하여 사용

interface 인터페이스 { key: 타입, key: 타입 }

interface IPerson {
    name: string;
    age: number;
}

let userA: IPerson = { name: '김겨울', age: 30 };
let userB: IPerson = { name: '김가을', age: 30 };

[Hooks] useReducer - React 배우기

oodada — Tue, 19 Mar 2024 09:47:48 +0900

useReducer

useReducer 란?

useReducer 는 useState 보다 더 다양한 컴포넌트 상태를 관리하는 Hook 입니다. useState 는 컴포넌트 상태를 관리하는 가장 기본적인 Hook 이지만, useReducer 는 복잡한 상태 로직을 다루기에 더 적합합니다.

컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있고, 상태 로직을 컴포넌트 바깥으로 빼내어 재사용할 수 있습니다.

useReducer 사용법

useReducer 는 다음과 같이 사용합니다.

- 타입 정의

const ACTION_TYPE1 = 'ACTION_TYPE1'
const ACTION_TYPE2 = 'ACTION_TYPE2'

- reducer 함수 정의

const [state, dispatch] = useReducer(reducer, initialState)

state : 현재 상태
dispatch : 액션을 발생시키는 함수, 액션을 발생시키면 리듀서 함수가 호출되어 상태가 변경됩니다.
reducer : 상태를 변경하는 함수
initialState : 초기 상태

reducer 함수는 다음과 같이 작성합니다.

reducer 함수는 현재 상태와 액션을 받아서 새로운 상태를 반환합니다.
action.type 은 대문자로 작성하여 액션 타입이 상수임을 나타냅니다.

function reducer(state, action) {
    switch (action.type) {
        case 'ACTION_TYPE1':
            return { ...state, ...action.payload }
        case 'ACTION_TYPE2':
            return { ...state, ...action.payload }
        default:
            return state
    }
}

useReducer 예제

- useStaet 사용

useState 를 사용하여 컴포넌트 상태를 관리하는 예제로 상태관리가 복잡해질수록 코드가 복잡해 관리가 어려워집니다.
또한 상태를 변경하는 로직이 컴포넌트 안에 선언되어 있어 재사용이 어렵습니다.

import React, { useState } from 'react'

function Counter() {
    const [count, setCount] = useState(0)

    const onIncrease = () => {
        setCount(count + 1)
    }

    const onDecrease = () => {
        setCount(count - 1)
    }

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter

- useReducer 사용

useReducer 를 사용하여 컴포넌트 상태를 관리하는 예제로 상태관리가 복잡해져도 코드가 간결해집니다.
또한 상태를 변경하는 로직이 컴포넌트 바깥에 선언되어 있어 재사용이 용이합니다.

dispatch 함수를 이용하여 액션을 발생시키면 reducer 함수가 호출되어 상태가 변경됩니다. 상태가 변경되면 컴포넌트가 리렌더링됩니다.

쉽게 말해, dispatch가 파견 나간 직원이라 생각하고, reducer가 파견 받은 회사라 생각하면 이해하기 쉽습니다. 파견 나간 직원이 정보를 보내면 파견 받은 회사에서 정보를 처리하고, 결과를 돌려줍니다.

// src/components/Counter.js
import React, { useReducer } from 'react'

// reducer 함수로 상태를 변경
// state : 현재 상태
// action : 상태를 변경할 때 참조하는 값
function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { counter: state.counter + 1 }
        case 'DECREMENT':
            return { counter: state.counter - 1 }
        case 'RESET':
            return { counter: 0 }
        default:
            return state
    }
}

function Counter() {
    // useReducer 로 상태 관리
    // state : 현재 상태
    // dispatch : 액션을 발생시키는 함수
    // reducer : 상태를 변경하는 함수
    // initialState : 초기 상태
    const [state, dispatch] = useReducer(reducer, {
        counter: 0,
    })

    // state : { counter: 0 }
    return (
        <div>
            <h1>Counter</h1>
            <p>Current count: {state.counter}</p>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
            <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
        </div>
    )
}

export default Counter

useReducer 여러 상태 사용

useReducer 를 사용하여 여러 상태를 관리할 수 있습니다.

import React, { useReducer } from 'react'

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, counter: state.counter + 1 }
        case 'DECREMENT':
            return { ...state, counter: state.counter - 1 }
        case 'RESET':
            return { ...state, counter: 0 }
        default:
            return state
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, {
        counter: 0,
        name: 'counter',
    })
    // state : { counter: 0, name: 'counter' }

    return (
        <div>
            <h1>
                {state.name}: {state.counter}
            </h1>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
            <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
        </div>
    )
}

export default Counter

상태 로직 분리

useReducer 를 사용하여 상태 로직을 분리하면 컴포넌트 코드가 간결해지고, 상태 로직을 재사용할 수 있습니다.

// src/reducers/counterReducer.js
export const ACTION_TYPE = {
    INCREMENT: 'INCREMENT',
    DECREMENT: 'DECREMENT',
    RESET: 'RESET',
}

export function counterReducer(state, action) {
    switch (action.type) {
        case ACTION_TYPE.INCREMENT:
            return { ...state, counter: state.counter + 1 }
        case ACTION_TYPE.DECREMENT:
            return { ...state, counter: state.counter - 1 }
        case ACTION_TYPE.RESET:
            return { ...state, counter: 0 }
        default:
            return state
    }
}

// src/components/Counter.js
import React, { useReducer } from 'react'
import { counterReducer, ACTION_TYPE } from '../reducers/counterReducer'

function Counter() {
    const [state, dispatch] = useReducer(counterReducer, {
        counter: 0,
        name: 'counter',
    })

    return (
        <div>
            <h1>
                {state.name}: {state.counter}
            </h1>
            <button onClick={() => dispatch({ type: ACTION_TYPE.INCREMENT })}>+1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.DECREMENT })}>-1</button>
            <button onClick={() => dispatch({ type: ACTION_TYPE.RESET })}>Reset</button>
        </div>
    )
}

export default Counter

useReducer vs useState

useReducer 와 useState 는 상태를 관리하는 두 가지 방법입니다.

useState 는 간단한 상태 관리에 적합하고, useReducer 는 복잡한 상태 관리에 적합합니다.

useState 는 상태를 변경하는 로직이 컴포넌트 안에 선언되어 있어 재사용이 어렵고, 상태 관리가 복잡해질수록 코드가 복잡해 관리가 어려워집니다.

useReducer 는 상태를 변경하는 로직을 컴포넌트 바깥에 선언하여 재사용이 용이하고, 상태 관리가 복잡해져도 코드가 간결해집니다.

todolist를 useReducer로 변경하기

todo list

odada

프론트엔드 개발 월별 계획

Phase 1: 프로젝트 초기 설정 (1월 3주차)

1주차: 개발 환경 구성

2주차: 기본 컴포넌트 및 상태관리 설정

Phase 2: 페이지 구현 (2월 ~ 4월)

2월: 인증 및 기본 페이지

3월: Order & RMA 페이지

4월: Inventory & Training 페이지

Phase 3: 기능 고도화 (5월 ~ 6월)

5월: 검색 및 필터링

6월: 데이터 관리 및 사용자 경험

Phase 4: API 통신 및 안정화 (7월)

7월 1-2주차: API 통합

7월 3-4주차: 테스트 및 안정화

세부 작업 우선순위

1순위: 핵심 기능

2순위: 확장 기능

3순위: 부가 기능

협업 포인트

백엔드 팀과의 협업

디자인 팀과의 협업

기획팀과의 협업

위험 요소 및 대응 계획

예상 위험

대응 방안

Next.js와 MongoDB 연동하여 CRUD API 만들기

0. 주요 변경사항 정리

1. MongoDB 설정

1-1. MongoDB Atlas 설정

1. MongoDB Atlas에서 연결 문자열을 가져오는 방법:

2. 프로젝트에 환경 변수 설정:

3. Network Access 설정:

4. Database Access 설정:

1-2. 프로젝트에 MongoDB 설치

1-3. 환경 변수 설정

2. MongoDB 연결 설정

2-1. MongoDB 연결 유틸리티 생성

2-2. Post 모델 생성

3. API 라우트 수정

3-1. 전체 게시글 API (app/api/posts/route.js)

3-2. 개별 게시글 API (app/api/posts/[id]/route.js)

4. 클라이언트 컴포넌트 수정

4-1. 게시글 목록 페이지 수정 (app/posts/page.js)

4-2. 게시글 상세 페이지 수정 (app/posts/[id]/page.js)

4-2. 날짜 형식 수정

프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드

프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드

1. 데이터베이스가 뭔가요?

2. MongoDB는 무엇인가요?

React의 state와 비교

3. Mongoose는 무엇인가요?

PropTypes와 비교

4. 실제 사용 예시

4-1. 데이터베이스 연결

4-2. 포스트 모델 정의하기

4-3. API 라우트에서 사용하기

4-4. 프론트엔드에서 사용하기

5. 정리

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

1. 우리가 아는 것에서 시작하기

1-1. React에서의 데이터 저장

1-2. 근데 여기에는 문제가 있어요

2. 데이터베이스의 두 가지 타입

2-1. MySQL (엄격한 규칙의 데이터베이스)

2-2. MongoDB (자유로운 규칙의 데이터베이스) : nosql

3. 실제 프론트엔드 개발에서는 어떻게 쓰나요?

3-1. MySQL을 사용할 때

3-2. MongoDB를 사용할 때

3-3. 프론트엔드 입장에서는...

5-2. 쇼핑몰 프로젝트

정리

Node.js 모듈과 객체

1. 모듈(Module)이란?

- 모듈의 장점

- 대표적인 웹서비스 공통 모듈 예시

- 모듈 사용법

모듈 내보내기 (Export)

모듈 가져오기 (Import)

3-1. 전체 게시글 API (`app/api/posts/route.js`)

3-2. 개별 게시글 API (`app/api/posts/[id]/route.js`)

4-1. 게시글 목록 페이지 수정 (`app/posts/page.js`)

4-2. 게시글 상세 페이지 수정 (`app/posts/[id]/page.js`)

`params` 객체

`/data/posts.js` 로 직접 접근하면

`/api/posts` API Route 로 접근하면

5-1. 글 목록 페이지 (`/posts`)

5-2. 글쓰기 페이지 (`/posts/write`)

5-3. 글 상세 페이지 (`/posts/[id]`)

5-4. 글 수정 페이지 (`/posts/[id]/edit`)