반응형
프론트엔드 개발 학습 시리즈
1. 프론트엔드 개발 개요
- 프론트엔드 개발이란?
- 프론트엔드 개발의 정의와 역할
- 프론트엔드와 백엔드의 차이
- 프론트엔드와 백엔드의 주요 차이점과 협업 방식
- 프론트엔드 아키텍처
- SPA, MPA, PWA의 개념과 차이점
2. HTML 기초와 고급
- HTML 기본 문법
- HTML 문서 구조, 태그와 속성
- 시맨틱 HTML
- header, footer, nav, section, article 등
- 폼과 입력 요소
- 폼 태그, 입력 필드, 버튼, 폼 속성
- 멀티미디어 요소
- 오디오, 비디오, 캔버스 요소
3. CSS 기초와 고급
- CSS 기본 문법
- 선택자, 속성-값 쌍, 외부 스타일시트
- 레이아웃 기초
- 박스 모델, 여백, 패딩, 테두리, 너비와 높이
- 레이아웃 고급
- Flexbox, Grid 레이아웃
- 반응형 디자인
- 미디어 쿼리, 반응형 이미지와 비디오
4. JavaScript 기초와 고급
- JavaScript 기본 문법
- 변수, 데이터 타입, 연산자, 조건문, 반복문
- 함수와 객체
- 함수 선언과 호출, 객체 리터럴, 메서드
- 비동기 프로그래밍
- 콜백, 프로미스, async/await
- ES6+ 기능
- 화살표 함수, 템플릿 리터럴, 디스트럭처링, 모듈
5. DOM 조작과 이벤트
- DOM(Document Object Model) 소개
- DOM의 개념, 요소 선택, 노드 탐색
- DOM 조작 기초
- 요소 생성, 추가, 삭제, 속성 변경
- 이벤트 처리 기초
- 이벤트의 개념, 이벤트 리스너 등록, 기본 이벤트 처리
- 이벤트 처리 심화
- 이벤트 전파, 이벤트 위임, 커스텀 이벤트
6. 프레임워크와 라이브러리
- React 기초
- React 개요, 컴포넌트, 상태 관리, props
- Vue.js 기초
- Vue.js 개요, Vue 인스턴스, 템플릿 문법, 데이터 바인딩
- Angular 기초
- Angular 개요, 모듈과 컴포넌트, 데이터 바인딩, 의존성 주입
- 프레임워크 선택 가이드
- 프로젝트에 적합한 프레임워크 선택 방법
7. 상태 관리
- React 상태 관리
- Redux, Context API
- Vuex 상태 관리
- Vuex의 개념과 사용법
- Angular 상태 관리
- NgRx의 개념과 사용법
8. 라우팅
- React Router
- React Router의 설치와 설정, 기본 사용법
- Vue Router
- Vue Router의 설치와 설정, 기본 사용법
- Angular Router
- Angular Router의 설치와 설정, 기본 사용법
9. 테스트
- 단위 테스트
- Jest, Mocha를 사용한 단위 테스트
- 통합 테스트
- Cypress, Puppeteer를 사용한 통합 테스트
- E2E 테스트
- End-to-End 테스트의 개념과 도구 사용법
10. 빌드 도구와 최적화
- 웹팩(Webpack)
- Webpack의 기본 개념과 설정
- 바벨(Babel)
- Babel의 개념과 설정
- 코드 스플리팅과 트리 쉐이킹
- 코드 스플리팅, 트리 쉐이킹 개념과 적용 방법
11. 성능 최적화
- 렌더링 최적화
- Virtual DOM, 렌더링 최적화 기법
- 네트워크 최적화
- Lazy Loading, 코드 분할, 서비스 워커
- 메모리 최적화
- 메모리 누수 방지, 효율적인 데이터 구조 사용
12. 웹 보안
- 웹 보안 기본 원칙
- OWASP Top 10
- 크로스 사이트 스크립팅(XSS) 방지
- 데이터 인코딩과 검증
- 크로스 사이트 요청 위조(CSRF) 방지
- CSRF 토큰 사용
- 기타 보안 기법
- Content Security Policy(CSP), HTTPS 사용
13. 실전 프로젝트
- 프로젝트 기획
- 요구사항 분석, 기술 스택 선택
- 프로젝트 설계
- 데이터베이스 설계, API 설계
- 프로젝트 구현
- 프로젝트 구현 및 테스트
- 프로젝트 배포
- 실제 서버에 배포, 모니터링 및 유지 보수
반응형