"JavaScript" 태그로 연결된 19개 게시물개의 게시물이 있습니다.

모바일 사파리 디버깅#

• 아이폰을 맥북에 연결한다.

• 아이폰에서 디버깅하고자 하는 웹페이지를 Safari에 띄운다.

• 맥북에서 Safari를 실행한다.

• 개발자용 > iPhone > Safari 웹 페이지 선택

  

• 요소, 콘솔, 소스, 네트워크 등 사파리의 개발자 도구로 디버깅할 수 있다.

  

Debugging Your iPhone Mobile Web App With Safari Dev Tools

모바일 사파리를 맥의 Chrome에서 디버깅하기#

모바일 Safari를 맥의 Chrome에서 디버깅하는 방법은 다음에 알아봐야겠다.

Jon Sadka - How to debug an issue in Chrome for iOS using remote debugging

리액트#

• 리액트는 내부적으로 컴포넌트가 반환하는 엘리먼트들을 트리 형태로 관리하고 표현한다.

• 이를 Virtual-DOM으로 부르는데, 이는 JavaScript 일반 객체이다. (Plain Object)

• 기존 VanillaJS는 UI를 명령형으로 작성해야 하지만, React는 선언형으로 UI를 작성할 수 있다.

컴포넌트#

• 컴포넌트는 내부에서 관리하는 상태 값인 state 와 부모 컴포넌트에서 내려 주는속성 값 props 를 가진다.

• 컴포넌트는 state , props 가 변경되면 render() 함수가 실행되어 화면을 갱신한다.

• UI 데이터(상태값과 속성값)로 뷰를 렌더링하는 것이 리액트의 핵심이다.

• setState 는 비동기로 동작한다.

리액트의 렌더링 과정#

• 컴포넌트의 Props나 State의 변경이 있을 때, 컴포넌트의 이전 상태 엘리먼트와 새로 만들어진 엘리먼트를 비교하고 실제 DOM의 업데이트 여부를 결정한다. 비교하여찾은 변경 점에 대해서만 갱신한다.

• 컴포넌트의 setState 메서드가 수행되면, 해당 컴포넌트를 Dirty 체크하고, 다음이벤트 루프에서 배치 작업으로 대상 컴포넌트들의 엘리먼트를 렌더링한다. (비동기 )

• 이러한 리액트의 렌더링 과정을 다음과 같이 쪼갤 수 있다.

  • 변경 점을 찾는 Reconciliation의 Diffing 알고리즘 (render or reconciliation phase)

  • 변경 점을 실제 UI에 적용하는 ReactDOMComponent.updateComponent (commit phase)

Reconciliation: The diffing algorithm#

Reconciliation은 어떤 변경에 대한 전/후 엘리먼트 트리를 비교(Diff)하여, 갱신이필요한 부분만을 찾아 업데이트하는 것을 의미한다. 이를 통해 브라우저의 DOM 조작을최소화시킨다.

다시 정리

• render() 에서 새로운 엘리먼트 트리를 생성

• 이전 엘리먼트 트리와 비교하여 변경 점을 찾아 업데이트

그런데 Diff 알고리즘은 O(n^3)의 시간복잡도를 가지고 있다. 리액트는 다음의 방법으로 O(n)에 근사한 휴리스틱 알고리즘을 구현하였다.

• 다른 타입의 두 엘리먼트는 다른 트리를 만들 것이다.

• 같은 레벨의 엘리먼트에 key 프로퍼티를 통해 변경되지 않아야 할 엘리먼트를 표시한다.

☝ 휴리스틱 알고리즘 : 직관에 의존하는 알고리즘. 즉 휴리스틱은 보통 합리적인실행 시간을 가지지만 그것이 항상 그렇다는 어떠한 추론 과정이나 증명이 없다.

같은 위치에서 엘리먼트의 타입이 다른 경우

1. 기존 트리를 제거 후 새로운 트리를 만든다.

2. 기존 트리 제거 시 트리 내부(하위)의 엘리먼트/컴포넌트들은 모두 제거한다. (컴포넌트의 경우 제거되면서 componentWillUnmount() 가 실행됨.) 이전 트리의 모든 state가 사라진다.

3. 새로운 트리를 만들 때 내부 엘리먼트/컴포넌트들도 모두 새로 만든다. (컴포넌트의 경우 componentDidMount() 가 실행됨.)

같은 위치에서 엘리먼트의 타입이 같은 경우

1. 엘리먼트의 attributes 를 비교한다.

2. 변경된 attributes 만 업데이트한다.

3. 자식 엘리먼트들에 diff 알고리즘을 재귀적으로 적용한다.

같은 위치에서 엘리먼트가 컴포넌트를 표현하고 그 타입이 같은 경우

1. 컴포넌트 인스턴스 자체는 변하지 않는다. (state가 유지된다.)

2. 컴포넌트 인스턴스의 업데이트 전 라이프사이클 메서드 들이 호출되며 props가 업데이트 된다.

3. render() 를 호출하고 컴포넌트의 이전 엘리먼트 트리와 다음 엘리먼트 트리에대해 diff 알고리즘을 재귀적으로 적용한다.

자식 엘리먼트 재귀

• 리액트는 자식 엘리먼트에 대한 반복적인 비교를 할 때 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.

• 정렬과 같은 상황에 취약하다.

keys

• 이를 해결하기 위해 자식 엘리먼트들이 key를 가지고 있다면 key를 통해 기존 트리와 이후 트리의 자식 들이 일치하는지 확인한다.

Avoid Reconciliation#

• 컴포넌트의 불필요한 렌더링을 피하기 위해 사용한다.

  • ShouldComponentUpdate 함수가 return false 하도록 한다.

  • 컴포넌트가 PureComponent 를 상속받도록 한다.

  • 함수형 컴포넌트를 React.memo() 로 감싸서 export 한다.

☝ 핵심은 해당 컴포넌트가 state , props 가 변경 되었을 때만 렌더링하도록하는 것이다. 이것이 가능한 것은 리액트가 컴포넌트 렌더링 결과를 메모이징하는것이다.

가장 좋은 케이스는 같은 부모 컴포넌트에 의해 같은 props 로 자주 렌더링 될때이다. 이전 메모이징 결과와 props 가 같다면 내부를 비교하지 않고 메모이징된결과를 사용한다.

하지만 반대로 props 가 다른 경우가 대부분이라면, 이전 props 와 다음 props 비교를 하고, 컴포넌트 렌더링을 하기 때문에 불필요한 props 비교를 하게 만든다. 또한 메모이징은 메모리를 사용하기 때문에 남용해선 안된다.

처음부터 성능에 최적화된 애플리케이션을 설계하는 것 자체가 비효율적이다. 하지만 컴포넌트를 적절히 분리하는 것은 중요하다. 컴포넌트를 적절히 분리하여 이슈를빠르게 파악하고 대응할 수 있도록 하는 것이 전략이다.

UI 런타임으로서의 React

재조정 (Reconciliation) - React

성능 최적화 - React

