본문내용 바로가기
MD의선택 무료배송 사은품 소득공제

기초부터 완성까지, 프런트엔드 개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드

이재성 , 한정 지음 | 비제이퍼블릭 | 2021년 11월 29일 출간
클로버 리뷰쓰기

이 책의 다른 상품 정보

  • 정가 : 33,000원
    판매가 : 29,700 [10%↓ 3,300원 할인]
  • 혜택 :
    [기본적립] 1650원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2,000원 추가적립 안내 [회원혜택] 회원 등급 별, 3만원 이상 구매 시 2~4% 추가적립 안내 [리뷰적립] 리뷰 작성 시 e교환권 최대 300원 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    지금 주문하면 내일( 1일,토) 도착 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 매장에서 직접 수령 안내 바로드림 혜택
    휴일에는 바로드림 픽업으로 더 빨리 받아 보세요. 바로드림 혜택받고 이용하기

이 책의 이벤트

해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
  • 컴퓨터/IT분야 2만원 이상 구매 시 개발자 매거진 <리드..
    2022.08.13 ~ 2022.10.31
  • 상반기 베스트/추천도서 확인하고 머그&노트 사은품도!
    2022.06.24 ~ 2022.09.30
상품상세정보
ISBN 9791165921057(1165921057)
쪽수 556쪽
크기 188 * 245 mm 판형알림

책소개

이 책이 속한 분야

드디어, 최초의 개론서가 나왔습니다!
프런트엔드의 개념과 원리를 모두 담은 “프런트엔드의 정석”
1. 개념과 실습, 적용과 효율을 모두 잡은 도서!
탄탄하게 개념을 잡고, 개념을 바로 적용하며 이해할 수 있도록 실습 활동을 추가했습니다.
현업에 적용할 수 있는 기술과 업무의 효율을 높여주는 기술, 모두 놓치지 않고 담았습니다.
두 마리의 토끼를 다 잡고 싶은 욕심꾸러기 독자분께 이 도서를 추천합니다.

2. 개론서로 두고두고 보고 싶은 도서!
무엇이든 제대로 공부하기 위해서는 개론서 하나쯤은 필요합니다.
하지만 막상 어떤 도서를 개론서로 보며 공부해야 할지 모르는 독자분께 이 도서를 추천합니다.
더 이상 어떤 책으로 공부할지 고민하지 마세요. ‘기초부터 완성까지, 프런트엔드’가 정답입니다.

3. 최신 WEB 기술을 반영한 가장 트렌디한 도서!
베타 리더들이 인정한, 최신 WEB 기술까지 완벽하게 반영된 도서!
특히 프런트엔드에서 트렌디함은 매우 중요한 요소입니다.
최신 WEB 기술까지 꼼꼼하게 반영했으니 이 책, 놓치지 마세요!

상세이미지

기초부터 완성까지, 프런트엔드 도서 상세이미지

목차

저자 소개
서문
베타 리더 추천사
이 책의 구성
프로젝트
감사의 말

1부

[1장. 프런트엔드 개발이란?]
1.1. 정의
1.2. 프런트엔드 개발의 과거와 현재
1.2.1. 프런트엔드 개발 영역의 확장
1.3. 개발 프로세스
1.3.1. 요구 사항 분석
1.3.2. 설계
1.3.3. 개발
1.3.4. 배포

[2장. HTML과 CSS]
2.1. HTML
2.1.1. HTML 요소 구성 살펴보기
2.1.2. HTML 요소 분류하기
2.1.3. HTML 문서 골격 만들기
2.1.4. 시맨틱(Semantic)
2.1.5. SEO(Search Engine Optimization)
2.2. CSS
2.2.1. 작성 방법
2.2.2. 상속
2.2.3. 선택자
2.2.4. 우선순위와 명시도(Specificity)
2.2.5. 박스 모델과 여백 상쇄
2.2.6. flex를 이용한 레이아웃 만들어 보기
2.2.7. 반응형 웹을 위한 미디어 쿼리
2.3. 접근성(Accessibility, a11y)
2.3.1. 웹 접근성 지침
2.4. 정리하기

