Homile

📌 AWS를 통해 배포를 몇번 해봤었지만 오랜만에 하는 거라 신이난다. 항상 새롭게 할 때 마다 재미있게 개발을 할 수 있는 것 같다.

📗 오늘 학습한 내용

클라우드 서비스 업체의 기본 장점

• 신속한 인프라 구축
• 유연한 인프라 관리
• 예상치 못한 트래픽 폭주 대응
• 손쉬운 글로벌 서비스
• 강력한 보안과 장애 없는 서비스
• 합리적인 요금제

기존 서버 방식

• 전산실 등에 컴퓨터를 배치하고 인터넷을 연결하여 서비스를 제공했습니다.
• 전산실에 있는 컴퓨터의 서버가 수용 능력이 한계에 도달하면 같은 공간에 더 많은 컴퓨터를 제공하여 해결하거나 컴퓨터 한 대의 성능을 높이는 방식으로 해결했습니다.
• 이러한 방식의 문제점으로는 주기적인 관리가 필요하며, 공간의 한계가 있습니다.

Cloud Computing

• 서버의  자원과 공간 및 네트워크 환경 제공
• 필요할 때마다 컴퓨팅 능력을 유연하게 조절
• 사용한 만큼의 요금만 지금

단점

• 운영 환경 자체가 클라우드 제공자에게 종속되어 클라우드 서비스에 문제가 생기면 내가 배포하고 관리하는 환경에도 영향이 미친다.

클라우드 서비스의 형태

• SaaS(Software as a Service): 클라우드 제공자가 당장 사용 가능한 소프트웨어를 제공하는 경우
• PaaS(Platform as a Service): 클라우드 제공자가 데이터베이스, 개발 플랫폼까지 제공하는 경우
• IaaS(Infrastructure as a Service): 클라우드 제공자가 가상 컴퓨터까지 제공하는 경우 (AWS)

Deploy(배포)

• 개발한 서비스를 사용자가 이용가능하게 하는 과정

Deployment(배포과정)

• Development (개발)
  • 로컬 컴퓨터 환경에서 개발 및 테스트
  • 샘플 데이터를 이용
  • 변경사항이 있어도 문제가 되지 않음
  • 모든 구성원이 각자의 환경에서 진행
• Integration (완성)
  • 각자의 환경에서 개발된 부분을 취함
  • 코드간 Conflict(갈등)가 없는지 확인하는 단계
  • 작성한 코드가 다른 코드에 문제를 발생 시키지 않는지 확인
• Staging (각색)
  • Production 단계와 가장 유사한 환경에서 테스트
  • 복제된 실제 데이터를 이용해서 테스트
  •  모든 관계자들에게 검증하는 단계
• Production (생산)
  • 개발환경과는 구분 된 환경
  • 실제 데이터를 이용
  • 실제로 서비스가 제공되는 단계

배포시 주의할 점

• 여러명이 개발을 진행할 시 node버전, 인증정보 등 개발환경이 다양하기 때문에 문제가 일어날 수 있습니다.
• 위와 같은 문제를 해결하기 위해 환경 설정을 코드와 분리하는 것이 중요합니다.
  • 절대경로 대신 상대 경로를 사용한다.
  • 환경에 따라 포트를 분기할 수 있도록 환경변수를 설정한다. (.env 사용)
  • Docker와 같은 개발 환경 자체를 통일시키는 솔루션을 사용한다.

배포관련 플랫폼 종류

• heroku
• DigitalOcean
• AWS
• Azure
• Firebase

EC2 (Elastic Compute Cloud)

• AWS에서 제공하는 클라우드 컴퓨팅 시스템으로 AWS에서 원격으로 제어할 수 있는 가상의 컴퓨터를 한 대 빌리는 것을 의미
• 컴퓨터 대여를 통해 서버, 스토리지, 데이터베이스 등 컴퓨팅 서비스를 제공한다.
• 사용한 만큼 비용을 지불하는 의미하며, 필요에 따라 성능, 용량을 자유롭게 조절할 수 있다.
• AWS에서 비용, 성능, 용량 면에서 탄력적인 클라우드 컴퓨터를 제공하는 서비스이다.
• Instance는 1대의 컴퓨터를 의미하며, AWS에서 컴퓨터를 빌리는 것을 인스턴스 생성이라고 한다.

EC2 사용의 이점

• 구성하는 데 필요한 시간이 짧다.
• AMI를 통해서 필용한 용도에 따라 다양한 운영체제에 대한 선택이 가능하다. (CPU, RAM 용량까지 구성 가능)
  • AMI(Amazon Machine Image): 소프트웨어 구성이 기재된 템플릿  
    
    • 단순히 운영체제만 깔려있는 템플릿을 선택할 수도 있고, 아예 특정 런타임이 설치되어 있는 템플릿이 제공되는 경우가 있다.

RDS (Relational Database Service)

• AWS에서 제공하는 관계형 데이터 베이스 서비스
• EC2 인스턴스에 데이터베이스를 설치하여 데이터를 관리하는 것은 유지 보수 같은 일들을 온전히 사용자가 부담해야하며, 다른 작업을 해야 할 경우 많은 시간과 노동이 필요하다.
• 위의 내용을 조금 더 자세하게 말한다면 데이터베이스와 관련해서 자동으로 관리를 담당하는 부분이 매우적어 사용자가 일일이 시간을 투자하여 데이터베이스 엔진의 설치와 버전 관리, 데이터 백업을 해야한다.
• 가용성과 내구성이 확보되지 않기 때문에 데이터베이스에 저장된 데이터가 유실되거나 정상적으로 사용하지 못할 확률이 커지며, 데이터베이스의 규모를 확장하기 어렵다.

