기초부터 완성까지, 프런트엔드
책 리뷰_기발자를 향한 개발의 기초
도서명ㅣ기초부터 완성까지, 프런트엔드
부 제 ㅣ개발부터 테스트까지, 이론과 예제로 배우는 프런트엔드
저 자 ㅣ이재성, 한정
출판사ㅣ비제이퍼블릭
출판일ㅣ2021.11.29
페이지ㅣ556
저자 소개
저자 : 이재성
현재 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. 정리하기
ㅣ 기획자도 개발을 알아야 하는 시대
서비스 기획자로 일을 하면서 가장 많이 협업을 하면서 커뮤니케이션을 하게 되는 상대는 디자이너와 개발자입니다. 그중에서도 개발자와 가장 많이 이야기를 나누게 되는 거 같은데요. 기획자는 본인이 원하는 기획의도와 요구사항을 명확하게 개발자한테 전달하여서 의도한 대로 개발이 진행될 수 있도록 내용을 전달해야 하고, 개발자는 기획자의 요구사항 중에서 가능한 범위와 가능한 기능들을 추려서 개발 진행을 해야 한다고 생각을 합니다. 그런데 이 과정에서 각자가 본인이 사용하는 언어를 사용해서 내용 전달을 하다 보니, 같은 내용이라도 다르게 받아들이는 경우들이 있습니다. 그리고 개발자와 일을 하면서 느꼈던 것들은 디테일한 부분들의 의사 결정이 필요한 곳에서 제대로 기획자가 의사결정을 하지 않거나 해야 한다고 생각하지 못하고 누락되는 부분에서 많은 어려움을 겪는듯했습니다.
그래서 저는 당연하게 기획자도 개발적인 상식을 알고 있어야 하나고 생각을 합니다. 그래야지 기획자도 본인이 원하는 것을 정확하게 전달할 수 있고, 개발자도 기획자가 원하는 요구사항을 쉽게 이해할 수 있다고 생각이 됩니다.
그럼 이 책에서 말하는 프런트 엔드 개발이란 무엇일까요? 개발은 크게 일반적인 사용가 접하게 되는 화면의 액션을 보게 되는 프런트 앤드와 사용자는 보지 못하지만 수많은 데이터가 오고 가는 서버 개발, 즉 백엔드로 나눠져 있습니다. 이 중에서 프런트 엔드 개발은 서비스 사용자와 대화하는 인터페이스(UI)를 개발하는 것이며, 다음과 같은 작업들을 포함한다고 합니다.
- 사용자가 입력한 데이터를 비즈니스 로직에 따라 처리.
- 서버와 통신해 가져온 데이터를 출력.
- 디자인을 적용하여 스타일링
이런 개발을 진행하는 프런트엔드 개발의 궁극적인 목표는 서비스를 이용하는 사용자의 접근성과 편의성 증진입니다. 그래서 프런트엔드 개발자라면 어떻게 하면 사용자에게 더 편리하고 빠른 환경을 제공할지 항상 고민해야 한다고 합니다.
ㅣ일반인도 쉽게 알 수 있게 구성된 개발 책
최근 들어 느끼는 것은 이전보다 확실히 개발에 대한 관심이 엄청 많이 증가했으며 개발에 대한 접근성도 이전보다 많이 좋아졌다는 것입니다. 그래서 개발을 배우려고 하는 사람도 많이 늘었고, IT 회사에 일을 하는 기획자와 디자이너 중에는 간단한 프런트엔드 개발은 할 수 있는 수준의 사람도 많이 늘어난 거 같습니다.
기초부터 완성까지, 프런트엔드 책을 보면서도 개발을 처음 접하는 입문자들을 위해서 책의 구성을 정말 잘 만들어 놓았다는 생각이 들었습니다. 우선 각각의 개발 기능들에 정의들을 잘 정리 해 놓아서 기능에 대한 개념적인 부분부터 확실히 알고 공부할 수 있다는 생각이 들었습니다. 그리고 실제로 그 기능을 구현해 볼 수 있는 예제 함수들을 자세하게 설명과 함께 보여주고 있어서 입문자라도 너무 쉽게 따라 할 수 있도록 구성을 해 놓았습니다.
그리고 온라인 강의를 듣지 않더라도 책을 따라 읽어나가면 강사를 통해서 강의를 듣는 듯한 느낌이 들도록 설명들을 상세하게 잘 적어놓아서 처음 개발을 접하는 사람이라도 쉽게 따라갈 수 있을 거라는 생각이 들었습니다.
ㅣ 테스트의 영역까지 잘 정리된 책
개발자들도 동일한 생각을 가지고 있겠지만, 저는 기획자의 입장으로서 테스트가 가장 중요한 영역 중에 하나라고 생각을 합니다 아무리 잘 만들어 놓은 서비스라고 하여도 테스트가 제대로 진행되지 않아서 사용자가 몇 번의 오류 상황을 맞닥뜨리게 된다면 그건 결코 좋은 서비스로 기억되지 않기 때문입니다. 정말 10번 잘하고도 1번의 실수로 안 좋은 기억을 갖게 만들 수도 있다고 생각을 합니다.
이런 관점에서 이 책은 단순히 개발에서 끝나는 것이 아니라. 개발자 관점에서 개발자가 진행할 수 있는 프런트엔드 테스트 영역에 관한 내용도 담고 있어서 좋았습니다.
책에서는 다양한 환경 속에서 테스트는 여러 영향을 받겠지만, 좋은 테스트가 가지는 공통적인 규칙은 다음과 같다고 합니다.
- 모든 테스트는 독립적으로 실행되어야 한다.
> 각각의 테스트는 다른 테스트의 실행 여부와는 상관없이 완전히 독립적으로 수행되어야 한다는 것입니다.
- 테스트의 결과는 일관성이 있어야 한다.
> 테스트는 외부 환경에 상관없이 일관성 있는 검증을 수행해야 합니다.
- 내부 구현에 종속된 테스트는 지양해야 한다.
> 테스트 코드는 내부 구현보다는 인터페이스를 기준으로 테스트하는 것이 좋습니다.
- 테스트는 단순하고 이해하기 쉬워야 한다.
> 테스트 코드도 여느 코드와 마찬가지로 가독성이 중요합니다.
- 유지 보수가 가능한 테스트를 작성해야 한다.
> 변경되지 않는 애플리케이션은 아마 거의 없을 것입니다. 버그 수정 또는 추가 요구 사항에 따라 애플리케이션 코드는 변경될 것이고, 이에 따라 테스트 코드 역시 관리되어야 합니다.
위의 좋은 테스트의 조건들을 확인했다면 애플리케이션 내의 코드를 모두 완벽하게 검증할 수 있겠다고 느끼겠지만, 모든 코드를 검증하는 것은 현실적으로 불가능하며, 비효율적이라는 것도 알아야 합니다.
ㅣ IT의 전성시대
IT 관련 산업들은 꾸준하게 발전해오고 있었지만, 코로나 19로 인해서 더욱더 빠르고 그리고 그 범위가 넓게 발전이 되었다고 생각을 합니다. 그리고 그만큼 다양한 사람들이 IT에 더 많은 관심을 가지게 되었습니다. 이로 인해서 과거보다 더 많은 사람들이 IT라는 산업에 관심을 가지게 되었고 관련된 직무들도 세분화되고 더 다양하게 만들어지고 있는 거 같습니다.
그렇기 때문에 저도 개발자는 아니지만, 어느 정도 개발에 대한 지식은 알고 있어야 한다는 생각으로 이 책을 접하게 되었습니다. 백엔드까지는 아니더라도 프런트엔드에 대한 약간의 기본적인 지식이 있으면 확실히 업무에 도움이 많이 될 거라는 생각이 들었기 때문입니다. 또한 기획자들도 개발적인 기본지식이 있는 사람을 더 선호하는 추세라는 이야기도 들었습니다.
그래서 혹시라도 개발자는 아니지만, 개발에 관심이 있는 사람이라면 기초부터 완성까지 프런트엔드와 같은 개발와 관련된 책들을 접하시면서 개발에 대한 이해도를 조금이라도 올려보시는 것도 좋을 거 같습니다.
출판사로부터 책을 제공받아 주관적으로 작성한 글입니다.
