[책] 아는 만큼 보이는 프런트엔드 개발

정은경·2024년 11월 6일
0

👸 Front-End Queen

목록 보기
272/278

Part 1. 처음 만나는 프런트엔드

1장. 프런트엔드 시작하기

Part 2. 프런트엔드 로드맵 따라가기

2장. 네트워크와 인터넷

3장. HTML, CSS, 자바스크립트

3.1 들어가기 전에

  • 다양한 기술의 정의, 등장 배경, 동작 방식

3.2 HTML (Hypertext Markup Language)

  • 프런트엔드 개발은 웹 브라우저에서 시각적으로 렌더링(rendering)되는 UI를 개발하는 것을 말함
  • 렌더링(rendering)은 서버로부터 소스 코드를 읽어와 웹 브라우저에 보이는 그래픽 형태로 출력하는 과정을 말함
  • HTML (Hypertext Markup Language)은 웹 브라우저에 시각적으로 보이는 웹 페이지를 만들기 위해 사용하는 표준 마크업 언어. 마크업 언어는 태그 등을 이용해 문서나 데이터의 구조를 표시함

3.2.1 태그 (tag)

  • 일반 태그
    • 시작 태그와 종료 태그
      • 반드시 콘텐츠가 포함됨
      • 이러한 태그는 콘텐츠에 의미를 부여하기 위해 사용함
      • 콘텐츠에는 텍스트, 이미지, 링크, 폼 같은 HTML 구성 요소, 다른 태그로 작성한 요소 등이 포함됨
    • 빈 태그
      • 콘텐츠가 비어 있는 태그라는 의미
      • 빈 태그는 태그 자체의 의미와 역할이 맹우 주요
      • 예) <br>
  • 시맨틱 태그
    • 초창기에는 <시작태그>콘텐츠</종료태그> 형식을 사용한다 하더라도 태그 자체에 아무런 의미를 부여하지 않고 시각적인 효과(스타일)만 나타냈음
      • 예) <b></b>, <i></i>
    • HTML이 발전하면서 웹 페이지의 효과적인 유지보수 및 코드의 확장성을 위해 콘텐츠와 시각적인 효과를 분리하는 쪽으로 눈을 돌렸음. 또한 콘텐츠를 보다 의미 있게 전달하고 문서의 구조를 효율적으로 구분하기 위해 더욱 의미론적인 태그의 필요성이 부각됨. 이러한 점을 반영해 HTML5에서는 시맨틱 태그(semantic tag) 라는 개념을 담았음

시맨택 태그 (semantic tag)

  • 사람이 이해하기 쉽ㄷ도록 이름만 보고 역할이나 위치를 알 수 있게 만든 태그
  • 시맨틱 태그의 예:
    • header : 웹 페이징의 헤더 영역을 구분
    • nav : 웹 페이지에서 내부으이 다른 영역이나 외부 연결 링크 영역을 구분
    • section : 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분
    • article : 웹 페이지에서 독립적인 영역을 구분
    • aside : 웹 페이지에서 옆에 위치하는 영역을 구분
    • footer : 웹 페이지에서 푸터 영역(저작권 정보, 연락처, 사이트 맵 등)을 구분

3.2.2 속성 (attribute)

  • 속성(attribute)은 태그에 의미나 기능을 더하는 역할을 함
  • 글로벌 속성 (global attribute)
    • 일반적으로 태그에 따라 사용할 수 있는 속성이 다름
    • 일부 속성은 태그의 종류와 상관없이 모든 태그에서 사용할 수 있는데, 이를 글로벌 속성이라고 함

3.2.3 문서의 기본 구조

  • 모든 태그는 <html></html> 태그 사이에 작성함
  • <html> 태그는 HTML 문서의 시작과 끝을 의미함
  • 웹 브라우저는 <html></html> 태그 사이에 작성된 코드를 읽어 HTML 규칙에 맞게 해석한 뒤 그 결과를 표시함

3.2.4 학습방법

3.3 CSS (Cascading Style Sheet)

  • CSS는 웹 페이지에 시각적인 디자인을 입히는 데 사용하는 스타일 시트 언어
  • 스타일 시트 언어
    • 문서에 스타일을 적용하는 언어
  • HTML이 웹 페이지의 의미론적 구조를 담당한다면, CSS는 웹 페이지의 시각적인 디자인을 담당

3.3.1 주요 특징

  • 캐스케이딩과 상속
  • 캐스케이딩 (cascading)
    • (참고) cascade 뜻
    • 하나의 태그에 적용되는 스타일 규칙이 여러 개일 때 우선순위에 따라 스타일이 적용되는 원칙을 의미
    • CSS는 내부적으로 캐스케이딩 원칙이 적용되기 때문에 여러 스타일이 동시에 적용되더라도 오류가 발생하지 않음
    • 캐스케이딩 따라 우선순위를 판별하는 원리: 중요도, 명시성, 작성 순서
      1. 중요도
        • CSS 속성의 마지마겡 !important 키워드를 붙이면 해당 CSS 속성은 캐스케이딩 원칙에서 가장 높은 우선순위를 가지게 됨
        • 만약 하나의 태그에 적용되는 스타일 규칙에 !important 키워드가 여러 개 사용됐다면 작성 순서가 더 늦은 것이 우선 적용됨
      2. 명시성 (specificity)
        • CSS의 선택자(selector)가 얼마나 구체적인지를 나타내는 값을 의미
        • 선택자란 말 그대로 스타일을 적용할 요소를 선택해주는 요소
        • CSS에 내부적으로 선택자에 따른 명시성 값 정의:
          • 인라인 선택자: 1000
          • 아이디 선택자: 100
          • 클래스 선택자, 가상 클래스 선택자, 속성 선택자: 10
          • 요소 선택자, 가상 요소 선택자: 1
        • 명시성 값의 총합이 높은 스타일이 총합이 낮은 스타일보다 우선 적용됨
      3. 작성 순서
        • 중요도와 명시성을 판단해도 우선순위가 결정되지 않는다면 마지막으로 적용하는 원칙은 작성 순서
        • 가장 늦게 작성된 CSS 속성일수록 우선순위가 더 높음
  • 상속 (inheritance)
    • 부모 요소에 적용된 속성이 자식 요소에 자동으로 적용되는 현상
    • 단, 모든 속성이 상속되는 것은 아니고 상속되는 속성이 따로 있음
      • 일반적으로 텍스트와 관련된 속성(글꼴, 크기, 색상)이 상속되고, 박스 모델과 관련된 속성(너비, 높이, 여백, 마진)은 상속되지 않음