RDS 사용의 이점

• 데이터베이스 유지 보수와 관련된 일들을 RDS에서 전적으로 자동 관리한다.
• 사용자가 해야 할 일은 초기 설정을 제외하고 데이터베이스에 저장된 데이터를 관리하는 일 밖에 없기에 큰 편의성을 느낄 수 있다.
• 다양한 데이터 베이스 엔진 선택지를 제공한다.
  • ORACLE, Amazon Aurora, SQL Server, MySQL, MariaDB, Postgre SQL

S3 (Simple Storage Service)

• AWS에서 제공하는 클라우드 스토리지 서비스
  • *클라우드 스토리지: 인터넷 공간에 데이터를 저장하는 장소

S3 사용의 이점

• 확장성이 높아 많은 시간과 수고를 들이지 않고 스토리지 규모를 확장/축소할 수 있다.
• S3에서는 스토리지의 용량을 무한히 확장할 수 있으며, 사용한 만큼만 비용을 지불하면 되기 때문에 비용적인 측면에서 매우 효율적이다.
• 스토리지의 내구성이 높아서 저장된 파일을 유시할 가능성이 적어진다. (내구성 99.99%)
• 높은 가용성 보장을 통해 스토리지에 저장된 파일들을 정상적으로 사용할 수 있는 시간이 길어진다.
• 높은 가용성과 내구성을 보장하는 이유
  • 가용 영역(Availability Zone): 각 리전 안에 존재하는 데이터 센터(IDC)를 뜻하며 한 곳의 가용 영역이 재난이나 사고로 인해 가동이 불가능해지더라도 다른 가용 영역에 백업을 해놓은 데이터를 활용하여 문제없이 서버가 가동되게 한다.
  • *Region: AWS에서 클라우드 서비스를 제공하기 위해서 운영하는 물리적인 서버의 위치
• 스토리지 클래스 (Standard, Glacier를 가장 많이 사용)
  • Standard
    • 범용적인 목적으로 사용하기 좋다.
    • 데이터에 빠른 속도로 접근할 수 있고, 데이터 액세스 요청에 대한 처리 속도가 빠르다.
    • 대신 데이터를 오래 보관하는 목적으로는 효율적인 선택지가 아닌데 이유는 보관 비용이 높게 발생하기 떄문이다.
  • Glacier
    • 장기적인 보관 목적으로 스토리지를 사용할 때 효육적이다.
    • 저장된 데이터에 액세스 하는 속도는 느리지만, 데이터를 보관하는 비용이 매우 저렴하다.
  • Standard-IA, One Zone-IA, S3 Glacier Deep Archive 등
• 정적 웹 사이트 호스팅 가능
  • 버킷을 통해 정적 웹 사이트 호스팅 가능
  • 버킷이라는 저장 공간에 정적 파일을 업로드하고 버킷을 정적 웹 사이트 호스팅 용도로 구성하면 정적 웹 사이트를 배포할 수 있다.
    • 정적 파일: 서버의 개입 없이 클라이언트에 제공될 수 있는 파일
    • 웹 호스팅: 서버의 한 공간을 빌려주어 웹 사이트의 배포, 운영이 가능하게 만들어주는 서비스
  • 버킷
    • 저장되는 파일들이 담기는 저장공간 (파일을 저장하는 최상위 디렉터리)
    • S3에서 저장되는 모든 파일은 버킷 안에 저장되어야 하고, 버킷에는 무한한 양의 파일을 저장할 수 있다.
    • 버킷의 이름은 버킷이 속해 있는 리전에서 유일해야 한다.
    • 버킷 정책을 생성하여 해당 버킷에 대한 다른 유저의 접근 권한을 수정할 수 있다.
  • 객체
    • 버킷에 담기는 파일
    • 저장소에 데이터를 저장할 때 key-value 페어 형식으로 데이터를 저장하기 때문이다.
    • S3에 저장되는 객체는 파일과 메타데이터로 구성된다.
    • 파일 값에는 실제 데이터를 저장하며 데이터의 최대 크기는 5TB이다.
    • 파일의 키는 각각의 객체를 고유하게 만들어주는 식별자 역할을 하며, 파일의 키를 이용하여 원하는 객체를 검색할 수 있다.
    • 메타데이터는 객체의 생성일, 크기, 유형과 같은 객체에 대한 정보가 담긴 데이터이다.
    • 모든 객체는 고유한 URL 주소를 가지고 있다.

Deploy Strategy

Client 배포

• 정적파일로 빌드하여 배포한다.

빌드

• 불필요한 데이터를 없애고, 여러 갈래로 퍼져있는 데이터들을 통합/압축하여 배포하기에 최적화된 상태를 만드는 것이다.
• 데이터의 용량이 줄어들고, 웹 사이트의 로딩 속도가 빨라진다는 장점이 있다.

📘 추가로 공부할 내용

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

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

JavaScript 코딩테스트 준비

📝 중요한 내용

• EC2란?
• EC2 사용방법
• S3란?
• S3 사용방법

