Vue 3와 스프링 부트로 시작하는 웹 개발 철저 입문 (스프링 부트와 Vue 3를 활용한 실습 중심의 풀스택 웹 애플리케이션 개발 | 반양장)

최진

아프리카에도서관을짓는것이꿈인개발자입니다.유튜브의〈아프리카도서관〉채널을통해프로그래밍과관련된내용을공유하고있습니다.현재오마이컴퍼니에서플랫폼개발팀팀장으로근무하고있습니다.

▣01장:Vue소개
1.1프런트엔드와백엔드
__1.1.1나홀로서비스방식
__1.1.2따로또같이서비스방식
__1.1.3프런트엔드와백엔드
1.2프런트엔드의역사
__1.2.1더빠르게,구글크롬
__1.2.2렌더링방식의변화
__1.2.3싱글페이지애플리케이션의등장
__1.2.4프런트엔드의독립
__1.2.5구글의Angular
__1.2.6페이스북의React
__1.2.7에반유의Vue
1.3Vue3에서달라진점
__1.3.1향상된성능
__1.3.2컴포지션API탑재
__1.3.3타입스크립트지원
__1.3.4멀티루트태그입력가능
__1.3.5스크립트태그와템플릿블록의위치변경
__1.3.6인터넷익스플로러지원중단
__1.3.7프런트엔드도구Vite활용
1.4정리

▣02장:개발하기전에알아야할프런트엔드기초지식
2.1인터넷,그리고서버와클라이언트
__2.1.1파일을주고받는시스템,인터넷
__2.1.2하드웨어관점으로보는서버와클라이언트
__2.1.3소프트웨어관점으로보는서버와클라이언트
2.2서버와통신하기
__2.2.1서버의주소,IP주소
__2.2.2주소를더세부적으로,포트
__2.2.3웹세상의통신규칙,HTTP
__2.2.4동기와비동기
2.3웹브라우저에데이터저장하기
__2.3.1HTTP쿠키란?
__2.3.2웹스토리지란?
2.4프런트엔드개발을도와주는도구
__2.4.1자바스크립트런타임,Node.js
__2.4.2모듈을관리하는매니저,NPM
__2.4.3HTTP요청라이브러리,Axios
__2.4.4웹UI프레임워크,부트스트랩
__2.4.5CSS의한계를극복하기위한전처리기,Sass
2.5정리

▣03장:개발환경구축
3.1IntelliJIDEA설치
__3.1.1윈도우에설치하기
__3.1.2macOS에설치하기
__3.1.3테마변경하기
3.2구글크롬설치
__3.2.1윈도우에설치하기
__3.2.2macOS에설치하기
3.3Node.js설치
__3.3.1윈도우에설치하기
__3.3.2macOS에설치하기
3.4정리

▣04장:Vue3시작을위한기초학습
4.1Vue3시작하기
__4.1.1프로젝트생성
__4.1.2첫번째애플리케이션
4.2컴포넌트
__4.2.1컴포넌트란?
__4.2.2앞바퀴휠컴포넌트장착
__4.2.3뒷바퀴휠컴포넌트장착
__4.2.4타이어컴포넌트장착
__4.2.5타이어컴포넌트커스터마이징
4.3기초템플릿문법
__4.3.1텍스트출력
__4.3.2속성반영
__4.3.3클래스반영
__4.3.4스타일반영
__4.3.5조건디렉티브
__4.3.6반복디렉티브
__4.3.7이벤트디렉티브
4.4반응형상태
4.5컴퓨티드
4.6데이터바인딩
4.7라이프사이클훅
__4.7.1생성훅
__4.7.2마운트훅
__4.7.3업데이트훅
__4.7.4마운트해제훅
4.8라우터
4.9스토어
__4.9.1상태관리라이브러리,Pinia
__4.9.2스토어의실질적인활용예시
4.10정리

▣05장:Vue3를이용한프런트엔드개발
5.1메모애플리케이션개발계획
5.2메모애플리케이션프로젝트생성
5.3개발환경설정
__5.3.1부트스트랩설정
__5.3.2Sass설정
__5.3.3코드및파일정리
5.4스토리지서비스구현
__5.4.1파일생성및생성자구현
__5.4.2내부메서드구현
__5.4.3외부메서드구현
__5.4.4샘플데이터설정
__5.4.5전체코드
5.5메모컴포넌트구현
__5.5.1메모레이아웃구현
__5.5.2메모목록조회구현
__5.5.3메모삽입구현
__5.5.4메모상세조회및수정구현
__5.5.5메모삭제구현
5.6정리

▣06장:개발하기전에알아야할백엔드기초지식
6.1서버의종류
__6.1.1웹서버
__6.1.2웹애플리케이션서버
__6.1.3데이터베이스서버
6.2SQL이란?
__6.2.1SELECT
__6.2.2INSERT
__6.2.3UPDATE
__6.2.4DELETE
6.3MVC란?
6.4HTTP의무상태와세션
__6.4.1이상한대화
__6.4.2HTTP세션이란?
__6.4.3위키월드직원의업무
__6.4.4서버의업무
__6.4.5HTTP세션의한계
6.5토큰이란?
__6.5.1토큰이란?
__6.5.2JWT란?
__6.5.3스니핑
__6.5.4유효시간
__6.5.5리프레시토큰
6.6정리

