Homile

📌 어제 저녁에 각종 API를 실습을 진행했다. 유튜브, 공공데이터 포털, vworld 등은 proxy 설정없이 API를 받아올 수 있었지만 네이버 검색 API를 가져올 경우 package.json에 proxy 설정을 해야 CORS 오류가 사라지며 데이터를 받아올 수 있었다. 그리고 오늘은 Custom Hooks를 학습하는 날이다. 반복되는 룆ㄱ을 함수로 만들어 재사용할 수 있다라고 적혀있는데 어떤 것인지 정확히 학습을 진행해보자!!

📗 오늘 학습한 내용

Custom Hooks

• 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.
• 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다.
• 상태관리 로직의 재활용 가능
• 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현 가능
• 함수형으로 작성하기 때문에 보다 명료하다.

Custom Hook 정의 규칙

• Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙이다.
• 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다.
• Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. return 하는 값은 조건부여서는 안된다.

코드 분할(Code Spliting)

• 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러올 수 있도록하는 개념이다.
• 번들이 거대해지는 것을 방지하기 위한 좋은 해결 방법은 번들을 물리적으로 나누는 것이다.
• 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다.
• 페이지의 로딩 속도를 개선할 수 있다.

번들 분할 줄이는법

• 라이브러리를 전체적으로 불러와서 사용하는 것이 아닌 필요한 메소드만 불러와서 사용하여 공간을 확보할 수 있다.

// lodash 라이브러리 전체 불러오기
import _ from 'lodash';

// lodash 라이브러리에서 메소드 하나를 불러와 사용
import find from 'lodash/find';

React에서의 코드 분할

• SPA에서는 사용하지 않는 모든 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래걸리는 것을 해결하기 위해 코드 분할 개념을 도입했다.

Static Import

• 기존 import 구문은 문서의 상위에 위치해야 하고, 블록문 안에서는 위치할 수 없는 제약 사항이 있었다.

Dynamic Import

• 구문 분석 및 컴파일해야 하는 스크립트의 양을 최소화 시키기 위한 구문입니다.
• 함수 내부에서 Import 문을 사용할 수 있다.
• React.lazy와 함께 사용할 수 있다.

React.lazy()

• dynamic import를 사용해 컴포넌트를 렌더링 할 수 있다.
• 초기 렌더링 지연시간을 어느정도 줄일 수 있다.
• React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense 컴포넌트의 하위에서 렌더링 해야한다.

import Component from './Component';

const Component = React.lazy(() => import('./Component'));

React.Suspense

• Router로 분기가 나누어진 컴포넌트들은 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되며 로딩하는 시간이 생기게 된다.
• 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능이다.

React.lazy와 Suspense의 적용

• 중간에 적용시키는 것보다는 웹 페이지를 불러오고 진입하는 단계인 Route에 이 두 기능을 적용시키는 것이 좋다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• Authentication

📝 중요한 내용

• Custom Hook
• Custom Hook 생성조건
• 코드분할
• React.lazy
• React.Suspense

📌 리액트 훅에 대해서 학습을 하는데 사실 앞선 과정에서 리액트 훅을 개인적으로 찾아서 학습한 뒤 사용을 하고 있었기에 조금더 정확히 짚고 가는 계기가 될 것이다.

📗 오늘 학습한 내용

Virtual DOM

• 가상의 DOM 객체 (추상화된 JavaScript 객체의 형태)
• React는 실제 DOM 객체에 접근하여 조작하는 대신 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다.

Real DOM (DOM, Document Object Model)

• 브라우저가 트리 구조로 만든 객체 모델
• 브라우저가 JavaScript와 같은 스크립팅 언어로 html 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다.

DOM의 조작 속도가 느려지는 이유

• DOM의 조작으로 업데이트 된 요소와 그의 자식 요소들에 의해 DOM 트리르 재구축함으로써 재랜더링 과정을 거쳐 UI를 업데이트 해야한다.
• 재연산을 해야하기 때문에 속도가 느려진다.
• 가상 DOM을 사용하면 일반적인 DOM 조작보다 속도가 빠르다.

React Diffing Algorithm

• 요소 하나하나를 바꾸다보면 수십만번의 비교가 이루어져야하고, 이 작업은 상당히 비싸다. 그래서 리액트에서는 두 개의 트리가 나온다는 점과 모든 개발자들이 key props를 통해 바뀌었다는 것을 명시할 수 있다는 점으로 해당 문제를 해결하기 위해나온 알고리즘이다.