박스 모델
모든 HTML 요소가 사각형 박스로 둘러싸여 있다는 개념
박스 형태의 요소를 원하는 곳에 배치해 하나의 웹 페이지를 원하는 모양으로 만듬
하나의 박스는 네 가지 구성 요소(영역)로 이루어짐:
1. 콘텐츠 (content, 내용)
2. 패딩 (padding, 내부 여백)
3. 보더 (border, 테두리)
4. 마진 (margin, 외부 여백)
CSS는 이러한 박스의 크키, 위치, 속성(색, 배경, 테두리 모양 등)을 결정함

3.3.2 적용 방법

  • 모든 웹 페이지는 HTML로 작성하며, HTML로 작성된 문서를 웹 브라우저가 해석해 화면에 표시함.
  • CSS는 웹 브라우저가 HTML 문서를 해석할 때 참조할 수 있어야함
  • HTML에 CSS를 적용하는 방법(3)
    1. 내부 스타일 시트 (internal style sheet)
      • <head> 태그 내부에 <style> 태그를 이용해 CSS를 적용
    2. 외부 스타일 시트 (external style sheet)
      • 별개의 CSS 문서를 만들어 HTML 문서와 연결하는 방법
      • 이때 CSS 문서의 확장자는 반드시 *.css여야 함
      • <head> 태그 내부에 <link> 태그를 이용해 CSS 문서를 연결하면 HTML 문서에 CSS가 적용됨
    3. 인라인 스타일 (inline style)
      • HTML 태그에 사용할 수 있는 글로벌 속성 중 하나인 style 속성을 이용해 CSS를 적용하는 것

3.3.3 기본 문법

h1     {color: red;}
--      -----  ---
선택자    속성    값
  • 선택자
    • CSS 스타일을 적용할 HTML 요소를 선택
  • 선언부
    • 선택자에서 선택한 요소에 적용할 스타일을 작성
    • 적용하고자 하는 스타일을 속성과 값의 쌍으로 중괄호({}) 안에 작성. 이때 값 뒤에 세미콜론(;)을 넣으면 여러 스타일을 연달아 작성할 수 있음

3.3.4 학습 방법

  • 선택자 지정 방법 정확히 알기
  • 속성과 값 학습하기
  • 스타일 호환성 이해하기
    • 같은 CSS 속성과 값이라도 웹 브라우저의 종류(엣지, 크롬, 사파리, 파이어폭스 등)에 따라 조금씩 다르게 보일 수 있음
    • 최신 CSS3 스펙은 브라우저마다 조금씩 다르게 구현된 부분이 많으므로 스타일 호환성을 이해하고 있는 것이 좋음
  • 반응형 디자인과 미디어 쿼리 학습하기
    • CSS3는 반응형 디자인을 처리할 수 있는 속성이 많이 추가됨 예) 미디어 쿼리 (media query)
  • 공식 문서와 자료 참고하기
  • CSS의 역사 공부하기

3.4 자바스크립트 (JavaScript)

  • 자바스크립트는 HTML과 CSS로 작성된 정적인 웹 페이지에 복잡한 기능을 구현해 생동감을 붙여넣는(동적인 웹 동작 기능) 스크립트 언어

    스크립트 언어 (script language)
    새로운 프로그램을 만들기보다는 기존의 소프트웨어를 제어하는 용도로 쓰이는 언어
    대체로 문법이 단순하고 쉬우며, 컴파일 과정 없이 바로 실행되고, 실행 속도가 느림

3.4.1 적용 방법

  • 자바스크립트도 CSS처럼 웹 브라우저가 HTML 문서를 해석할 때 같이 해석돼야 하므로 HTML 문서에 적용해야 함
  • HTML에 자바스크립트를 적용하는 방법(3):
    1. 내부 스크립트 (internal script)
      • HTML 문서 내부에 <script> 태그를 이용해 자바스크립트 코드를 작성하는 것
      • <script> 태그는 <body> 태그가 끝나기 직전에 사용하는 것이 성능상 유리함
    2. 외부 스크립트 (external script)
      • 별개의 자바스크립트 문서를 만들어 HTML 문서와 연결하는 것
      • 이때 자바스크립트 확장자는 *.js
      • <script> 태그를 이용해 외부의 자바스크립트 문서와 연결
      • 내부 스크립트 방법과 마찬가지로 <body> 태그가 끝나기 직전에 사용하는 것이 성능상 유리함
    3. 인라인 (inline)
      • HTML 태그에서 제공하는 이벤트 속성을 사용해 자바스크립트 코드를 적용하는 것

3.4.2 기본 문법

  • 실행문 (statement)
  • 선언 및 할당
    • 선언: 프로그램에서 어떤 변수나 명령을 사용하기 위해 컴퓨터에 알리는 것
    • 할당: 컴퓨터 메모리에 데이터를 저장하는 것
  • 자료형 (data type)
    • 기본 자료형: 문자, 숫자(저수, 실수), 논리(True, False), Undefined, Null, Symbol 등
    • 참조 자료형: 함수, 배열, 객체

3.4.3 학습 방법

정리하기

4장. HTML, CSS, 자바스크립트 심화 기술

4.1 HTML 전처리기 (HTML preprocessor)

  • 기존의 HTML 문법을 확장하고 개선해 작성한 코드를 HTML 코드로 변환하는 도구
  • HTML의 기능을 확장해 만든 마크업 언어가 각각 독자적인 문법 규칙을 가지고 있더라도 문제가 없음. 전처리기가 있으니 다시 HTML 코드로 변환해서 사용할 수 있기 때문.
  • HTML 전처리기 언어
    • HTML 전처리기로 코드를 변환해 사용하는 언어
    • 변수, 반복문, 조건문과 같은 프로그래밍 문법을 사용할 수 있도록 HTML을 확장해 만든 스크립트 언어
    • HTML 전처리기 언어로 작성한 코드는 궁극적으로 HTML 코드가 아니기 때문에 HTML 코드로 컴파일하는 과정을 거쳐야만 웹 브라우저에서 실행할 수 있음
    • 예) 함엘, 슬림, 퍼그 등

4.1.1 함엘 (Haml, HTML abstraction markup language)

4.1.2 슬림 (Slim)

