Rock's Ezweb

타입스트립트로 리엑트 앱을 구현하면 어떤 이점이 있을까?

• 에러 예방 및 안정성 향상
  컴파일 단계에서 타입 오류를 미리 잡아주므로, 런타임에서 발생할 수 있는 버그를 크게 줄인다.
• 컴포넌트의 재사용성과 유지보수성 강화
  Props와 State에 타입을 지정하면 컴포넌트 간 데이터 전달이 명확해져, 재사용 시 실수를 방지할 수 있다.
  
  
• 자동완성 및 코드 탐색 기능 향상
  VS Code 등 IDE에서 타입 정보를 기반으로 강력한 자동완성, 함수 시그니처 표시, 리팩터링 지원을 제공한다.
  
  
• 협업 효율성 증가
  타입 정의를 통해 코드 의도가 명확해지고, 팀원 간 코드 이해도와 일관성이 높아진다.
  
  
• 대규모 프로젝트에 적합
  인터페이스, 제네릭 등 TypeScript의 구조적 특징이 대형 React 프로젝트의 복잡도를 줄여준다.

위와 같은 이점을 활용하여 todoList 웹앱을 구현해보세요. 

인프런 강의를 통해 차근차근 구현할 수 있습니다.

🧩 React + TypeScript TodoList App - 타입스크립트 프로젝트 입문

• React + TypeScript를 활용하여 “할 일 관리 앱(ToDo List)”을 직접 만드는 프로젝트 중심 과정
• 컴포넌트 구조 설계 → 상태 관리 → 타입 적용 → 기능 구현 → 로컬 스토리지 연동 → 배포
• 기초 문법을 앱 개발에 직접 적용하며 리액트 실무 환경에서 TS를 자연스럽게 체득할 수 있도록 구성했습니다.

 

할일 목록 출력하기

 

할일 수정하기

 

이런 분들께 추천해요

TypeScript를 학습했지만 실제 프로젝트에 적용해보지 못한 분

React로 간단한 앱을 만들어봤지만 타입 안정성이 없는 코드에 불안감을 느끼는 분

포트폴리오용 React + TypeScript 미니 프로젝트를 완성하고 싶은 분

수강 후에는

• React 프로젝트에 TypeScript를 자연스럽게 적용하는 방법을 익힙니다.
• 코드의 타입 안정성과 생산성을 동시에 확보하는 감각을 체득합니다.
• 실무 앱 설계의 기본인 컴포넌트 분리와 상태 흐름을 명확히 이해합니다.
• 완성된 TodoList App을 포트폴리오에 바로 활용할 수 있습니다.

 

이런 내용을 배워요

React + TypeScript 개발 환경 구성

vite, parcel, rsbuild 비교 및 앱 생성, 공통 타입 설정

UI 컴포넌트 구조 설계 및 상태 관리 기초

입력 폼, 할 일 목록 컴포넌트 구성, props와 state 타입 지정

UI 컴포넌트 구조 설계 및 상태 관리 기초

 

입력 폼, 할 일 목록 컴포넌트 구성, props와 state 타입 지정

타입스크립트 활용 로직 최적화

 

인터페이스, 유니언 타입, 선택적 속성 등 실무형 타입 활용

웹앱 배포

깃허브와 vercel 서비스를 이용하여 완성한 프로젝트를 배포합니다.

github와 vercel을 활용한 배포

 

수강 전 참고 사항

선수 지식 및 유의사항

• 이 강의는 React와 TypeScript를 처음 배우는 입문자도 수강할 수 있는 과정입니다.
  HTML, CSS, JavaScript의 기본 문법을 알고 있다면 충분히 따라올 수 있으며,
  React의 기초 문법(컴포넌트, props, useState)에 대한 간단한 이해가 있다면 더욱 수월하게 진행할 수 있습니다.
  코드 중심으로 진행하기 때문에 이론보다는 직접 만들어보며 익히는 실습형 수업을 지향합니다.