📌 이제 프로젝트까지 남은 시간이 2주정도 남았다.... 어떤 문제가 있더라도 해낼수 있도록 해보자!

📗 오늘 학습한 내용

최적화(Optimization)

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정

허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정

최적화의 필요성 및 효과

1. 이탈률 감소
   • 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것이다.
   • 페이지 로드가 3초이상 걸리면 53%의 사용자가 사이트를 이탈한다. 그렇다면 화면을 불러오는 시간을 짧게 하여 사용자가 페이지를 이탈할 확률을 낮출 수 있다.
2. 전환율 증가
   • 이탈률이 줄어드면 자연스럽게 전황율이 높아질 확률이 커진다.
   • 전환율: 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미
3. 수익 증대
   • 빠른 웹 사이트의 로딩 속도는 이탈률 감소, 전환율 증가, 트래픽 증대, 회원 수 증가로 곧 수익의 증대를 의미한다.
   • 실제 사례로 아마존 로딩 속도가 1초 빨라졌을 때 아마존 판매량은 1%, 구글 검색량은 0.2%가 증대했다.
4. 사용자 경험(UX) 향상
   • 최적화는 효과적인 UX 개선 수단이다.
   • 로딩이 오래 걸릴 경우 스피너, 프로그레스바 같이 로딩 중임을 알려주는 UI를 먼저 표시하여 사용자가 인내심을 갖고 기다리게 하는 방법이 있다.

HTML, CSS 코드 최적화 하기

• 화면을 렌더링 할 때 필요한 HTML, CSS 파일의 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다.

HTML 최적화 방법

1. DOM 트리 가볍게 만들기
   • DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 복잡도가 클 수록 DOM 트리가 변경되었을 때 계산해야 하는 것이 많아짐으로 불필요한 요소를 삭제한다.
2. 인라인 스타일 사용하지 않기
   • 인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생기는데 이처럼 불필요한 코드 중복은 가독성을 떨어뜨리며 파일 크기를 증가 시킨다.
   • CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하여 렌더링 완료 시점을 단축시킨다.

CSS 최적화 방법

1. 사용하지 않는 CSS 제거하기
   • CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성되는데 이때 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.
   • 위의 단점 때문에 사용하지 않는 CSS 코드는 제거하는 것이 좋다.
2. 간결한 셀렉터 사용하기
   • 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 되므로 간결하게 사용하는 것이 좋다.

리소스 로딩 최적화하기

1. CSS 파일 불러오기
   • CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있으므로 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.
2. JavaScript 파일 불러오기
   • JavaScript 파일을 다운받아와서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 생성이 중단된다. 이 시간만큼 렌더링 완료 시간이 늦춰지게 되므로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

브라우저 이미지 최적화하기

• 페이지의 대부분의 용량은 코드가 아닌 이미지 파일, 미디어 파일이 차지하기 때문에 용량을 줄이거나 요청의 수를 줄여 사용자 경험을 빠르게 개선할 수 있다.

1. 이미지 스프라이트
   • 박스에 표시한 아이콘 이미지의 경우 각각의 이미지를 서버에 요청할 경우 웹 사이트의 로딩시간이 늘어나게 될 때 사용하는 기법
   • 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.
2. 아이콘 폰트 사용하기
   아이콘 사용이 많을 때, 모든 아이콘을 이미지로 사용하지 않고 아이콘 폰트를 사용하여 용량을 줄일 수 있다.(Font Awesome)
   1. CDN으로 사용하기
      
      • Font Awesome에 가입할 때 발급받은 키트를 HTML 파일 head 요소에 넣어주면 CDN으로 사용할 수 있다.
   2. Font Awesome 모듈 설치하기

WebP 또는 AVIF 이미지 포맷 사용하기

• 전통적인 이미지 포맷 방식은 JPEG, PNG 형식이 아닌 새롭게 등장한 WebP, AVIF를 사용하여 용량을 더욱 감소시킬 수 있다.(20~35%)
• 하지만, 모든 브라우저에서 호환되지 않는다는 단점이 있지만 HTML의 picture 태그를 이용하여 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.
  • *<picture>: img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용한다.

캐시 사용하기

• 캐시는 다운도르 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용하며, 필요한 리소스를 캐시에서 꺼내와 재사용하면 되기 때문에 네트워크 리소스, 로딩시간을 줄일 수 있다.
• HTTP 요청을 보낼 때 조건부 요청 헤더를 작성하여 캐시를 재사용해도 되는지 확인하면 된다.
  • If-Modified-Since: 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
  • If-None-Match: 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

CDN 사용하기

• CDN? 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져오기 때문에 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.
• 사용가능 서비스
  • CloudFront, Cloudflare 등

트리쉐이킹(Tree Shaking)

나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다.

1. JavaScript 파일의 크기
   • JavaScript 파일 크기의 증가, 요청 횟수의 증가는 렌더링이 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서 더 큰 병목현상을 유발 합니다. 트리쉐이킹을 통해 파일 크기를 줄여서 최적화를 시킬 수 있다.
2. JavaScript 파일의 실행 시간
   • 다운로드부터 필요한 경우에는 우선 요청을 보내어 파일을 다운받아 온 다음 압축을 해제해야 하고, JS코드를 파싱하여 DOM 트리를 생성한다. 파싱이 끝나면 컴파일을 진행하여 코드를 실행할 수 있는 일련의 과정을 거쳐야 한다.
   • 파일이 커질수록 실행 시간이 점차 늘어날 때, 트리쉐이킹을 통해 최적화를 해야한다.