React Diffing Algorithm 동작 원리

1. 각기 서로 다른 두 요소는 다른 트리를 구축할 것이다.
2. 개발자는 키 소품을 사용하여 다른 렌더링에서 어떤 자식 요소가 안정적일 수 있는 힌트를 줄 수 있습니다.

React가 DOM 트리를 탐색하는 방법

• 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색합니다.
• 너비 우선 탐색(BFS)의 일종이다.

Class Component

• 복잡해질수록 이해하기 어려워지고, 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다는 단점이있다.
• React의 클래스 컴포넌트를 사용하기 위해서는 JavaScript의 this 키워드가 어떤 방식으로 동작하는지 알아야하며, 문법을 정확히 알지 못하면 동작 방식 자체를 정확히 이해하기 어렵게 만들었습니다.
• 위와 같은 문제점을 보완하기 위해 함수 컴포넌트로 이동하기 시작하였지만 상태 값을 사용하거나 최적화할 수 있는 기능들이 미진한 부분을 보완하기 위해 나온 것이 바로 Hook이라는 개념입니다.

Function Component

• 클래스형 컴포넌트에 비해 훨씬 더 직관적이고, 보기 쉽다는 특징이 있다.
• 함수형 컴포넌트는 렌더링이되면 함수가 호출되고, 모든 내부 변수가 초기화 된다.

Hook이란?

• React 16.8에 새로 추가된 기능이다.
• class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.
• 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다.

Hook 사용 규칙

1. 리액트 함수의 최상위에서만 호출해야 한다.
   • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 동작하지 않을 경우가 있다.
2. 오직 리액트 함순 내에서만 사용되어야 한다.
   • 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서는 호출해서는 안 된다.

useMemo

• 특정 값(value)를 재사용하고자 할 때 사용하는 Hook
• 복잡한 연산의 중복을 피하고 React 앱의 성능을 최적화한다.
• 렌더링 할 때마다 값이 바뀌는 것이 아니라면 값을 어딘가에 저장 해뒀다가 다시 꺼내서 쓸 수 있게한다. (메모이제이션)
• Memoization
  • 수행한 연산의 결과값을 메모리에 저장을 해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법
• 구조
  • 첫 번째 인자 콜백 함수: 콜백함수가 return 하는 값이 useMemo가 return 하는 값이다.
  • 두번째 인자 배열(의존성 배열): 배열안에 요소의 값이 업데이트 될때만 콜백함수가 실행된다. 
    빈 배열일 경우 최초 한 번만 실행된다.

const value = useMemo(() => {
	return calculate();
}, [item]);

useCallback

• 함수의 재사용을 위해 사용하는 Hook
• 자식 컴포넌트의 props로 함수를 전달해줄 때 사용하기 좋다.
• 참조 동등성에 의존한다.
• 메모이제이션 기법을 사용한 Hook이다.
• 인자로 전달받은 함수 그 자체를 메모이제이션 한다.

const calculate = useCallback((num) => {
	return num + 1;
}, [item])

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• Authentication

📝 중요한 내용

• 가상 DOM
• React Diffing Algorithm
• 컴포넌트 최적화
• useMemo
• useCallback

📌 웹팩은 JavaSrcipt, JSON 문법만을 번들링할 수 있지만 loader를 사용하여 각종 css, jsx 등의 언어와 png, jpb 등의 멀티미디어 파일 또한 번들링을 할 수 있습니다. 오늘은 이러한 사실을 알고 있으므로 리액트를 웹팩을 사용하여 번들링하는 방법에 대해 알아보아야한다.

📗 오늘 학습한 내용

react, react-dom

• 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom이 필요하다.

babel

• create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해주었기 때문에 babel은 jsx를 JavaScript로 변경하여 entry에서 불러올 수 잇게 만들어주는 로더이다.

css-loader

• css 파일을 번들링할 때 사용하는 로더이다.

react-hot-reloader

• webpack-dev-server처럼 저장할 때 마다 변경사항을 개발 환경에 적용해주는 라이브러리
• react-hot-reloader는 리액트 상태를 유지시켜준다.

eslint

• JavaScript로 개발 시 자주 접하는 에러를 방지하기 위한 린터이다.

prettier

• JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴이다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 회원가입 폼 구현