React 렌더링과 성능 알아보기 : TOAST Meetup

React.memo() 현명하게 사용하기

리액트 훅(Hook)#

훅(Hook)이란?#

• 함수 컴포넌트에서 React state를 연동(hook into)할 수 있게 해주는 함수.

• 즉 상태를 함수 컴포넌트에 동기화 해준다. (이 말은 상태가 함수 컴포넌트 외부에서 관리되고 있다는 의미를 내포함.)

동기#

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

  • render props, HOC와 같은 패턴은 래퍼를 깊게 만든다.

• 라이프사이클 메서드 들이 컴포넌트를 복잡하고 이해하기 어렵게 만든다.

• 클래스보다 함수가 직관적이다. this 바인딩

훅의 규칙#

☝ 리액트는 훅이 호출되는 순서에 의존한다. (상태를 식별하기 위해 호출 순서를 사용하는 것으로 보인다.)

• 최상위(at the Top Level)에서만 훅을 호출해야 한다. (반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하지 말라)

  // 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다if (name !== '') {    useEffect(function persistForm() {        localStorage.setItem('formData', name);    });}

  복사

• 오직 React 함수 내에서 Hook을 호출해야 한다. (일반 JS 함수에서 호출하지 말라)

☝ 리액트의 훅은 렌더링 되는 개별 컴포넌트의 한 수준 위의 외부 공간(실행 컨텍스트)에 연결 리스트(배열)형태로 저장되는 데이터( state , setter )이다. 다른 컴포넌트와 공유되지 않고, 리렌더링되는 컴포넌트에서 엑세스할 수 있다.

useState#

useState에서 반환된 setter 함수를 사용하면, React에게 내부적으로 액션을 dispatch 하게 되고, 이 컴포넌트가 new state를 가지고 있고, 업데이트 해야 된다는 것을 알린다.

React hooks: not magic, just arrays

useEffect#

• 렌더링 이후(DOM 업데이트 후)에 수행할 "side effect"를 수행할 수 있다.

Fiber#

• virtualDOM의 증분 렌더링을 활성화하기 위함.

• requestIdleCallback 을 활용.

• 컴포넌트 트리에 대한 추가 정보를 포함하기 위한 내부 객체

• 내장 스택에 의존한 동기식 재귀 모델에서 링크드 리스트와 포인터가 있는 비동기식모델로 알고리즘을 재구현함.

  • 호출 스택을 마음대로 중단하고 스택 프레임을 수동으로 조작하기 위해

React Fiber Architecture - A Deep Dive

웹팩#

• 웹팩은 static module bundler이다.

• 웹팩은 엔트리 포인트부터 프로세스하여, 의존하고 있는 모듈에 대해 내부적으로 dependency graph를 구성하고, 최종적으로 하나의 번들 파일을 구성한다 .

  • Entry : dependency graph를 구성하기 시작할 진입점

  • Output : 번들된 결과 파일

  • Loader : 기본적으로 js, json 파일만 가져올 수 있지만, loader는 웹팩이 다른유형의 파일도 모듈로서 가져오고 dependency graph를 구성할 수 있도록 해준다. ex) jpg 이미지, 폰트, ...

  • Plugin : 번들링 최적화, 자원 관리, 환경 변수의 주입 등 다양한 목적의 환경 설정을 위해 사용.

  • Mode : production | development 등 환경에 따라 웹팩을 설정할 수 있다.

HTTP#

HTTP 버전별 차이점#

HTTP의 진화

HTTP/0.9#

• 초기 버전

• GET 이 유일한 메서드

• HTTP 헤더가 없었고 HTML 파일만 전송될 수 있었음.

• 상태나 오류 코드도 없었다.

HTTP/1.0#

• 버전 정보가 요청으로 전송되기 시작 ex) GET /mypage.html HTTP/1.0

• 상태 코드가 응답의 시작 부분에 붙어 전송됨.

• HTTP 헤더 개념이 도입됨.

  • HTML 파일 외에 다른 문서를 전송할 수 있게 됨.

HTTP/1.1#

• HTTP의 첫 번째 표준 버전

• 커넥션을 재사용할 수 있게 됨.

  • 원본 문서 내에 임베드된 리소스를 위해서, 기존에 연결된 커넥션을 다시 사용할수 있음.

• 파이프라이닝으로 첫 번째 요청에 대한 응답이 완전히 전송되기 전에 두 번째 요청전송을 가능하게 했다.

HTTP/2#

• 이진 프로토콜 (1.1은 텍스트 프로토콜)

• Multiplexing

☝ multiplexing vs pipelining

• pipelining은 순서가 중요하다 → Head Of Line blocking 문제

• multiplexing은 순서가 중요하지 않다.

HTTP 1.1 vs HTTP.2 vs HTTP/2 with Push - Manning

HTTP 상태 코드#

1xx : 정보 응답#

2xx : 성공 응답#

• 200 : OK. 요청 성공

• 201 : Created. 생성 요청 성공

• 202 : Accepted. 요청 수락

• 204 : 성공했으나 반환할 것이 없음

3xx : 리다이렉션 메시지#

• 300 : Multiple choices. 여러 리소스에 대한 요청 결과 목록

• 301 , 302 , 303 : Redirect. 리소스 위치가 변경된 상태

• 304 : Not modified. 리소스가 수정되지 않았음

4xx : 클라이언트 에러 응답#

• 400 : Bad Request. 요청 오류

• 401 : Unauthorized. 권한 없음

• 403 : Forbidden. 요청 거부

• 404 : Not Fount. 리소스가 없는 상태

5xx : 서버 에러 응답#

• 500 : 서버가 요청을 처리 못함

• 501 : Not Implemented. 서버가 지원하지 않는 요청

• 503 : Service Unavailable. 과부하 등으로 당장 서비스가 불가능한 상태

브라우저 렌더링 과정#

• DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.

• 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만( 메타 태그, 스크립트태그, display: none 등이 제외됨. )포함됩니다.

  ☝ visibility: hidden , display: none 은 다르다.

• 레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다. (경우에 따라 "리플로우" 라고도 한다.)

• 마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다. (경우에 따라 "리페인트"라고도 한다.)

브라우저 렌더링 최적화#

오늘날 대부분의 기기는 초당 60회(60fps)의 빈도로 화면을 새로 고친다. 따라서각 프레임에는 16ms 가량의 시간만 할당된다. (1초 / 60 = 16.66ms) 실제로 브라우저가 실행 준비를 하는 시간이 있기 때문에 10ms 내에 모든 작업을 완료해야 한다.

픽셀 파이프라인#

• 자바스크립트 : 자바스크립트로 시각적 변화를 일으키는 작업. CSS Animation, Transitions, Web Animation API 역시 포함.

• 스타일 계산 : 어떤 스타일 규칙(CSS)을 어떤 요소에 적용할지 계산하는 프로세스

• 레이아웃 : 화면에서 얼마의 공간을 차지하고 어디에 배치되는지 계산하기 시작할 수 있다.

