Vue 3와 스프링 부트로 시작하는 웹 개발 철저 입문

최진(africalibrary21@gmail.com)

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

• ▣ 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.3 Vue 3에서 달라진 점
• __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.1 HTTP 쿠키란?
• __2.3.2 웹 스토리지란?
• 2.4 프런트엔드 개발을 도와주는 도구
• __2.4.1 자바스크립트 런타임, Node.js
• __2.4.2 모듈을 관리하는 매니저, NPM
• __2.4.3 HTTP 요청 라이브러리, Axios
• __2.4.4 웹 UI 프레임워크, 부트스트랩
• __2.4.5 CSS의 한계를 극복하기 위한 전처리기, Sass
• 2.5 정리
•  
• ▣ 03장: 개발 환경 구축
• 3.1 IntelliJ IDEA 설치
• __3.1.1 윈도우에 설치하기
• __3.1.2 macOS에 설치하기
• __3.1.3 테마 변경하기
• 3.2 구글 크롬 설치
• __3.2.1 윈도우에 설치하기
• __3.2.2 macOS에 설치하기
• 3.3 Node.js 설치
• __3.3.1 윈도우에 설치하기
• __3.3.2 macOS에 설치하기
• 3.4 정리
•  
• ▣ 04장: Vue 3 시작을 위한 기초 학습
• 4.1 Vue 3 시작하기
• __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장: Vue 3를 이용한 프런트엔드 개발
• 5.1 메모 애플리케이션 개발 계획
• 5.2 메모 애플리케이션 프로젝트 생성
• 5.3 개발 환경 설정
• __5.3.1 부트스트랩 설정
• __5.3.2 Sass 설정
• __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.2 SQL이란?
• __6.2.1 SELECT
• __6.2.2 INSERT
• __6.2.3 UPDATE
• __6.2.4 DELETE
• 6.3 MVC란?
• 6.4 HTTP의 무상태와 세션
• __6.4.1 이상한 대화
• __6.4.2 HTTP 세션이란?
• __6.4.3 위키월드 직원의 업무
• __6.4.4 서버의 업무
• __6.4.5 HTTP 세션의 한계
• 6.5 토큰이란?
• __6.5.1 토큰이란?
• __6.5.2 JWT란?
• __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.1 MariaDB 설치
• __8.1.1 윈도우에 설치하기
• __8.1.2 macOS에 설치하기
• 8.2 JDK 설치
• __8.2.1 윈도우에 설치하기
• __8.2.2 macOS에 설치하기
• 8.3 스프링 부트 백엔드 프로젝트 생성
• 8.4 Vite를 활용한 프런트엔드 프로젝트 생성
• 8.5 데이터베이스 설정
• 8.6 모듈 세팅
• 8.7 이미지 세팅
• 8.8 파일 및 코드 정리
• 8.9 정리
•  
• ▣ 09장: 갤러리 쇼핑몰의 백엔드 개발
• 9.1 사전 작업
• __9.1.1 패키지 추가
• __9.1.2 HTTP 유틸리티 추가
• 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.5 Axios 인터셉터란?
• __11.1.6 Axios 인터셉터가 적용된 라이브러리 구현
• __11.1.7 Axios 인터셉터 기능 확인
• 11.2 토큰 적용을 통한 로그인 기능 개선
• __11.2.1 현재 로그인 기능의 문제
• __11.2.2 의존성 모듈 설치
• __11.2.3 HTTP 유틸리티 메서드 추가
• __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 프런트엔드 프로젝트 빌드
• __12.1.2 프런트엔드 빌드 파일 이동
• __12.1.3 프런트엔드 빌드 파일 이동 자동화
• __12.1.4 백엔드 코드 개선 및 빌드
• __12.1.5 백엔드 이슈 확인 및 해결
• __12.1.6 백엔드 프로젝트 빌드
• 12.2 AWS EC2 생성
• __12.2.1 계정 만들기
• __12.2.2 인스턴스 생성
• __12.2.3 SFTP 접속
• __12.2.4 SSH 접속
• 12.3 서비스 환경 구축
• __12.3.1 JDK 설치
• __12.3.2 MariaDB 설치
• __12.3.3 NGINX 웹 서버 설치
• 12.4 원격 데이터베이스 접속
• __12.4.1 데이터 소스 추가
• __12.4.2 AWS 방화벽 규칙 추가
• __12.4.3 MariaDB 설정 변경
• __12.4.4 원격 접속 테스트
• __12.4.5 원격 데이터베이스에 테이블 생성
• 12.5 애플리케이션 배포
• __12.5.1 디렉터리 생성
• __12.5.2 빌드 파일 업로드
• __12.5.3 빌드 파일 실행
• __12.5.4 리버스 프락시
• 12.6 정리
•  
• ▣ 부록: 실습용 프로그램 설치 및 기초 사용법
• A.1 IntelliJ IDEA 커뮤니티 에디션
• __A.1.1 윈도우에 설치하기
• __A.1.2 macOS에 설치하기
• __A.1.3 테마 변경하기
• __A.1.4 스프링 부트 프로젝트 실행하기
• A.2 비주얼 스튜디오 코드
• __A.2.1 윈도우에 설치하기
• __A.2.2 macOS에 설치하기
• __A.2.3 Vue 프로젝트 실행하기
• A.3 DBeaver
• __A.3.1 윈도우에 설치하기
• __A.3.2 macOS에 설치하기
• __A.3.3 데이터베이스 서버에서 쿼리 실행하기
• A.4 PuTTY
• __A.4.1 윈도우에 설치하기
• __A.4.2 PuTTY로 AWS EC2 서버에 접속하기
• __A.4.3 macOS의 터미널로 AWS EC2 서버에 접속하기
• A.5 FileZilla
• __A.5.1 윈도우에 설치하기
• __A.5.2 macOS에 설치하기
• __A.5.3 AWS EC2 서버에 빌드 파일 업로드하기
•  
• ▣ 참고자료
• 도서
• 웹사이트

