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

p.4
Ajax의 등장으로 서버에 필요한 데이터만 요청해 응답으로 받아 처리할 수 있게 되었습니다. 기존처럼 일부 데이터를 갱신할 때 전체 페이지를 새로 그리지 않아 데이터의 처리량도 대폭 줄어들었고, 응답 데이터에 대한 가독성도 향상됐습니다. 또한 클라이언트 영역에서 응답받은 데이터를 처리하는 자바스크립트의 중요성도 높아졌습니다.

 

p.5~6

앞서 설명한 개발 도구와 프레임워크 외에도 다양한 프로젝트가 있으며, 아마 이 글을 쓰는 지금 이 순간에도 새로운 무언가가 나올 것입니다. 그렇다면 이 춘추 전국 시대에 길을 잃지 않고 나아가려면 어떻게 해야 할까요? 방법은 많겠지만, 한 가지 명확한 것은 기본기(HTML, CSS, 자바스크립트)를 튼튼히 다져야 합니다. 수학에서 미분과 적분을 하려면 덧셈과 뺄셈 등 기본적인 연산을 할 줄 알아야 합니다. 프런트엔드 개발도 마찬가지입니다. 코어 기술에 대한 이해도가 높을수록 개발 도구나 프레임워크를 더 쉽게 파악해 사용할 수 있습니다. 더 나아간다면 자신만의 철학을 가진 멋진 라이브러리를 만들 수 있을 것입니다.

 

p.7

Microservice : 애플리케이션을 느슨하게 결합된 작은 서비스들로 나눠 구성하는 개발 기법입니다. 각 서비스를 독립적으로 개발해 수정 및 배포가 쉽지만, 서비스 간 통신에 별도의 인터페이스를 만들어야 한다는 단점이 있습니다.

 

Monolithic : Microservice와 반대되는 개념으로 하나의 거대한 아키텍처 안에서 서비스를 구성하는 모듈들을 개발하는 전통적인 아키텍처입니다. 초기에는 단순하지만, 규모가 커질수록 모듈 간 의존성과 복잡도가 높아진다는 단점이 있습니다.

 

p.9

백엔드 개발자는 미리 약속한 규약을 기반으로 API의 데이터 포맷을 설계하고 프런트엔드 개발자와 공유합니다. 프런트엔드 개발자는 백엔드 API의 개발 상태에 영향을 받지 않도록 데이터를 모킹(외부 서비스나 모듈들을 실제로 연결하지 않고 가짜 모듈을 작성해 테스트하는 행위입니다. 프런트엔드 개발에서는 주로 백엔드 API가 모킹의 대상입니다.)해 개발을 진행합니다. 더미 데이터를 만들거나 Ajax 모킹 라이브러리를 사용하기도 하지만, 가장 좋은 방법은 별도의 모킹 인터페이스 또는 서버를 통해 개발하는 것입니다. 중간 인터페이스를 만들어 사용하면 불필요한 더미 데이터를 만들거나 API를 모킹할 필요 없이 프런트엔드 개발을 진행할 수 있습니다. 결과적으로 프런트엔드와 백엔드 간 의존성이 낮아지므로 개발 생산성이 높아지고, 백엔드 API가 구현될 때 쉽게 연동할 수 있습니다.

 

p.16

- 인라인(inline) 요소 : 태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지합니다. 높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작합니다. <span>이나 <button>, <img> 등이 대표적인 인라인 요소입니다.

- 블록(block) 요소 : 태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작합니다. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오른쪽으로 확장됩니다. <div>나 <article>, <form>과 같은 요소들이 대표적인 블록 요소입니다.

 

p.25~26

SEO(Search Engine Optimization)

 

1) 시맨틱하게 HTML을 작성하자

2) <title>을 놓치지 말고 적절하게 작성하자

3) <meta name="description">을 이용해 페이지 설명을 남기자

4) <meta charset="UTF-8"/>를 사용해 인코딩 방식을 지정하자

5) open graph, twitter 태그를 사용해 외부 사용자를 유인하자

 

p.29

CSS의 프로퍼티 중에는 상위 요소(부모, 조상)에서 적용되었지만, 자식 요소까지 상속되는 프로퍼티들이 있습니다. 대표적으로 font 관련 프로퍼티나 색상, 정렬 방식의 프로퍼티가 상속됩니다.

<div style="font-size:20px;">
    parent
    <!-- child 또한 font-size가 20px로 노출 -->
    <p>child</p>
</div>

 

반대로 width, height, margin, display, border처럼 상속되지 않는 프로퍼티 또한 존재합니다. 

<div style="border: 1px solid #ccc">
    parent
    <!-- child border가 없습니다. -->
    <p>child</p>
</div>

 

p.35~36

CSS에서 선택자는 종류나 개수에 따라 명시도(Specificity)를 가집니다. 만약 한 요소에서 같은 스타일을 지정하는 선택자가 여러 개라면 명시도가 높은 선택자의 스타일이 적용됩니다.

 

명시도는 포커의 승리 조건과 비슷합니다. 포커에서는 숫자, 알파벳이 두 개가 같을 때 페어, 세 개가 같을 때 트리플이라고 합니다. 양쪽의 카드가 모두 페어인 경우에는 더 많은 페어를 가진 사람이 승리하지만, 페어가 아무리 많아도 하나의 트리플을 이길 수는 없습니다. 이와 유사하게 명시도가 같으면 더 많이(구체적으로) 작성된 선택자의 스타일이 적용되며, 상위 명시도를 가진 선택자가 하나라도 있으면 아무리 하위 선택자의 개수가 많아도 상위 명시도를 가진 선택자의 스타일이 적용됩니다.