JavaScript 트리쉐이킹

웹팩 4버전 이상을 사용하는 경우 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.

1. 필요한 모듈만 import 하기
   • import 구문을 사용하여 라이브러리를 불러와서 사용할 때, 라이브러리 전체를 불러오지 않고 필요한 모듈만 불러와서 트리쉐이킹이 가능하다.
2. Babelrc 파일 설정하기
   • Babel은 JS 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리이다.
   • 이때, ES5문법은 require를 사용하여 모든 라이브러리를 불러오기 때문에 Babelrc 파일에 modules: false로 작성하여 ES5문법으로 변환되는 것을 막아주면 된다.
3. sideEffects 설정하기
   • 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
   • package.json 파일에서 sideEffects:false를 설정하여 사이드 이펙트가 생기지 않는다고 알려 코드를 제외시킬 수 있도록 한다.(sideEffects:false는 전체 파일에서의 설정이고 특정 파일만 설정할 수도 있다.)
4. ES6 문법을 사용하는 모듈 사용하기
   • ES5 문법을 사용하는 모듈을 통째로 사용하는 경우가 아니라면 ES6 문법을 사용하여 필요한 부분만 사용하는 것이 좋다.

Lighthouse

• 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책을 제공한다.
• 구글에서 개발 한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
• 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.

Lighthouse 시작하기

1. Chrome 개발자 도구에서 실행하기
2. 크롬에서 검사하고 싶은 페이지의 url을 입력한다.
3. 개발자 도구를 연다.
4. lighthouse 탭을 클릭한다.
5. Generate report를 클릭한다. (Categories에서 특정 지표만 선택하여 검사할 수도 있다.)
6. 검사가 실행 된 후, 결과가 해당 페이지의 개발자 도구내에 생성된다.

Node CLI에서 실행하기

Lighthouse를 설치한다.  → 명령어로 검사르 수행한다. → 명령어로 모든 옵션을 본다.

npm install -g lighthouse

lighthouse <url>

lighthouse --help

Lighthouse 분석 결과 항목

• Performance
  • 웹 성능을 측정한다. 화면에 컨텐츠가 표시되는데 걸리는 시간과 표시된 후 사용자와 상호작용하기 까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다.
• Accessibility
  • 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 컨텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다.
• Best Practices
  • 웹 페이지가 웹 표준 모법 사례를 잘 따르고 있는지 확인한다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인한다.
• SEO
  • 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인한다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인한다.
• PWA (Progressive Web App)
  • 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인한다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 컨텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.

Lighthouse의 Performance 측정 메트릭

1. First Contentful Paint
   
   • 성능(Performance) 지표를 추적하는 메트릭이다.
   • 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다.
   • 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다.
2. Largest Contentful Paint
   • 뷰포트를 차지하는 가장 큰 컨텐츠의 렌더 시간을 측정한다.
   • 주요 컨텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.
3. Speed Index
   • 성능(Performance) 지표를 추적하는 메트릭이다.
   • 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정한다.
4. Time to interactive
   • 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한다.
     • 페이지에 FCP로 측정된 컨텐츠가 표시되어야 한다.
     • 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록된다.
     • 페이지가 0.05초안에 사용자의 상호작용에 응답한다.
5. Total Blocking Time
   • 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다.
   • FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정한다.
6. Cumulative Layout Shift
   • 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표이다.

📘 추가로 공부할 내용

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

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

• 마이페이지 드롭다운 메뉴 구성

📝 중요한 내용

• 최적화란?
• 최적화의 필요성과 효과
• 프론트엔드에서의 최적화 방법
• Ligthhouse를 통한 웹 페이지 개선

📌 TDD를 오랜만에 다시 보는 것 같다. 저번보다 조금 더 심화적인 내용을 배우지 않을까 싶다...! 후라이 반숙 맛있겠다...

📗 오늘 학습한 내용

TDD(Test-Driven-Development, 테스트 주도 개발)

코드를 작성하기 전에 테스트를 먼저 작성하고 테스트 통과 여부를 확인하며 개발하는 소프트웨어 개발 방법론입니다.

작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미합니다.

TDD의 개발 주기

1. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다.
2. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다.
3. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다.

TDD의 사용하는 이유

• 테스트 코드를 작성해야 하기 때문에 시간이 오래 걸리는 것 처럼 보이지만 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있다.

테스트 코드를 작성하는 방법

• console.log를 통해 작성한 코드가 어떤 결과물을 도출하는 지 확인할 수 있다.
• 테스트 프레임워크에서 제공하는 테스트 작성을 위한 도구를 사용할 수 있다.

📘 추가로 공부할 내용

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

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

• 로그인 유지 (세션처리)

📝 중요한 내용

• TDD란?
• TDD의 개발주기
• TDD를 사용하는 이유

📌 그래프QL은 React를 배우기 시작할 때 한번 들었던 내용이고, 찾아봤던 내용이기 때문에 조금은 아는 상태에서 진행이 될 것이다. 그리고 이것 또한 페이스북에서 만든 것이기 때문에 React를 사용한다면 한 번쯤은 학습해야 하는 내용이다. 같은 회사에서 만들어진 것이기 때문에 같이 사용할 경우가 많을 것 같다!!!! 빠얏!!