[3장. 자바스크립트 기초 - 타입과 구문]
3.1. 변수 선언
3.1.1. var
3.1.2. let과 const
3.2. 객체와 타입
3.2.1. number
3.2.2. string
3.2.3. boolean
3.2.4. null과 undefined
3.2.5. Symbol
3.2.6. BigInt
3.2.7. 객체
3.3. 배열
3.3.1. 배열의 생성
3.3.2. 원소 접근과 동적인 원소 생성
3.3.3. 희소 배열
3.3.4. length 프로퍼티
3.3.5. 배열 조작
3.3.6. 유사 배열 객체
3.4. 랩퍼(Wrapper) 객체
3.4.1. 언박싱(Unboxing)
3.5. 구문과 연산자
3.5.1. 표현식(Expression)
3.5.2. 문(Statement)
3.5.3. 연산자(Operator)
3.6. 정리하기

[4장. 자바스크립트 기초 - 타입 변환과 함수]
4.1. 타입 변환
4.1.1. 명시적 강제 변환
4.1.2. 객체의 원시 타입 변환
4.1.3. 암시적 강제 변환
4.2. 함수
4.2.1. 함수란 무엇인가?
4.2.2. 함수의 정의 방법
4.2.3. 함수의 호출
4.2.4. 화살표 함수
4.2.5. this
4.3. 정리하기

[5장. 자바스크립트 심화 - 프로토타입과 스코프]
5.1. 프로토타입
5.1.1. 프로토타입과 프로토타입 체인
5.1.2 프로토타입과 생성자 함수
5.1.3. 프로토타입의 확장과 상속
5.1.4. class
5.2. 스코프(scope)
5.2.1. 함수 스코프와 블록 스코프
5.2.2. 렉시컬 스코프
5.3. 호이스팅(Hoisting)
5.3.1. 스코프별로 동작하는 호이스팅
5.3.2. 함수 선언문의 호이스팅
5.4. 클로저(closure)
5.4.1. 모듈 패턴
5.5. 모듈
5.5.1. export, import
5.5.2. default export
5.5.3. 식별자 충돌 피하기
5.5.4. 〈script type="module"〉
5.6. 정리하기

[6장. 자바스크립트 심화 - 실행 컨텍스트]
6.1. 실행 컨텍스트란 무엇인가?
6.2. 실행 컨텍스트의 구성 요소
6.2.1. Envinronment Records와 스코프 체인
6.2.2. 다양한 Envinronment Records
6.2.3. Lexical Environment와 Variable Environment
6.3. 실행 컨텍스트의 생성 과정
6.3.1. 1단계: 전역 컨텍스트 생성과 바인딩
6.3.2. 2단계: foo 실행 컨텍스트 생성과 바인딩
6.3.3. 3단계: bar 실행 컨텍스트 생성과 바인딩
6.3.4. 4단계: console.log() 메서드 실행
6.4. 실행 컨텍스트와 클로저
6.5. 정리하기

[7장. BOM과 DOM]
7.1. 문서 객체 모델
7.1.1. DOM 트리
7.1.2. Node
7.1.3. DOM Node 추가, 제거하기
7.1.4. 요소 검색하기
7.1.5. DOM 이벤트
7.2. 브라우저 객체 모델
7.2.1. window 객체
7.2.2. History 객체
7.2.3. Location 객체
7.2.4. navigator 객체
7.2.5. Web Storage
7.3. 정리하기

[8장. 브라우저 렌더링 과정]
8.1. 렌더링 과정 살펴보기
8.2. 렌더러 프로세스의 작업
8.2.1. 파싱, 렌더 트리(Render Tree) 생성
8.2.2. 레이아웃(Layout)
8.2.3. 페인트(Paint)
8.2.4. 합성(Compositing)
8.3. 브라우저별 렌더링 엔진
8.4. 정리하기

[9장. 네트워크 통신]
9.1. HTTP란?
9.1.1. 상태 코드
9.1.2. 메서드
9.1.3. 헤더
9.1.4. 쿠키
9.2. JSON(JavaScript Object Notation)
9.2.1. 구조
9.2.2. 메서드
9.3. Ajax
9.3.1. XMLHttpRequest
9.3.2. Promise
9.3.3. async, await
9.3.4. fetch()
9.4. 웹 소켓
9.5. 정리하기

