|
저는 이 책의 장점을 세가지로 요약하자면 1. 깔끔한 디자인, 2. 알아보기 쉬운 코드와 그림, 3. 기초부터 훑고 지나가는 커리큘럼이 있을 것 같습니다
1. 깔끔한 디자인 일단 책을 훑어보면서 가장 빨리 느낀 것은 '디자인이 깔끔하다'였습니다. 개발자 서적 같은 경우에는 다른 책 분류보다 디자인이 촌스럽거나 가독성이 안 좋거나 심지어 흑백이여서 아예 강조가 되는 것이 표시 되지 않는 경우가 있는데 이 책의 경우에는 표와 여러 상자들이 깔끔하고 색상을 이용하여 강조 될 부분도 잘 표시 되어 있는 것 같아서 첫 번째로 저는 이게 좋았습니다.
2. 알아보기 쉬운 코드와 그림 프런트엔드 개발의 경우에는 실제로 화면에 어떻게 표시가 되는지 아는 것이 중요합니다. 직접 해보면서 부딪히는 것도 물론 나쁘지 않지만 처음에 배울 때 부터 어떻게 표시가 되는지 알면 더욱 좋을 것입니다. 그런 면에서 이 책은 처음부터 어떻게 표시 되는지 정확하게 아는 데에 좋은 책입니다. 그림을 통하여 어떤 코드가 어떻게 배치가 되고 나타나게 되는지 알 수 있는 책이고 코드 또한 색상을 통하여 친절하게 설명이 잘 되어있고 '알아두면 좋아요'라는 코너를 통하여 더욱 많이 알아갈 수 있는 책입니다.
3. 처음부터 간단하게 훑고 지나가는 커리큘럼 부끄럽게도 저는 html/css를 안 한지가 꽤 되었고 이 책을 통하여 다시 시작 하려던 참이었습니다. html/css를 안 한지는 약 2년이 다 되어가는데 이 책의 초반에는 html/css/js 기초들이 훑어보는 식으로 담겨있어 기억을 상기하기에 좋은 책이었습니다. 기억을 상기 하는 것 뿐만 아니라 그림을 통하여 그냥 해보면서 부딪혀가면서 정확한 이유를 모른채로 배웠던 것들 또한 정확하게 알 수 있게 잘 설명을 해준 책이었어서 전 개인적으로 좋았습니다.
[서평단으로 선정되어 도서 제공 받았습니다] |
|
3월에 새롭게 프로젝트를 시작했다. 프런트엔드는 Vue.js이고 백엔드는 Spring Boot이다. 이전에 개인적으로 서적을 참고하면서 Vue.js를 학습해 두었지만, 이렇게 프로젝트에서 Vue.js를 사용하는 것은 처음이다. 새로운 기술을 하나씩 배워나가는 것은 항상 재미있기도 하지만 때로는 많이 피곤하다. 힘들게 배워두고 몇 번 사용해 보고 사라져간 기술들이 많다. 이 책에서 기본으로 제공되는 프로젝트 파일로 작업을 시작한다. 책이 끝날 시점에 온라인 서점 사이트가 완성된다. 웹 사이트를 만드는 방법과 기술에 대해 심도 있게 다룬다. 폴더와 파일을 만들고 어떻게 화면이 구성해 나가는지를 단계별로 배운다. CSS를 사용하여 화면을 다루는 기술은 실무에서 작업하는 것과 같은 수준과 같다. 저자가 실무에서 작업한 결과물을 그대로 갖고 와서 설명해 주는 것처럼 생각된다. |
|
웹사이트 하나를 통째로 만들며 배운다! Do it! 프런트엔드 UI개발 with Vue.js feat. 반응형 디자인, 데이터 바인딩, 라우팅까지 싱글 페이지 애플리케이션(SPA) 만들기 목차는 1. HTML과 CSS, 반응형 웹 2. 프로그래밍 3. SPA 만들기 (웹사이트 만들기) 이렇게 3단계로 구성되어 있다. 처음에는 HTML과 CSS 지식을 가볍게 습득 및 복습하고 두번째는 javascript를 복습하며, Vue.js를 공부한다. 마지막으로 사이트를 전반적으로 구성하는 목차로 이루어져 있다. 우선적으로 해당 도서를 읽는 대상은 당연하게도 초보자일 테니까 기초부터 복습 하고 본 게임에 임하라는 뜻으로 보인다.
슥 훑어 봤는데 Vue.js에 입문하기 좋은 책일 것 같다. 책을 쭉 보면서 느낀 점은 가독성이 되게 좋았다? 라는점. 보통 개발 서적은 빼곡히 적혀 있어서 괜시리 읽기 싫은 부분이 없잖아 있는데 이 책은 그런 느낌이 크게 들지 않았다. Vue js 입문할 때 보면 정말 괜찮은 책일듯?
물론, 기초 html/css/javascript 개념이 있다는 가정이다. |
|
"Do it! 프런트엔드 UI 개발 with Vue.js"는 Vue.js와 부트스트랩 뷰를 활용하여 SPA를 개발하는 방법을 중심으로 다양한 프런트엔드 UI 개발 기법을 설명하고 있으며, Vue.js의 활용법과 함께 HTML, CSS의 다양한 활용법을 배울 수 있으며, 특히 HTML 요소에 데이터를 연결하여 동적인 콘텐츠를 만드는 방법 또한 잘 설명되어 있었다. |
|
나만의 웹 사이트를 하나 만들고 싶다면 HTML: 웹사이트의 모습을 기술하기 위한 마크업 언어인 HTML이 1991년 1.0 버전으로 탄생하고많은 변화가 있었습니다. 웹사이트 하나를 구축하기 위해서는 HTML, CSS, JS를 기본으로 알고 있어야 하는데 각각의 프로그램을 익히는데 소요되는 시간이 많이 걸릴 수 밖에 없습니다. 웹 사이트를 만들 때 논리적인 구조를 HTML로 작성하고 시각적인 디자인 요소는 CSS로 작성하게 되는데, 실무에서 많이 쓰는 요소를 가볍게 소개하는 내용이 돋보입니다. CSS: CSS작성법도 스타일을 적용할 요소를 교재에 형광으로 표시를 해서 누구나 쉽게 볼 수 있도록 가독성을 가지고 있습니다. 기본적인 레이아웃 속성 float, flex의 개념을 익히고, 다양한 해상도에서 웹 페이지를 제공하기 위한 반응형 웹(responsive web)을 개발하기위한 해상도, 뷰포트를 통해 기기의 해상도 기준으로 렌더링 할수 있는 방법을 자세히 설명합니다. 자바스크립트(JS): 객체 기반의 스크립트 프로그래밍 언어인 자바스크립트는 별도의 서버를 구성하지 않고도 웹 브라우저에서 바로 사용할 수 있습니다. 자바스크립트를 통해서 웹 브라우저에서 UI를 동적으로 부여주기 위해서 사용할 수 있습니다. Vue.js: 웹 브라우저가 발전하고 모바일이 보편화되면서 복잡한 서버 언어를 대신해서 자바스크립트로 웹 어플리케이션 개발하는데 코드의 재사용성을 높여 생산성을 좋게 하기 위해서 Vue.js를 사용 할 수 있습니다. 가볍고 직관적이며 유연한 구조를 가지고 있고 SPA를 쉽고 빠르게 제작할 수 있습니다. 여기까지 기본적인 내용을 이해했다면 VSCode를 설치 후 기본 레이아웃 만들기를 시작할 수 있습니다. 천천히 따라하면서 반응형 디자인, 싱글 페이지 애플리케이션(SPA)까지 만들어는 과정으로 즐거움을 얻길 바랍니다. 출판사의 도서제공으로 작성되었습니다.
|
|
평소 네이버 홈페이지에 들어가면 네이버 로고와 함께 예쁘게 구성된 웹페이지를 볼 수 있다. 하지만 렉에 걸리거나 오류가 발생하면 그냥 하얀 바탕에 보라색 혹은 파랑색으로 된 글씨들이 따닥따닥 붙어있는 페이지만 보인다. 어렸을 때의 나는 그냥 나한테만 뜨는 그런 이벤트인 줄 알았다. 하지만 프런트엔드를 공부하고 나서의 나는 그것이 프런트에서 오류가 발생한 것이라는 사실을 알게 되었다.
프런트엔드를 공부하고 싶어서 여러 사이트를 찾아보며 실습하고, 클론코딩을 하고, 심지어는 학교에서 웹프로그래밍 강의까지 수강 신청해서 들었다. 하지만 내 머릿속에 남는 것은 많지 않았다. 나는 프런트엔드에 대해서 제대로 공부하고 싶었다. 마침 내가 좋아하는 출판사인 ‘이지스퍼블리싱’에서 <Do it! 프런트엔드 UI 개발 with Vue.js>이라는 책을 출간했다는 소식을 듣게 되었다.
이 책의 부제목은 ‘웹사이트 하나를 통째로 만들며 배운다!’이다. 나는 이 부제목이 너무 마음에 들었다. 웹사이트 하나를 만들며 프런트엔드를 통달해버릴 것만 같은 기분이었다.
나는 프런트엔드에 대해서 조금 알고 있는 상태에서 이 책을 읽게 되었는데, HTML의 기본 개념부터 구성요소, 기초적인 내용들까지 자세히 설명되어 있어서 웹을 처음 공부해보는 누구나 쉽게 공부할 수 있을 것 같다.
내가 가장 궁금했던 로그인, 회원가입 대화상자 만드는 방법도 나와 있었다. 내가 만들었던 로그인 상자는 그냥 아무것도 없는 바탕에서 아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 위에 ‘로그인 성공’이라는 문장만 뜨고 아무것도 진행되지 않았는데, 이 책에서는 글자 옆에 귀여운 아이콘들도 추가할 수 있고, 양식 데이터를 전달하는 방식도 나와 있어서 좋았다.
이 책을 통해 프런트엔드를 더 공부할 수 있어서 좋았고, 나도 나중에 나만의 웹사이트를 직접 만들어보고 싶다는 생각이 들었다. |
|
웹 사이트를 만들어 보자
책을 선택한 이유
프런트엔드는 사용자와 상호작용하는 사용자 인터페이스다.
프런트엔드 개발은 다양한 기술과 역량이 요구된다.
웹 애플리케이션을 효과적으로 만들기 위해
웹 어플리케이션 프레임워크가 등장한다.
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 #반응형디자인
#데이터바인딩 #라우팅 |
|
이 책의 가장 큰 강점 중 하나는 '실전 중심'적인 접근입니다. 이론만 가득한 책들은 구글링으로 얻을 수 있는 정보와 별 다를 게 없죠. 하지만, 'Do it! 프런트엔드 UI 개발 with Vue.js'는 풍부한 예제와 함께 출판사 홈페이지를 직접 만들어보면서 Vue.js의 핵심을 체득할 수 있게 해줍니다. 실제 개발 상황을 직접 경험하면서 개념을 익히고 적용하는 과정은 공부의 즐거움을 배가시켜줍니다.
또한, '반응형 디자인'과 '화면 크기 최적화'에 대한 내용은 현대 웹 개발의 필수 요소입니다. 모든 기기에서 웹사이트가 원활하게 작동하고 멋지게 보이도록 만드는 방법을 배우면서, 사용자 경험을 한층 더 향상시킬 수 있습니다.
Vue.js의 '데이터 바인딩'과 '컴포넌트 기반 라우팅'은 이 책의 또 다른 핵심입니다. 화면과 데이터를 연결하는 작업이 얼마나 간단하고 효율적으로 이루어지는지를 경험하게 될 것입니다. 더불어, 컴포넌트 기반 라우팅을 통해 웹 페이지 간의 전환을 체계적으로 관리하는 방법도 배울 수 있습니다.
'Do it! 프런트엔드 UI 개발 with Vue.js'를 통해 여러분은 단순한 코드 작성을 넘어서, 웹 개발의 핵심을 파악하고 실전에서 활용하는 법을 익힐 수 있습니다. 이 책은 초심자부터 숙련자까지, 모두에게 가치 있는 내용을 제공할 것입니다. 함께 Vue.js의 매력에 빠져보시는 건 어떨까요? 웹 개발의 새로운 차원으로 여행을 떠나보세요! |
|
아직도 많은 레거시 시스템들이 있지만, 신규로 구축되는 많은 서비스들이 SPA로 개발되고 있습니다. 불과 10년전만 해도 백본, 앵귤러가 많이 쓰였지만, 현재는 리액트와 뷰가 SPA의 대표 라이브러리 또는 프레임워크로 자리를 잡았습니다. 리액트가 우세한거 같지만, 뷰의 비중도 날이 갈수록 커지고 있습니다. 리액트보다 낮은 러닝커브와 양방향 바인딩 제공 등 리액트와 서로 다른 장단점으로 선택이 되면서 프론트엔드 개발자의 선택지는 늘어났기 때문에 배워두면 유용한 프레임워크입니다. 이 책은 HTML, CSS 부터 웹 프로그래밍을 앞에서 배우고, SPA로 웹을 만들게 됩니다. 대게 많은 책들의 예제가 블로그를 기반으로 한게 많은데, SPA로 기본 골격을 만들고, 부트스트랩을 사용하여 도서소개 홈페이지를 만들어 봅니다. 특히, 장점으로는 실습을 할 때, 각 단계별로 설명과 코드가 나와있으며 아래처럼 실습해야되는 코드들이 노란색 배경으로 칠해져 있어서 다른 책과 다르게 눈에 잘 들어와 실습할 때 편리했던 것 같습니다. 또한 설명도 어렵지 않게 되어 있어서 입문자들이 보고 따라하는데도 무리가 없을 것 같습니다. 개인적으로 리액트를 공부하다가 포기하는 것을 종종 봤었는데, 뷰부터 공부를 하고, 리액트까지 공부해본다면 SPA 라이브러리 및 프레임워크의 공통점과 차이를 분명히 배울 수 있고, 리액트도 배우는데 수월하기 때문에 입문자라면 Vue부터 한 번 이 책으로 배우면 좋을 것 같습니다.
[출판사로부터 책을 제공받아 주관적으로 작성한 리뷰입니다] |
![]() 퍼블리싱을 기본으로 Vue에 대한 설명을 잘해주고 있다. 대체로 일반적인 견해이지만(?) React보다는 Vue가 퍼블리셔가 좀 더 접근하기 쉬운 구조를 취하고 있기 때문에 퍼블리싱에 대한 이해를 가진 분의 책이라 이해가 상대적으로 쉬웠던 것 같다. 프런트엔드로 전향하고자 하는 사람이 보면 좋을 것 같다.
전반부는 화면을 구성하기 위한 HTML, CSS, JS 등을 사용하여 레이아웃을 구성하는 방법을 간략히 전달하고 있다. 책에서 다루는 것 이외에도 당연히 많은 내용들이 있지만, 과하게 들어가지 않고 퍼블리셔가 Vue를 사용하여 레이아웃을 다루는 데 있어 접근하기 쉬운 몇 가지를 중점으로 다루고 있어 일정 수준의 경력자라면 어렵지 않게 이해와 활용이 가능한 내용으로 구성되어 있다.
체감상 너무 과한 이론적인 내용은 다루지 않고 실질적으로 프로젝트에서 활용하기 위한 기본적인 내용들을 잘 다루고 있는 것 같다. Vue가 처음이거나 초기버전은 경험이 있더라도 업데이트가 이루어진 최근 버전을 다루어야 하는 프로젝트라면 참가 전에 본서를 통해 달라진 점 등에 대해 개략적인 정보를 확인하고 들어가면 좋을 것 같다. 몇몇 개념들에 대한 부분은 이해가 바로 되지 않는 경우도 있었지만 몇 번 반복하다 보면 머릿속에 남는다. 반복학습 이외에는 방법이 없는 것 같다.
최근의 프로젝트들은 일부 특수한 사정이 없다면 Vue, React를 주로 사용하는 편이다.(생각보다 특수한 사정이 있는 프로젝트가 아직은 더 많은 것 같아 보이지만..) 단순히 기존방식으로 하는 것보다 템플릿 문법을 사용한 방법은 Gulp 등의 전처리 언어를 사용해도 가능하지만 차세대 프로젝트에서는 프로젝트 초기부터 Vue 등을 사용하여 개발적인 부분(동일한 요소의 재활용)을 우선적으로 고려한 언어를 사용하고 있는 추세다. 아직 접해 본 적이 없다면 하루빨리 접해보고 각 언어의 특성을 조금씩이라도 익혀 둘 필요가 있겠는데 본인의 실력이 아직 부족하다 여겨진다면 본서를 통해 기본기를 다잡고 모르는 부분을 좀 더 공부하여 실력을 키우면 좋을 것 같다. 인터넷에도 다양한 정보가 있지만 저자의 경험을 기초로 만들어진 한 권은 정보를 흡수하기에 적합하게 구성되어 있기에 추천한다.
참고로 해당 도서는 Vue 2.9.6 버전을 기준으로 하고 있다. 본서를 기준으로 프로젝트를 원활하게 학습하기 위해선 상위버전이 아닌 동일한 버전을 사용해야 한다. 어디까지나 개인적인, 나만의 관점에서.
출판사에서 도서를 제공받아 작성된 리뷰입니다.
|