📗 오늘 학습한 내용

GraphQL (Graph + Query Language)

• 페이스북에서 만든 오픈 소스로 제공되고 있으며, Server API를 통해 정보를 주고받기 위해 사용하는 쿼리언어이다. (2016년 등장)
• 인지도 및 만족 부분에서 높은 비율을 차지하고 있는 언어이며, GraphQL 관련 기술이 계속해서 상위권을 차지하고 있다.
• 개발자들 사이에서 인식률이 굉장히 높은 언어이며, 배우고 싶은 비율과 다시 사용하겠다는 비율이 굉장히 높은 쿼리 언어이다.

GraphQL을 사용하는 이유

• 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다.
• REST API 방식의 고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다.

GraphQL의 특징

• HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다.
• 응답을 받을 시, 데이터 결과를 JSON 형식으로 받는다.
• 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다.
• GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다.

REST API의 한계

• Overfetch: 필요 없는 데이터까지 제공한다.
• Underfetch: endpoint가 필요한 정보를 충분히 제공하지 못한다.
• 클라이언트 구조 변경 시 엔드포인트 변경 또는 데이터 수정이 필요하다.

REST API와 GraphQL의 다른점

• REST API는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전히 분리되어 있다.
• REST API 는 Resource의 크기와 형태를 서버에서 결정하지만 GraphQL에서는 Resource에 대한 정보만 정의하고, 필요한 크기와 형태는 클라이언트 단에서 요청 시 결정한다.
• REST API는 URI가 Resource를 나타내고 Method가 작업의 유형을 나타내지만, GraphQL에서는 GraphQL Schema가 Resource를 나타내고  Query, Mutation 타입이 작업의 유형을 나타낸다.
• REST API는 여러 Resource에 접근하고자 할 때 여러 번의 요청이 필요하지만, GraphQL에서는 한번의 요청에서 여러 Resource에 접근할 수 있다.
• REST API에서 각 요청은 해당 엔드포인트에 정의된 핸들링 함수를 호출하여 작업을 처리하지만, GraphQL에서는 요청 받은 각 필드에 대한 resolver를 호출하여 작업을 처리한다. 

GraphQL의 장점

• 하나의 endpoint 요청
• No! under & overfetching
• 강력한 playground
• 클라이언트 구조 변경에도 지장이 없다.

GraphQL의 단점

• REST API에 친숙한 개발자의 경우 GraphQL를 학습하는 데 시간이 필요하다.
• 캐싱이 REST보다 훨씬 복잡하다.
• 고정된 요청과 응답만 필요할 경우에는 Query로 인해 요청의 크기가 RESTful API의 경우보다 더 커진다.

GraphQL 구조

• GraphQL Keywords
  • 서버로부터 데이터를 조회하는 경우, REST API에선 GET 요청이 있었다면 GraphQL에서는 Query를 이용해 원하는 데이터를 요청 할 수있다.
  • Create, Delete와 같이 저장된 데이터를 수정하는 경우 Mutaion을 이용해 이를 수행할 수 있다.
  • Query: 저장된 데이터 가져오기(REST의 GET과 비슷하다)
  • Mutation: 저장된 데이터 수정하기
    • Create: 새로운 데이터 생성
    • Update: 기존의 데이터 수정
    • Delete: 기존의 데이터 삭제
  • Suscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

Query(데이터 조회)

• 전달인자(Arguments)
  • 필드에 인수를 전달하는 부분을 추가하여 쿼리의 필드 및 중첩된 객체들에 전달하여 원하는 데이터만 받아올 수 있다.
• 별명(Aliases)
  • 필드 이름을 중복해서 사용할 수 없으므로, 필드 이름을 중복으로 사용해서 쿼리를 해야 할 때는 별명을 붙여서 쿼리를 한다.
• 오퍼레이션 네임(Operation name)
  • 쿼리와 쿼리 네임을 모두 생략하는 축약형 구문 대신 코드를 모호하지 않게 작성하는 것이다.
• 변수(Variables)
  • 동적으로 인수를 받아 쿼리하는 경우에 사용한다.

Mutation(데이터 수정)

• 서버측 데이터를 수정할 때 사용한다.

Schema/Type

• 가장 기본적인 구성 요소는 서비스에서 가져올 수 있는 객체의 종류, 그리고 포함하는 필드를 나타내는 객체유형이다.

Resolver

• 요청에 대한 응답을 결정해주는 함수, Query, Mutation, Subscription과 같은 타입의 실제 일하는 로직을 작성한다.

📘 추가로 공부할 내용

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

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

📝 중요한 내용

• GraphQL이란?
• GraphQL의 특징
• GraphQL 사용법

📌 학부생때 가장 많이 들었던 컴퓨터구조, 동작방법 등에 대해서 학습을 하는 날이다...!! 이론적인 부분이니 기술 면접에서 충분히 나올 수 있을거라 생각하니 정리를 꼼꼼히 해보자!

📗 오늘 학습한 내용

컴퓨터 구조

• 하드웨어와 소프트웨어가 합쳐진 형태
• 하드웨어
  • 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있다.
• 소프트웨어
  • 하드웨어를 제어하며 작업을 수행하는 프로그램이다.

컴퓨터의 기본 구성 요소

• 입력장치
  • 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치
  • 키보드, 마우스, 스캐너, 타블랫 등 입력할 수 있는 장치