4.1.3 퍼그 (Pug)

4.1.4 학습 방법

4.2 CSS 전처리기 (CSS preprocessor)

  • 기존의 CSS 문법을 확장하고 개선해 작성한 코드를 기존의 CSS 코드로 변환하는 도구
  • CSS 전처리기에 대한 개념적인 설명은 기준이 되는 언어가 다른 점만 빼면 HTML 전처리기와 같음
  • 웹 브라우저는 HTML과 마찬가지로 CSS만 해석할 수 있음. 따라서 CSS를 확장해 만든 새로운 언어는 CSS 코드로 컴파일해야만 웹 브라우저에서 정상적으로 동작함.
  • 예) CSS 전처리기 언어: SCSS, LESS, Stylus

4.2.1 SCSS

  • 원래 SASS(Syntatically Awesome Style Sheet, 일명 '사스')로 개발됐다가 새롭게 개편돼 SCSS라는 이름으로 공개됨
  • SCSS의 원형인 SASS는 2006년에 햄프턴 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일 시트 언어
  • CSS의 불편한 점을 개선하고 개발자에게 더 나은 스타일 시트를 작성하는 경험을 제공하기 위해 개발됨
  • SASS는 variable, import, nesting, extends, mixins, operations, if/else, loop 등 프로그래밍 언어에 있을 법한 기능을 제공. 하지만 CSS와 달리 중갈호({})와 세미콜론(;)을 사용하지 않고 들여쓰기를 통해 블록과 규칙을 구분했음. 또한 새로운 문법까지 추가해 배우기 어렵다는 단점이 있었음.
  • 이후 SASS는 세 번째 정식 버전을 발표하면서 기존의 CSS 문법과 최대한 유사하고, SASS에서 추가한 문법을 그대로 적용할 수 있는 새로운 형태의 SCSS를 공개했음. 최근 SASS 공식 사이트에서도 SASS 보다 SCSS를 사용할 것을 권장함
  • SASS 공식사이트
  • SASS 가이드라인 한국어 번역본
  • SCSS의 주요 문법적 특징들:
    1. 변수 (variable)
      $font-size: 16px;
div {font-size: $font-size;}
    2. 가져오기 (import)
      • 한 SCSS 파일에서 다른 SCSS 파일을 가져오는 문법
      • @import를 사용하면 CSS를 기능별 또는 역할별로 분리해 구현함으로써 추후에 유지/보수를 편하게 할 수 있음
      @import "_from"; /* _form.scss 파일 가져오기 */
    3. 중첩 (nesting)
      • CSS 코드를 중첩(선택자 안에 다른 선택자를 다시 선언)해 작성하는 기능을 제공. 이를 통해 CSS 구조를 더 직관적이고 가독성 있게 표현할 수 있음
      .card {
	.card-header {
  	padding: 8px;
  }
}
    4. 확장 (extends)
      • 다른 선택자에 적용된 스타일을 모두 가져오고 싶을 때 사용
      • @extend를 사용한 코드를 컴파일하면 쉼표(,)를 사용하는 그룹 선택자가 생성됨
      • 컴파일 전
      .btn {width: 100px;}
.btn-danger {
	@extend .btn;
	background-color: red;
}
      • 컴파일 후
      .btn, .btn-danger {
	width: 100px;
}
.btn-danger {background-color: red;}
    5. 재사용 (mixins)
      • @mixin과 @include는 재사용하기 위한 스타일을 정의하거나, 정의된 스타일을 가져올 때 사용하는 문법
      • @mixin : 재사용하기 위한 스타일을 정의
      • @include : 이미 정의된 스타일을 가져와 사용
      @mixin bordered() { /* bordered()라는 스타일 정의 */
	border: 1px solid #ddd;
}
h1 {
	@include bordered(); /* bordered() 스타일 사용 */
}
      • @mixin은 자바스크립트 함수처럼 매개변수를 사용할 수 있음. 매개변수(parameter)는 변수의 한 종류로, 스타일에 설정할 데이터를 저장하는 데 사용함.
      @mixin bordered($width: 5px) {
	border: $width solid #ddd;
}
h1 {
	@include bordered(3px);
}
    6. 연산 (operations)
      • SCSS에서는 CSS에서 산술 연산을 할 때 사용하는 calc() 함수 없이도 덧센, 뺄셈, 곱셈, 나눗셈, 나머지 같은 연산을 할 수 있음
      • 산술 연산으로 처리할 수 있는 단위는 픽셀(px) 및 상대적 단위(%, em, vh, vw 등)임
      • 일부 CSS 속성에서는 슬래시(/)를 허용하므로 산술 연산을 할 때는 소괄호로 묶어야 함
      • 컴파일 전
      $default: 10px;
$per: 30%;
div {
	width: (100px / 3);
  height: ($default + 10);
  padding: ($per - 10);
  border: ($default * 2) solid red;
}
      • 컴파일 후
      div {
	width: 33.333333333px;
  height: 20px;
  padding: 20%;
  border 20px solid red;
}
    7. 조건문 (if/else)
      • 컴파일 전
      $theme: "darkmode";
body {
	@if ($theme == "darkmode") {
  	color: white;
  } @else {
  	color: black;
  }
}
      • 컴파일 후
      body {
	color: white;
}
    8. 반복문 (loop)
      • 컴파일 전
      @for $i from 1 through 5 {
	.mt#{$i} {
  	margin-top: $i + px;
  }
}
      • 컴파일 후
      .mt1 {
	margin-top: 1px;
}
.mt2 {
	margin-top: 2px;
}
.mt3 {
	margin-top: 3px;
}
.mt4 {
	margin-top: 4px;
}
.mt5 {
	margin-top: 5px;
}

4.2.2 LESS

  • 2009년에 엘렉시 셀리에가 처음 공개한 CSS 전처리기 언어
  • SCSS에서 영감을 받은 셀리에는 개발자의 생산성을 높이기 위해 SCSS보다 더 간결하고 편리한 기능을 추가했음
  • LESS 공식 사이트
  • LESS는 SCSS처럼 변수, 가져오기, 중첩, 재사용, 연산, 조건문, 반복문 등 프로그래밍 언어에 있을 법한 기능을 제공함

    1. 변수

      @font-size: 16px;