• 페인트 : 픽셀을 채우는 프로세스. 텍스트, 색, 이미지, 경계 및 그림자 등 모든 시각적 부분을 그리는 작업. 레이어라고 하는 다수의 표면에서 수행

• 합성 : 페이지의 여러 부분이 여러 레이어로 그려졌기 때문에 페이지가 정확히렌더링 되려면 정확한 순서로 화면에 그려야 한다.

☝ 코드가 파이프라인의 어떤 부분을 트리거 하는지 정확히 이해하는 것이 중요

1. JS / CSS > 스타일 > 레이아웃 > 페인트 > 합성#

레이아웃 너비, 높이, 왼쪽 또는 상단 위치 등 요소의 기하학적 형태에 영향을 주는 "layout" 속성을 변경하면 브라우저가 다른 모든 요소를 확인하고 페이지에 대해 "리플로우"를 수행해야 한다. 영향을 받은 영역이 있으면 다시 페인트하고, 다시합성해야 한다.

2. JS / CSS > 스타일 > 페인트 > 합성#

페이지의 레이아웃에 영향을 주지 않는 배경 이미지, 텍스트 색상, 그림자 등의 "paint only" 속성을 변경하면 브라우저가 레이아웃을 건너뛰고 페인트 작업, 합성 작업을 수행한다.

3. JS / CSS > 스타일 > 합성#

레이아웃과 페인트가 필요 없는 속성을 변경하면 브라우저가 합성 단계로 건너 뛴다. 가장 이상적이고 비용이 가장 적게 드는 버전이다. ( 현재 부합되는 속성은 transform , opacity 2가지 뿐이다. )

☝ CSS 속성이 어떤 버전을 트리거할 지 알고 싶은 경우 CSS 트리거를 참조. 또는 이 링크 참조

참고자료#

• https://twitter.com/lydiahallie/status/1231255327032541185

Rendering Performance | Web Fundamentals | Google Developers

이미지 레이지로드#

Lazy-loading images

The Complete Guide to Lazy Loading Images | CSS-Tricks

성능 측정#

브라우저 기준#

DOMContentLoaded 이벤트#

• HTML과 CSS 파싱이 끝나는 시점

• 렌더 트리를 구성할 준비가 된(DOM 및 CSSOM 구성이 끝난) 상황

load 이벤트#

• HTML 상에 필요한 모든 리소스가 로드된 시점

그리고 이 두 이벤트가 발생하는 시점은 내비게이션 타이밍 API를 사용하거나 크롬 개발자 도구를 통해 확인할 수 있다.

사용자 기준#

FP(First Paint)#

• 흰 화면에서 화면에 무언가가 처음으로 그려지기 시작하는 순간이다.

FCP(First Contentful Paint)#

• 텍스트나 이미지가 출력되기 시작하는 순간이다.

FMP(First Meaningful Paint)#

• 사용자에게 의미 있는 콘텐츠가 그려지기 시작하는 첫 순간이다. 콘텐츠를 노출하는데 필요한 CSS, 자바스크립트 로드가 시작되고 스타일이 적용되어 주요 콘텐츠를 읽을 수 있다.

TTI(Time to Interactive)#

• 자바스크립트의 초기 실행이 완료되어서 사용자가 직접 행동을 취할 수 있는 순간이다.

성능 최적화

로딩 최적화#

블록 리소스(또는 렌더링 차단 리소스) 최적화#

브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있다. 블록 리소스에는 CSS 와 JavaScript가 포함된다.

CSS 최적화#

• DOM 트리는 파싱하면서 순차적으로 구성된다.

• CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다.

• 즉 CSSOM 트리가 구성되지 않으면 렌더 트리를 만들지 못하고, 렌더링이 차단되어있다.

• 따라서 CSS는 항상 HTML 문서 최상단에 배치하는 것이 좋다.

• 또한 특정 조건(세로 모드, 인쇄 모드 등)에서만 필요한 CSS는, 해당 경우에만 로드할 수 있도록 미디어 쿼리를 사용하여 최적화한다.

  미디어 쿼리를 사용하지 않는 경우 (최적화 전)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" /><link href="portrait.css" rel="stylesheet" />

  복사

  미디어 쿼리를 사용하는 경우 (최적화 후)

  <link href="style.css" rel="stylesheet" /><link href="print.css" rel="stylesheet" media="print" /><link href="portrait.css" rel="stylesheet" media="orientation:portrait" />

  복사

• 외부 스타일시트를 가져올 때 사용하는 @import 문은 스타일시트를 병렬로 다운로드 할 수 없기 때문에 로드 시간이 늘어날 수 있다.

JavaScript 최적화#

• JavaScript는 DOM트리와 CSSOM 트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을차단하는 블록 리소스이다.

• <script> 태그를 만나면 스크립트가 실행되며 그 이전까지 생성된 DOM에만 접근할수 있다.

• 그리고 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단된다.

• 이러한 이유로 JavaScript를 렌더링 차단 리소스라고 한다.

리소스 요청 수 줄이기#

이미지 스프라이트#

• 웹 페이지에서 아이콘 마다 다른 이미지를 사용할 경우 리소스 요청이 아이콘 마다발생

• 여러 아이콘을 묶어 하나의 이미지로 만들고, CSS의 background-position 속성을사용해 부분 이미지를 사용하는 방법으로 리소스 요청 수를 줄일 수 있다.

CSS, JavaScript 번들링#

• 모듈 기반 개발 이전에는 여러 리소스 파일을 분리해서 가져왔었다.

• Webpack, Rollup 등의 번들러를 사용하여 여러 개의 모듈 파일을 하나로 묶어서 1개파일로 만들어 리소스 요청 수를 줄일 수 있다.

내부 스타일 시트 ?#

☝ 내부 스타일 시트는 리소스 요청 횟수를 줄일 수 있는 방법이지만, 리소스 캐시를 사용할 수 없어서 HTML에 CSS가 매번 포함된다.

작은 이미지를 HTML, CSS로 대체#

• 아이콘 이미지 개수가 적은 경우, 이미지를 Base64로 변환한 URI를 사용하여 HTML, CSS에 포함해서 사용할 수 있다.

  <img    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAAAXNSR0IArs4c6QAAAHBJREFUKBVjYBimICwsLAaEsXmPGV0QqnAeUNxfW1v7/tWrVy8hq0HRgKQ4CahoIxDPQ9cE14CseNWqVUtAJoMUo2tiBFkXGRmp9/fv3zNAZhJIMUgMBmAGMTMzmyxfvhzhPJAmmCJ0Gp8cutqhwAcASWgwk+79LiQAAAAASUVORK5CYII="/>

  복사

라이브러리의 필요한 함수만 가져오기#

import _ from 'lodash';
_.array(...);_.object(...);

⇒

import array from 'lodash/array';import object from 'lodash/fp/object';
array(...);object(...);

HTML 마크업 최적화#

• 중첩을 단순하게 구성한다.

Avoid an excessive DOM size

압축(Minify)하여 사용#