• 출력 장치
  • 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치
  • 모니터, 프린터 등 출력할 수 있는 장치
• 중앙 처리 장치(CPU)
  • 산술/논리 연산 장치(ALU, Arithmetic Logic Unit), 제어 장치, 레지스터로 구성되어 있다.
  • 산술: 덧셈을 수행
  • 제어 장치: 프로그램에 따라 명령과 제어 신호를 생성하여 각종 장치의 동작을 제어하는 것이다.
  • 레지스터: CPU의 내부 메모리로서 CPU에서 사용하는 데이터를 일시적으로 저장하는 장소이다.
• 저장 장치
  • 데이터나 프로그램을 보관하기 위한 일차 기억 장치인 주 기억 장치(Memory)와 주 기억 장치를 보조하기 위한 디스크와 CD 같은 보조 기억 장치가 존재한다.
  • 프로그램 수행을 위해 필요한 정보에 비해 CPU 내에 구비되어 있는 레지스터의 용량이 작기 때문에, 주 기억 장치는 주로 정보를 저장해 두었다가 필요할 떄 읽어들이는 저장소로 사용된다.
  • 주기억장치 (RAM, ROM)

중앙 처리 장치(CPU)

• 중앙 처리 장치를 통해서 연산을 수행하게 된다. (폰 노이만 구조)
• 각종 연산을 수행하고 기억장치에 기억되어 있는 명령어들을 수행하는 컴퓨터 시스템을 이루는 핵심 부품이다.

CPU의 구조

• 산술/논리 연산 장치(ALU, Arithmetic Logic Unit)
  • 산술적인 연산과 논리적인 연산을 담당하는 장치로 가산기, 보수기, 누산기, 기억 레지스터, 데이터 레지스터 등으로 구성된다.
  • 캐시나 메모리로부터 읽어 온 데이터는 레지스터라는 CPU 전용의 기억장소에 저장되며, ALU는 레지스터에 저장된 데이터를 이용하여 덧셈, 곱셈 등과 같은 산술 연산을 수행한다.
  • 부동 소숫 연산장치(FPU)와 정수연산장치, 논리연산(AND, OR 등)장치 등이 있다.
• 제어장치(CU, Control Unit)
  • CPU가 자신 및 주변기기들을 컨트롤하는 장치로 프로그램의 수행 순서를 제어하는 프로그램 계수기(Program Counter)이다.
  • 현재 수행중인 명령어의 내용을 임시 기억하는 명령 레지스터, 명령 레지스터에 수록된 명령을 해독하여 수행될 장치에 제어신호를 보내는 명령해독기로 이루어져 있다.
• 레지스터
  • 중앙 처리 장치 내부에 있는 기억장치이다.
  • 주로 산술 연산 논리장치에 의해 사용되는 범용 레지스터와 PC 등 특수 목적에 사용되는 전용 레지스터로 구분된다.
• 레지스터의 종류
  • IR (Instruction Register): 현재 수행 중에 있는 명령어 부호를 저장하고 있는 레지스터
  • PC (Program Counter): 명령이 저장된 메모리의 주소를 가리키는 레지스터
  • AC (Accumulator): 산술 및 논리 연산의 결과를 임시로 기억하는 레지스터

CPU의 기능

• 명령어 인출 및 해독은 모든 명령어들에 대하여 공통적으로 수행하며 기억 장치로부터 명령어를 읽어온다.
• 데이터 인출 및 처리, 쓰기와 같은 것들은 명령어에 따라 필요할 때만 수행한다.
• 명령어 및 명령어 수행 과정과 처리 방식이 CPU의 중요한 부분이다.

명령어

• 시스템이 특정 동작을 수행시키는 작은 단위이다.
• 동작코드(Op-code, Operational Code)
  • 각 명령어의 실행 동작을 구분하여 표현한다.
• 오퍼랜드 (Operand)
  • 명령어의 실행에 필요한 자료나 실제 자료의 저장 위치를 의미한다.

명령어 수행 과정

1. 읽기(FI, Fetch Instruction): 메모리에서 명령을 가져온다.
2. 해석(DI, Decode Instruction): 명령을 해석한다.
3. 실행(EI, Execute Instruction): 명령을 수행한다.
4. 기록 (WB, Write Back): 수행한 결과를 기록한다.

명령어 처리 방식

RISC와 CISC방식이 있다.

RISC(Reduced Instruction Set Computer)

• 컴퓨터 내부적으로 사용하는 명령어 세트를 단순화 시켜서 처리하는 형태의 구조이다.
• 하나의 사이클로 명령어를 처리한다.
• 메모리 Load / Store 명령만 처리하는 방식이다.
• 파이프라이닝, 슈퍼스칼라의 사용이 가능하다.
  • 파이프라이닝: 명령어를 읽어 순차적으로 실행하는 프로세서에 적용되는 기술
  • 슈퍼스칼라: CPU 내에 파이프라인을 여러 개 두어 명령어를 동시에 실행하는 기술
• 복잡한 컴파일러 구조를 갖고 있다.

CISC(Complex Instruction Set computer)

• 하나의 기능에 해당하는 하나의 명령이 있는 개념이다.
• 여러 사이클로 명령어를 처리한다.
• 많은 명령어가 메모리를 참조하는 처리 방식이다.
• 파이프라이닝의 사용이 어렵다.
• 복잡한 마이크로 프로그램 구조를 갖고 있다.