2부

[10장. 프런트엔드 뉴스 게시판 만들기]
10.1. 마크업 작성하기
10.1.1. 헤더 영역
10.1.2. 메인 영역
10.2. 스타일 적용하기
10.2.1. 헤더 영역 스타일
10.2.2. 메인 영역 스타일
10.2.3. 푸터 영역 스타일
10.3. 목록 가져오기
10.3.1. DOMContentLoaded 이벤트 등록
10.3.2. 로딩 이미지 보여주기
10.3.3. 데이터 조회 및 DOM 추가
10.3.4. 로딩 이미지 제거하기
10.4. 반응형 레이아웃 적용
10.4.1. 태블릿 레이아웃
10.4.2. 모바일 레이아웃
10.5. 정리하기

[11장. 프런트엔드 개발 도구]
11.1. 의존성 관리
11.1.1. Node.js와 프런트엔드 개발
11.1.2. npm
11.1.3. package.json의 중요한 속성들
11.1.4. 의존성 버전과 semantic versioning
11.1.5. package-lock.json 파일의 중요성
11.1.6. yarn
11.2. webpack
11.2.1. 설치 및 사용법
11.2.2. entry와 output
11.2.3. Loader
11.2.4. Plugin
11.2.5. webpack-cli를 통한 설정 파일 초기화
11.2.6. webpack-dev-server
11.2.7. 더 나아가서
11.3. 트랜스파일러
11.3.1. Babel
11.3.2. Sass
11.4. Linter
11.4.1. ESLint
11.4.2. stylelint
11.4.3. Prettier
11.5. 정리하기

[12장. 디버깅]
12.1. 개발자 도구란?
12.2. 개발자 도구 활용해 보기
12.2.1. 모바일 환경에서 잘 나올까?
12.2.2. 내가 작성한 CSS 프로퍼티대로 화면에 나타나지 않을 때
12.2.3. 분명 요소에 이벤트를 추가했는데?
12.2.4. 무슨 에러가 발생한 걸까?
12.2.5. 에러가 발생한 시점의 정보를 알아내려면?
12.2.6. 우리집 인터넷은 빠른데...
12.3. 정리하기 394

[13장. 프런트엔드 테스트]
13.1. 좋은 테스트란 무엇인가?
13.1.1. Trade off
13.1.2. TDD와 Trade Off
13.2. 프런트엔드 테스트
13.2.1. 테스트의 종류
13.2.2. 사용자 관점의 테스트
13.2.3. 테스트 피라미드
13.2.4. jest
13.3. 메모 애플리케이션
13.3.1. 단위 테스트
13.3.2. 통합 테스트
13.3.3. Cypress
13.3.4. E2E 테스트
13.4. 정리하기

[14장. 스냅숏 테스트와 시각적 테스트]
14.1. 스냅숏(snapshot) 테스트
14.1.1. 스냅숏 테스트 작성하기
14.1.2. 스냅숏 테스트의 장점과 단점
14.1.3. 그럼 어떻게 작성해야 할까?
14.2. 시각적 회귀(visual regression) 테스트
14.2.1. 스토리북(Storybook)
14.2.2. Percy를 이용한 시각적 테스트 작성하기
14.3. 정리하기

[15장. 성능]
15.1. Performance 탭과 성능 최적화
15.1.1. Perfomance 탭의 구성
15.1.2. 렌더링 블록(Rendering Block)
15.1.3. 레이아웃 최소화
15.2. 메모리 관리하기
15.2.1. 가비지 컬렉션(Garbage Collection)
15.2.2. 메모리 누수 탐지하기
15.3. Performance 탭과 Web Vitals
15.3.1. Perfomance 탭의 다양한 지표들
15.3.2. Web Vitals
15.4. 라이트하우스(Lighthouse)
15.4.1. 보고서 만들기
15.4.2. 기준 살펴보기
15.5. 정리하기

부록