• 웹팩 플러그인과 같은 도구의 도움으로 불필요한 주석이나 공백을 모두 삭제하고, 난독화 하는 등 코드의 용량을 압축할 수 있다.

렌더링 최적화#

requestAnimationFrame#

• 시각적 변화가 브라우저에서 정확한 시간(프레임 시작 시)에 수행되길 원한다.

• 이를 보장하는 유일한 방법은 requestAnimationFrame 을 사용하는 것이다.

• setTimeout 또는 setInterval 은 콜백이 정확한 시간에 수행되는 것을 보장하지않는다.

☝ setTimeout 과 setInterval 의 콜백은 (macro)Task queue 를 사용. requestAnimationFrame 은 AnimationFrame 사용.

스타일 계산의 범위와 복잡성 줄이기#

• DOM 변경, 요소 추가 및 제거, 속성 변경, 클래스 또는 애니메이션은 모두 브라우저가 요소 스타일을 재계산하고 많은 경우에 레이아웃 단계(리플로우)를 거치게 만든다.

• 스타일 계산 단계의 첫 부분은 매칭 선택기 집합을 생성하는 것이다. (요소, 클래스 , ID, pseudo 선택자 등등)

• 스타일 계산의 두 번째 단계는 매칭된 선택기에서 스타일 규칙을 가져와서 요소의마지막 스타일을 계산하는 과정이 포함된다.

• 따라서 선택기의 복잡성을 줄이고 (BEM 등의 방법론 적용) 스타일을 계산해야 하는요소의 수를 줄여야 한다.

크고 복잡한 레이아웃 및 스래싱 피하기#

• 레이아웃의 범위는 일반적으로 전체 문서로 지정된다.

  • 너비, 높이, 왼쪽 또는 상단 등 "기하학적 속성"의 변경은 모두 레이아웃이필요하다.

  • flexbox 를 사용한 레이아웃이 float 를 사용한 레이아웃 보다 비용이 적다.

• DOM 요소의 수는 성능에 영향을 주므로 가급적 레이아웃 트리거를 피해야 한다.