div {font-size: @font-size;}

    2. 가져오기

      @import "_from";

    3. 중첩

      .card {
   .card-header {
      padding: 8px;
   }
}

    4. 재사용

      • LESS는 SCSS와 달리 확장 문법(@extends)을 별도로 지원하지 않음
      • 대신 재사용 문법을 지원하는데, 확장과 재사용은 최종적인 결과가 유사해 LESS에서는 확장과 재사용을 따로 구분하지 않음
      • 컴파일 전
      .btn {width: 100px;}
.btn-danger {
   .btn;
   background-color: red;
}
      • 컴파일 후
      .btn {width: 100px;}
.btn-danger {
   width: 100px;
   background-color: red;
}

    5. 연산

      • 색상 값을 더 밝게 표현할 수 있는 lighten() 함수
      • 컴파일 전
      @base-color: #336699;
.light-color {background-color: lighten(@base-color, 20%);}
      • 컴파일 후
      .lighter-color {background-color: #6699cc;}

    6. 조건문

      • LESS에서는 if 키워드만 사용
      • 컴파일 전
      #condition: false;
.selector {
   color: if(@condition, red, blue); /* @condition이 true이면 red, false이면 blue */
}
      • 컴파일 후
      .selector {
   color: if(false, red, blue);
}

    7. 반복문

      • 특정 키워드를 사용해 반복문을 구현하는 것이 아니라, 반복문을 정의하고 호출하는 방식으로 구현
      • 컴파일 전
      .generate-margins(@index) when (@index < 6) {
   .mt@{index} {
   	margin-top: @index * 1px;
   }
   .gernate-margins(@index + 1);
}

.generate-margins(1)
      • 컴파일 후
      .mt1 {margin-top: 1px;}
.mt2 {margin-top: 2px;}
.mt3 {margin-top: 3px;}
.mt4 {margin-top: 4px;}
.mt5 {margin-top: 5px;}

4.2.3 학습 방법

  • CSS 전처리 언어는 SCSS, LESS 외에도 Stylus, Stylecow, CleverCSS 등이 있으나 현업에서는 SCSS와 LESS를 주로 사용함
  • 하나를 배운다면 SCSS
  • 공식 문서 활용하기

4.3 CSS 후처리기 (CSS post-processor)

  • 완전하게 작성된 CSS 문법을 가지고 자바스크립트 플러그인을 이용해 CSS 문법 스타일을 변환하는 도구
  • CSS 문법을 그대로 사용해 작성하고, 필요한 확장 기능은 별도의 자바스크립트 플러그인으로 처리함
  • 후처리기는 전처리기와 달리 특정 언어를 가리키는 것이 아니라, CSS 코드를 변환하는 자바스크립트 플러그인을 의미함
  • CSS 후처리기를 지원하는 대표적인 도구로 PostCSS가 있음. 대부분의 후처리기에 해당하는 플러그인은 PostCSS 도구를 통해 제공됨

4.3.1 PostCSS

  • PostCSS는 CSS로 작성된 코드를 추상 구문 트리(AST, Abstract Syntax Tree)로 변환한 후 자바스크립트 플러그인을 사용해 CSS 스타일을 변환하는 방법(API)을 제공하는 도구
  • PostCSS를 통해 제공되는 자바스크립트 플러그인이 바로 후처리기 역할을 함. 그래서 PostCSS를 단순히 후처리기 기능을 지원하는 도구로 보는 사람도 있고, 그 자체를 CSS 후처리기로 보는 사람도 있음. 하지만 결국 후처리기를 사용하려면 PostCSS 같은 변환 도구가 필요하므로 PostCSS와 자바스크립트 플러그인을 한 맥락으로 이해하는 것이 좋음
  • PostCSS는 대규모 플러그인 생태계를 제공함. 이러한 플러그인에는 CSS 코드의 일관성 문제나 잠재적 오류 등을 감지하고 식별하는 기능, 변수 활용, 코드 재사용, CSS 구문과 이미지를 변환하는 기능이 포함됨

추상 구문 트리 (AST, Abstract Syntax Tree)

  • 추상 구문 트리는 코드에서 계층 구조로 된 정보를 추출해 트리 형태로 만든 것
  • 트리에 괄호((), {}) 등 구문의 세세한 정보까지 표기하지 않기 때문에 추상 구문 트리라고 함
  • PostCSS의 적용 방법과 몇 가지 유용한 플러그인들:

    1. PostCSS 적용 방법

      • 파슬, 웹팩과 같은 모듈 번들러를 이용해 설치함. 설치 방법은 모듈 번들러에 따라 다르며, PostCSS 공식 사이트를 참고해 설치하면 됨
      • PostCSS 공식 사이트

      모듈 번들러
      여러 자바스크립트 모듈을 웹 브라우저에서 실행할 수 있는 하나의 자바스크립트 파일로 묶는 도구

      • PostCSS를 설치했다면 후처리기를 위한 자바스크립트 플러그인을 설치해야함. PostCSS에서 사용하는 자바스크립트 플러그인 목록은 PostCSS 공식 사이트의 [Plugins] 메뉴에서 검색할 수 있음
      • 자바스크립트 플러그인을 설치하고 나면 PostCSS 설정 파일을 사용해 플러그인을 등록해야함. 일반적으로 PostCSS 설정 파일은 'postcss.config.js' 파일에 다음과 같은 구조로 ㅈ가성함
      // postcss.config.js
const config = {
  require('플러그인1'),
  require('플러그인2'),
  ...
  require('플러그인n'),
}
module.exports = config
      • 사용할 플러그인을 plugins 객체의 속성으로 등록하기만 하면, 각 플러그인에서 지원하는 후처리 기능을 사용할 수 있음

    2. postcss-import 플러그인

      • 하나의 CSS 파일 안에서 다른 CSS 파일을 불러오기 위해 사용함

    3. postcss-mixins 플러그인

      • CSS가 지원하지 않는 @mixin 문법, 즉 코드 재사용을 위해 사용함

    4. postcss-nested 플러그인

      • CSS에서 중첩 문법을 사용할 수 있도록 지원

    5. postcss-preset-env 플러그인

      • CSS가 지원하지 않는 최신 문법을 웹 브라우저가 이해할 수 있는 CSS 문법으로 변환

    6. auto-prefixer 플러그인

      • postcss-preset-env에 포함된 플러그인
      • CSS 속성을 웹 브라우저의 종류에 맞게 접두사를 붙여 변환하는 역할을 함

    7. cssnano 플러그인

      • CSS 코드의 불필요한 공백, 중복된 코드, 주석처럼 실제 동작에 필요없는 부분을 알아서 최적화함으로써 CSS 코드의 길이를 최대한 줄여줌

4.3.2 학습 방법

  • 단독으로 개발 환경 구성하지 않기
  • 공식 문서 활용하기
  • 커뮤니티 활용하기

4.4 CSS 방법론

  • CSS의 불편한 점을 개선하기 위해 CSS 전처리기나 후처리기 같은 방법을 사용하는 것은, 말하자면 CSS라는 언어를 문법적으로 뜯어 고쳐 개선하려는 것
  • 하지만 일각에서 CSS를 문법적으로 고치지 않고 좀 더 효율적으로 작성해 불편을 개선하려 했는데, 그 결과 CSS 방법론 (CSS methodology) 이 등장했음
  • CSS 방법론은 CSS 코드를 구조화하고 효율적으로 관리하기 위한 일련의 관행 및 규칙을 말함
  • 사람들은 이러한 방법론을 CSS에 적용해 코드의 복잡성과 유지/보수의 어려움 등 기본적으로 CSS가 가지고 있던 문제점을 극복하려고 했음

4.4.1 OOCSS (Object Oriented CSS)

  • 웹 개발자로 일하던 니콜 설리번이 2008년에 제안한 CSS 방법론
  • 설리번은 프로그래밍 언어에서 이미 대중적으로 사용되던 객체 지향 디자인(object oriented desing) 원칙을 CSS에 적용해 CSS를 객체 지향 디자인이 적용된 프로그래밍 언어처럼 쉽게 만드는 데 초점을 두었음
  • OOCSS의 두 가지 원칙:
    1. 구조와 외형의 분리 (separate structure and skin)
      • 구조: 버튼의 너비, 높이, 여백 등 버튼 요소의 기본적인 구조를 담당하는 속성을 말함
      • 외형: 폰트 크기, 폰트 색상, 배경 색상, 테두리와 같은 외형적인 모습을 결정하는 속성을 말함
    2. 컨테이너와 콘텐츠의 분리 (separate container and content)
      • 컨테이너는 레이아웃을, 콘텐츠는 스타일을 의미하며, 이 둘을 분리해 작성하라는 것임

4.4.2 SMACSS (Scalable and Modular Artchitecture for CSS)

  • 조너선 스누크가 2011년에 제안한 CSS 방법론
  • CSS 코드 작성을 위해(for CSS), 확장 가능한(Scalable), 모듈러(Modular) 방식의 아키텍처(Artchitecture)를 지원하는 방법론
  • SMASS에서 CSS 코드를 작성할 때는 다섯 가지 규칙, 즉 기본, 레이아웃, 모듈, 상태, 테마를 지켜야 함
    1. 기본(base)
      • HTML 요소에 대한 기본 스타일을 정의하는 것을 의미
      • 예) <hn>,<p> 태그는 단락의 간격을 지정하기 위해 위아래 margin 값이 포함돼 있고, <hn> 태그는 뒤에 붙는 숫자(h1~h6)에 따라 글자의 크기나 굵기가 달라지도록 스타일 값이 설정돼 있음. 이와 같이 태그에 포함된 기본 스타일이 SMACSS 방법론에서 말하는 기본 규칙
        - reset.css
        • HTML 태그의 기본 스타일을 초기화하기 위해 사용하는 것
        • 기본 규칙을 지키면서 스타일을 작성할 때 선택자로 태그 선택자나 의사 클래스 선택자(가상 요소 선택자, 가상 클래스 선택자)만 사용해야함
        • 클래스 선택자, ID 선택자, 그 외의 선택자 조합 등은 사용하면 안됨. 또한 !important와 같이 우선순위에 영향을 줄 수 있는 직접적인 키워드도 사용하면 안됨
    2. 레이아웃
      • 디자인 관점에서의 레이아웃 구분:
        • 주요 레이아웃: header, nav, article, section, aside, footer
        • 하위 레이아웃: header 안에 있는 로고, aside 영역에 있는 위젯 같은 요소
      • 레이아웃 규칙을 위한 클래스명은 항상 'l-'로 시작해야함 (!important 사용금지)
    3. 모듈 (module)
      • 웹 페이지에서 반복적으로 사용하거나 사용할 가능성이 있는 구성 요소의 스타일을 정의하는 것을 말함
      • 예) 위젯, 배너, 폼 양식
      • 모듈 규칙을 따르는 스타일을 작성할 때는 예기치 않은 중첩 문제를 해결하기 위해 하위 선택자나 형제 선택자 같은 선택자 조합 방법을 가능한 한 사용하지 말아야함. 어쩔 수 없이 사용해야 한다면 자식 선택자만 사용할 것!
    4. 상태 (state)
      • 레이아웃이나 모듈의 상태 변화를 표현하기 위해 스타일을 정의하는 것을 말함
      • 상태를 나타낼 때는 접두사 'is-'를 사용하며, 필요시 !important 키워드를 사용할 수도 있음
    5. 테마 (theme)
      • 레이아웃이나 모듈이 어떤 식으로 보이는지 결정하기 위한 스타일을 정의하는 것
      • 웹 페이지 내부에서 폰트 색상, 배경 색상, 내부 여백, 외부 여백과 같이 테마에 따라 변경되는 스타일을 하나의 파일에 모아 관리하는 것
      • 예) theme/default.css, theme/darkmode.css