• 코드 중심 강의이므로 IDE(Visual Studio Code) 환경에서 함께 따라 치는 것을 권장드립니다.
• 이 강의의 영상, 코드 예제, 이미지, 교안 등의 자료는 모두 ezweb 에 저작권이 있습니다.
  단, 수강생은 개인 학습 및 포트폴리오 용도로 예제 코드를 자유롭게 활용하실 수 있습니다.
  강의에서 다루는 모든 예제는 교육 목적의 실습용 코드로, 상업적 이용 시 별도의 허가가 필요합니다.

타입스트립트를 학습해야 하는 이유

• 에러를 사전에 방지할 수 있다
  코드 실행 전에 타입 오류를 잡아줘서 런타임 버그를 줄일 수 있다.
• 코드의 가독성과 유지보수가 향상된다
  타입이 명시되어 있어 협업 시 다른 개발자가 코드를 이해하기 쉽다.
• 자동완성과 코드 인텔리전스 지원이 강화된다
  에디터에서 변수·함수의 타입 정보를 기반으로 자동완성, 문서 보기, 오류 표시가 가능하다.
• 대규모 프로젝트에 적합하다
  규모가 커질수록 데이터 구조와 인터페이스 정의가 중요해지는데, 타입스크립트는 이를 체계적으로 관리하게 해준다.

바로가기 : https://inf.run/FJuzi

안녕하세요. 

이지웹 김동주 강사입니다.

드디어 100% 비대면 온라인 수업으로 여러분을 찾아뵙게 되었습니다.

그동안 시간 또는 장소의 제약으로 수강이 힘들었던 분들도 이 기회에 개발자에 도전해보세요.

과정명 : (주)이스트소프트 프론트엔드 개발 (React, HTML/CSS/JavaScript)
훈련기간 : 2025-10-16 ~ 2026-03-03 ( 9회차)
훈련시간:  91일, 총 728시간

교과목

과정의 특징

지원서 작성하기 : https://bit.ly/EST-FE-9th-Apply

웹 개발에서 반응형 디자인은 이제 선택이 아닌 필수가 되었습니다. 그동안 우리는 미디어 쿼리(Media Query)를 사용해 다양한 화면 크기에 맞춰 웹사이트를 구축해왔지만, 이제 더 강력하고 유연한 도구인 Container Query가 등장했습니다.

Media Query의 한계

먼저 기존의 Media Query가 무엇인지 간단히 살펴보겠습니다. Media Query는 뷰포트의 크기나 디바이스의 특성에 따라 CSS 스타일을 조건부로 적용하는 기능입니다.

/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

하지만 Media Query는 전체 뷰포트를 기준으로 하기 때문에 몇 가지 제약사항이 있습니다:

• 전역적 접근: 항상 전체 화면 크기를 기준으로 판단
• 컴포넌트 독립성 부족: 개별 컴포넌트가 자신의 공간에 맞춰 반응하기 어려움
• 재사용성 문제: 같은 컴포넌트라도 위치에 따라 다른 스타일이 필요할 때 복잡해짐

Container Query의 혁신

Container Query는 이런 한계를 해결하는 획기적인 기능입니다. 뷰포트 크기 대신 부모 컨테이너의 크기를 기준으로 스타일을 적용할 수 있습니다.

