홈앤서비스 SK BROADBAND

00장 프론트엔드 개발자가 알아두면 좋은 지식 _0.1 웹의 동작 원리 __0.1.1 클라이언트와 서버 __0.1.2 요청과 응답의 흐름 __0.1.3 상태 코드로 결과 확인 _0.2 HTML, CSS, 자바스크립트의 기본 역할 __0.2.1 HTML : 콘텐츠의 구조 담당 __0.2.2 CSS : 콘텐츠의 스타일 담당 __0.2.3 자바스크립트 : 웹페이지의 동작 담당 _0.3 웹 표준과 접근성 __0.3.1 웹 표준이란? __0.3.2 웹 접근성이란? _0.4 브라우저 렌더링과 성능 최적화 __0.4.1 브라우저 렌더링 과정 이해하기 __0.4.2 리플로와 리페인트의 차이 __0.4.3 성능에 영향을 주는 요소들 _0.5 개발 환경과 워크플로 __0.5.1 필수 개발 도구 __0.5.2 최고의 품질을 위한 자동화 시스템 __0.5.3 빌드 도구와 트랜스파일링, 번들링 _0.6 현대 프론트엔드 트렌드와 감각 __0.6.1 반응형 디자인 __0.6.2 UI/UX 설계 원칙 __0.6.3 최신 프론트엔드 키워드 _학습 마무리 _연습문제 [LEVEL 1] 처음 만나는 리액트 01장 리액트 개발 환경 준비하기 _1.1 윈도우에 리액트 설정하기 __1.1.1 Node.js 설치하기 __1.1.2 VSCode 설치하기 _1.2 맥OS에 리액트 설정하기 __1.2.1 Node.js 설치하기 __1.2.2 VSCode 설치하고 프로젝트 폴더 설정하기 _1.3 VSCode 환경 설정하기 __1.3.1 VSCode에서 작업 공간 설정하기 __1.3.2 확장 프로그램 설치하기 __1.3.3 기본 터미널 변경하기 : 윈도우 __1.3.4 코드 입력 시 탭 크기 4에서 2로 변경하기 __1.3.5 자동 저장 켜기 02장 리액트 프로젝트 생성하기 _2.1 비트로 프로젝트 생성하기 _2.2 프로젝트 정리하기 _2.3 리액트 개발을 위한 크롬 확장 프로그램 설치 _학습 마무리 _연습문제 [LEVEL 2] 리액트의 기초 배우기 03장 리액트 컴포넌트 _3.1 리액트 컴포넌트 알아보기 _3.2 컴포넌트 구조 살펴보기 _3.3 JSX란 무엇인가요? _3.4 컴포넌트는 어떻게 표시해야 할까? _3.5 프로젝트 생성 및 HTML로 기초 화면 구성하기 _3.6 리액트 컴포넌트로 교체하기 _3.7 컴포넌트 작성해보기 _학습 마무리 _연습문제 04장 프롭스 _4.1 프롭스 알아보기 _4.2 프롭스 사용해보기 __4.2.1 반복되는 요소에 중복되지 않는 key prop 추가하기 _4.3 프롭스 여러 개 사용해보기 __4.3.1 구조 분해 할당으로 프롭스 여러 개 사용해보기 _학습 마무리 _연습문제 05장 리액트 이벤트 처리 _5.1 리액트 이벤트 처리 알아보기 _5.2 이벤트 핸들러 onClick에 함수 전달하기 _5.3 FrontComp, BackComp에서 무엇이 달랐을까? __5.3.1 태그의 이벤트 처리 시 기본 동작을 차단하는 preventDefault( ) 함수 _학습 마무리 _연습문제 06장 컴포넌트 모듈화 _6.1 컴포넌트 모듈화의 필요성 _6.2 export default로 컴포넌트 내보내기 _6.3 import로 컴포넌트 가져오기 _학습 마무리 _연습문제 07장 상태 _7.1 상태 알아보기 _7.2 상태 사용해보기 _학습 마무리 _연습문제 08장 스타일과 이미지 _8.1 리액트에서 스타일을 적용하는 방법 _8.2 이미지를 삽입하는 방법 _8.3 CSS 파일 작성하기 _8.4 CSS와 이미지 적용하기 _학습 마무리 _연습문제 09장 폼값 전송 _9.1 폼값 전송하기 _학습 마무리 _연습문제 10장 얕은 비교 _10.1 얕은 비교와 깊은 비교 알아보기 _10.2 얕은 비교 실습하기 _학습 마무리 _연습문제 11장 라우터 _11.1 라우터 알아보기 _11.2 프로젝트 생성 및 React Router DOM 설치하기 _11.3 라우팅 처리해보기 _11.4 Outlet 컴포넌트 알아보기 _11.5 Outlet 컴포넌트로 공통 레이아웃으로 사용할 컴포넌트 만들기 _11.6 라우터 훅 알아보기 _11.7 라우터 훅 사용해보기 _학습 마무리 _연습문제 12장 생명주기 _12.1 생명주기 알아보기 _12.2 클래스형 컴포넌트에서의 생명주기 _12.3 함수형 컴포넌트와 useEffect 훅 _12.4 로컬 JSON 파일과 통신하기 _12.5 외부 API 통신하기 __12.5.1 randomuser.me 살펴보기 _학습 마무리 _연습문제 [LEVEL 3] 리액트 훅 13장 성능 최적화를 위한 훅 _13.1 프로젝트 생성하기 _13.2 useRef 훅 알아보기 _13.3 useMemo 훅 알아보기 _13.4 useCallback 훅 알아보기 _13.5 useId 훅 알아보기 _학습 마무리 _연습문제 14장 전역 상태 관리를 위한 훅 _14.1 프로젝트 생성하기 _14.2 useReducer 훅 알아보기 _14.3 useContext 훅 알아보기 _학습 마무리 _연습문제 15장 고급 기능을 위한 확장 훅 _15.1 프로젝트 생성하기 _15.2 useOptimistic 훅 알아보기 _15.3 useActionState 훅 알아보기 _15.4 useFormStatus 훅 알아보기 _학습 마무리 _연습문제 [LEVEL 4] 리액트 에코시스템 16장 리덕스 툴킷 _16.1 리덕스 툴킷 알아보기 _16.2 리덕스 툴킷의 아키텍처 _16.3 프로젝트 생성하기 _16.4 리덕스 툴킷의 기본 사용법 익히기 _16.5 간단한 할 일 관리 앱 만들기 _학습 마무리 _연습문제 17장 주스탠드 _17.1 주스탠드 알아보기 _17.2 주스탠드 기본 사용법 익히기 _17.3 간단한 출결 관리 앱 만들기 __17.3.1 logger 미들웨어 _학습 마무리 _연습문제 18장 파이어베이스 _18.1 파이어베이스 알아보기 _18.2 파이어베이스 시작하기 _18.3 파이어스토어 데이터베이스 사용해보기 __18.3.1 파이어스토어 데이터베이스 만들기 __18.3.2 프로젝트 생성 및 기본 설정 __18.3.3 연결 및 입력 테스트 __18.3.4 회원 정보 관리 게시판 _18.4 리얼타임 데이터베이스 사용해보기 __18.4.1 리얼타임 데이터베이스 만들기 __18.4.2 프로젝트 생성 및 기본 설정하기 __18.4.3 CRUD 기능 제작하기 __18.4.4 리스너 제작하기 __18.4.5 실시간 채팅 만들기 _18.5 스토리지 사용해보기 __18.5.1 스토리지 만들기 __18.5.2 프로젝트 생성 및 기본 설정하기 __18.5.3 파일 업로드 기능 구현하기 __18.5.4 파일 목록 및 삭제 기능 구현하기 _학습 마무리 _연습문제 [LEVEL 5] 리액트 프로젝트 19장 게시판 제작 1(객체형 배열 사용) _19.1 프로젝트 생성 후 게시판 기본 화면 만들기 __19.1.1 게시판 기본 화면 HTML로 만들기 __19.1.2 게시판 기본 화면 컴포넌트로 제작하기 __19.1.3 제작한 컴포넌트 App 컴포넌트에 반영하기 _19.2 게시글 목록 표현하기 __19.2.1 App 컴포넌트 수정하기 __19.2.2 ArticleList 컴포넌트 수정하기 _19.3 화면 전환하기 __19.3.1 App 컴포넌트 구조 살펴보고 수정하기 __19.3.2 NavList, NavView 컴포넌트 수정하기 _19.4 작성 기능 추가하기 _19.5 열람 기능 추가하기 _19.6 삭제 기능 추가하기 _19.7 수정 기능 추가하기 __19.7.1 수정 1단계 : 수정 폼에 내용 불러오기 __19.7.2 수정 2단계 : 수정 처리하기 _학습 마무리 _연습문제 20장 게시판 제작 2(REST API 사용) _20.1 프로젝트 생성하기 __20.1.1 애플리케이션의 골격 만들기 _20.2 API Key 발급하기 _20.3 목록 기능 구현하기 _20.4 작성 기능 구현하기 _20.5 열람 기능 구현하기 _20.6 수정 기능 구현하기 _20.7 삭제 기능 구현하기 _학습 마무리 _연습문제 21장 모달창 이용한 댓글 구현하기 with 로컬스토리지 _21.1 프로젝트 생성하기 _21.2 기본 UI 작성 및 기능 구현하기 _학습 마무리 _연습문제 22장 스코어보드 만들기 with 주스탠드 _22.1 프로젝트 생성하기 _22.2 기본 UI 생성 및 기능 구현하기 _학습 마무리 _연습문제 23장 카카오톡 만들기 with 파이어베이스 _23.1 프로젝트 생성 _23.2 기본 UI 작성 및 기능 구현하기 _학습 마무리 _연습문제 24장 깃허브 페이지로 배포하기 _24.1 리액트 애플리케이션 배포본 만들기 _24.2 웹 서버로 배포 시 라우팅 오류 해결하기 _24.3 깃허브 페이지로 배포하기 _학습 마무리 _연습문제 ※ PDF 별책 보너스 부록 《리액트를 위한 자바스크립트 핵심 문법 익히기》 제공