4.4.3 BEM

  • https://en.bem.info/
  • 실무에서는 OOCSS, SMACSS, BEM 중 BEM을 많이 사용함
  • 러시아의 얀덱스(Yandex)라는 회사가 2009년에 제안한 CSS 방법론
  • 스타일을 정의하기 위한 class 속성의 명명 규칙에 초점을 두고 있음
  • class 속성은 CSS를 적용하기 위한 식별자로, HTML의 모든 태그는 class 속성을 사용할 수 있음
  • BEM 방법론에 따르면 class 속성의 이름을 정할 때 지정하려고 하는 구성 요소를 각각 Block, Element, Modifier로 구분하여 유지/보수 및 관리가 쉬워짐:
    • Block
      • 하나의 그룹에서 가장 상위에 있는 요소를 의미
      • Block 자체가 독립적이어야 함
      • 예) 카드 UI에서 가장 최상위 부분인 <div> 태그가 Block에 해당함
      • ex) card
    • Element
      • HTML 요소에서 실질적인 콘텐츠 역할을 하는 요소를 의미
      • 이미지, 제목, 내용, 버튼 등과 같이 UI 자체를 나타내는 콘텐츠 역할을 하는 요소는 모두 Element에 해당함
      • Element는 Block으로 지정한 class 속성의 값과 __(언더바 2개)로 연결
      • ex) card__title
    • Modifier
      • HTML 요소를 특정 수식어로 분류할 때 사용함
      • --(하이픈 2개)를 사용해 선택자를 연결함
      • ex) card__btn--read