Memory

• 임시적인 내용들을 기억하는 장치
• 시스템이 활성화 된 상타에서 그 값을 기억하고 있지만 시스템이 꺼지게 되면 지워지는 휘발성이다.

메모리 성능

• 메모리의 속도는 메로리가 CPU와 데이터를 주고받는 시간을 말한다. (엑세스)
• 리프레시 시간, 메모리 엑세스 시간, 사이클 시간 등이 있다.

메모리 종류

주 기억장치

• RAM(Random Access Memory)
• 컴퓨터의 전원이 끊어지면 내용이 휘발되어 보조 저장 장치가 반드시 필요하다. (휘발성)
• RAM의 크기는 프로그램의 수행 속도에 영향을 준다.
• CPU에서 직접 접근이 가능한 유일한 저장 장치이다.

• RAM의 종류
  • SRAM: 리프레쉬가 필요 없고 전력 소모가 적으나 비싸다.
  • DRAM: 리프레쉬가 필요하고 SRAM보다 저가이며 많이 사용된다.

보조 기억 장치

• 자기 디스크
  • 원판 표면의 철 입자의 방향으로 0과 1을 표현한다. (플로피 디스크, 하드 디스크)

• 광 디스크
  • 빛의 반사를 이용하여 자료를 읽어내는 저장 매체이다. (CD, DVD, 블루레이 등)
• 플래시 메모리
  • 전자적으로 데이터를 지우고 쓸 수 있는 비휘발성 메모리로 충격에 강하여 휴대용 기기에 많이 사용된다. (USB, SSD 등)
  • SSD: 헤더와 같은 기계적 장치는 빠졌지만 저전력, 저소음, 저중량이라는 특징을 가지고 있다.
• 캐시 메모리(Cache Memory)
  • CPU 내•외 존재하는 메모리며, 메인 메모리와 CPU 간의 데이터 속도 향상을 위한 중간 버퍼 역할을 한다.
  • 빠른 CPU의 처리 속도와 느린 메인 메모리에서의 속도의 차이를 극복하는 역할을 한다.

운영체제

• 하드웨어 상에 프로그램들이 동작되도록 데이터를 주고 받으며 논리적인 일을 한다.
• 사용자의 하드웨어, 시스템 리소스를 제어하고 프로그램에 대한 일반적 서비스를 지원하는 시스템 소프트웨어이다.

운영체제 목적 및 기능

• 처리능력 향상, 사용 가능도 향상, 신뢰도 향상, 반환 시간 단축 등의 기능이 있다.
• 프로세서, 기억장치, 입출력장치, 파일 및 정보 등의 자원을 관리한다.
• 자원을 효율적으로 관리하기 위해 자원의 스케줄링 기능을 제공한다.
  • 스케줄링: 어떤 자원을 누가, 언제, 어떤 방식으로 사용할지를 결정해주는 것이다.
• 사용자와 시스템 간의 편리한 인터페이스를 제공한다.
• 시스템의 각종 하드웨어와 네트워크를 관리하고 제어한다.

운영 체제의 시스템 자원 관리

• 프로세스 관리(CPU)
• 메모리 관리
• I/O(입출력) 관리 (디스크, 네트워크 등)

응용 프로그램 관리

• 응용 프로그램이 실행되고, 시스템 자원을 사용할 수 있도록 권환과 사용자를 관리한다.

프로세스

• 프로그램이 실행 중인 상태로 특정 메모리 공간에 프로그램의 코드가 적재되고 CPU가 해당 명령어를 하나씩 수행하고 있는 상태를 의미한다.

프로세스 구성 요소

1. 유저 메모리 영역 관리 (Virtual Address Descriptors)
2. 핸들 테이블 (Handle Table)
3. 독립적인 메모리 공간

프로세스 특징

• 자원 소유의 단위
  • 각각의 프로세스는 자신의 실행 이미지 로드와 실행에 필요한 추가적인 메모리 공간을 가지고 있어야한다.
• 디스패칭의 단위
  • 프로세스는 하나의 프로그램이 운영체제로부터 CPU의 자원을 일정 기간 동안 할당 받아 명령어를 실행하는 것이며, 운영체제는 여러 개의 프로세스가 병렬적으로 실행되게 하기 위해서 CPU의 사용 시간을 각각의 프로세스에 골고루 나누어 주어야 한다.

프로세스 상태

• 실행 (Run): 프로세스가 프로세서를 차지하여 서비스를 받고 있는 상태
• 준비 (Ready): 실행될 수 있도록 준비되는 상태
• 대기 (Waiting): CPU의 사용이 아니라 입출력의 사건을 기다리는 상태

프로세서

• 하드웨어적인 측면: 컴퓨터 내에서 프로그램을 수행하는 하드웨어 유닛
• 소프트웨어적인 측면: 데이터 포맷을 변환하는 역할을 수행하는 데이터 처리 시스템

스레드

• 명령어가 CPU를 통해서 수행되는 객체의 단위이다.
• 여러 개의 명령어를 독립적으로 수행하여 처리하려고 할 때 사용하게 된다.

스레드의 구성요소

• 가상 CPU: 인터프리터, 컴파일러에 의해 내부적으로 처리되는 가상 코드
• 수행 코드: Thread Class에 구현되어 있는 run() Method 코드
• 처리 데이터: Thread에서 처리하는 데이터

스레드의 특징