• 강제 동기식 레이아웃 및 레이아웃 스래싱을 피해야 한다.

  ☝ 원래 레이아웃은 비동기이나, 특정 상황에서 동기적으로 레이아웃이 발생할 수있다. 이것을 강제 동기식 레이아웃 이라 한다.

  function logBoxHeight() {    box.classList.add('super-big');
      // Gets the height of the box in pixels    // and logs it out.    console.log(box.offsetHeight);}

  복사

  • 위의 함수는 스타일을 변경한 후에, 높이를 요청한다.

  • 높이를 구하는 것 역시 레이아웃을 실행해야 하는 것이다.

  • 스타일 계산과 레이아웃을 동시에 실행하면 잠재적 병목 현상이 발생할 수 있으므로 일반적으로 바람직하지 않다.

  function resizeAllParagraphsToMatchBlockWidth() {    // Puts the browser into a read-write-read-write cycle.    for (var i = 0; i < paragraphs.length; i++) {        paragraphs[i].style.width = box.offsetWidth + 'px';    }}

  복사

  • 위의 함수는 각 루프의 반복이 스타일 값 box.offsetWidth 를 읽은 다음, 즉시 paragraphs[i].style.width 를 업데이트 한다.

  • 이전 반복에서 레이아웃이 변경되었기 때문에 box.offsetWidth 을 조회하는 것역시 강제 동기식 레이아웃을 유발한다. 이를 아래와 같이 수정할 수 있다.

  // Read.var width = box.offsetWidth;
  function resizeAllParagraphsToMatchBlockWidth() {    for (var i = 0; i < paragraphs.length; i++) {        // Now write.        paragraphs[i].style.width = width + 'px';    }}

  복사

페인트 복잡성 단순화 및 페인트 영역 줄이기#

• transform 또는 opacity 를 제외한 모든 속성 변경은 항상 페인트를 트리거 한다.

• 가능한 하위 노드의 DOM을 조작하고 스타일을 변경

  • DOM이 작고 깊이가 얕을수록 계산이 빠르다.

  • 불필요한 래퍼 엘리먼트를 제거한다.

• 영향 받는 엘리먼트 제한

Strict Mode#

• ES5 부터 지원

• 전역 또는 함수 body의 선두에 use strict 추가

• 암묵적 전역 변수 방지

• 변수, 함수, 매개변수의 삭제 방지

  function foo(a) {    'use strict';
      delete a;    // SyntaxError: Delete of an unqualified identifier in strict mode.}

  복사

• 매개변수 이름의 중복 방지

• with 문의 사용

• 일반 함수의 this 에 undefined 바인딩

  'use strict';
  function foo() {    console.log(this);}
  foo(); // undefined

  복사

  function foo() {    console.log(this);}
  foo(); // Window

  복사

DOCTYPE#

Document Type의 약자로 문서가 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다.

☝ DOCTYPE 은 레거시한 이유로 필요하다. 생략하면 브라우저가 문서를 quirks mode(호환 모드) 로 렌더링하고, 포함하면 브라우저가 문서를 no-quirks-mode(또는 standard mode) 로 렌더링 한다.

quirks mode vs standard mode#

quirks mode#

• 오래된 문서가 최신 브라우저에서 "비표준 모드"(과거 Navigator 4 or IE 5)를 적용해서 동작한다.

• 최신 브라우저에서 깨지지 않고 보여지게 되지만, 브라우저 별로 다르게 보여지게된다.

standard mode#

• 표준 HTML, CSS를 적용하여 렌더링한다.

DTD (Document Type Definition)#

문서 형식을 정의한 것으로 DOCTYPE 을 명시할 때 사용할 수 있다. DTD 에는 다음과 같은 것들이 있다. 모든 타입의 특성을 다 파악하는 것은 무리가 있을 것 같고, 현재 시점에서 HTML5 문서를 작성하기 위해 <!DOCTYPE html> 을 사용하는 것이 최선이다.

• XHTML 1.1

• XHTML 1.0

  • Strict DTD

  • Transitional DTD

  • Frameset DTD

• HTML 4.01

  • Strict DTD

  • Transitional DTD

  • Frameset DTD

• HTML 5

크로스 브라우징#

바벨#

• 바벨은 현재 및 이전 브라우저 또는 환경에서 ES6 이상의 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 사용되는 도구 모음(toolchain)이다.

• 바벨은 세 단계로 빌드를 진행한다.

  1. 파싱 (Parsing) : 코드를 읽고 추상 구문트리(AST)로 변환하는 단계

  2. 변환 (Transforming) : 바벨 플러그인이 추상 구문 트리를 변경하는 단계

  3. 출력 (Printing) : 변경된 결과물을 출력하는 단계

• 컴파일러로써 바벨 플러그인(구문 변형)과 폴리필이 하는 일(내장된 함수/객체 구현 )을 구분하는 것이 중요하다.

  • 화살표 함수

    구문 변형으로 이전 버전의 코드로 만들 수 있다.

    // 컴파일 전const sum = (a, b) => a + b;

    복사

    // 컴파일 후'use strict';
    var sum = function sum(a, b) {    return a + b;};

    복사

  • Promise

    Promise 는 ES6에서 추가된 표준 내장 객체(standard built-in object)이다. 따라서 구문 변형으로 이전 버전의 코드로 만드는 것이 불가능하기 때문에, 이를 위한 폴리필을 추가해주어야 한다.

• 바벨의 useBuiltIns 옵션

  • 기본적으로 import 'core-js' 는 core-js 의 모든 폴리필 가져옴

  • useBuiltIns: entry 옵션을 주면 import 'core-js' 에서 "대상 브라우저에 필요한" 폴리필을 모두 가져옴

  • useBuiltIns: usage 옵션을 주면 import 를 하지 않아도 코드를 정적 분석하여, 코드에서 사용하고 있는 폴리필만 가져온다.

    • 지원하려는 "브라우저 마다" 필요한 폴리필만 import 하려면 어떻게 해야하는가? ex) ie, chrome이 타겟인 경우 promise를 사용하면, promise 폴리필을 import 해야하지만, 이는 chrome에게는 불필요하다.

    • 번들에 포함시키는 것까지 최적화 하려면 런타임 검사기를 사용하거나 User-agent 기반 감지를 해야 되는데, 이는 리소스랑 시간이 많이 든다.

      zloirock/core-js

      [Feature Request] Polyfill using dynamic import. · Issue #518 · zloirock/core-js

    • module , nomodule 의 지원 여부에 따라 번들링을 나눠 최적화하는 방법도있다.

      Serve modern code to modern browsers for faster page loads

일반 함수 vs 화살표 함수#

const shape = {    radius: 10,    diameter() {        return this.radius * 2;    },    arrowDiameter: () => {        return this.radius * 2;    },};
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// NaN
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// NaN

function Shape() {    this.radius = 10;    this.diameter = function () {        return this.radius * 2;    };    this.arrowDiameter = () => {        return this.radius * 2;    };}
const shape = new Shape();
console.log(shape.diameter());// 20console.log(shape.arrowDiameter());// 20
const diameter = shape.diameter;const arrowDiameter = shape.arrowDiameter;
console.log(diameter());// NaNconsole.log(arrowDiameter());// 20

• 일반 함수는 호출할 때 동적으로 this 를 바인딩한다.

• 화살표 함수는 선언할 때 정적으로 this 를 바인딩한다. (언제나 상위 스코프의 this 를 가리킨다.)

• 일반 함수는 prototype 프로퍼티를 가진다. ⇒ constructor 함수로 사용될 수 있다.

• 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다. ⇒ constructor 함수로사용될 수 없다.

생성자 함수(constructor)와 프로토타입(prototype)#

function Person(name, age) {    this.name = name;    this.age = age;}
// Person.prototype = { constructor: function Person(...) { ... } }// Person.prototype.constructor = function Person(...) { ... }
const foo = new Person('foo', 30);// foo: Person { name: 'foo', age: 30 }// foo.__proto__: { constructor: function Person(...) { ... } }// foo.__proto__.constructor = function Person(...) { ... }

☝ __proto__ 는 ECMAScript의 스펙이 아닌 일부 모던 브라우저가 구현한 것으로, [[Prototype]] 를 접근하는 속성이다.

function Person(name) {    this.name = name;    this.getName = function () {        return this.name;    };}
console.log(Person.prototype); // { constructor: function Person(name) { ... } }
function Child(name, age) {    Person.call(this, name);    this.age = age;    this.getAge = function () {        return this.age;    };}
console.log(Child.prototype); // { constructor: function Child(name, age) { ... } }
Child.prototype = Object.create(Person.prototype);
console.log(Object.create(Person.prototype)); // Person {}console.log(Child.prototype); // Person {}console.log(Child.prototype.constructor); // function Person(name) { ... }
Child.prototype.constructor = Child;
console.log(Child.prototype);// Person { constructor: function Child(name, age) { ... } }
var child = new Child('foo', 20);
console.log(child.getName()); // 'foo'console.log(child.getAge()); // 20

클래스 문법은 단지 "구문적 설탕" 인가?#

class User {    constructor(name) {        this.name = name;    }
    sayHi() {        alert(this.name);    }}
let user = new User('John');user.sayHi();

function User(name) {    this.name = name;}
User.prototype.sayHi = function () {    alert(this.name);};
let user = new User('John');user.sayHi();

ES6의 클래스 문법을 사용하는 것과 일치한 결과를 기존 function + prototype 문법의 조합으로 만들 수 있기 때문에 일부 사람들은 단지 클래스 문법을 "구문적 설탕" (syntax sugar)라고 말한다.

하지만 몇 가지 중요한 차이가 있다.

1. class 문법을 사용해서 만든 함수엔 특수 내부 프로퍼티인 [[FunctionKind]]: "classConstructor" 가 이름표처럼 붙어서, 이 클래스 생성자를 new 와 함께 호출하지 않으면 에러가 발생한다.

2. 클래스의 메소드는 non-enumerable 로, for ... in 구문 등의 객체 순회에서메소드는 순회하지 않는다. (enumerable 플래그가 false 이다.)

3. 클래스는 항상 use strict 모드이다.

4. 이외에도 getter, setter, 믹스인 등의 기능이 있다.

클래스와 함수에서의 new 연산자 동작#

공부는 어떻게?#

구글링#

• 영어 vs 한국어

  한국어는 컨텐츠가 부족하다. 공식 사이트를 보자.

MDN#

stackoverflow#

• 질문을 남기고 답변을 달아라

디버깅#

• 인생의 절반 이상을 디버깅에 쏟는다

• 디버깅하면서 학습하라

• this , closure 등등 어려운 개념은 디버깅 창을 띄우고 콜 스택에 쌓인 지역변수의 값이 뭔지 보면서 학습

• 디버깅 주도 학습

• 에러 메시지 무시하지 마라

  에러 메시지를 자주 봐야지 다음 번에 에러 메시지만 보고 상황을 판단할 수 있음

JS의 표준#

• ECMAScript

• ES 2015 == ES6

• prototype 몰라도 개발할 순 있지만, JS의 핵심이 prototype 이다. 꼭 이해해야한다.

객체지향 프로그래밍#

현실 세계에 있는 사물. 실존하는 것.

객체지향 프로그래밍의 핵심은 역할

역할을 나누는 것이 중요하다.

new 키워드 생성자, 속성을 파라미터로 넣어서 객체를 만든다.

스타벅스 커피, 바리스타의 예시

의존성이 낮은 연결고리를 만들어 주어야 한다.

연결을 느슨하게 하는 것이 중요하다. → 디자인 패턴

의존성이 낮아서 수정이 되도 연결된 다른 객체는 영향을 받지 않음

코딩보다 디자인

메소드 vs 프로토타입#

메소드는 메모리 공간을 차지

프로토타입은 각 객체가 메모리 공간을 쉐어 함.

module vs import#

즉시실행함수와 private#

비동기 프로그래밍#

JavaScript는 싱글스레드로 동작

then이 실행된 게 아니라 then에 등록된 콜백 함수가 실행 되는 것이다.

• 클로저

• 이벤트 루프

Ajax#

Ajax(Asynchronous JavaScript and XML)

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을의미

JSON#

JSON

JSON(JavaScript Object Notation)

JavaScript에서 객체를 만들 때 사용하는 표현식을 의미

이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다.

{    "coord": {"lon": 139, "lat": 35},    "weather": [        {            "id": 800,            "main": "Clear",            "description": "clear sky",            "icon": "01n"        }    ],    "base": "stations",    "main": {        "temp": 281.52,        "feels_like": 278.99,        "temp_min": 280.15,        "temp_max": 283.71,        "pressure": 1016,        "humidity": 93    },    "wind": {        "speed": 0.47,        "deg": 107.538    },    "clouds": {        "all": 2    },    "dt": 1560350192,    "sys": {        "type": 3,        "id": 2019346,        "message": 0.0065,        "country": "JP",        "sunrise": 1560281377,        "sunset": 1560333478    },    "timezone": 32400,    "id": 1851632,    "name": "Shuzenji",    "cod": 200}

JSON API#

JSON.parse()#

인자로 전달된 문자열을 자바스크립트 데이터로 변환한다.

JSON.stringify()#

인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.

NPM#

NPM1 - YouTube

Node Package Manager : 앱스토어에서 앱을 설치하는 것처럼 NPM에서 패키지를 설치할수 있음.

패키지는 -g (global)에 설치할 수도 있고, 해당 디렉토리의 부품으로써 사용하도록설치할 수 있다.

검색과 설치#

npm

NPM을 검색하고 설치할 수 있는 사이트

만약 local-web-server 라는 패키지를 설치하고 싶을 때,

• npm i local-web-server

• npm install local-web-server

i는 install의 약자

컴퓨터의 전역적인, 독립적인 프로그램으로 설치하고 싶을 때,

• npm install -g local-web-server

g는 global의 약자

권한이 없다면 sudo 를 앞에 추가한다.

패키지 목록 보기와 업데이트, 삭제#

현재 디렉토리에 설치된 패키지 보기

npm list

전역에 설치된 패키지 보기

npm list -g

전역에 설치된 패키지 중 제일 상단에 있는 패키지만 보기

npm list -g --depth=0

전역에 있는 패키지 업데이트하기

npm update -g local-web-server

전역에 있는 패키지 삭제하기

npm uninstall -g local-web-server

📌 바퀴를 다시 만들지 마라!

React#

React - YouTube

React 앱 만들기#

• npm install -g create-react-app - 전역에 설치해서 사용하는 방법.

npm install -g create-react-appmkdir my-appcd my-appcreate-react-app .

• npx - 임시로 패키지를 설치해서 사용하고 지우는 실행 도구.

npx create-react-app my-appcd my-appnpm start

React 앱 실행#

npm run start

코딩하기#

public 디렉토리 - static 자원이 위치한 곳.#

• index.html

<div id="root"></div>

이 root 안에 리액트 컴포넌트들이 들어가게 된다.

src 디렉토리 - source 코드가 있는 곳.#

• index.js

ReactDOM.render(<App />, document.getElementById('root'));

<App /> 컴포넌트를 root 엘리먼트로 전달하게된다.

• App.js 클래스형 (클래스형과 함수형 컴포넌트가 있는데 이 강좌는 클래스형으로진행)

import React from 'react';import logo from './logo.svg';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <header className="App-header">                    <img src={logo} className="App-logo" alt="logo" />                    <p>                        Edit <code>src/App.js</code> and save to reload.                    </p>                    <a                        className="App-link"                        href="https://reactjs.org"                        target="_blank"                        rel="noopener noreferrer"                    >                        Learn React                    </a>                </header>            </div>        );    }}
export default App;

☝️ 반드시 리액트는 반환할 때 하나의 태그로 감싸져 있어야 한다.

배포하기#

• npm run build - 리액트 앱을 빌드해줌

• npx serve -s build - 빌드한 앱으로 로컬 호스팅

JSX#

📌 JSX는 JavaScript가 아니다!

JSX로 작성한 코드는 create-react-app에 의해 JavaScript 코드로 컨버팅 된다.

Hello World!#

import React from 'react';import './App.css';
class App extends React.Component {    render() {        return <div className="App">Hello World!</div>;    }}
export default App;

App class는 리액트 컴포넌트를 확장하고 render 라는 메소드를 가진다. (필수), 클래스 내부 메소드에서 function 키워드는 생략 가능하다. (ES6)

Components 와 props#

컴포넌트를 여러 개 사용할 때 완전히 똑같은 컴포넌트만 사용해야 한다면, 한계가 있을 것이다. 컴포넌트가 특정 속성을 가짐에 따라 변경해줄 수 있도록 props 를 활용할 수 있다.

import React from 'react';import './App.css';
class Subject extends React.Component {    render() {        return (            <header>                <h1>{this.props.title}</h1>                {this.props.sub}            </header>        );    }}
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />            </div>        );    }}
export default App;