4.4.4 학습 방법

  • CSS 방법론은 웹 페이지를 만들 때 CSS 코드를 구성하고 유지/관리하는 데 도움이 되는 일련의 관행 및 규칙
  • 가장 추천하는 방법론은 BEM
  • 방법론 공부에 많은 시간 투자하지 않기

4.5 타입스크립트

  • https://www.typescriptlang.org/docs/
  • 자바스크립트 전처리기를 지원하는 언어는 라이브스크립트(LiveScript), 커피스크립트(CoffeeScript), 바벨(Babel), 타입스크립트(TypeScript) 등이며, 이 중에서 가장 많이 사용되는 것은 타입스크립트

4.5.1 타입스크립트 개요

  • 마이크로소프트에서 2년간의 개발 끝에 2012년에 공개한 자바스크립트 확장 언어
  • 타입스크립트는 자바스크립트를 포함하는 상위 집합에 해당하는 언어
  • 그래서 자바스크립트로 작성한 코드를 타입스크립트로 리팩토링(결과의 변경 없이 코드의 구조를 재조정하는 것)할 수 있음

4.5.2 선택적 정적 타입 검사

  • 자바스크립트는 기본적으로 데이터가 동적으로 할당돼 런타임 시 해당 변수에 값이 할당될 때까지 변수의 자료형을 알지 못함
  • 타입스크립트는 자바스크립트와 달리 선택적 정적 타임 검사를 지원함

4.5.3 인터페이스

  • 인터페이스를 사용해 객체와 같은 참조 자료형의 정적 타입 검사를 쉽게 할 수 있음
  • 인터페이스를 적극적으로 사용하면 객체와 같은 참조 자료형의 자료형을 일관성 있게 관리할 수 있음

4.5.4 학습 방법

  • 자바스크립트 먼저 공부하기
  • 무조건 타입스크립트가 좋다는 생각 버리기
  • 되도록 독학 피하기

정리하기

5장. 프런트엔드 개발 도구

5.1 소스 코드 에디터 (source code editor)

  • 텍스트를 편집한다는 점에서는 텍스트 에디터와 비슷하지만, 텍스트 에디터에서 지원하지 않는 자동 들여쓰기, 대괄호 일치, 코드 정렬, 인텔리센스(intellisense) 등의 기능을 제공해 코드를 좀 더 쉽게 생산적으로 작성할 수 있음
  • 대표적인 소스 코드 에디터로는 브라켓과 VSCode가 있음

5.1.1 브라켓 (Brackets)

  • https://brackets.io/
  • 어도비 에지(Adobe Edge, 어보디가 개발한 웹 도구 모음)에서 사용할 수 있는 웹 개발용 소스 코드 에디터
  • 윈도우, 맥OS, 리눅스 등의 운영체제에서 사용할 수 있음
  • 브라켓은 처음부터 디자이너와 개발자가 웹 브라우저 내에서 웹 디자인을 쉽게 할 수 있도록 만들어졌기 때문에 굉장히 현대적임
  • 프로그램 자체는 가볍지만 성능이 강력하며, 다양한 시각화 처리 도구와 전처리기를 지원함
  • 브라켓의 장점들:
    • 사용자 친화적인 UI 제공
    • 다양한 플러그인 제공
    • 실시간 미리 보기 제공

5.1.2 VSCode (Visual Studio Code)

  • https://code.visualstudio.com/
  • 마이크로소프트에서 개발한 무료 소스 코드 편집기
  • 윈도우, 맥OS, 리눅스 등읭 운영체제에서 사용할 수 있음
  • VSCode의 장점들:
    • 강력한 인텔리센스 지원
    • 디버깅 기능 내장
    • 깃 명령 탑재
    • 확장 및 사용자 정의 가능

5.1.3 소스 코드 에디터 선택 방법

  • 직관적이고 편리한 UI
  • 플랫폼 호환성
  • 커뮤니티 활성도와 지원 수준
  • 가격
  • 기능 및 확장성

5.2 버전 관리 시스템 (VCS, Version Control System)

5.2.1 버전관리 시스템의 개요

  • 코드나 파일을 시간에 따라 기록/추적/관리하는 시스템
  • 개발자가 다양한 버전의 코드를 저장하고 다른 개발자들과 쉽게 협업할 수 있는 내부 저장소(repository)를 제공함
  • 버전 관리 시스템의 주요 기능:
    • 기록
      • 누가, 언제, 어떤 내용으로 코드를 변경했는지 등의 정보가 기록으로 남음
    • 추적
      • 기록된 각 버전을 확인하는 기능
      • 자신잉 작성 중인 코드가 어떻게 변화했는지 확인할 수 있음
    • 분기
      • 하나의 코드를 가지고 여러 사람이 동시에 작업할 수 있도록 코드으이 특정 시점으로 분기하는 기능
      • 코드의 특정 시점을 기억하는 세이브 포인트(save point)를 협업하는 사람들에게 하나씩 나눠주고, 그 시점을 기준으로 작업하게 함
    • 병합
      • 분기된 코드를 하나로 합치는 기능
      • 병합 기능에는 한 파일을 동시에 수정하더라도 문제가 발생하지 않게 하는 메커니즘이 포함돼 있음
    • 백업 및 복구
      • 현재 작성 중인 코드를 임시로 저장하고, 코드를 기록했던 과거의 특정 시점으로 돌아가는 기능
      • 코드에 치명적인 결함이 발견돼 급히 수정해야 할 때 백업 및 복구 기능을 사용해 과거 버전으로 돌아가 서비스를 안정화할 수 있음

