본문 바로가기

추천 검색어

실시간 인기 검색어

기초부터 완성까지, 프런트엔드

개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드
이재성 , 한정 저자(글)
비제이퍼블릭 · 2021년 11월 29일
10.0
10점 중 10점
(5개의 리뷰)
집중돼요 (33%의 구매자)
  • 기초부터 완성까지, 프런트엔드 대표 이미지
    기초부터 완성까지, 프런트엔드 대표 이미지
  • A4
    사이즈 비교
    210x297
    기초부터 완성까지, 프런트엔드 사이즈 비교 188x245
    단위 : mm
01 / 02
MD의 선택 무료배송 이벤트 소득공제
10% 29,700 33,000
적립/혜택
1,650P

기본적립

5% 적립 1,650P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,650P
  • 리뷰 작성 시, e교환권 추가 최대 300원
배송안내
무료배송
배송비 안내
국내도서/외국도서
도서 포함 15,000원 이상 구매 시 무료배송
도서+사은품 또는 도서+사은품+교보Only(교보굿즈)

15,000원 미만 시 2,500원 배송비 부과

교보Only(교보배송)
각각 구매하거나 함께 20,000원 이상 구매 시 무료배송

20,000원 미만 시 2,500원 배송비 부과

해외주문 서양도서/해외주문 일본도서(교보배송)
각각 구매하거나 함께 15,000원 이상 구매 시 무료배송

15,000원 미만 시 2,500원 배송비 부과

업체배송 상품(전집, GIFT, 음반/DVD 등)
해당 상품 상세페이지 "배송비" 참고 (업체 별/판매자 별 무료배송 기준 다름)
바로드림 오늘배송
업체에서 별도 배송하여 1Box당 배송비 2,500원 부과

1Box 기준 : 도서 10권

그 외 무료배송 기준
바로드림, eBook 상품을 주문한 경우, 플래티넘/골드/실버회원 무료배송쿠폰 이용하여 주문한 경우, 무료배송 등록 상품을 주문한 경우
주문정보를 불러오는 중입니다.
기본배송지 기준
배송일자 기준 안내
로그인 : 회원정보에 등록된 기본배송지
로그아웃 : '서울시 종로구 종로1' 주소 기준
로그인정확한 배송 안내를 받아보세요!

이달의 꽃과 함께 책을 받아보세요!

1권 구매 시 결제 단계에서 적용 가능합니다.

알림 신청하시면 원하시는 정보를
받아 보실 수 있습니다.

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

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

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

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

작가정보

저자(글) 이재성

현재 NHN FE 개발팀에서 프런트엔드 개발자로 재직 중입니다. 자바스크립트 기반 오픈 소스인 TOAST UI Editor와 TOAST UI Grid 메인테이닝 업무를 담당하고 있으며, NHN Cloud FE 개발 업무도 병행하고 있습니다. 간결하고 깔끔한 코드 작성을 목표로 끊임없는 리팩토링을 지향하는 개발자입니다. 프로그래밍 전반적인 패러다임과 방법론에 대해 관심이 많으며, 쏟아지는 기술 속에서 끊임없는 학습은 개발자의 숙명임을 매 순간 깨닫고 있습니다.

저자(글) 한정

대학 졸업 후 NHN에서 본격적인 개발자 커리어를 시작했습니다. 자바스크립트 기반 오픈 소스인 TOAST UI Chart와 Grid 메인테이닝 업무를 담당했고 자바스크립트 관련 가이드와 기술 공유를 담당했습니다. 현재는 LINE+에서 동영상 플랫폼 개발 업무를 담당하고 있습니다. 자바스크립트로 만들어지는 모든 도구에 관심이 많으며, 도구를 만드는 사람으로서 좋은 DX(DeveloperExperience) 가치를 담기 위해 노력하고 있습니다.

목차

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

    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. 정리하기

출판사 서평

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

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

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

기본정보

상품정보 테이블로 ISBN, 발행(출시)일자 , 쪽수, 크기, 총권수을(를) 나타낸 표입니다.
ISBN 9791165921057
발행(출시)일자 2021년 11월 29일
쪽수 556쪽
크기
188 * 245 mm
총권수 1권

Klover 리뷰 (5)

구매 후 리뷰 작성 시, e교환권 200원 적립

10점 중 10점
/최고예요
컨텐츠가 매우 잘 오가나이즈 되어 있는것 같네요.
10점 중 10점
/쉬웠어요
부족했던 부분을 채우기에 충분했던 거 같습니다.
10점 중 10점
/집중돼요
목차를 보고 이 모든 내용이 한권에 들어있다고?...싶어서 바로 구입해봤는데 정말 좋은 책이에요. 어디서부터 어디까지 알아야 하는지 큰 그림을 알려주는 개론서이고 이 책을 지도 삼아 하나씩 공부해나가면 됩니다

문장수집 (1)

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
판매가 5,000원 미만 상품의 경우 리워드 지급 대상에서 제외됩니다. (2024년 9월 30일부터 적용)

구매 후 리뷰 작성 시, e교환권 100원 적립

우리는 프런트엔드 개발 입문자나 주니어 개발자를 대상으로 초기 길잡이 역할을 해줄 수 있는 책을 집필하는 것을 목표로 하였습니다.
기초부터 완성까지, 프런트엔드

교환/반품/품절 안내

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

용선생 추론독해 초등 국어 3단계
이벤트
  • 단말기_이규태에디션
  • EBS 겨울방학 특집 쿠폰이벤트
01 / 02
TOP