React Developer Tools#

React Developer Tools

컴포넌트 파일로 분리하기#

App.js

import React from 'react';import Subject from './components/Subject';import Content from './components/Content';import TOC from './components/TOC';import './App.css';
class App extends React.Component {    render() {        return (            <div className="App">                <Subject title="WEB" sub="World Wide Web!" />                <Subject title="React" sub="For UI!" />                <Content text="HTML is FUN!" />                <TOC />            </div>        );    }}
export default App;

import React from 'react'; - 리액트 라이브러리를 사용하기 위해 필수.

해당 컴포넌트에서 사용하는 다른 컴포넌트는 import 에 명시.

해당 컴포넌트가 외부에서 사용할 수 있도록 export 에 명시.

props 와 state#

props 는 외부에서, 내부로 전달. 외부에서 사용할 컴포넌트에 속성에 기입하면 내부 컴포넌트에서 props 로 접근할 수 있음. 사용하는 입장에서 조작.

state 는 내부의 상태 값.

App.js

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <Subject title="React" sub="For UI!" />                <TOC />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

constructor : 컴포넌트가 실행될 때 가장 먼저 실행되는 함수 ( state 값을 초기화)

해당 객체 안에서 { this.state.subject.title } 으로 접근할 수 있음.

TOC 개선#

TOC.js

import React from 'react';
class TOC extends React.Component {    render() {        var lists = [];        var data = this.props.data;        var i = 0;
        while (i < data.length) {            lists.push(                <li key={data[i].id}>                    <a href={'/content/' + data[i].id}>{data[i].title}</a>                </li>,            );            i = i + 1;        }
        return (            <nav>                <ul>{lists}</ul>            </nav>        );    }}
export default TOC;

TOC.js 에서 외부에서 data (객체가 담긴 리스트)를 props 로 전달받고, 해당리스트의 요소들을 순차적으로 lists 에 담아 출력하게 바꾼다.