5.2.2 버전 관리 시스템의 종류 (3가지 방식)

  1. 로컬 버전 관리 시스템 (LVCS, Local VCS)
    • 로컬 컴퓨터에 데이터베이스를 설치하고 이 데이터베이스에 변경 사항을 기록하는 방식
    • 예) RCS(Revision Control System)
      • 파일의 변경 사항에 마지막 버전을 기준으로 달라진 점만 저장
  2. 중앙 집중식 버전 관리 시스템 (CVCS, Center VCS)
    • 데이터베이스를 사용자의 컴퓨터가 아니라 별도의 서버에 설치하고, 각 파일의 변경 사항을 서버에 기록하는 시스템
    • 예) CVC(Concurrent Versions System), SVN(Subversion)
      • CVC와 SVN은 소프트웨어적인 차이만 있을 뿐 버전 관리의 기본 원리는 같음
      • 파일에서 변경된 내용이 오로지 중앙 서버에만 기록되며, 모든 버전 기록이 중앙 서버에 있기 때문에 서버에 접근할 수 있는 사용자는 똑같은 소스 코드 또는 작업 결과물을 공유받을 수 있음
  3. 분산 버전 관리 시스템 (DVCS, Distributed VCS)
    • 파일이나 코드의 변경 사항을 자신의 컴퓨터와 서버에 동시에 저장
    • 단, 파일이나 코드의 변경 사항만 저장하는 것이 아니라 파일 자체를 저장함
    • 파일을 모두 저장하지만 버전별로 관리하기 때문에 특정 버전으로 되돌리면 해당 버전의 파일을 특정 시점으로 모두 되돌릴 수 있다는 것

5.2.3 분산 버전 관리 시스템: 깃

  • https://git-scm.com/docs
  • 2005년에 리누스 토르발스가 개발해 지금까지 사용됨
    git [명령어]
  • 저장소 만들기
    git init
  • 로컬 계정 정보 등록하기
    git config --local user.name "사용자_이름"
    git config --local user.email "사용자_메일"
  • 버전 기록하기
    git add [파일_이름1] ... [파일_이름n]
    git commit -m [기록_메시지]
  • 버전 기록 확인하기
    git log
  • 특정 버전의 상세 내용 확인하기
    git log -p [commit id]
  • 복구하기
    git reset --hard [commit id]

5.2.4 웹 기반 버전 관리 저장소

  • 깃허브(Github)
    • 깃이 출시되고 3년 후인 2008년에 톰 프레스턴워너, 크리스 윈스트래스, 피제이 하이엣이 함께 만든 웹 기반 버전 관리 시스템
    • 깃허브의 장점들:
      • 저장소 관리 페이지 제공
      • 호스팅 서비스 제공
      • 협업 및 커뮤니티 제공
  • 깃랩(GitLab)
    • 우크라이나 출신 개발자 드미트리 자포로제츠와 발레리 시조프가 2013년에 개발
    • 깃허브와 유사하지만 기업에 특화된 솔루션을 제공한다는 점에 차이가 있음
    • 깃랩의 주요 특징:
      • 강력한 CI/CD 기능 제공
      • 세부적 권한 설정 가능
  • 비트버킷(Bitbucket)
    • 아틀라시안이라는 회사가 만듬
    • 서비스 출시 초반부터 비공개 저장소를 만드는 데 제약을 두지 않았음
    • 비트커빗 장점들:
      • 아틀라시안 서비스와의 호환성
      • 그룹별 권한 설정
      • 상대적으로 저렴한 가격

5.2.5 학습 시점

  • 협업이 필요할 때
  • 코드의 이력 관리가 필요할 때
  • 새로운 기능이나 실험적 기능을 안정적으로 개발해야 할 때

5.3 코드 포매터 (code formatter)

  • 작성한 코드를 보기 좋게 바꿔주는 개발 도구

5.3.1 코드 포매터의 등장 배경

  • 코드 포매터를 사용하면 정해진 규칙에 맞게 스타일이 자동으로 통일ㄷ됨
  • 개발자들이 서로의 스타일을 파악할 필요없이 코드를 쉽게 이해할 수 있어 실무에서는 코드 포매터를 필수로 사용함

5.3.2 프리티어 (Prettier)

5.4 린터 (linter)

  • 사용자가 작성한 코드를 정적으로 분석해 문법적으로 오류가 발생할 만한 곳을 사전에 검사하고 올바른 코드를 작성할 수 있도록 도와주는 도구

5.4.1 린터의 등장 배경

5.4.2 HTML+CSS 린터

5.4.3 자바스크립트+타입스크립트 린터

  • JS린트
  • JS힌트
  • ES린트
    • https://eslint.org/play/
    • 니콜라스 자카스가 2013년에 개발한 자바스크립트용 링터
    • 자바스크립트뿐만 아니라 타입스크립트 코드까지 린팅할 수 있음
    • 장점들:
      • 편의성
      • 모듈성

5.4.4 학습 방법

  • 린터는 주로 코드의 품질과 일관성을 검사하기 위해 사용함
  • 공식 문서 참고하기
  • 인터넷 자료 활용하기
  • 린터 커뮤니티 참여하기
  • 실제 프로젝트에 적용하기

5.5 패키지 매니저 (package manager)

  • 패키지를 관리하는 작업을 자동화하고 안전하게 처리하기 위해 사용하는 도구

5.5.1 npm (node package manager)

  • 2010년에 npm 등장
  • Node.js 기반으로 작성된 패키지를 관리하기 위한 온라인 저장소와 커맨드 라인 도구(CLI, Command Line Interface)를 제공하는 개발 도구임
  • https://www.npmjs.com/

5.6 모듈 번들러 (module bundler)

  • 자바스크립트 파일 여러 개를 웹 브라우저에서 실행할 수 있게 하나의 파일로 묶는 데 사용하는 도구

5.6.1 모듈 번들러의 등장 배경

  • 1단계: 코드 분할화
  • 2단계: 웹 성능 향상
  • 3단계: 종속성 문제
    • 의존성 문제를 해결하는 가장 간단한 방법은 코드 파일 간의 의존성을 누군가가 기록해뒀다가 나중에 한 번에 의존성을 고려해 올바르게 자바스크립트 파일을 연결하는 것. 모듈 번들러는 바로 이러한 작업을 하는 도구.

5.6.2 웹팩 (Webpack)

  • 대표적인 모듈 번들러는 브라우저리파이, 이에스빌드, 파슬, 롤업, 웹팩 등
  • 이 중 웹팩이 가장 있기 있음
  • 웹팩은 자바스크립트 파일 뿐만 아니라 HTML 파일, CSS 파일, 각종 이미지 파일 등 하나의 웹 서비스를 구성하는 모든 파일을 관리함
  • 웹팩 핵심 구성 요소(5):
    1. 엔트리 (entry)
    2. 아웃풋 (output)
    3. 로더 (loader)
    4. 플러그인 (plugin)
    5. 모드 (mode)