• GitHub 저장소: https://github.com/wikibook/vue3-springboot
• ZIP 형식으로 다운로드: https://github.com/wikibook/vue3-springboot/archive/refs/heads/main.zip

• 11쪽, 페이지 상단 첫 번째 참고란의 1~4번째 줄

  대표적인 단점은 구글, 네이버 등의 검색 엔진이 싱글 페이지 애플리케이션으로 만들어진 웹사이트는 크롤링(crawling)하지 않을 수 있다는 것입니다. 이러한 문제가 발생한 이유는 애플리케이션이 최초 페이지 로딩 시에 데이터를 출력하지 않고, 자바스크립트를 통해 데이터를 요청하고 응답받은 후에 출력하기 때문에 크롤링 시점과 차이가 날 수 있다는 것입니다.

  ==>

  대표적인 단점은 구글이나 네이버 같은 검색 엔진이 싱글 페이지 애플리케이션으로 만든 웹사이트를 제대로 크롤링(crawling)하지 못할 수 있다는 점입니다. 이는 애플리케이션이 처음 로딩될 때 바로 데이터를 표시하지 않고, 자바스크립트를 통해 데이터를 요청한 후 응답을 받아 화면에 출력하기 때문입니다. 이 과정에서 크롤링 시점과 데이터 로딩 시점이 어긋나 크롤링이 원활하게 이뤄지지 않을 수 있습니다.

• 23~47쪽, 페이지 상단 장 제목

  02 _ 개발하기 전에 알아야 할

  ==>

  02 _ 개발하기 전에 알아야 할 프런트엔드 기초 지식

• 49~67쪽, 페이지 상단 장 제목

  03 _ 개발 환경

  ==>

  03 _ 개발 환경 구축

• 71~145쪽, 페이지 상단 장 제목

  04 _ Vue 3 시작을 위한

  ==>

  04 _ Vue 3 시작을 위한 기초 학습

• 82쪽, 그림 4.24를 다음 그림으로 교체

  

• 147~185쪽, 페이지 상단 장 제목

  05 _ Vue 3를 이용한

  ==>

  05 _ Vue 3를 이용한 프런트엔드 개발

• 172쪽, 참고란의 본문 5번째 줄

  단따옴표(")나 쌍따옴표(') 대신

  ==>

  큰따옴표(")나 작은따옴표(') 대신

• 187~207쪽, 페이지 상단 장 제목

  06 _ 개발하기 전에 알아야 할

  ==>

  06 _ 개발하기 전에 알아야 할 백엔드 기초 지식

• 211~247쪽, 페이지 상단 장 제목

  07 _ 백엔드 개발을 위한

  ==>

  07 _ 백엔드 개발을 위한 스프링 부트

• 212쪽, 그림 7.6의 캡션

  그림 7.6 스프링 프레임워크 런타임

  ==>

  그림 7.6 스프링 프레임워크 런타임에서 동작하는 모듈

• 249~285쪽, 페이지 상단 장 제목

  08 _ 갤러리 쇼핑몰 제작을 위한

  ==>

  08 _ 갤러리 쇼핑몰 제작을 위한 개발 환경 구축

• 327쪽, 본문 2번째 줄

  ① join 메서드: 회원가입을 처리하는 메서드입니다. 매개변수로 HTTP 요청 객체와 HTTP 응답 객체를 받습니다. 리턴 타입으로 문자열을 지정합니다.

  ==>

  ① join 메서드: 회원가입을 처리하는 메서드입니다. 매개변수로 회원가입 데이터 요청 DTO를 받습니다.

• 327쪽, 본문 4번째 줄

  ② login 메서드: 로그인을 처리하는 메서드입니다. 매개변수로 HTTP 요청 객체와 HTTP 응답 객체, 회원 아이디를 받습니다. 리턴 타입으로 문자열을 지정합니다.

  ==>

  ② login 메서드: 로그인을 처리하는 메서드입니다. 매개변수로 로그인 요청 DTO, HTTP 요청 객체, HTTP 응답 객체를 받습니다. 리턴 타입으로 문자열을 지정합니다.

• 588쪽, 예제 12.5의 라벨

  codes/ch11/12.5.conf

  ==>

  codes/ch12/12.5.conf