Taeyoung Kim
English

Engineering

웹 개발 보강-박영웅 강사님

웹 개발 보강-박영웅 강사님 학습 내용을 정리한 백필 노트입니다.

이 글은 2025년 학습 기록을 블로그 형식으로 정리한 백필 노트입니다.

2. 사전 설치 항목

  • Node.js: v18 이상 (v20 이상 권장)
  • Git: v1 이상 (v2 이상 권장)
  • Code Editor: VS Code 또는 Cursor

4. 주요 학습 내용

HTML/CSS

  • HTML, CSS 첫걸음
  • HTML 주요 요소와 속성
  • CSS Flex 완벽 가이드
  • CSS Animation을 활용한 로딩 구현
  • CSS 선택자 상세:
    • 기본 선택자: 전체(), 태그, 클래스(.), 아이디(#)
    • 복합 선택자: 일치 선택자, 하위(후손) 선택자
    • 가상 클래스 선택자: :hover, :active, :focus, :nth-child(n)

JavaScript

  • 기본 문법:
    • 표기법(dash-case, snake_case, camelCase, PascalCase), Zero-based Numbering, 주석
    • 데이터 종류: String, Number, Boolean, undefined, null, Object, Array 등
  • 핵심 개념:
    • 변수 (let, const), 예약어
    • 함수 (기명/익명), 메소드, 메소드 체이닝
    • 조건문 (if, else)
    • DOM API ( querySelector, querySelectorAll, addEventListener, classList 등)
  • 심화 패턴:
    • JS 함수 핵심 패턴
    • JS 비동기 핵심 패턴
    • 데이터 통신: Fetch 함수와 Axios 라이브러리

React

  • Vite를 이용한 React 프로젝트 시작하기
  • React 핵심 패턴
  • React Router 핵심 정리 (Data Mode)
  • 상태 관리 라이브러리: Zustand 핵심 정리

5. 실습 예제

실습 예제 1: Starbucks Vanilla App

실습 예제 2

  • GitHub 저장소: (링크 미제공)
  • 데모 페이지: (링크 미제공)

6. API 사용법

OMDb API

  • **검색어로 영화 목록 가져오기:**Bash

    curl 'https://omdbapi.com/?apikey=7035c60c&s=검색어'

  • **영화 ID로 상세 정보 가져오기:**Bash

    curl 'https://omdbapi.com/?apikey=7035c60c&i=영화ID'

TODO API

  • 공통 Headers: 모든 요청에 아래 내용을 포함해야 합니다.JSON

    {
  "content-type": "application/json",
  "apikey": "KDT8_bcAWVpD8",
  "username": "KDT8_<YOUR_NAME>"
}

  • 기능별 사용법:

    • **목록 조회 (GET):**Bash

      curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos -X 'GET'

    • **항목 추가 (POST):**Bash

      curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos -X 'POST'
# Request Body: { "title": "할 일 제목", "order": 0 }

    • **항목 수정 (PUT):**Bash

      curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/:todoId -X 'PUT'
# Request Body: { "title": "수정할 제목", "done": false, "order": 0 }

    • **항목 삭제 (DELETE):**Bash

      curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/:todoId -X 'DELETE'

7. 기타 자료 및 예시

  • 개념 시각화: Mermaid (맛있는 커피 마시기, 댓글 작성 예시)

  • 프로젝트 주제: 익명 게시판

  • 코드 공유 (Loader.tsx): React 로딩 컴포넌트TypeScript

    import type { CSSProperties } from 'react'

interface LoaderProps {
  size?: number
  color?: string
  weight?: number
  duration?: number
  className?: string
}

export default function Loader({
  size = 20,
  color = '#0374FF',
  weight = 3,
  duration = 1,
  className = ''
}: LoaderProps) {
  const loaderStyle: CSSProperties = {
    width: size,
    height: size,
    borderWidth: weight,
    borderStyle: 'solid',
    borderColor: color,
    borderTopColor: 'transparent',
    borderRadius: '50%',
    animation: `loader ${duration}s infinite linear`
  }

  return (
    <>
      <style>
        {`
          @keyframes loader {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}
      </style>
      <div
        style={loaderStyle}
        className={`absolute top-0 right-0 bottom-0 left-0 m-auto ${className}`}
      />
    </>
  )
}