▣07장:백엔드개발을위한스프링부트
7.1스프링프레임워크란?
__7.1.1스프링프레임워크의탄생
__7.1.2스프링MVC
__7.1.3스프링부트
7.2스프링컨테이너란?
__7.2.1의존성이란?
__7.2.2의존성주입이란?
__7.2.3의존성주입예제
__7.2.4스프링컨테이너
7.3스프링프레임워크의주요애너테이션
__7.3.1@Controller
__7.3.2@RestController
__7.3.3@RequestMapping
__7.3.4@GetMapping
__7.3.5@PostMapping
__7.3.6@PutMapping
__7.3.7@RequestBody
__7.3.8@DeleteMapping
__7.3.9@Service
__7.3.10@Component
__7.3.11@Transactional
7.4스프링프레임워크의주변도구
__7.4.1데이터베이스를객체처럼,스프링데이터JPA
__7.4.2모듈을관리하는매니저,그레이들
__7.4.3장황한코드를직관적으로,롬복
7.5정리

▣08장:갤러리쇼핑몰제작을위한개발환경구축
8.1MariaDB설치
__8.1.1윈도우에설치하기
__8.1.2macOS에설치하기
8.2JDK설치
__8.2.1윈도우에설치하기
__8.2.2macOS에설치하기
8.3스프링부트백엔드프로젝트생성
8.4Vite를활용한프런트엔드프로젝트생성
8.5데이터베이스설정
8.6모듈세팅
8.7이미지세팅
8.8파일및코드정리
8.9정리

▣09장:갤러리쇼핑몰의백엔드개발
9.1사전작업
__9.1.1패키지추가
__9.1.2HTTP유틸리티추가
9.2상품API구현
__9.2.1상품테이블생성
__9.2.2상품엔티티작성
__9.2.3상품리포지터리작성
__9.2.4상품서비스구현
__9.2.5상품컨트롤러구현
9.3계정API구현
__9.3.1회원테이블생성
__9.3.2회원엔티티작성
__9.3.3회원리포지터리작성
__9.3.4회원서비스구현
__9.3.5계정컨트롤러구현
9.4장바구니API구현
__9.4.1장바구니테이블생성
__9.4.2장바구니엔티티작성
__9.4.3장바구니리포지터리작성
__9.4.4장바구니서비스구현
__9.4.5장바구니컨트롤러구현
9.5주문API구현
__9.5.1주문테이블생성
__9.5.2주문엔티티작성
__9.5.3주문리포지터리작성
__9.5.4주문서비스구현
__9.5.5주문컨트롤러구현
9.6정리

▣10장:갤러리쇼핑몰의프런트엔드개발
10.1레이아웃구현
__10.1.1헤더컴포넌트구현
__10.1.2푸터컴포넌트구현
__10.1.3메인영역구현
10.2계정기능구현
__10.2.1계정서비스구현
__10.2.2계정스토어구현
__10.2.3회원가입페이지구현
__10.2.4로그인페이지구현
10.3상품기능구현
__10.3.1상품카드컴포넌트구현
__10.3.2상품서비스구현
__10.3.3상품목록페이지구현
10.4장바구니기능구현
__10.4.1장바구니서비스구현
__10.4.2장바구니기능적용
__10.4.3장바구니페이지구현
10.5주문기능구현
__10.5.1주문서비스구현
__10.5.2주문입력페이지구현
__10.5.3주문목록페이지구현
__10.5.4주문상세조회페이지구현
10.6정리

▣11장:갤러리쇼핑몰애플리케이션의기능개선
11.1인터셉터적용을통한접근제어개선
__11.1.1권한없이API에접근할때나타나는문제
__11.1.2스프링인터셉터란?
__11.1.3스프링인터셉터적용
__11.1.4스프링인터셉터기능확인
__11.1.5Axios인터셉터란?
__11.1.6Axios인터셉터가적용된라이브러리구현
__11.1.7Axios인터셉터기능확인
11.2토큰적용을통한로그인기능개선
__11.2.1현재로그인기능의문제
__11.2.2의존성모듈설치
__11.2.3HTTP유틸리티메서드추가
__11.2.4계정상수추가
__11.2.5토큰차단기능구현
__11.2.6토큰기능구현
__11.2.7토큰계정헬퍼구현
__11.2.8계정컨트롤러수정
__11.2.9프런트엔드에토큰적용
__11.2.10로그인기능확인
11.3암호화및해싱을통한보안개선
__11.3.1암호화란?
__11.3.2암호화적용
__11.3.3해싱이란?
__11.3.4해싱적용
11.4유효성검증을통한품질개선
__11.4.1로그인유효성검증
__11.4.2회원가입유효성검증
__11.4.3주문입력유효성검증
__11.4.4장바구니담기유효성검증
11.5페이지네이션을통한편의성개선
__11.5.1주문데이터입력
__11.5.2백엔드코드수정
__11.5.3프런트엔드코드수정
__11.5.4페이지네이션기능확인
11.6정리

▣12장:갤러리쇼핑몰애플리케이션을AWS에배포하기
12.1프로젝트빌드
__12.1.1프런트엔드프로