문의를 보내주셔서 감사합니다! 팀원이 곧 연락드리겠습니다.
예약을 보내주셔서 감사합니다! 저희 팀 멤버 중 한 분이 곧 연락드리겠습니다.
코스 개요
구조와 스타일 (HTML & CSS)
소개 및 웹 기술
- 웹의 작동 원리: 클라이언트-서버 모델을 쉽게 설명합니다.
- 브라우저는 하나의 컴퓨터다: 코드를 해석하는 과정
- HTML: 웹의 골격. 구조, 계층, 시맨틱 태그
- CSS: 웹의 스타일링. 색상, 글꼴, 박스 모델
- 실습 1: 컨테이너 환경 설정 및 정적 '자기소개' 프로필 페이지 구축
HTML & CSS 활용 (심층 학습)
- HTML: 목록, 링크, 이미지, 폼 (사용자 상호작용에 필수)
- CSS: 텍스트 및 배경 스타일링. 현대 레이아웃을 위한 Flexbox 및 Grid 소개
- 반응형 디자인: 모바일과 데스크톱 모두에서 작동하도록 사이트 구성
- 실습 2: 전문적인 스타일링과 모바일 반응형을 통해 정적 페이지 다듬기
DOM (Document Object Model) 활용
- 개념: 코드가 시각적 페이지와 어떻게 연관되는지 이해
- 요소 선택: 웹 페이지의 특정 부분을 타겟팅하는 방법
- 조작: 코드를 통해 콘텐츠와 속성 변경
- 실습 3: 코드를 통해 정적 페이지 요소 수정 (예: 제목이나 이미지 동적 변경)
두뇌 (JavaScript)
JavaScript 프로그래밍 (기초)
- 변수 및 데이터 타입: 정보 저장 (텍스트, 숫자, 참/거짓)
- 논리: 조건문 (If/else) (의사 결정)
- 루프: 작업을 효율적으로 반복
- 함수: 재사용 가능한 코드 블록 생성 (레시피 개념)
- 실습 4: JavaScript를 활용하여 기본 계산기 또는 논리 게임 만들기
상호 작용 및 이벤트
- 이벤트 리스너: 클릭, 키 입력, 페이지 로딩에 대한 반응
- 폼 처리: 사용자 입력 유효성 검사 (예: 이메일 주소가 유효한지 확인)
- DOM 조작: 요소의 동적 추가 및 제거 (예: 할 일 목록)
- 실습 5: 계산기를 UI 피드백을 갖춘 상호 작용형 웹 앱으로 변환
데이터 가져오기 (API)
- 개념: 웹 앱이 다른 서버와 통신하는 방법 (예: 날씨 데이터나 주가 정보 가져오기)
- JSON: 데이터 교환의 언어
- 비동기 프로그래밍: 브라우저가 멈추지 않고 '기다린 후 실행'하는 논리 이해
- 실습 6: 페이지에 표시하기 위해 공개 API에서 실시간 데이터를 pull하는 기능 구축
전문 도구 모음 (프레임워크 및 마무 프로젝트)
프로그래밍 프레임워크 사용
- 왜 프레임워크를 사용해야 할까?: (React, Vue 또는 Svelte 개념)
- 컴포넌트: 모듈식이고 재사용 가능한 UI 요소 구축
- 상태 관리: 변경되는 데이터를 추적
- 생태계: 패키지, 의존성, 버전 관리 (Git) 이해
- 실습 7: 컴포넌트 기반 접근법을 사용하여 간단한 기능 리팩토링
마무리 프로젝트: 웹 애플리케이션 구축
- 요건: 참가자는 기능적인 웹 애플리케이션(예: 예산 추적기, 제품 대시보드 또는 포트폴리오 사이트)을 구축해야 합니다.
- 계획: '사용자 스토리' 및 기술적 범위 정의
- 구현: HTML/CSS 구조와 JavaScript 논리 결합
- 디버깅: 오류 메시지 읽기 및 깨진 논리 수정 방법
- 발표: 최종 애플리케이션을 그룹에게 발표
마무리 발언 및 다음 단계
- 기술 어휘: 엔지니어와 소통하기 위한 치트 시트 (API, 백엔드, 프론트엔드, Git, 배포)
- 자원 가이드: 더 배우기 좋은 곳 (문서, StackOverflow, MDN)
- 경력 연계: 이 기술이 제품 관리 및 디자인 역할에 어떻게 도움이 되는지
- 질문 및 답변, 과정 평가.
요건
- 기본 컴퓨터 사용 능력
- 사전 프로그래밍 경험은 필요하지 않습니다
21 시간
회원 평가 (3)
AI 공격과 보안 테스트를 시작하고 적극적으로 활용하기 위한 도구를 배우는过程을 매우 Enjoy 했습니다. 처음에는 없던 많은 지식을 얻었고, 과정이 제가 바란 대로 충족했습니다. 교육 중 가장 인상 깊었던 부분은 Comet Browser였으며, 그것이 할 수 있는 것에 놀랐습니다. 더 깊이 살펴보게 될 것입니다. 전반적으로 매우 좋은 과정이었고, 모든 OWASP GenAI 상위 10을 배우는 것을 Enjoy 했습니다.
Patrick Collins - Optum
코스 - OWASP GenAI Security
기계 번역됨
실습, 실습 문제, 대면 지원 및 질문.
Jose Paulos - INESC TEC
코스 - Tailwind CSS
기계 번역됨
기술적 교훈마다 여러 실습 문제가 포함되어 있어 개념을 확실히 이해할 수 있었습니다.
Andrei-Calin Bajea
코스 - OWASP Top 10 2025
기계 번역됨