이 때 여러 개의 목록은 key 를 가져야한다. key={data[i].id} 가 필수.

키를 기입하지 않을 경우.

App.js

import React from 'react';import Subject from './components/Subject';import TOC from './components/TOC';import Content from './components/Content';import './App.css';
class App extends React.Component {    constructor(props) {        super(props);        this.state = {            subject: {title: 'WEB', sub: 'World Wide Web!'},            contents: [                {id: 1, title: 'HTML', desc: 'HTML is for information'},                {id: 2, title: 'CSS', desc: 'CSS is for Design'},                {id: 3, title: 'JavaScript', desc: 'JavaScript is for Interactive'},            ],        };    }    render() {        return (            <div className="App">                <Subject                    title={this.state.subject.title}                    sub={this.state.subject.sub}                />                <TOC data={this.state.contents} />                <Content text="HTML is FUN!" />            </div>        );    }}
export default App;

이렇게 외부에서 Contents 를 추가할 수 있다.

이벤트 state , props , render() 함수#

React 에서는 props 또는 state 의 값이 변경되었을 때 render() 함수가 호출되도록 약속되어 있다. → 화면이 다시 그려진다.

동적으로 변수 제어#

Subject.title 을 클릭했을 때, this.state.mode 변수를 변경하고 싶다. 이 때 Subject.title 은 <a> 태그로 감싸져 있다.

onClick 속성으로 클릭했을 때 실행할 함수(이벤트 핸들러)를 정의할 수 있다.

그런데 onClick 이 발생했을 때, 화면이 새로고침 된다. <a> 태그의 기본 동작 방법이기 때문.

