-
-
Do it! 프런트엔드 UI 개발 with Vue.js - 웹 사이트 하나를 통째로 만들며 배운다! ㅣ Do it! 시리즈
김윤미 지음 / 이지스퍼블리싱 / 2023년 8월
평점 : 
웹 사이트를 만들어 보자
책을 선택한 이유
프런트엔드는 사용자와 상호작용하는 사용자 인터페이스다.
프런트엔드 개발은 다양한 기술과 역량이 요구된다.
웹 애플리케이션을 효과적으로 만들기 위해
웹 어플리케이션 프레임워크가 등장한다.
Vue.js를 활용한 프런트엔드 제작을 알아보기 위해
"Do it! 프런트엔드 UI 개발 with Vue.js"를 선택한다.
"Do it! 프런트엔드 UI 개발 with Vue.js" 은
첫째마당 HTML과 CSS 그리고 반응형 웹
둘째마당 웹 프로그래밍
셋째마당 SPA 만들기
으로 구성되었다.
첫째마당 HTML과 CSS 그리고 반응형 웹
HTML과 CSS 복습하기 에서는
HTML은 링크로 연결된 문법적 특성이 있는 프로그래밍 언어다
HTML 레이아웃, 콘텐츠 흐름 요소,
사용자 중심의 UI/UX 만들기,
CSS 기초 문법 복습하기, 스타일 적용에 대해 알아본다.
실무에서 유용한 CSS 패턴 알아보기 에서는
박스 모델은 레이아웃을 생성하거나 각각의 요소를
정렬할 때 기본이 도는 개념이다.
표준 CSS 박스 모델, 요소의 크기 계산,
표시 방식, 크기, 위치, 여백, 에니메이션 효과,
변형 효과를 지정하는 CSS 속성을 설명한다.
가상 요소는 특정 요소에 추가하여 스타일을 적용한다.
레이아웃과 반응형 웹 에서는
float 속성은 요소를 다음 요소 위에 떠있게 하면서
요소를 자연스럽게 배치할 수 있다.
flex 속성은 레이아웃을 만드는데 유용한 속성이다.
플렉스 박스 레이아웃, 아이템에 지정하는 정렬 속성을 설명한다.
반응형 웹은 다양한 해상도에 최적화된 웹 페이지를 제공한다.
해상도와 뷰포트 이해, 미디어 쿼리 작성,
미디어 유형과 기능에 대해 설명한다.
PC와 모바일의 크기가 다르므로 넣을 수 있는 내용은 달라진다.
플렉스 속성은 요소를 유연하게 정렬할 수 있다.
플렉스 박스 레이아웃으로 브라우저 크기에 따라
화면 비율을 맞추어 본다.
둘째마당 웹 프로그래밍 에서는
자바스크립트 프로그래밍 에서는
자바스크립트는 객체 기반 스크립트 프로그래밍 언어다.
별도의 서버 없이도 웹 브라우저에서 바로 사용할 수 있다.
자바스스크립트 기본 문법, 제어문, 배열, 반복문을 설명한다.
Node.js는 자바스크리트 런타임으로 서버에서 자바스크립트를
동작할 수 있도록 하는 플랫폼이다.
Node.js 설치법을 설명한다.
Vue.js 프로그래밍 에서는
Vue.js는 사용자 인터페이스를 구축하기 위한
프런트엔드 프레임워크다.
Vue.js 프레임워크 , 라우터 설정,
컴포넌트 만들기, 템플릿 문법, 주요 속성을 설명한다.
UI 프레임워크 는 Vue.js 프로젝트에서 UI를 쉽고 빠르게 구현한다.
부트스트랩 뷰와 뷰-슬릭-캐러셀을 설명한다.
셋째마당 SPA 만들기
프로젝트 환경 설정하기 에서는
프로젝트 실습 환경을 설정하기 위한
비주얼 스튜디오 코드 설치, 프로젝트 폴더를 설명한다.
SPA 기본 골격 만들기 에서는
기본 레이아웃을 상단과 콘텐츠, 하단 영역으로 구성한다.
헤더 영역은 전체 콘텐츠의 머리 역할을 하며
소개와 탐색에 도움을 주는 콘텐츠를 보여준다.
메뉴 데이터, 푸터 영역으로 웹 사이트를 만들고
반응형으로 레이아웃 크기를 조정하는 방법을 실습한다.
로그인/회원가입 대화 상자 만들기 에서는
부트스트랩 뷰는 반응형으로 설계된 UI를 변경해서
원하는 디자인을 쉽게 구현하도록 한다.
부트스트랩 뷰 컴포넌트, 부트스트랩 아이콘을 설명하고,
로그인 대화 상자, 회원가입 대화 상자 만들기를 실습한다.
메인 콘텐츠 만들기 에서는
레이아웃을 설계할 때 콘텐츠를 구분하면
테그, 공통 스타일 작성을 쉽게 할 수 있다.
캐러셀 기능으로 분야별 신간 도서 영역 만들기,
도서 검색, 배너 메뉴, 공지 사항 만들기를 실습한다.
서브 페이지 레이아웃 만들기 에서는
스크롤 해도 메뉴를 고정하기,
서브 페이지 레이아웃 만들기를 실습한다.
도서 소개 페이지 만들기 에서는
도서 목록, 도서 기본 정보,
도서 상세 탭을 만들고,
도서를 선택하면 모든 내용이 선택한 도서정보로
바뀌도록 동적 라우팅으로 구현해 본다.
SPA 완성하기 에서는
구성이 같지만 데이터와 스타일을 다르게
자료실과 동영상 강의 페이지를 만든다.
교재 샘플 페이지 만들기,
회사 소개 페이지 만들기를 실습해 본다.
"Do it! 프런트엔드 UI 개발 with Vue.js" 은
웹 사이트를 만들면서 프런트엔드 실무를 배우도록 한다.
웹 사이트를 만들기 위한 HTML, CSS, 자바스크립트,
Vue.js를 핵심 문법 위주로 설명한다.
개발 환경 설정부터 폴더와 파일을 만들기,
세부 코드 작성 등 웹 사이트 개발의 과정을 소개하므로
웹 사이트를 직접 만들어 보면서 실무에서 사용하는
코드 패턴을 익히고, 실무 능력을 키우도록 한다.
'알아 두면 좋아요’에서는 본문 내용을 보충설명하고,
‘실무 코칭’ 에서는 효과적으로 개발하는 요령을 안내한다.
"Do it! 프런트엔드 UI 개발 with Vue.js"은 프런트엔드 프로젝트를 실습하며,
프런트엔드를 이해하고,,Vue.js로 웹 애플리케이션을 개발하는
방법을 구체적으로 배울 수 있다.
복잡한 이론보다 웹 개발 프로젝트에 필요한 내용을 익히면서
프런트엔드 실무를 빠르게 파악할 수 있도록 한다.
이지스퍼블리싱 홈페이지에서 실습코드를 제공하므로
편리하게 실습할 수 있으며,
"Do it! 프런트엔드 UI 개발 with Vue.js" 내용에서 궁금한 내용을
저자에게 질문할 수 있도록 지원하는 것도 학습에 유용하다.
15차시 학습 진도표를 제공하므로, 학습 목표를 기재하며,
완료 날짜를 계산하는 것도 좋을 것이다.
이지스퍼블리싱 에서
"Do it! 프런트엔드 UI 개발 with Vue.js"를 증정해주셨다.
감사드린다.
#이지스퍼블리싱 #"Doit프런트엔드UI개발witVuejs
#김윤미 #프런트엔드 #Vuejs #SPA #반응형디자인
#데이터바인딩 #라우팅