• 프로세스 내에서 실행되는 흐름의 단위이다.
• 하나의 스레드는 시작해서 종료할 때까지 한번에 하나씩 명령들을 수행한다.
• 각 스레드마다 call stack이 존재하며, 나머지 Code, Data, Heap 영역은 스레드 끼리 공유한다.
• 다른 스레드와 독립적으로 동작한다.

싱글 스레드(Single-Thread)

• 프로세스가 단일 스레드로 동작하는 방식
• 장점
  • 자원 접근에 대한 동기화를 신경쓰지 않아도 된다.
  • 문맥 교환 작업 또한 요구하지 않는다.
  • 프로그래밍 난이도가 쉽고, CPU 메모리를 적게 사용한다.
• 단점
  • 여러 개의 CPU를 활용하지 못한다.
  • 연산량이 많은 작업을 하는 경우, 그 작업이 완료되어야 다른 작업을 수행할 수 있다.
  • 싱글 스레드 모델은 에러 처리를 못하는 경우 멈추게 된다.

멀티 스레드(Multi-Thread)

• 하나의 프로세스 내에서 둘 이상의 스레드가 동시에 작업을 수행하는 방식
• 시스템 자원의 활용 극대화 및 처리량을 증대할 수 있어 단일 프로세스 시스템의 효율성을 높일 수 있다.
• 장점
  • 작업을 분리해서 수행하므로 실시간으로 사용자에게 응답할 수 있다.
  • 한 프로세스를 여러 프로세서에서 수행할 수 있어 효율적이다.
• 단점
  • 주의 깊은 설계가 필요하며 디버깅이 까다롭다.
  • 단일 프로세스 시스템의 경우 효과를 기대하기 어렵다.
  • 하나의 스레드에 문제가 발생하면 전체 프로세스가 영향을 받게 되는 자원 공유의 문제가 발생한다.
  • 문맥 교환 작업을 요구한다.

문자열

• 유니코드
  • 유니코드 협회가 제정하는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다.
  • ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자를 다루기 위한 알고리즘 등을 포함하고 있다.
  • ASCII를 확장한 형태이다.
• ASCII
  • 영문 알파벳을 사용하는 대표적인 문자 인코딩으로 7비트로 모든 영어 알파벳을 표현할 수 있다.
  • 52개의 영문 알파벳 대소문자, 10개의 숫자, 32개의 특수 문자, 하나의 공백 문자를 포함한다.
• UTF-8 (가변 길이 인코딩)
  • 유니코드 한 문자를 나타내기 위해 1 byte(=8 bits)에서 4 byte까지 사용한다.
  • 네트워크를 통해 전송되는 텍스트는 주로 UTF-8로 인코딩된다.
  • 바이트 순서가 정해져 있다.
• UTF-16 
  • 코드 그대로 바이트로 표현 가능하며, 바이트 순서가 다양하다.

그래픽

• 비트맵
  • 웹 상에서 디지털 이미지를 저장하는 데 가장 많이 쓰이는 이미지 파일 포맷 형식
  • 래스터 그래픽 (점 방식)이라고 한다.
  • 이미지의 각 점들을 격자형의 픽셀 단위로 구성되며, 한 지역을 차지하는 셀은 위치에 따라 다른 값을 갖는다.
  • 확대를 하면 계단현상, 깨짐현상이 발생한다.
  • 컴퓨터에게 부담을 덜 주는 구조로 되어 있다.
• 벡터
  • 이미지를 수학적인 공식을 사용하여 표현한다.
  • 확대를 해도 계단현상, 깨짐현상이 발생하지 않는다.
  • 컴퓨터에게 부담을 가하는 방식이므로 주로 도형, 글자 등을 그리는 작업에 사용된다.
  • 사이즈를 키워도 용량에는 변화가 없다.

가비지 컬렉션

• 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것이다.
• 가비지 컬렉션 기능을 가진 언어로는 JAVA, C#, JavaScript 등이 있다.

가비지 컬렉션의 대표적인 방법

• 트레이싱: 한객체에 flag를두고, 가비지 컬렉션 사이클마다 flag에 표시 후 삭제하는 mark and sweep 방법이다.
• 레퍼런스 카운팅: 한 객체를 참조하는 변수의 수를 추적하는 방법이다.

웹 서비스에서의 캐시

많은 시간이나 연산이 필요한 작업의 결과를 저장해두는 것을 의미한다.

캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장되며 소프트웨어 구성 요소와 함께 사용될 수 있다.

기본 스토리지 계층에 액세스하여 데이터를 가져오는 더 느린 작업의 요구를 줄이고 데이터 검색의 성능을 높인다.

캐시의 장점

• 애플리케이션 성능 개선
• 데이터베이스 비용 절감
• 백엔드 부하 감소
• 예측 가능한 성능
• 데이터베이스 핫스팟 제거
• 읽기 처리량 증가

캐시 사용의 예시

• 클라이언트: HTTP 캐시 헤더, 브라우저
• 네트워크: DNS 서버, HTTP 캐시 헤더, CDN, 리버스 프록시
• 서버 및 데이터베이스: 키-값 데이터 스토어, 로컬 캐시

📘 추가로 공부할 내용

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

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

📝 중요한 내용

• 컴퓨터 구조
• 중앙 처리장치
• 운영 체제
• 프러세스
• 스레드
• 캐시

📌 어제 저녁에 각종 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