정리하기

6장. 디자인 패턴과 프레임워크

6.1 웹 애플리케이션 디자인 패턴

6.1.1 디자인 패턴

  • 웹 애플리케이션을 개발할 때 일반적으로 사용되는 접근 방식 또는 모범 사례를 의미
  • 개발 시 디자인 패턴을 적용하면 시간이 지나도 유지/보수가 편리하고 확장성이 좋은 웹 사이트를 만들 수 있음

6.1.2 MPA (Multi Page Application)

  • 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는 방식
  • 장점
    • 검색 엔진 최적화(SEO, Search Engine Optimization)
    • 요청마다 응답 페이지가 분리되어 있어 구글 애널리틱스와 같은 웹 애플리케이션 분석 솔루션과 통합하기 쉬움
    • 웹 사이트의 확장성이 탁월함
  • 단점
    • 응답으로 항상 새 HTML 페이지를 받기 때문에 페이지를 갱신하기 위해 항상 새로 고침을 해야함
    • 모든 웹 페이지가 분리된 만큼 개발자가 개발해야 할 양이 많음
    • 많아지는 페이지의 양만큼 웹 사이트의 보안 및 유지/보수가 어려움
  • MPA는 AJAX가 등장하기 전까지 모든 웹사이트에서 사용됨

6.1.3 SPA (Single Page Application) = CSR (Client Side Rendering)

  • 웹 페이지에서 처음 응답받을 때 딱 한 번만 HTML, CSS, 자바스크립트 같은 자원을 내려받고 다음 요청부터는 응답받은 데이터로 필요한 부분만 변경하는 방식
  • SPA는 클라이언트의 요청으로 응답받은 데이터를 웹 페이지에서 직접 변경. 소스코드를 읽어 웹 브라우저에 보이게 그래픽 형태로 출력하는 과정. 즉 렌더링을 클라이언트에서 하는 것.
  • DOM (Document Object Model)
    • 웹 브라우저에 표시되는 HTML, CSS 요소를 자바스크립트가 이해할 수 있도록 객체화해 제공하는 모델
    • 웹 브라우저가 화면에 표시되는 구성 요소에 대해 DOM을 만들어 제공하면 자바스크립트는 DOM을 이용해 웹 브라우저에 표시되는 구성 요소를 제어함
    • 자바스크립트 프레임워크는 이 문제를 해결하기 위해 DOM을 제어하는 알고리즘을 제공
      • 앵귤러: 증가 DOM 방식
      • 리액트, 뷰: 가상 DOM 방식

6.1.4 SSR (Server Side Rendering)

  • 검색 엔진 로봇은 서버에서 실행되는데, SPA 디자인 패턴에 따르면 변경된 정보가 클라이언트에서 업데이트되므로 검색 엔진 로봇이 서버에 접속하더라도 가져갈 수 있는 정보가 없음
  • SSR은 웹 페이지를 서버에서 렌더링함

6.1.5 디자인 패턴 정리

6.2 자바스크립트 프레임워크

6.2.1 앵귤러

  • 증가 DOM 사용
  • 양방향 데이터 바인딩

6.2.2 리액트

  • 가상 DOM 사용
  • 단방향 데이터 바인딩

6.2.3 뷰

  • 가상 DOM 사용
  • 양방향 데이터 바인딩
  • 프로그레시브 프레임워크

6.2.4 자바스크립트 프레임워크의 장점

6.2.5 학습 방법

6.3 CSS 프레임워크

  • 웹 디자인을 좀 더 쉽게 하도록 해주는 CSS 코드 집합

6.3.1 부트스트랩

6.3.2 테일윈드 CSS

  • 2017년 11월에 출시된 테일윈드 CSS
  • 애덤 와선이 고안하고 테일윈드연구소에서 개발한 CSS 프레임워크
  • 테일윈드 CSS를 사용하는 이유
    • Utiltiy-first
      • 유틸리티 퍼스트는 디자인을 통해 일련의 완성된 클래스명을 사용하지 않고, 단일 기능의 CSS 속성을 통해 클래스며을 혼합해 사용하는 방식
    • 브라우저별 기본 스타일 초기화 = 리셋(reset) = 노멀라이즈(normalize)
  • 테일윈드를 사용하지 않는 이유
    • 긴 적용 기간
    • 큰 파일 용량
    • 재사용의 어려움

7장. 네트워크 통신

7.1 네트워크 계층 모델과 프로토콜

7.1.1 OSI 7 계층 (Open Systems Interconnection 7 Layers)

  • 국제표준화기구(ISO, International Organization for Standardization)가 정의한 네트워크 통신 표준
  • 응용계층 > 표현계층 > 세션계층 > 전송계층 > 네트워크계층 > 데이터링크계층 > 물리계층

7.1.2 TCP/IP 4 계층

  • 응용계층 > 전송계층 > 인터넷계층 > 네트워크접근계층

7.1.3 주요 프로토콜

7.2 HTTP (HyperText Transfer Protocol)

7.2.1 HTTP의 개요

7.2.2 HTTP 메시지

7.2.3 HTTP 헤더

7.2.4 HTTP 메서드와 상태 코드

7.2.5 HTTP 버전별 특징

7.2.6 HTTPS 보안 프로토콜

7.3 쿠키와 세션

7.3.1 쿠키

7.3.2 세션

7.4 웹 소켓

8장. API

9장. 테스트

9.3 테스트 도구

9.3.2 자동화 테스트 도구

  • Jest: 유닛 테스트 도구
  • Mocha: 통합 테스트 도구
  • Cypress: E2E 테스트 도구
  • Percy: 시각적 회귀 테스트 도구
  • aXe: 접근성 테스트 도구
  • Lighthouse: 성능 테스트 도구

10장. 배포

10.2 배포 플랫폼

10.2.2 배포 플랫폼의 종류

  • 넷리파이(Netlify)
  • 깃허브 페이지
  • Vercel

Part 3. 프런트엔드 개발자로 성장하기

11장. 공부 방향 설정하기

Reference

profile
정은경
#의식의흐름 #순간순간 #생각의스냅샷
이전 포스트

ES 모듈과 Common JS 모듈

다음 포스트

section vs. article

0개의 댓글