📝 중요한 내용

• 바벨

🍀 참고자료

• react webpack

📌 웹팩은 어렵다고 많이 들었는데 어떤 부분에서 어려움이 있는지 자세히 찾아봐야겠다.

📗 오늘 학습한 내용

번들링

• 사전적 의미: 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위
• 개발적 의미: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

번들링을 사용하지 않을 경우 일어나는 상황

• 두 개의 js파일에서 같은 변수를 사용하고 있어서 변수 간 충돌이 일어난 상황
• 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한 상황
• 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기 어려운 상황
• 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생한 상황

웹팩 (Webpack)

• 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
  • *모듈번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구
• 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러
• 프론트엔드 애플리케이션을 대규모 유저에게 제공하기 위해 가장 많이 사용하는 방법
• 백엔드 개발자도 배포를 위해 많이 사용한다.

Webpack에서의 모듈

• JavaScript의 모듈에만 국한하지 않는다. HTML, CSS, jpg, png 같은 이미지 파일들도 전부 포함한 포괄적인 개념이다.

빌드와 번들링

• 빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
  • React앱: npm run build를 실행하면 React buid 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공
• 번들링: 묶음의 개념(그룹화), 파일을 묶는 작업 그 자체를 말하며 파일은 의존적 관계에 있는 파일들 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미

Webpack의 필요성

• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다.
• 각 자원들을 일일히 서버에서 요청하지 않아도 되기 때문에 네트워크 코스트가 획기적으로 줄어든다.

웹팩의 핵심 개념

• Target
  • target: ["프로젝트 환경", "ECMAScript 버전"]
• Entry
  • 웹팩이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈
  • 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있다.
• Output
  • 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
• Loaders
  • Webpack은 JavaScript와 JSON 파일만 이해하지만 로더를 사용하면 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.
  • test: 변환이 필요한 파일들을 식별하기 위한 속성 (필수)
  • use: 변환을 수행하는데 사용되는 로더를 가리키는 속성 (필수)
  • exclude: 바벨로 컴파일하지 않을 파일이나 폴더를 지정
• Plugins
  • 번들을 최적화하거나 에셋을 관리하고, 환경변수 주입 등의 광범위한 작업을 수행할 수 있게 된다.
• Optimization(최적화)
  • Webpack 버전 4부터 실행
  • minimize: TerserPlugin, optimization.minimize에 명시된 플러그인으로 번들파일을 최소화(압축)시키는 작업 여부를 결정한다.
  • minimizer: default minimizer을 커스텀돈 TerserPlugin 인스턴스를 제공해서 재정의 할 수 있다.
• Mode
  • webpack에 내장된 최적화 기능을 사용할 수 있다.
  • development: 모듈과 청크에 유용한 이름을 사용할 수 있다.
  • production: 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 망글이름(mangled name)을 사용할 수 있습니다.
  • none: 기본 최적화 옵션에서 제외한다.
• Browser Compatibility

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 회원가입 폼 구현

📝 중요한 내용

• 웹팩이란?
• 웹팩을 사용하는 이유
• 웹팩 사용법
• 번들링
• 웹팩의 개념

🍀 참고자료

• https://webpack.kr/configuration/mode/
• react webpack

📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다.

📗 오늘 학습한 내용

CSS 애니메이션

• @keyframes
  • CSS로 키프레임 블록을 만든다

@keyframes 애니메이션이름{
    0% {	/* from으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(0deg)
    }
    50% {  
        CSS속성: 속성값;
        transform: rotate(180deg)
    }
    100% {	/* to으로 작성가능 */
        CSS속성: 속성값;
        transform: rotate(360deg)
    }
}

/* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/

애니메이션 속성

• animation: 띄어쓰기로 속성 나열 가능
  • animation-name: 애니메이션의 중간 상태를 지정하는 이름.

#logo{
    animation: lotate;
    animation-name: lotate;
    /* 둘 다 사용가능 */
}

• animation-duration: 한 싸이크르이 애니메이션이 재생될 시간 지정

#logo{
    animation: lotate 3s;
    /* =================== */
    animation-name: lotate;
    animation-duration: 3s;
}

• animation-delay: 애니메이션의 시작을 지연시킬 시간 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-delay: 3s;
}