...
<h1><a href="/" onClick={function(e){  console.log(e);    // debugger;  e.preventDefault();}}>{this.state.subject.title}</a></h1>
...

☝️ debugger; 를 삽입하고 실행하면 해당 위치에서 멈춰지고 개발자도구에서 해당위치의 소스를 볼 수 있음

이벤트가 발생한 태그의 기본적인 동작방법을 못하게 막는 것이 event 객체의 preventDefault() 라는 함수이다. 이를 통해 새로고침되는 현상을 막을 수 있다.

state 를 변경하고 싶을 때.

return (    <div className="App">        <header>            <h1>                <a                    href="/"                    onClick={function (e) {                        e.preventDefault();                        this.setState({                            mode: 'welcome',                        });                    }.bind(this)}                >                    {this.state.subject.title}                </a>            </h1>            {this.state.subject.sub}        </header>        <TOC data={this.state.contents} />        <Content title={_title} desc={_desc} />    </div>);

• 이벤트가 실행됐을 때 실행되는 function 내부에 this 의 값이 아무것도 세팅되어있지 않다. → this 바인딩 사용해야함. 함수 안의 this 를 매개변수로 넣은 값으로 설정함. ( this = App )

• state 를 동적으로 변경할 땐 setState 함수를 사용해야 함

React에서 객체 또는 배열 state 변경#

React에서는 컴포넌트의 state 가 변경될 때마다 해당 컴포넌트 render 함수와 하위 컴포넌트의 render 함수를 실행해 reload 하게 된다.

따라서 하위 컴포넌트에는 변경되는 것이 없다면 비효율적일 수 있다.

이를 위해 React.Component 의 shouldComponentUpdate 함수가 있다.

shouldComponentUpdate 는 newProps 와 newState 라는 매개변수를 가진다. 여기서 newProps 는 컴포넌트의 바뀐 props 값을 말한다.

newProps 와 이전 값을 나타내는 this.props.data 를 이용해 props 가 바뀌었을때만 해당 컴포넌트의 render 함수를 호출하게 할 수 있다. (둘이 같으면 false 리턴하고 둘이 다르면 true 를 리턴함으로 가능)

그런데 만약 state 에 객체 또는 배열이 있을 경우에, 객체나 배열의 원본을 변경하는 함수를 통해 state 를 업데이트하게 되면(예를 들어, 배열의 push 함수는 원본에 데이터를 추가한다.) 원본이 수정되었기 때문에 newProps 와 this.props.data 는 같을 수밖에 없고, 따라서 shouldComponentUpdate 함수를 통한 조작이 불가능해지고 이는 성능 개선을 불가능하게 만들게 된다.

따라서 배열에서는 push 함수 대신 concat , 객체에서는 Object.assign 함수 등으로 새로운 배열이나 객체로 state 를 바꿔주는 것으로 shouldComponentUpdate 함수를 통한 조작을 가능하게 할 수 있다.

React#

벨로퍼트와 함께하는 모던 리액트

React Component 만들기#

Hello.js

import React from 'react';
function Hello() {    return <div>Hello World!</div>;}
export default Hello;

리액트 컴포넌트를 만들 땐

import React from 'react';

를 넣어줘야한다.

리액트 컴포넌트는 XML 형식의 값을 반환할 수 있는데 이를 JSX 라고 부른다.

export default Hello;

이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미.

App.js

import React from 'react';import Hello from './Hello';
function App() {    return (        <div>            <Hello />        </div>    );}
export default App;

실행시켜보면, ( yarn start or npm start )

index.js

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

여기서 ReactDOM.render 를 보면, id 가 root 인 DOM 내부에 리액트 컴포넌트( <App /> )를 렌더링하겠다는 의미이다.

이 DOM은 public/index.html 내부에 있다.

<div id="root"></div>

JSX#

JavaScript + XML, 자바스크립트의 확장 문법. 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줌. HTML 같이 생겼지만 실제론 JS 이다.

return <div>안녕하세요</div>;

Babel 은 XML 형태의 코드를 JS로 변환해준다.

규칙#

• 태그를 열었으면 닫아야 함. ( input , br 포함 모든 태그. 태그 사이에 내용이없을 땐, <input/> 로 셀프클로징 가능)

• 두 개 이상의 태그는 하나의 태그로 감싸져 있어야 한다. <> </> Fragment로 사용한다면 불필요한 태그 없이 두 개 이상의 태그 가능.

• JSX 내부에 변수는 {} 로 감싸서 보여줄 수 있음.

style 과 className#

style 과 CSS class 설정 방법이 HTML과 다르다.

• 인라인 스타일은 객체처럼 작성.

• background-color 같이 - 로 구분된 속성 이름을 가진 속성들은 camelCase 형태로 ( backgroundColor )

• CSS class 설정시엔 class="" 가 아닌 className="" 으로.

App.js

import React from 'react';import Hello from './Hello';import './App.css';
function App() {    const name = 'react';    const style = {        backgroundColor: 'black',        color: 'aqua',        fontSize: 24, // 기본 단위 px        padding: '1rem', // 다른 단위 사용 시 문자열로 설정    };
    return (        <>            <Hello />            <div style={style}>{name}</div>            <div className="gray-box"></div>        </>    );}
export default App;

App.css

.gray-box {    background: gray;    width: 64px;    height: 64px;}

주석#

{/* JSX 내부 주석 작성법 */}

열리는 태그 내부에서는 // 이런 형태의 주석 작성도 가능

props 를 통해 컴포넌트에 값 전달#

App 컴포넌트에서 Hello 컴포넌트를 사용할 때 값을 전달하고 싶을 때

App.js

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" />;}
export default App;

Hello.js

import React from 'react';
function Hello(props) {    return <div>안녕하세요 {props.name}</div>;}
export default Hello;

props 라는 파라미터로 조회, 객체 형태로 전달되므로 props.name 으로 조회 가능

비구조화 할당#

App.js

import React from 'react';import Hello from './Hello';
function App() {    return <Hello name="react" color="red" />;}
export default App;

name , color 두 가지 값을 전달.

import React from 'react';
function Hello(props) {    return <div style={{color: props.color}}>안녕하세요 {props.name}</div>;}
export default Hello;

color: props.color 는 객체이므로 {} 로 한 번 감싸고, 이 객체가 JS 값이므로 {} 로 한번 더 감싼다.

두 가지 값을 전달할 때 비구조화 할당으로 간결하게 작성이 가능하다.

import React from 'react';
function Hello({color, name}) {    return <div style={{color}}>안녕하세요 {name}</div>;    // color: color -> color 로 작성 가능}
export default Hello;

React-Native 실행 환경설정#

맥(Mac)에 react native 개발 환경 구축하기

이 블로그의 설정 방법을 따라가면서 React-Native 실행환경을 설정했다.

  ![2020-03-13-200313-image-0](./images/2020-03-13-200313-image-0.png)
  <br />


  ![2020-03-13-200313-image-1](./images/2020-03-13-200313-image-1.png)
  <br />

성공!

JavaScript 문법#

삼항연산자#

condition ? true : false

• 한 줄이 너무 길 때

let text = array.length === 0 ? `배열이 비어있다.` : `배열이 비어있지 않다`;

Truthy and Falsy#

undefined 와 null 은 모두 false 로 간주됨.

Falsy 한 값

• undefined

• null

• 0

• 복사

• NaN

• false

이 외에는 모두 true 로 간주됨

! , !! 를 활용해 Falsy 한 값과 Truthy 한 값을 한번에 처리할 수 있음

단축 평가 논리 계산법#

A && B 연산자를 사용할 때 A가 Truthy 한 값이라면, B가 결과값이 되고, Falsy 한 값이라면, A가 출력된다.

console.log(true && 'hello'); // helloconsole.log(false && 'hello'); // falseconsole.log('hello' && 'bye'); // byeconsole.log(null && 'hello'); // nullconsole.log(undefined && 'hello'); // undefinedconsole.log('' && 'hello'); // ''console.log(0 && 'hello'); // 0console.log(1 && 'hello'); // helloconsole.log(1 && 1); // 1

A || B 연산자는 만약 A가 Truthy 한 값이라면, A가 결과값이 되고, Falsy 한값이라면 B가 출력된다.

console.log(true || 'hello'); // trueconsole.log(false || 'hello'); // helloconsole.log('hello' || 'bye'); // helloconsole.log(null || 'hello'); // helloconsole.log(undefined || 'hello'); // undefinedconsole.log('' || 'hello'); // helloconsole.log(0 || 'hello'); // helloconsole.log(1 || 'hello'); // 1console.log(1 || 1); // 1

함수의 기본 파라미터#

파라미터에서 = 기호를 사용해 기본값을 설정할 수 있다.

function calculateCircleArea(r = 1) {    return Math.PI * r * r;}
const area = calculateCircleArea();console.log(area); // 3.141592653589793

조건문 더 스마트하게 쓰기#

• 특정 값이 여러 값 중 하나인지 확인해야 할 때

function isAnimal(text) {    return (        text === '고양이' || text === '개' || text === '거북이' || text === '너구리'    );}
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

배열의 includes 함수를 사용

function isAnimal(name) {    const animals = ['고양이', '개', '거북이', '너구리'];    return animals.includes(name);}
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

화살표 함수 사용

const isAnimal = (name) => ['고양이', '개', '거북이', '너구리'].includes(name);
console.log(isAnimal('개')); // trueconsole.log(isAnimal('노트북')); // false

• 값에 따라 다른 결과물을 반환해야 할 때

function getSound(animal) {    if (animal === '개') return '멍멍!';    if (animal === '고양이') return '야옹~';    if (animal === '참새') return '짹짹';    if (animal === '비둘기') return '구구 구 구';    return '...?';}

switch 사용

function getSound(animal) {    switch (animal) {        case '개':            return '멍멍!';        case '고양이':            return '야옹~';        case '참새':            return '짹짹';        case '비둘기':            return '구구 구 구';        default:            return '...?';    }}
console.log(getSound('개')); // 멍멍!console.log(getSound('비둘기')); // 구구 구 구

객체 활용

function getSound(animal) {    const sounds = {        개: '멍멍!',        고양이: '야옹~',        참새: '짹짹',        비둘기: '구구 구 구',    };    return sounds[animal] || '...?';}
console.log(getSound('개')); // 멍멍!console.log(getSound('비둘기')); // 구구 구 구

• 값에 따라 다른 코드 구문을 실행할 때

function makeSound(animal) {    const tasks = {        개() {            console.log('멍멍');        },        고양이() {            console.log('고양이');        },        비둘기() {            console.log('구구 구 구');        },    };    if (!tasks[animal]) {        console.log('...?');        return;    }    tasks[animal]();}
makeSound('개');makeSound('비둘기');

비구조화 할당 (구조분해) 문법#

비구조화 할당#

const object = {a: 1, b: 2};
const {a, b} = object;
console.log(a); // 1console.log(b); // 2

• 함수의 파라미터

const object = {a: 1, b: 2};
function print({a, b}) {    console.log(a);    console.log(b);}
print(object);

비구조화 할당시 기본값 설정#

const object = {a: 1};
const {a, b = 2} = object;
console.log(a); // 1console.log(b); // 2

• 함수의 파라미터

const object = {a: 1};
function print({a, b = 2}) {    console.log(a);    console.log(b);}
print(object);// 1// 2

비구조화 할당시 이름 바꾸기#

const animal = {    name: '멍멍이',    type: '개',};
const nickname = animal.name;
console.log(nickname); // 멍멍이

animal.name 값을 nickname 값에 담고 있다. 이를 비구조화 할당을 사용한다면,

const animal = {    name: '멍멍이',    type: '개',};
const {name: nickname} = animal;console.log(nickname);

: 문자를 사용해서 이름을 바꿔줄 수 있다.

배열 비구조화 할당#

const array = [1, 2];const [one, two] = array;
console.log(one);console.log(two);

배열 안에 있는 원소를 다른 이름을 새로 선언해주고 싶을 때 사용하면 유용. 객체 비구조화 할당과 마찬가지로 기본값 지정이 가능.

const array = [1];const [one, two = 2] = array;
console.log(one);console.log(two);

깊은 값 비구조화 할당#

const deepObject = {    state: {        information: {            name: 'younho9',            languages: ['korean', 'english', 'chinese'],        },    },    value: 5,};