Homile

📌 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

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

📗 오늘 학습한 내용

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