• animation-direction: 애니메이션 재생 방향을 지정
  • normal: 기본값 (재생 종료 후 다시 재생)
  • reverse: 역방향 재생
  • alternate: 순반향부터 역방향을 번갈아가며 재생
  • alternate-reverse: 역방향부터 순반향을 번갈아가며 재생

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-direction: arternate;
}

• animation-iteration-count: 애니메이션이 몇 번 반복될지 지정

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-iteration-count: 3;
    /* 애니메이션 3회 반복 */
}

• animation-play-state: 애니메이션의 재생 상태(일시정지, 재시작)

#logo{
    animation-name: lotate;
    animation-duration: 3s;
    animation-play-state: pause;
}

• animation-timing-function: 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • linear: 일정한 간격
  • ease: 기본값
  • ease-in
  • ease-out
  • ease-in-out
• animation-fill-mode: 애니메이션의 재생 전 후의 상태 지정
  • none: 기본값
  • forwards: 마지막 키프레임 스타일 유지
  • backwards: 첫 번째 키프레임 스타일 유지
  • both: 재생 전 - 첫 번째 키프레임 스타일, 재생 후 - 마지막 키프레임 스타일 유지

Canvas

• 다양한 그래픽 요소를 만들기 위해서 사용한다.
• 단순한 도형 그리기, 데이터 시각화, 애니메이션, 웹 게임 등에 사용하여 다양한 콘텐츠를 만들어 낼 수 있다.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용 표시
</canvas>

• 캔버스 크기 지정 (기본크기 300px * 150px)

<canvas id="canvas" width="500" height="500"></canvas>

<canvas id="canvas" width="50vw" height="40vh"></canvas>

캔버스로 사각형 그리기

• 색상
  • ctx.fillStyle = 'blue'
  • ctx.fillRect = (10, 10, 100, 50)
• 선
  • ctx.lineWitdth = 5;
    ctx.strokeStyle = "black";
  • ctx.strokeRect(10, 10, 100, 50)
• 지우기
  • ctx.clearRect(20, 20, 80, 30)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 로그인 폼 구현

📝 중요한 내용

• CSS 애니메이션 사용법
• 캔버스 사용법

📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다.

📗 오늘 학습한 내용

브라우저

• 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다.
• 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다.

웹(Web) = 월드 와이드 웹(World Wide Web)

• 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다.

웹 페이지

• HTML 언어를 사용하여 작성된 문서 형태

웹 사이트

• 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합

브라우저의 동작 방식

• 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 렌더링 하는 방식으로 동작한다.

사용자가 URL 주소를 입력

→ DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색

→ 해당 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달

→  전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지 생성 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송

→  요청 메시지를 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환

→ 웹 서버에서 응답 메세지 생성

→ TCP 프로토콜을 이용해 인터넷을 겨처 사용자의 컴퓨터로 전송된다.

브라우저의 구조

• 사용자 인터페이스(User Interface)
• 브라우저 엔진(Browser Engine)
  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
  • HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
• 렌더링 엔진(Rendering Engine)
  • 요청한 콘텐츠를 화면에 출력하는 역할
  • HTML 및 XML 문서와 이미지를 표시할 수 있다.
• 통신(Networking)
  • HTTP 요청과 같은 네트워크 호출에 사용
  • 보통 플랫폼의 독립적인 인터페이스, 각 플랫폼의 하부에서 실행
• 자바스크립트 해석기(JavaScript Interpreter)
  • 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱하는 코드를 해석하고 실행하는 것
  • 여러 목적으로 사용이 되지만 대체적으로 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진 탑제
• 힙 메모리(Heap Memory)
  • 힙: 동적 메모리 할당에 사용되는 자료구조
  • V8: 객체 또는 동적 데이터를 저장
  • 엔진 내부에서 가장 큰 메모리 공간을 차지하고 있다.
  • 가비지 컬렉션이 발생하는 곳
• 콜 스택(Call Stack)
  • 한 번에 한 작업만 사용할 수 있다.
  • 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
  • 함수를 실행한다면 해당 함수는 콜 스택의 가장 상단에 위치한다.
• 스택 오버플로(Stack Overflow)
  • 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 발생
• 스택 추적(Stack trace)
  • 브라우저의 콘솔 로그를 살펴보며 에러의 발생 이유를 추적해낼 수 있다.

자료 저장소