[부록1. 렌더링 방식과 프런트엔드 프레임워크]
1.1. 렌더링 방식
1.1.1. Single Page Application(SPA)과 Client Side Rendering(CSR)
1.1.2. Server Side Rendering(SSR)
1.2. 프레임워크
1.2.1. React
1.2.2. Vue.js
1.2.3. Svelte
1.3. 정리하기

[부록2. 타입스크립트 사용하기]
2.1. 타입스크립트(TypeScript)는 무엇인가요?
2.2. 타입스크립트는 어떻게 동작할까요?
2.3. 타입스크립트의 장점과 단점
2.4. 정리하기

[부록3. 오픈 소스 기여하기]
3.1. 오픈 소스 소프트웨어란?
3.2. 오픈 소스는 코드로만 기여하나요?
3.3. 어떻게 기여할까요?
3.3.1. 만들어진 프로젝트에 참여하기
3.3.2. 새로운 오픈 소스 프로젝트 만들기
3.4. 정리하기

[부록4. 코드 리뷰하기]
4.1. 리뷰 단계에서는 무엇을 확인해야 하나요?
4.2. 리뷰를 통해 무엇을 얻을까요?
4.3. 주의해야 할 점이 있을까요?
4.4. 정리하기

출판사 서평

개념과 실습, 두 마리 토끼를 잡고 싶은 욕심꾸러기 독자분께 추천합니다!

프런트엔드 개발을 위해 알아야 할 내용이 너무 많지 않나요? 다양한 강의와 웹 사이트에서 정보를 찾을 순 있지만, 파편화된 정보들을 정리하고 모으는 것도 충분히 어렵지 않으셨나요?

그렇게 힘들게 공부하고 계실 주니어 개발자들에게, 지름길을 알려 드리고자, 이 도서를 제작했습니다.
이 도서로 프런트엔드의 전반적인 흐름을 익혀 방향을 잡고, 꾸준히 성장하는 개발자가 되길 바랍니다.

Klover 리뷰 (0)

북로그 리뷰 (2) 전체보기 쓰러가기

북로그 리뷰는 본인 인증 후 작성 가능합니다.
책이나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 내용은 비공개 처리 될 수 있습니다.
※ 북로그 리뷰 리워드 제공 2021. 4. 1 종료
※ 북로그 서비스 종료 예정 2022. 9 월 말 (8월 31일 북로그 글쓰기 종료)
※ 2022년 9월까지 포스팅 별 개인소장 가능, 2023년 9월까지 일괄 백업 서비스 제공 예정 자세히 보기
  • 불과 지난 10여 년 사이에 웹 개발 환경은 빠른 변화를 겪어왔다. 지금은 웹 표준을 기본으로 사용자의 액션을 처리하는 클라이언트 영역 개발과 서버 개발이 완전히 나뉘어서 개발할 수 있게 되었다. 즉, 프런트엔드와 백엔드 구분이 명확해져서 각자 수행해야 할 역할 배분이 잘 이뤄지는 환경이라고 볼 수 있다. 이 책은 HTML/CSS 보다 자바스크립트 비중이 훨씬 높아서 웹퍼블리셔 혹은 프런트엔드 개발자를 위한 개론서로 서버 환경에 대한 이해가 필수적이다. 웹디자이너로서 HTML... 더보기
  • 내가 정말 필요했던, 그리고 이제 막 시작을 하는 모든 프런트엔드 개발자에게 추천하고 싶은 책이 나왔다. <기초부터 완성까지, 프런트엔드>   난 이미 프런트엔드 개발자로 일을 하고 있지만, 사실 많은 게 부족해서 계속해서 공부가 필요한 상황이다. 배워야 할 것은 산더미인데, 어디서부터 해야 할 지 모르겠고, 부족한 부분을 얼마나 채워야 할지, 모르는 게 뭔지도 모르는 총체적난국의 상황이었다. 시작도 끝도 정해지는 것... 더보기

문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매 후 문장수집 작성 시, 리워드를 제공합니다. 안내

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①서양도서-판매정가의 12%, ②일본도서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함
바로가기
  • 우측 확장형 배너 2
최근 본 상품