/* 컨테이너 정의 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 컨테이너 크기에 따른 스타일 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Container Query의 주요 장점

1. 진정한 컴포넌트 기반 반응형
각 컴포넌트가 자신이 차지하는 공간에 맞춰 독립적으로 반응할 수 있습니다.

2. 재사용성 극대화
같은 컴포넌트를 사이드바, 메인 콘텐츠, 모달 등 어디에 배치하든 자동으로 적절한 레이아웃을 제공합니다.

3. 더 직관적인 개발
"이 카드가 300px보다 넓으면 가로 레이아웃으로 바꿔줘"와 같은 자연스러운 로직 구현이 가능합니다.

4. 복잡한 레이아웃 간소화
중첩된 그리드나 복잡한 미디어 쿼리 없이도 유연한 레이아웃을 구현할 수 있습니다.

실제 사용 시나리오

Container Query가 빛을 발하는 상황들을 살펴보면:

• 카드 컴포넌트: 사용 가능한 공간에 따라 세로/가로 레이아웃 자동 전환
• 사이드바: 너비에 따라 아이콘만 표시하거나 텍스트까지 표시
• 데이터 테이블: 컨테이너 크기에 맞춰 컬럼 수 조정
• 모달 창: 내부 콘텐츠가 크기에 맞춰 자동 적응

브라우저 지원과 미래

Container Query는 이제 모든 주요 브라우저에서 지원되며, CSS의 미래를 이끌어갈 핵심 기능으로 자리잡고 있습니다. 이는 웹 개발 방식을 근본적으로 바꿀 수 있는 혁신적인 변화입니다.

더 자세한 내용이 궁금하다면?

Container Query의 개념과 기본적인 장점을 살펴봤지만, 실제 구현 방법과 고급 활용법, 그리고 실무에서 바로 사용할 수 있는 구체적인 예제들이 더 궁금하지 않으신가요?

https://youtu.be/9lCT8KbCjkQ

영상에서는:

✅ Container Query의 상세한 문법과 속성들
✅ 실제 프로젝트에서 사용할 수 있는 실용적인 예제들
✅ Media Query와 Container Query를 함께 사용하는 고급 테크닉
✅ 성능 최적화와 브라우저 호환성 팁들
✅ 실무에서 마주할 수 있는 문제들과 해결책

영상을 통해 Container Query를 완전히 마스터하고, 여러분의 웹 개발 실력을 한 단계 업그레이드해보세요!

Container Query는 단순한 새로운 CSS 기능이 아니라, 웹 개발 패러다임을 바꾸는 혁신입니다. 이 기회를 놓치지 마세요!

전체 디자인을 참조하여 웹페이지를 구현하고, 반응형까지 구현하고 싶으시다면 아래 강의를 확인해보세요.

https://inf.run/CZ1az

🚀 AI 도구가 넘쳐나는 시대, 왜 기초부터 시작해야 할까?

ChatGPT, Claude, GitHub Copilot... AI 도구들이 코드를 척척 만들어주는 시대입니다. 그런데 역설적으로, 지금이야말로 HTML, CSS, JavaScript 기초가 더욱 중요해진 시점입니다.

💡 현실적인 이유들

1. AI가 만든 코드를 이해하고 수정할 수 있어야 한다

• AI가 생성한 코드에 버그가 있을 때 디버깅 능력
• 요구사항에 맞게 코드를 커스터마이징하는 능력
• 성능 최적화와 리팩토링 능력

2. 면접에서 기초 지식은 필수다

• 기술 면접에서 "이 코드가 왜 작동하는지" 설명 요구
• 브라우저 렌더링 원리, 이벤트 루프 등 핵심 개념 질문
• 실무에서 발생하는 문제 해결 능력 검증

3. AI와 협업하는 능력이 새로운 경쟁력

• 정확한 프롬프트 작성을 위한 기술적 이해
• AI 출력물의 품질을 판단하는 안목
• 효율적인 개발 워크플로우 구축

📚 6개월 학습 로드맵

1-2개월: 탄탄한 기초 다지기

HTML/CSS 마스터하기

• 시맨틱 HTML과 웹 접근성
• CSS Grid, Flexbox 완전 정복
• 반응형 웹 디자인 원리

JavaScript 핵심 개념

• 변수, 함수, 스코프, 클로저
• DOM 조작과 이벤트 처리
• 비동기 프로그래밍 (Promise, async/await)

3-4개월: 실전 프로젝트 + AI 도구 활용

프레임워크 학습

• React 또는 Vue.js 기본기
• 상태 관리와 컴포넌트 설계

AI 도구와 함께하는 개발

• GitHub Copilot으로 생산성 향상
• ChatGPT/Claude를 활용한 코드 리뷰
• 효과적인 프롬프트 엔지니어링

5-6개월: 포트폴리오 완성 + 취업 준비

실무 수준 프로젝트

• 백엔드 연동 (API 통신)
• 테스트 코드 작성
• 배포 및 CI/CD 구축

취업 준비

• 기술 면접 대비
• 포트폴리오 최적화
• 기업별 맞춤 지원

🎯 AI 시대 웹개발자의 핵심 역량

기술적 역량

• 기초 탄탄함: HTML, CSS, JS의 동작 원리 이해
• AI 활용 능력: 도구를 효과적으로 사용하는 스킬
• 문제 해결 능력: 복잡한 요구사항을 단계별로 분해

소프트 스킬

• 지속적 학습: 빠르게 변화하는 기술 트렌드 적응
• 커뮤니케이션: 기획자, 디자이너와의 협업 능력
• 비판적 사고: AI 출력물의 품질을 판단하는 안목

🔥 성공하는 사람들의 공통점

1. 기초를 소홀히 하지 않는다

"AI가 다 해주니까 기초는 안 해도 돼" → ❌ 오산입니다

실제 개발 현장에서는:

• 복잡한 비즈니스 로직 구현
• 성능 최적화 필요
• 레거시 코드 유지보수

이 모든 것이 기초 지식 없이는 불가능합니다.

2. AI를 도구로 활용한다

AI에게 모든 것을 맡기는 것이 아니라, 협업 파트너로 활용합니다.

효과적인 AI 활용법:

• 반복적인 코드 작성 자동화
• 코드 리뷰와 최적화 제안
• 새로운 기술 학습 가속화

3. 꾸준한 실전 경험을 쌓는다

이론만으로는 부족합니다. 실제 프로젝트를 통한 경험이 중요합니다.

💼 취업 시장의 현실

기업이 원하는 인재

• 기초가 탄탄한 개발자: 문제 해결 능력
• AI 도구 활용 능력: 생산성 향상
• 지속적 학습 능력: 변화 적응력

연봉 현황

• 신입 개발자: 3,000만원 ~ 4,500만원
• 경력 1-3년: 4,500만원 ~ 6,000만원
• AI 활용 능력 보유시: 평균 20% 이상 연봉 상승

🎓 6개월 후 당신의 모습

기술적 성장

• HTML, CSS, JavaScript 완전 이해
• React/Vue 프레임워크 활용 능력
• AI 도구와 함께하는 효율적인 개발

취업 준비 완료

• 기술 면접 자신감
• 실무 수준 포트폴리오
• 기업 맞춤형 지원 전략

장기적 경쟁력

• 지속적 학습 습관
• 문제 해결 능력
• AI 시대 적응력

🚀 지금 시작하세요!

AI 도구가 발전할수록 기초가 탄탄한 개발자의 가치는 더욱 높아집니다.

6개월 후, 당신은 AI와 협업하며 더 나은 코드를 작성하는 개발자가 될 수 있습니다.

더 늦기 전에 시작하세요. 미래의 당신이 감사할 결정입니다.

"AI 시대의 웹개발자는 AI를 두려워하지 않고, AI와 함께 성장하는 사람입니다."

과정명: 프로젝트기반 프론트엔드 개발자 양성(Figma/React/Next.js/PHP/Mysql/chatGPT)
강사: 김동주
전화문의 : 02-722-2111

상단신청: https://forms.gle/YwtKpx7ooJ2c5HxE7

안녕하세요.

김동주 강사입니다.

2025년 새롭게 시작하는 과정 소개 드립니다.

기존과정 대비 react와 프론트엔드 부분이 강화된 과정으로 설계했습니다. 

AI 개발 시대, 기초가 튼튼한 인력이 더욱 요구되고 있습니다.

웹기획자, 웹디자이너, 웹퍼블리셔, 프론트엔드 개발자에 도전해보세요.

훈련시간: 125일, 총1000시간

개강예정: 2025년 10월 

커리큘럼은 아래과 같습니다. 

HRD 후기입니다. 

국비지원 웹개발 교육  
프론트엔드 백엔드 국비교육  
6개월 코딩 부트캠프  
무료 AI 코딩교육  
웹기획자 취업과정  
국비지원 프로그래밍 입문  
웹개발자 취업 국비코스  
AI 융합 웹개발자 과정

https://youtu.be/N8OXu1W3ABA

🧊 글래스모피즘(Glassmorphism) 카드 스타일을 직접 만들어보자!

JavaScript로 구현하는 실시간 스타일 미리보기 & CSS 복사 기능

요즘 웹디자인에서 빠질 수 없는 요소 중 하나가 바로 Glassmorphism입니다.
반투명 배경과 블러 효과를 활용한 이 디자인은 세련되고 현대적인 UI를 만들 때 자주 활용되죠.

오늘 소개할 코드는 사용자가 직접 배경색, 투명도, 블러 값을 조절하면서 실시간으로 글래스 카드의 스타일을 미리 보고, 해당 CSS를 버튼 하나로 복사할 수 있도록 만들어진 실습형 도구입니다. 코드를 함께 분석하며 핵심 기능을 살펴보겠습니다.

🔧 기능 개요

1. 컬러 피커, 투명도(opacity), 블러(blur) 조절 가능
2. 조절값에 따라 실시간으로 카드 스타일 미리보기
3. 자동으로 CSS 코드 생성
4. 생성된 CSS 한 번에 복사하는 버튼 기능

📌 핵심 코드 분석

1. 🎨 hex 색상 + opacity → rgba로 변환

function hexToRGB(hex, opacity) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r},${g},${b},${opacity})`;
}

• 16진수 색상(#RRGGBB)을 RGB로 변환하고, 투명도를 추가하여 rgba() 형태로 출력합니다.
• 이 함수를 통해 배경 색상에 투명도를 함께 적용할 수 있습니다.

2. ⚡ 실시간 미리보기 업데이트

function updatePreview() {
  const color = colorElement.value;
  const opacity = opacityElement.value;
  const blur = blurElement.value;
  const backgroundColor = hexToRGB(color, opacity);

  glassCard.style.backgroundColor = backgroundColor;
  glassCard.style.backdropFilter = `blur(${blur}px)`;

  const css = `.card {
    background: ${backgroundColor};
    backdrop-filter: blur(${blur}px);
    ...
  }`;

  output.textContent = css;
}

• 입력 요소가 변경될 때마다 updatePreview 함수가 호출되어 미리보기를 실시간 갱신합니다.
• 동시에 CSS 코드도 자동으로 만들어 output 영역에 출력됩니다.

3. ✅ CSS 복사 기능

copyCssButton.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(cssOutput.textContent);
    alert("Css copied");
  } catch (error) {
    alert("error copying CSS");
  }
});

• navigator.clipboard.writeText()를 사용해 생성된 CSS를 클립보드에 복사합니다.
• 복사 성공 시 "Css copied" 알림으로 사용자에게 피드백을 줍니다.

🖼️ 완성 예시 스타일

.card {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

💡 활용 팁

• 디자인 시안 제작, 테마 선택 도구 등 다양한 UI 실험에 적용해볼 수 있습니다.
• 학습용으로도 훌륭하며, CSS 속성의 시각적 효과를 직접 체험해볼 수 있어 직관적인 이해에 큰 도움이 됩니다.

✨ 마무리

이 코드는 JavaScript, CSS, HTML이 어떻게 유기적으로 상호작용하는지를 보여주는 좋은 예시입니다.
직접 커스터마이징해서 자신만의 글래스모피즘 스타일을 만들고, 클립보드 복사까지 깔끔하게 마무리해보세요!

안녕하세요. 

ezweb 김동주 강사입니다.

📌 AI 시대, 다시 주목받는 웹개발의 기본! HTML로 시작하세요

ChatGPT, claude, Gemini 등 AI와 no-code, row-code 도구가 점점 널리 활용되는 지금,

웹의 기초를 정확히 이해한 개발자가 더 강력한 경쟁력을 갖게 됩니다.

웹페이지는 크롬, 사파리, 파이어 폭스와 같은 브라우저에서 표현되며, 브라우저가 인식하는 언어는 HTML, CSS, JavaScript입니다.

그 중에서도 모든 웹페이지의 뼈대를 담당하는 HTML은 가장 먼저 익혀야 할 핵심이 되겠습니다.

본 과정은 "코딩은 처음이라 with 웹 퍼블리싱" 저자가 직접 진행하는 입문 강의로,

완전 초보자도 쉽게 이해할 수 있도록 체계적으로 구성되었습니다.

AI 시대에도 흔들리지 않는 기초 실력을 지금부터 함께 다져보세요.

HTML 기초부터 디자인을 참조하여 웹페이지의 구조를 작성하는 실무 능력까지 제대로 학습해보세요.

아래 초대 링크를 통해 할인혜택도 놓치지 마세요.

https://101creator.page.link/d2kW

https://youtu.be/kC373znnx34

스크롤 애니메이션, 이제 라이브러리 없이도 충분합니다! 🙂

안녕하세요! 이번 영상에서는 라이브러리 없이 오직 JavaScript와 CSS만으로 멋진 스크롤 애니메이션을 구현하는 방법을 소개해드립니다.

GSAP이나 ScrollTrigger 같은 강력한 도구도 좋지만, 간단한 효과라면 굳이 무거운 라이브러리를 쓸 필요 없겠죠? 이 영상에서는 가볍고 심플하게, 하지만 확실한 애니메이션 효과를 만들어보는 방법을 알려드립니다.

📌 영상에서 다루는 내용:

• 사용자가 스크롤할 때 요소가 화면 안에 들어왔는지 감지하는 방법
• 요소가 보일 때 애니메이션을 적용하고, 사라지면 다시 숨기는 로직
• getBoundingClientRect()와 window.innerHeight를 활용한 깔끔한 코드
• 클래스 토글을 이용해 CSS 애니메이션과 연동하는 방식

초보자도 따라하기 쉬운 구조로 구성했으니, HTML/CSS/JS를 조금만 다뤄봤다면 누구나 도전할 수 있어요!
무거운 라이브러리 없이도 충분히 멋진 웹사이트를 만들 수 있다는 걸 보여드릴게요 🙌

인프런 강의 바로가기

초급자를 위해 준비한  [웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

CSS GRID는 언제 사용할까요?

아래와 같은 디자인이라면 여러분은 어떻게 스타일을 작성하시나요?

여러분은 아마도 float이용하거나, flex를 이용하여 요소들을 배치하시겠죠? 디자인과 같이 12컬럼 그리드에 맞춰 요소들이 가로, 세로 정렬이 잘 되어 있는 경우에는 float 이나 flex를 이용하여 배치하는 것이 효율적일 겁니다.

 

위 디자인은 float이나 flex를 이용하여 배치하기 쉽지 않습니다, 그렇다고 모든 요소들을 absolute로 처리하기에는 무리가 있고, 그렇게 처리하면 이후 유지관리도 불편하고 반응형으로 구현한다면 더욱더 유지관리가 힘든 사이트가 되어 버립니다.

위의 예시와 같은 디자인을 참조하여 구현할 때는 아래와 같이 그리드를 설정하고 설정된 그리드에 요소들을 배치하는 CSS GRID 를 활용해야 합니다.

 

디자인 참조 웹사이트 구현 노하우를 학습합니다.

디자인 파악 및 요소 생성

디자인에서 코딩 친화적으로 그룹, 레이어가 정리되어 있는지 확인하고, 스타일이나 변수가 디자인에 반영되었는지를 파악합니다. 필요한 이미지를 상황에 맞춰 저장합니다.

섹션별 HTML 작성

그룹명을 참조하여 HTML의 큰 섹션을 생성하고, 세부 디자인을 참조하여 내용에 성격에 맞는 적절한 html 태그를 작성합니다. 이때 검색엔진 최적화, 웹표준등을 준수하여 작성합니다.

전체 GRID 레이아웃 설정

배치할 요소에 맞춰 가이드를 추가하여 행과 열의 너비를 확인하기 쉽도록 설정합니다.

섹션별 CSS 작성

주석으로 구분하여 섹션별 CSS를 작성합니다.

라이브러리 활용 슬라이드쇼 구현

버튼을 통해 슬라이드를 이동하거나, 자동 슬라이드를 jQuery 라이브러리를 이용하여 구현합니다.

핵심정리 PDF를 제공합니다.

flex의 모든 속성에 대한 설명과 실습예제 파일을 제공합니다.

 

시작 예제를 제공합니다.

01_grid폴더에는 그리드 핵심 속성에 대한 예제 파일을 제공합니다. 강의를 보면서 학습하실수 있습니다.

 

완료 예제를 제공합니다.

완료본 소스를 제공합니다. 수업을 통해 완성한 예제와 비교해보세요.

 

강의 상세 내용 확인하기