• 자료를 저장하는 계층
• 웹 스토리지(Web Storage) 특징
  • 쿠키의 보안상 취약과 저장소의 절대적인 허용 용량이 적어서 찾은 대안 방안
  • origin마다 단 하나씩만 존재
  • origin
    • domain과 protocol 한 싼으로 이루어진 식별자
    • 하나의 origin에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있다.

웹 스토리지 종류

• 로컬스토리지(localStorage)
  • 보관 기한이 없는 데이터를 저장(객체)
  • 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않는다.
• 세션스토리지(sessionStorage)
  • 하나의 세션만을 위한 데이터를 저장(객체)
  • 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텐긋트 내에서만 유지
  • 브라우저 탭이 닫히거나 창을 닫으면 세션 저장소에 저장된 데이터가 사라진다.

웹 스토리지를 활용한 대표적인 기능

• 복구 및 백업에 관련된 기능에 주로 사용
• 블로그 글을 작성 중 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
• 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
• 현재 읽은 글의 히스토리 저장

브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹 사이트에 필요한 리소스 다운
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM 트리를 만든다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만든다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정한다.
7. 레이아웃 과정이 끝나면 UI 백엔드 Render 트리를 화면에 그리기 시작한다.

파싱(Parsing)

• 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계

DOM Tree

• HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것

CSSOM Tree

• html 파일을 DOM 트리로 파싱하던 브라우저는 link, style 태그를 만나 파싱을 멈추고 해당 리소스 파일을 서버로 요청한다. 이렇게 요청한 파일을 html 파일처럼 파싱을 하는데, 파일을 파싱해 만든 트리를 말한다.

렌더 트리(Render Tree)

• 렌더링을 목적으로 만들어지는 트리
• 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정

레이아웃

• 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정

페인팅

• 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정

반응형 웹

• 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.
• 하나의 소스크드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이며 디바이스 종류에 따라 웹 페이지의 크기가자동적으로 조정 된다.

반응형 웹의 특징

• 장점
  • 효율적인 유지보수
    • 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 콘텐츠가 최적화되기 때문이다.
  • 검색엔진(SEO) 최적화 유리
    • 검색 결과에서 상위권에 나타나게 할 수 있다.
• 단점
  • 사이트의 속도 저하
    • 모바일 환경에서 적응하게 만들어진 반응형 웹은 모바일 전용으로 하는 사이트에 비해 무겁다.
    • 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문이다.
  • 웹 브라우저 호환성 문제
    • 존재하는 웹 브라우저는 스펙 및 사양이 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 코드가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있기 때문이다.

미디어 쿼리

• 반응형 웹 디자인의 핵심 부분이다.
• 브러우저 창의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

미디어 쿼리 적용법

• head태그 안에 link를 위치 시키는 방법
  • 미디어 속성을 사용하여 조건을 지정하여 미디어 속성 내 해당 조건을 만족할 때에만 해당 CSS 파일을 불러오게 한다.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

• CSS 파일, 태그 안에서 직접 미디어 쿼리 작성하는 방법

미디어 쿼리 작성 구문

• 미디어 타입: 코드가 어떤 미디어를 위한 것인지 작성한다.
  • all: 모든 미디어 타입
  • print: 프린터
  • screen: 컴퓨터 화면
  • speech: 스크린 리더
  • and를 사용해 미디어 기능을 합칠 수 있다.
  • ,(콤마)를 사용해 or 연산이되며 조건 중 하나라도 만족할 때 스타일이 적용되도록 한다.
  • not 연산자를 사용해 미디어 쿼리의 조건을 반대로 할 수 있다.
• 조건: 지정한 창의 너비나 높이를 기준이 만족되면 스타일이 적용되도록 한다.
  • 방향성: 세로 모드와 가로 모드를 검사하는 방법으로 조건에 prientation: landscape를 작성한다.
• CSS 입력: 조건문을 통과한 후 작성된 CSS 스타일이 적용되는 부분이다.

@media 미디어 타입 (조건(너비 및 높이)){
    (CSS 입력하는 부분)
}

@media screen (max-width: 400px){
    body{
            color: red;
        }
}

@media (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px) and (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px), (orientation: landscape){
    body{
            color: red;
        }
}

@media not all and (orientation: landscape){
    body{
            color: red;
        }
}

반응형 웹 구현 (미디어쿼리)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

• 웹 스토리지의 종류
  • localstorage
  • sessionstorage
• 반응형웹
• 미디어 쿼리 사용방법