코딩 헬스장

매개변수(Parameter)와 인자(Argument)의 차이점

김관장 — Sun, 4 Dec 2022 15:20:22 +0900

✅ 매개변수와 인자는 프로그래밍에서 자주 쓰이는 용어인데, 간단한 용어이지만 서로 헷갈릴 수 있는 개념이기 때문에 짧게 정리해봅니다.

매개변수 (Parameter) : 함수를 정의할 때 사용되는 변수 (variable)
인자 (Argument) : 실제로 함수를 호출할 때 넘기는 변수값 (value)

참고한 글

매개변수(Parameter)와 인자(Argument)의 차이점은 무엇일까?

매개변수와 인자는 프로그래밍에서 자주 사용되는 용어입니다. 영어로는 Parameter(매개변수), Argument(인수, 인자)로 정의되고 쓰이는데요. 프로그래밍을 할 때 자주 쓰이는 용어인 만큼 명확하게

7942yongdae.tistory.com

JS - 1급 객체 (First Class Object)

김관장 — Sun, 4 Dec 2022 14:59:39 +0900

✅ JavaScript의 함수는 1급 객체(First Class Object)입니다. 그렇다면 1급 객체란 무엇인지, 왜 중요한지에 대해 살펴보겠습니다.

1급 시민(First Class Citizen)

1급 객체란, 1급 시민의 조건을 충족하는 객체입니다. 따라서 1급 객체를 알아보기 전 1급 시민의 개념부터 알아 볼 필요가 있습니다.

1급 시민이란, 함수를 변수처럼 사용할 수 있다. 라는 의미로 해석할 수 있으며, 조건은 아래와 같습니다.

* 단, 함수와 변수를 동일한 개념으로 생각하면 안됩니다.

변수에 담을 수 있습니다.
함수의 인자(Parameter)로 전달할 수 있습니다.
함수의 반환 값으로 전달할 수 있습니다.

// 예시

let numValue = 1; // [1] 충족

function addNum(param){ // [2] 충족
	let addValue = param + 1;
    return addValue; // [3] 충족
}

console.log(addNum(numValue)); // [2] 충족

위 예시처럼 대부분의 프로그래밍 언어에서는 숫자/문자형은 1급 시민의 조건을 충족합니다.

JavaScript에서는 기본 자료형( Number, String, Boolean, Null, Undefined, Symbol, Object-(Function, Array) )이 1급 시민의 조건을 충족합니다.

1급 객체(First Class Object)

1급 객체는 1급 시민의 조건을 충족하는 객체를 뜻합니다.

JavaScript에서는 객체는 1급 시민의 조건을 모두 충족하기 때문에, 1급 객체입니다.

let user = { id: '1급 객체' }  // [1. 변수에 담을 수 있습니다.]

function setUser (param) {  // [2. 함수의 인자로 전달할 수 있습니다.]
    let tempUser = param;
    tempUser.pwd = 'q1w2e3r4';
    return tempUser;  // [3. 함수의 반환 값으로 전달할 수 있습니다.]
}

console.log(setUser(user)) // { id: '1급 객체', pwd: 'q1w2e3r4' }

JavaScript에서 함수는 prototype을 통해 객체를 상속받아 사용합니다.
따라서 함수도 객체로 취급하고 있기 때문에 함수도 1급 객체(함수)라고 칭합니다.
단 1급 함수는 1급 시민의 조건과 더불어 추가적인 조건들이 존재합니다.
1. 런타임 시 생성이 가능해야 합니다.
2. 익명 생성이 가능해야 합니다.

// [1. 변수에 담을 수 있습니다.]
let add = function addFn(a,b) { 
	return a + b;
}

// [익명 생성이 가능해야합니다.]
let add2 = function(a,b) {
	return a + b;
}

// [2. 함수의 인자로 전달할 수 있습니다.]
let add3 = function(func) {
  return func(); // [3. 함수의 반환 값으로 전달할 수 있습니다.]
}

console.log(add3(()=>add2(10,20))); // 30 [2. 함수의 인자로 전달할 수 있습니다.]

함수가 1급 객체인 것이 중요한 이유

고차 함수를 만들 수 있습니다.

함수를 인자 또는 매개변수로 받거나 함수를 리턴하는 함수를 말합니다.
JavaScript의 Array.prototype(배열)에서 자주 사용하는
.forEach(), .map(), .find(), .findIndex(), .filter(), .reduce(), .sort(), .some(), .every()
가 있습니다.

콜백을 사용할 수 있습니다.

함수를 다른 함수의 인자로서 사용하는 것을 말합니다.
콜백이 유용한 이유는, 콜백 함수만 바꿔주면 하나의 함수를 여러 가지로 응용할 수 있기 때문입니다.

function add2(a, b) {
	return a + b;
}

function add3(a, b, c){
	return a + b + c;
}

function addNumber(addFn) {
	return "합계 : " + addFn
}

console.log(addNumber(add2(1, 2))); // 합계 : 3
console.log(addNumber(add3(10, 20, 30))); // 합계 : 60

/* addNumber함수는 고차함수, 인자로 전달된 add2, add3함수는 콜백함수 !! */

정리 !

JavaScript에서는 기본 자료형은 1급 시민의 조건을 충족합니다.

[ 1급 시민의 조건 ]
1. 변수에 담을 수 있습니다.
2. 함수의 인자(Parameter)로 전달할 수 있습니다.
3. 함수의 반환 값으로 전달할 수 있습니다.
1급 객체란 1급 시민의 조건을 충족하는 객체입니다.

[ 1급 함수가 중요한 이유 ]
1. 고차 함수를 만들 수 있습니다. (함수를 인자 또는 매개변수로 받거나 함수를 리턴하는 함수)
2. 콜백을 사용할 수 있습니다. (함수를 다른 함수의 인자로서 사용하는 것)

참고한 글

[Javascript] 1급 객체 - doodoo's coding

I really love solving computer problem. I wanna grow today more than yesterday.

0xd00d00.github.io

JS - 동작원리와 비동기처리

김관장 — Fri, 11 Nov 2022 00:14:53 +0900

✅ 헷갈릴 수 있는 용어들에 대한 간략한 설명입니다.

블로킹은 느린 동작이 스택에 남아있는 것을 의미합니다.
호출 스케줄링(scheduling a call)은 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 의미합니다.
매크로태스크큐와 마이크로태스크큐는 서로 다른 별로의 큐 입니다.
매크로태스크 큐(MacroTask Queue) : 기존의 태스크 큐
마이크로태스크(MicroTask Queue 혹은 Job Queue) : ES6에서 Promise와 함께 소개된 개념으로 매크로태스크 큐보다 처리 우선순위가 높습니다.

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터입니다. (크롬과 Node.js에서 사용되는 V8엔진이 대표적)
- Memory Heap
  - 메모리 할당이 일어나는 곳, 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조합니다.
  - 객체는 원시값과 달리 크기가 정해져 있지 않기 때문에 할당해야 할 메모리 공간의 크기는 동적 할당 됩니다.
- Call Stack
  - 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 동기적으로 실행됩니다.

자바스크립트는 싱글스레드 언어입니다. 이는 하나의 싱글 호출 스택(Call Stack)만 가지고 있다는 뜻이며, 자바스크립트의 엔진은 한 번에 하나의 task만 실행할 수 있는 동기 프로그래밍 언어입니다. 하나의 작업이 끝나면 pop하고 바로 아래의 함수나 코드를 실행합니다. 작업을 차례대로 실행하므로 하나의 작업이 끝날 때까지 또 다른 작업을 실행하지 않습니다.

아래와 같은 코드를 실행하면

function first(){
    second();
    console.log("첫번째");
}
function second(){
    third();
    console.log("두번째");
}
function third(){
    console.log("세번째");
}
first(); // 세번째 두번째 첫번째

먼저 first 함수가 호출(push)되고, 그안의 second함수가 호출되고, 마지막으로 그 안의 third 함수가 호출됩니다.

main() 함수는 처음 실행시 전역 컨텍스트(함수가 호출 되었을때 생성되는 환경)입니다.
함수의 실행이 완료되면 콜 스택에서 지워집니다. third, second, first, main 순으로 pop되기 때문에 "세번째, 두번째, 첫번째" 순으로 콘솔에 찍히며 최종적으로 호출 스택이 지워이 비워집니다.

자바스크립트 런타임

자바스크립트 런타임(환경)이란 자바스크립트가 구동되는 환경을 말합니다. 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스 등..)와 Node.js라는 프로그램이 있습니다.
자바스크립트 런타임은 자바스크립트 엔진(Memory heap, Call stack), Web apis, Task queue, Event loop를 갖습니다.
- Web API (https://developer.mozilla.org/en-US/docs/Web/API)
  - Web API는 브라우저에서 제공되는 API입니다.
  - 자바스크립트 엔진에서 정의되지 않았던 setTimeout, HTTP 요청 메소드(Ajax), DOM 이벤트 등의 메소드를 지원합니다.
- Task Queue
  - setTimeout, setInterval과 같은 비동기 함수들의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역입니다.
  - 태스크 큐에 일시적으로 보관된 함수들은 비동기 처리 방식으로 동작합니다.
  - 이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐(Callback Queue)라고도 합니다.
- Event Loop
  - 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인합니다.
  - 만약 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
  - 큐(Queue) - FIFO (First In First Out) 구조 입니다.

자바스크립트 비동기 처리의 필요성

// 비동기 처리 전
const sleep = (func, delay) => {
  const delayUntil = Date.now() + delay;
  while (Date.now() < delayUntil);
  func();
};

const str = () => console.log("시작");
const end = () => console.log("끝");

sleep(str, 5 * 1000);
end();

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// 비동기 처리 후 : setTimeout
const str = () => console.log('시작');
const end = () => console.log('끝');

setTimeout(str, 5 * 1000);
end();

극단적인 예로 위 비동기 처리 전 스크립트를 실행하면 5초 뒤에 "시작 끝"가 콘솔로 찍히는 것을 확인할 수 있습니다. 이런 로직들은 사용자들이 사이트가 느리다고 생각하는 주요 원인이 될 것입니다.
비동기 처리 후 스크립트를 실행하면 콘솔에 "끝"가 찍히고 몇초 뒤에 "시작"이 콘솔로 찍힙니다.

이처럼 오래 걸리는 태스크를 처리할 때 발생하는 블로킹(느린 동작이 스택에 남아있는 것)을 막고, 싱글스레드 언어인 자바스크립트의 동기적인 실행 컨텍스트 스택을 효율적으로 스케줄링하기 위해 비동기 처리를 사용합니다.

setTimeout, setInterval, HTTP request, DOM Event 모두 비동기 처리 방식으로 동작합니다.

즉, API를 통해 Data를 받아오는 과정, Data를 서버에 업데이트하는 과정, HTML요소로 만든 애니메이션 효과 등은 모두 비동기적으로 처리가 됩니다.

자바스크립트 비동기 처리과정

자바스크립트의 비동기 처리 과정

const middleFn = () => console.log('중간');

console.log('시작');

setTimeout(middleFn, 5 * 1000);

console.log('끝');

// 시작 끝 중간 순으로 콘솔에 찍힘.

더 자세하게 위 코드를 통해서 어떻게 비동기가 처리되는지 알아보겠습니다.
(이미지가 많아 접은 글로 작성하였습니다. 아래 더보기를 클릭해주세요.)

1. 먼저 전역 컨텍스트 main() 함수가 콜 스택에 쌓이고 그 다음으로 console.log('시작')이 콜 스택에 쌓입니다.

현재 실행 컨텍스트 : log("시작")

2. "시작"이 콘솔에 찍히고 종료되고 콜 스택에서 pop됩니다. 그리고 다음으로 setTimeout 함수가 실행되면서 콜 스택에 쌓입니다

현재 실행 컨텍스트 : setTimeout()

3. setTimeout()함수가 실행되면 해당 함수는 자바스크립트 엔진이 처리하지 않고 Web API가 처리하므로 콜백 함수를 전달하고 setTimeout 작업을 요청합니다(콜백함수의 호출 스케줄링). 그리고 종료되어 콜 스택에서 pop 합니다.

* 호출 스케줄링(scheduling a call)이란? 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것

이때 호출 스케줄링, 즉 타이머 설정과 타이머가 만료되면 콜백 함수를 태스크 큐에 푸시하는 것은 브라우저의 역할 입니다.

현재 실행 컨텍스트 : setTimeout()

4. 다음으로 console.log('끝')이 콜 스택에 쌓입니다.

⭐ 브라우저에서 수행하는 setTimeout 작업과 자바스크립트 엔진이 수행하는 log("끝")이 병렬로 처리됩니다.

( ) 브라우저에서 수행되는 작업
브라우저는 타이머(setTimeout에서 설정한)를 설정하고 타이머의 만료를 기다립니다. 이후 타이머가 만료되면 콜백 함수 middleFn이 태스크 큐에 푸시됩니다. 그리고 콜 스택이 빈 상태가 될 때까지 대기하다가 호출됩니다.

( ) 자바스크립트 엔진에서 수행되는 작업
console.log("끝")이 호출되어 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 컨텍스트가 됩니다. 이후 종료되면 콜 스택에서 pop됩니다.

현재 실행 컨텍스트 : log('끝')

5. 그리고 마지막으로 남아있던 전역 컨텍스트 main()이 종료되고 콜 스택에서 pop됩니다. 따라서 현재 콜 스택에는 아무런 실행 컨텍도 남아있지 않게 됩니다.그리고 setTimeout에서 설정한 지연 시간에 따라 4 ~ 5번 과정 진행 중 혹은 진행 완료 후에 콜백 함수가 태스크 큐에 푸시되어 대기 중 입니다.
(위 예시에서는 대기 시간을 5초 설정했기때문에 main()까지 pop된 상태에서 콜백함수가 태스크 큐에 푸시되었을 것 입니다.)

현재 실행 컨텍스트 : 없음

6. 이벤트 루프에 의해 콜 스택이 비어있음이 감지되고 태스트 큐에서 대기 중인 콜백함수 middleFn이 이벤트 루프에 의해 콜 스택에 푸시됩니다. 즉 콜백 함수 middleFn의 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 컨텍스트가 됩니다.

현재 실행 컨텍스트 : setTimeout의 콜백함수인 middleFn()

7. 이후 콜백함수가 종료되어 콜 스택에서 pop되며 위 코드의 처리 과정이 종료됩니다.

자바스크립트 비동기 처리과정 - Promise 와 이벤트 루프

위에서 정리한 내용을 바탕으로 setTimeout, setInterval과 같은 비동기 함수들의 콜백 함수 또는 이벤트 핸들러는 태스크 큐에 푸시해두었다가 콜 스택이 비었을 때 이벤트 루프에 의해서 콜 스택에 푸시되어 실행된다는 것을 알았습니다.
그렇다면 ES6에서 비동기 처리를 위해 추가된 Promise는 어떻게 처리가 확인해보갰습니다.

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function() {
    console.log('promise1');
  })
  .then(function() {
    console.log('promise2');
  });

console.log('script end');

/* 콘솔에 찍히는 순서
script start
script end
promise1
promise2
setTimeout
*/

setTimeout의 대기시간을 0으로 주었음에도 왜 Promise 보다 느리게 호출이 된 걸까? 라는 의문이 생깁니다.

⚙️ ES6 MicroTask Queue

MicroTask Queue(혹은 Job Queue)는 ES6에서 Promise와 함께 소개된 개념으로 마이크로태스크 큐를 사용하는 대표적인 함수가 Promise 입니다.
마이크로태스크 큐와 기존의 태스크 큐(매크로태스크 큐(MacroTask Queue))는 서로 다른 별도의 큐 입니다.
⭐ 마이크로태스크 큐는 기존의 태스크 큐보다 처리 우선순위가 높습니다. 따라서 이벤트 루프는 콜 스택이 비었을 때 먼저 마이크로 태스크 큐에 대기하고 있던 함수를 가져와서 실행하고, 없다면 기존의 태스크 큐에서 대기하고 있던 함수를 가져와서 실행합니다.

⚙️ MacroTask Queue vs MicroTask Queue

Macrotask queue
- 이벤트 루프는 매크로 태스크 큐에 있는 것을 실행시키기 시작할 때 있는 매크로 태스크만 실행시킵니다. 매크로 태스크가 추가한 매크로 태스크는 다음 이벤트 루프가 실행될 때까지 실행되지 않습니다.
- HTML 파싱, DOM 생성, 메인 스레드를 구성하는 JS Code, 페이지 로드나 네트워크 이벤트, 타이머와 같은 여러 이벤트를 포함합니다.
- 지연 시간이 0초인 setTimeout()을 통해 새로운 매크로태스크를 스케줄링 할 수 있습니다.
Microtask queue
- 마이크로태스크들은 실행하면서 새로운 마이크로 태스크를 큐에 추가할 수도 있습니다. 새롭게 추가된 마이크로 태스크도 큐가 빌 때까지 계속해서 실행됩니다.
- Promise의 후속 처리 메서드의 콜백 함수를 처리합니다.
- 다른 이벤트 핸들링, 렌더링, 매크로태스크가 실행되기 전에 완료됩니다.
- 마이크로태스크는 바로 다음 마이크로태스크를 실행하기때문에 그 사이에 UI 혹은 네트워크 변화가 없습니다.
- 브라우저가 리렌더링 되기 전에 실행되기때문에 마이크로태스크 큐의 작업이 늦게 처리되면 브라우저의 UI 렌더링이 지연 될 수 있습니다.

* Macrotask queue를 이용하는 함수
: setTimeout(), setInterval(), setImmediate(), requestAnimationFrame, I/O, UI 렌더링 등등..

* Microtask queue를 이용하는 함수
process.nextTick(), Promise, queueMicrotask 등등..

마이크로태스크 큐와 매크로태스크 큐의 처리 과정

참고한 글

setTimeout(foo, 0)에서 foo는 정말 0ms 후에 실행될까?

자바스크립트의 비동기 처리와 이벤트루프, 마이크로태스크 큐에 대해 설명합니다.

velog.io

[JS] Javascript 동작 원리와 비동기처리

자바스크립트는 싱글스레드이다. 어떻게 자바스크립트는 싱글스레드이면서 비동기인 것일까? 자바스크립트가 어떻게 동작하는지 내부 원리에 대해 알아보자. Contents 자바스크립트 엔진 자

ingg.dev

⭐️ JavaScript Visualized: Promises & Async/Await

Ever had to deal with JS code that just... didn't run the way you expected it to? Maybe it seemed lik...

dev.to

이벤트 루프와 매크로태스크, 마이크로태스크

ko.javascript.info

이벤트 루프와 태스크 큐 (마이크로 태스크, 매크로 태스크)

자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미한다. 만약

velog.io

Next.js - .gitignore 가 적용되지 않을 때

김관장 — Tue, 27 Sep 2022 18:30:39 +0900

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다.

Next.js에서 .gitignore 가 적용되지 않을 때

next 프로젝트로 사이드 프로젝트를 하면서 기초 설정을 하고 커밋을 하려 했는데, 몇천개의 커밋 건들이 올라왔습니다..! 분명 gitignore에 next 관련 폴더들을 제외시켜뒀는데, 계속 무시되어서 인터넷을 검색해보니 똑같은 경험을 하신 분들이 계셨습니다

.gitignore에 .next 경로 파일들이 무시되는 이유

.gitignore 파일 생성 전 이미 git 원격 저장소에 .next 디렉토리를 커밋했기 때문에 캐싱된 파일들이 잔존하고 있기 때문입니다.

해결방법

.gitignore 에 .next 를 추가 !
아래 명령어를 순서대로 실행 !
그 이후로부터는 정상적으로 제외됩니다 !

$ git rm -rf --cached .
$ git add .
$ git commit -m "커밋 메세지"
$ git push

git rm
- 원격 저장소와 로컬 저장소에 있는 파일을 삭제합니다.

git rm --cached
- 원격 저장소에 있는 파일을 삭제한다. 로컬 저장소에 있는 파일은 삭제하지 않습니다. ( 로컬 저장소에는 존재하지만, 원격 저장소에 올라가진 않습니다.

참고한 글

[NextJS] .gitignore 적용되지 않을 때

create-next-app으로 nextjs 프로젝트를 생성하여 혼자 스터디를 해보고 있었는데, .gitignore 파일 수정이 필요한 일이 생겼다. 깃헙 원격 저장소에 올리지 않아도 되는 파일들이 있어 .gitignore에 node_modul

velog.io

Next.js - Redirects & Rewrites

김관장 — Tue, 27 Sep 2022 00:05:37 +0900

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다.

Redirects 와 Rewrites

⚙️ next.config.js

next.js에서 커스텀 설정을 하기 위해 프로젝트 디렉토리 루트에 next.config.js 파일을 만들어사용합니다.
next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈이며, Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다.
Redirects 와 Rewrites 옵션은 next.config.js 에서 사용하는 옵션입니다.

Redirects

module.exports = {

  async redirects() {
    return [
      {
        source: "/requestPage",
        destination: "/redirectPage",
        permanent: false,
      },
      /*
      위와 같은 객체형식으로 여러개 가능
      */
      
    ];
  },

};

예시 동작

redirects()는 source, destination, permanent 속성이 있는 객체 배열을 반환하는 비동기 함수입니다.
source 경로를 destination 경로로 redirect 하도록 설정할 수 있습니다.
- source : 들어오는 요청 경로 (requset 경로)
- destination : 이동할, 라우팅할 특정 페이지의 경로 (redirect 경로)
- permanent : 브라우저나 검색엔진이 이 정보를 기억하는지 여부 (true - 308 status code / false - 307 status code)

◼ HTTP Status Code 307, 308

307 Temporary Redirect

임시 리다이렉트라고 해석할 수 있습니다.
만약 oldblog.kr 이라는 블로그가 있는데 어떠한 이슈로 인해 잠시동안 temp.oldblog.kr 블로그를 만든 후에 이전 블로그의 접속자들을 리다이렉트 시켜주고 싶을 때 사용합니다.

308 Permanent Redirect

영구 리다이렉트라고 해석할 수 있습니다.
만약 oldblog.kr 이라는 예전 블로그에서, 새로운 newblog.kr 블로그를 만든 후 이전 블로그 접속자들을 리다이렉트 시켜주고 싶을 때 사용합니다.

307 과 308 코드의 차이 !

임시적 이동인지, 영구적 이동인지에 따른 차이!

Rewrites

const API_KEY = process.env.API_KEY;

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/test",
        destination: `https://api.test?api_key=${API_KEY}`,
      },
     /*
      위와 같은 객체형식으로 여러개 가능
      */
    ];
  },
};

API_KET 가 12345a678910b 라고 가정했을 때

* rewrites 설정을 하지 않은 경우 /api/test 로 GET 요청을 하면 https://api.test?api_key=12345a678910b 과 같이 API_KEY가 그대로 요청 URL에 노출됩니다.

* rewirtes 설정을 위와 같이 하면 /api/test로 GET 요청을 하면 destination 경로로 매핑되어 https://api.test?api_key=12345a678910b 로 GET 요청을하는 것은 동일하지만 사용자는 https://api.test 까지의 요청 URL만 확인할 수 있습니다.

정리 !

Redirects 와 Rewrites 옵션은 next.config.js 에서 사용하는 옵션 !
Redirects는 source 경로를 destination 경로로 redirect 시키고, URL을 변경 !
- permanent 옵션이 true이면 308 status code, false이면 307 status code.
  주로 308은 영구이동, 307은 임시 이동일 때 사용!
Rewrites는 URL 프록시 역할을 하고 destination 경로를 source 경로로 mask !
- 프록시(Proxy)란 대신이란 의미로, 보안상의 문제로 직접 통신을 받을 수 없을 때 프록시를 이용해서 중계를 하는 개념!

참고한 글

[NextJS] Redirects & Rewrites

NextJS 공식문서 next.config.js redirects rewrites ⚙️ next.config.js Next.js에서 커스텀 고급(?) 설정을 하기 위해서 프로젝트 디렉터리 루트에 next.config.js 파일을 만들 수 있다. next.conf

velog.io

Nextjs Redirect 옵션에 Permanent는 뭐지?

아직도 Next.js Redirect에 permanent 옵션 모르는 사람 있음? (나)

velog.io

Next.js - dotenv로 환경변수 저장하기

김관장 — Mon, 26 Sep 2022 18:46:19 +0900

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다.

Next.js 환경에서 dotenv로 환경변수 저장하는 법

dotenv

dotenv 라이브러리는 .env 파일로부터 환경 변수를 읽을 수 있습니다. 따라서 .env 파일에 키=값 포멧으로 나열하고 dotenv 라이브러리를 이용해서 process.env 에 설정할 수 있습니다.
디폴트로 현재 디렉토리에 위치한 .env 파일을 읽어옵니다.
만약 .env가 다른 경로에 있다면, config() 함수 호출 시 path 옵션을 넘겨주면 됩니다.

◼ 설치

npm i dotenv

◼ 사용예시

저는 Next.js 에서 사용했습니다.

config 폴더

// .env.development
MODE= DEV


// .env.production
MODE= PROD

package.json

// scripts 부분

"scripts": {
	...
    "build:dev": "NEXT_NODE_ENV=development next build",
    "build:prod": "NEXT_NODE_ENV=production next build",
    "start:dev": "NEXT_NODE_ENV=development next start -p 8080",
    "start:prod": "NEXT_NODE_ENV=production next start -p 8080"
  },

next.config.js

require("dotenv").config({
  path: `./config/.env.development`,
});

module.exports = {
  reactStrictMode: false, // env와 무관
  swcMinify: true, // env와 무관

  env: {
    MODE: process.env.MODE,
  },
};

◼ 결과

npm run build:dev => npm run start:dev 실행 시 process.env.MODE 값에 DEV 값이 담깁니다!
npm run build:prod => npm run build:prod 실행 시 process.env.MODE 값에 PROD 값이 담깁니다!

JS - 쓰로틀링(throttling)과 디바운싱(debouncing)

김관장 — Thu, 8 Sep 2022 19:11:11 +0900

✅ 쓰로틀링과 디바운싱은 모두 웹에서 발생하는 이벤트를 제어하는 방법으로 불필요한 이벤트가 호출되는 것을 방지합니다. 예를 들어 검색어 자동완성 기능, 스크롤 관련 동작과 같은 이벤트에서 매번 입력, 스크롤에 대한 콜백이 발생하고 계속해서 콜백을 수행하는 일은 큰 리소스를 요구하기 때문에 서비스의 성능 저하 및 사용자 경험 저하를 야기합니다. 따라서 상황에 맞게 쓰로틀링이나 디바운싱을 적용하면 최적화하는데 큰 도움이 됩니다.

쓰로틀링(throttling)

쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 제어하는 것 입니다.
개발자가 몇 초마다 한 번씩 실행되게 제한을 두는 것입니다.
주로 스크롤 이벤트에서 많이 사용합니다.

쓰로틀링 구현 포인트 !

1. 함수가 실행 중인지 체크하는 타이머 변수를 생성
2. 함수를 호출하면 타이머를 동작시키기
3. 일정 시간 내에 함수가 다시 호출되면 실행되지 않게 처리를 해야 하므로 타이머 값이 없을 때만 함수 동작시키기
4. 함수가 완료되면 타이머를 다시 초기화하여 함수 호출이 가능하도록 처리하기

[ 쓰로틀링 적용 전 ] (코드는 더보기에서!)

import React, { useState, useEffect, useRef } from "react";

function App() {
  const divRef = useRef<HTMLDivElement>(null);

  const scrollFunc = (): void => {
    console.log(divRef.current?.scrollTop);
  };

  useEffect(() => {
    const divRefValue = divRef.current ? divRef.current : null;

    divRefValue?.addEventListener("scroll", scrollFunc);

    return () => {
      divRefValue?.removeEventListener("scroll", scrollFunc);
    };
  });

  return (
    <div className="App">
      <div
        ref={divRef}
        style={{
          position: "fixed",
          overflow: "scroll",
          width: "80%",
          height: "80%",
        }}
      >
        <div
          style={{
            height: "300%",
            background: "lightgreen",
          }}
        ></div>
      </div>
    </div>
  );
}

export default App;

쓰로틀링 적용 전

위와 같이 스크롤 이벤트는 스크롤링할 때마다 발생하는데, 만약 이때마다 어떤 작업을 실행하게 된다면 성능 문제가 발생할 가능성이 클 것입니다.

[ 쓰로틀링 적용 후 ] (코드는 더보기에서!)

import React, { useState, useEffect, useRef } from "react";

function App() {
  const divRef = useRef<HTMLDivElement>(null);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null); // 쓰로틀링을 체크할 timer

  /* 쓰로틀링 적용 */
  const scrollFunc = (): void => {
    // timer가 없을 때
    if (!timer.current) {
      timer.current = setTimeout(() => {
        console.log(`scrollTop :: ${divRef.current?.scrollTop}`);
        timer.current = null; // 로직이 끝나면 timer를 초기화
      }, 250);
    }
  };

  useEffect(() => {
    const divRefValue = divRef.current ? divRef.current : null;

    divRefValue?.addEventListener("scroll", scrollFunc);

    return () => {
      divRefValue?.removeEventListener("scroll", scrollFunc);
    };
  });

  return (
    <div className="App">
      <div
        ref={divRef}
        style={{
          position: "fixed",
          overflow: "scroll",
          width: "80%",
          height: "80%",
        }}
      >
        <div
          style={{
            height: "300%",
            background: "lightgreen",
          }}
        ></div>
      </div>
    </div>
  );
}

export default App;

쓰로틀링 적용 후

쓰로틀링을 적용한 결과 스크롤 이벤트를 일정 시간마다 호출하도록 제어할 수 있게 되었습니다!

디바운싱(debouncing)

디바운싱은 연속으로 호출되는 함수들 중 마지막에 호출되는 함수(또는 제일 처음 호출한 함수)만 실행되도록 하는 것입니다.
이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 제어합니다.
주로 사용자 입력 이벤트 처리 (검색어 자동완성), 리사이즈(Resize) - 브라우저 창 크기 조절 이벤트에 많이 사용합니다.

디바운싱 구현 포인트 !

1. 함수가 실행 중인지 체크하는 타이머 변수를 생성
2. 함수를 호출하면 타이머를 동작시키기
3. 일정 시간 전에 함수 호출이 발생하면, 기존 타이머를 취소하고 시간을 재설정하여 새로운 함수 호출

[ 디바운싱 적용 전 ] (코드는 더보기에서!)

import React, { useState, useEffect, useRef } from "react";

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  const inputFunc = (): void => {
    console.log(inputRef.current?.value);
  };

  return (
    <div className="App">
      <div
        style={{ position: "absolute", width: "50%", margin: "10% 25% 0 25%" }}
      >
        <input ref={inputRef} onChange={inputFunc}></input>
      </div>
    </div>
  );
}

export default App;

쓰로틀링 적용 전

위와 같이 인풋 이벤트는 입력할 때마다 발생하는 것을 확인할 수 있습니다. 따라서 예를 들어 사용자 입력에 따른 검색어 자동완성 기능을 구현하고자 한다면 필요 없는 API들을 상당히 많이 호출을 할 것입니다.

[ 디바운싱 적용 후 ] (코드는 더보기에서!)

import React, { useState, useEffect, useRef } from "react";

function App() {
  const inputRef = useRef<HTMLInputElement>(null);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  /* 디바운싱 적용 */
  const inputFunc = (): void => {
    if (timer.current) {
      clearTimeout(timer.current);
    }

    timer.current = setTimeout(() => {
      console.log(inputRef.current?.value);
    }, 250);
  };

  return (
    <div className="App">
      <div
        style={{ position: "absolute", width: "50%", margin: "10% 25% 0 25%" }}
      >
        <input ref={inputRef} onChange={inputFunc}></input>
      </div>
    </div>
  );
}

export default App;

디바운싱 적용 후

디바운싱을 적용한 결과 인풋 이벤트가 설정한 시간 동안 발생하지 않았을 때 마지막 이벤트를 호출하는 것을 확인할 수 있습니다!

쓰로틀링(throttling) 과 디바운싱(debouncing) 의 차이점

쓰로틀링은 연속되는 이벤트의 경우 설정한 특정 시간을 주기로 이벤트를 계속 실행합니다.
디바운싱은 연속되는 이벤트의 경우 모두 무시하고 설정한 특정 시간 동안 이벤트가 발생하지 않았을 때 맨 마지막 이벤트를 딱 한번 실행합니다.

정리 !

쓰로틀링과 디바운싱 모두 이벤트를 제어하는 방법으로 불필요한 이벤트가 연속으로 호출되는 것을 방지하여 서비스의 성능 향상 및 사용자 경험 최적화에 사용됩니다.
쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 제어하는 것입니다.
디바운싱은 연속으로 호출되는 함수들 중 마지막에 호출되는 함수(또는 제일 처음 호출한 함수)만 실행되도록 하는 것입니다.
쓰로틀링과 디바운싱의 차이점은 연속되는 이벤트에서 쓰로틀링은 적어도 X 초마다 정기적으로 기능 실행을 보장하나, 디바운싱은 모두 무시하고 특정 시간 동안 이벤트가 발생하지 않았을 때 마지막 이벤트를 딱 한번 실행합니다.

참고한 글

How to Optimize web app with Debounce and Throttle

In optimizing a product's performance, engineers end up designing a process that does the most with the least. This either by finding a way to minimize an appli

blog.knoldus.com

2022년 할 것들 [9월 목표] - update

김관장 — Fri, 2 Sep 2022 18:05:56 +0900

2022년에 9월 목표를 세우고, 말일에 스스로 결과를 판단하여 회고해보자!

1. React 처음부터 다시 공부해보기

[ 목표 ]
FE 개발자로 현재 3년차.. 원래는 BE 개발자로 들어왔는데 당시 부서에 FE 신규 메뉴들이 많이 쌓여있었고 어쩌다 보니 BE 메뉴가 아닌 FE 메뉴들을 분장받아 개발하다 보니 그때부터 FE 개발자로 일하고 있다. 공부 없이 거의 바로 메뉴를 개발하다 보니 React의 개념 및 동작 과정에 대한 이해 같은 부분들이 가끔 부족하다는 생각이 든다! 따라서 React에 대해 심층적으로 학습하고 원래 알고 있었던 것들은 복습하면서 처음부터 다시 한번 공부해보기로 결정! (노션 페이지로 정리)

[ 결과 ]
- 9월 30일에 업데이트 하기!
기초 개념부터 천천히 정리해봤다. 원래는 한번 훑어볼 목적이었지만, 개념 정리를 하면서 깊게 들어갈수록 생각할 점이 상당히 많았다. (예를들면 컴포넌트 아키텍처같은 것들..) 그래서 훑어볼 목적이 아닌 깊게 공부하여 사고의 폭을 넓히고싶어, 앞으로도 꾸준히 공부할 예정이다.

React.js

https://react.vlpt.us/

succulent-dog-eb0.notion.site

2. Next.js로 사이드 프로젝트 진행하기!

[ 목표 ]
현 회사는 앱이 아닌 웹으로만 서비스를 제공하고 있다. 물론 Next.js 기반으로 서비스하는 앱도 있긴 하지만, 해당 서비스에서 메뉴 한 두 개 정도 개발해본 경험이 끝이다. 따라서 Next.js를 할 수 있다고 하기에도 사실 창피한 수준이다.. 그래서 최근 사이드 프로젝트 팀(설계-2, 디자인-2, FE-2, BE-2)에 들어가서 11월 말까지 서비스를 목적으로 React Native 기반 TypeScript + Next.js 형태의 하이브리드 앱을 기획 중이다. 아직 디자인 및 설계가 구체적으로 나오지 않았으므로(9월 말에 나올 것으로 예상), 9월 말까지는 Next.js의 강의를 듣고, 간단한 사이드 프로젝트를 할 것이다!

[ 결과 ]
- 9월 30일에 업데이트 하기!
먼저 Next.js에 대해 공부했다. 그리고 개인적인 사이드프로젝트를 진행하려고 했는데, 팀 프로젝트 설계가 빨리 나와서 프로젝트를 진행하고 있다.

Next.js

+ TypeScript ) https://noogoonaa.tistory.com/65

succulent-dog-eb0.notion.site

GitHub - WE-O/WEO_FE_WEB: ⭐️ WE'O 식식물물 Front 소스 저장소 ⭐️

⭐️ WE'O 식식물물 Front 소스 저장소 ⭐️. Contribute to WE-O/WEO_FE_WEB development by creating an account on GitHub.

github.com

3. 클린 코드

[ 목표 ]
클린 코드란 무엇일까.. 간단한 것 같지만 어렵다.. 개발자마다 성향이 다르고 같은 로직을 짜는데 코드가 다르기 때문에 협업에 도움이 되며 스스로 이게 왜 클린 코드인 지 설명할 수 있도록 나만의 클린 코드 정의를 확실히 하자. (노션 페이지로 정리)

[ 결과 ]
- 9월 30일에 업데이트 하기!
보통 클린코드란 가독성과 유지보수가 좋은 코드이다. 그런데 회사/개인마다 생각하는 클린코드의 방법이 조금씩 다를 것이다. 그래서 공부할수록 클린코드라는 개념을 특정지어서 설명하기 힘든 것 같다. 아래는 공부하기 위해 들었던 강의인데, 강사분도 클린 코드라는 개념을 특정짓지 말라고 강의 초반에 말씀하신다. 더 생각해보고 공부해봐야겠다..

클린코드 자바스크립트

자바스크립트를 위한 코드 스타일부터 습관 그리고 클린 코드에 대해 함께 고민해보고 그 이유에 대해 탐구하고 또 학습해보는 시간을 가집니다.

www.udemy.com

좋은 코드란 무엇일까?

‘성선설’에 기반하면 모든 개발자는 좋은 코드를 작성하고 싶으리라 생각한다. 누구나 관심 있어 하는 주제인 만큼 나 또한 여러 고민을 거듭해왔고 여태까지의 생각을 정리해보려고 한다.

jbee.io

React - Infinite Scroll 직접 구현해보기

김관장 — Thu, 1 Sep 2022 18:10:26 +0900

✅ 전에 React 무한 스크롤을 구현해 본 경험이 있는데, 최근에 해당 기능을 또 구현해 볼 기회가 생겨서 이참에 공부한 내용을 정리하고자 글을 작성합니다. (잘못된 정보가 있다면 말씀해주시면 감사하겠습니다.)

저는 테스트 데이터를 msw를 사용하여 데이터를 Mocking 하여 사용했습니다. (더보기 란에 간단한 설정법을 적어뒀습니다.)

msw 설치
npm install msw / yarn add msw

src 폴더 하위에 mocks 폴더 생성 후 browser.js, handlers.js 파일 만들기
index.js 에 mock 설정 코드 추가하기

/*  browser.js */
import { setupWorker } from 'msw'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)

/* handlers.js */

import {rest} from 'msw'

const pageData = Array.from({length: 50}).map((dr, idx) => {
    return {name: `${idx}`}
})

export const handlers = [
    rest.get("/api/getData", async (req, res, ctx) => {

        const p = Number(req.url.searchParams.get("page"));
        let returnData = {};

        returnData.data = pageData.slice(10 * (p - 1), 10 * p);
        returnData.page = p;
        returnData.hasNext = p < 5;

        await sleep(300);

        return res(ctx.status(200), ctx.json(returnData));
    }),
]

async function sleep(timeout) {
    return new Promise((resolve) => {
        setTimeout(resolve, timeout);
    });
}

// index.js에 추가할 코드
if (process.env.NODE_ENV === 'development') {
    const {worker} = require('./mocks/browser')
    worker.start()
}

Mocking 동작 확인

Infinite Scroll ?

무한 스크롤은 페이지 하단 영역까지 이동할 경우 새로운 데이터를 추가로 페칭하여 화면에 나타내어, 스크롤을 무한히 이동하며 새로운 데이터를 불러오는 방식입니다.
사용자 참여 및 콘텐츠 탐색이 쉽고, 특히 모바일 환경에서 유용하게 적용됩니다.
페이지 성능이 느려질 수 있으며, 특정 항목 검색 및 원하는 위치로 이동이 힘들다는 단점이 있습니다.
리액트에서 무한 스크롤을 구현하는 방법은 주로 scroll 이벤트를 사용하거나 기본 Web API로 제공되는 Intersection Observer를 사용하는 2가지 방법이 있습니다. (혹은 "더보기" 버튼과 같은 버튼 이벤트를 사용하는 경우도 있습니다.)

Scroll 이벤트로 구현하기

scrollTop은 요소의 처음부터 현재 화면에 보이는 부분까지의 높이입니다. 요소의 처음부터 얼마나 내려왔는지 알 수 있습니다.
scrollHeight는 요소에 들어있는 컨텐츠의 전체 높이입니다. (패딩과 보더 포함, 마진은 제외)
offsetHeight는 요소의 높이입니다. (패딩, 보더, 스크롤바 포함, 마진은 제외)
clientHeight는 요소 내부의 높이, 즉 사용자에게 보여지는 요소의 높이 입니다. (패딩 포함, 스크롤바, 보더, 마진은 제외)

구현 포인트 !

1. scroll이 영역의 끝에 닿았다고 판단하는 기준

· scrollTop + clientHeight >= clientHeight
=> 위 이미지를 보면 scrollTop(현재까지 내려온 위치), clientHeight(사용자에게 보여지는 높이)를 더한 값이 scrollHeight(요소 전체 높이)와 같거나 크면 스크롤이 영역의 끝에 닿았다고 판단할 수 있습니다.

2. 다음 데이터를 불러오는 로직

· 추가 데이터를 렌더링 할 로직 필요

(소스 코드는 더보기란 참고해주세요)

import React, {useEffect, useState, useRef} from "react";

const MainContainer1 = () => {

    const ViewportRef = useRef(null); // 스크롤 위치를 탐색 및 이벤트 처리를 위해
    const throttle = useRef(null); // 쓰로틀링 처리를 위해

    const [nextInfo, setNextInfo] = useState({
        hasNext: false,
        nextPage: 0,
    }); // 다음 데이터 존재 여부
    const [totalData, setTotalData] = useState([]); // 렌더링되는 전체 데이터
    const [isLoading, setIsLoading] = useState(false); // 새로운 데이터를 추가로 불러올 때 로딩처리를 위해

    useEffect(() => { // 스크롤 이벤트 정의
        ViewportRef.current.addEventListener("scroll", handleScroll);

        /*
            cleanup function ( 정리 함수 or 뒷 정리 함수 ) : 상태의 종료를 반환함수에 정의
                함수에 사용되었던 메모리 공간을 반환
                등록한 이벤트 리스너가 메모리 반환이 되지않아, 메모리 누수로 이어지는 현상을 항상 방지
         */
        return () => {
            ViewportRef.current.removeEventListener("scroll", handleScroll);
        };
    });

    useEffect(() => {
        callData(1); // 초기값 불러오기
    }, []);

    const callData = async (pageNum) => { // 데이터 추가로 불러오는 로직

        setIsLoading(true); //로딩 true

        const selectData = await fetch(`/api/getData?page=${pageNum}`, {
            headers: {
                "Content-type": "application/json; charset=UTR-8;"
            }
        }).then((res) => {
            if (res.status === 200) {
                return res.json();
            }
        }); // 데이터 불러오기

        setTotalData((prev) => [...prev, ...selectData.data]); // 불러온 데이터 추가

        setNextInfo((prev) => ({
            ...prev,
            hasNext: selectData.hasNext,
            nextPage: selectData.page + 1,
        })); // 다음 데이터 존재 여부 최신화

        setIsLoading(false);  //로딩 false

    }

    const handleScroll = () => { // 스크롤 이벤트

        if (!throttle.current) { // 쓰로틀링 처리

            throttle.current = setTimeout(async () => {

                const scrollHeight = ViewportRef.current?.scrollHeight;
                const scrollTop = ViewportRef.current?.scrollTop;
                const clientHeight = ViewportRef.current?.clientHeight;

                if (scrollTop + clientHeight >= scrollHeight && nextInfo.hasNext) { // 사용자 스크롤이 영역 하단에 위치할때 && 다음 데이터가 존재할때
                    await callData(nextInfo.nextPage); // 추가 데이터 불러오기 로직 실행
                }

                throttle.current = null;

            }, 300);

        }

    }

    return (
        <div style={{
            position: "absolute",
            width: '50%',
            height: '500px',
            overflow: 'auto',
        }} ref={ViewportRef}>

            {
                totalData.map((dr, idx) => {
                    return <div key={idx} style={{
                        width: '200px',
                        height: '160px',
                        margin: "20px",
                        border: "1px solid black"
                    }}> {dr.name} </div>
                })
            }

            {
                isLoading && <div> Loading </div>
            }

        </div>
    )

}

export default MainContainer1;

scroll 이벤트로 구현 시 단점
- 스크롤 시 수많은 이벤트가 동기적으로 실행될 수 있습니다. 페이지 내 요소가 각각의 목적(광고, 레이지 로딩, 무한 스크롤 등 )의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상응하는 콜백이 무수히 많이 실행 될 수 있으며 이는 메인 스레드에 큰 부하를 줄 수 있습니다.
- getBoundingClientRect (뷰포트에 상대적인 위치 정보를 제공하는 객체) 메서드는 호출 시 값(top, right 등)을 정확히 읽기 위하여 큐를 flush 하고 스타일을 적용함으로써 다 수의 reflow를 발생 시킬 수 있습니다.

* reflow : DOM이 화면에 표시되는 구조가 바뀔 때 또는 CSS클래스가 바뀔 때 일어나며, DOM 트리가 배치되는 위치를 전체적으로 다시 계산하여 화면에 출력하는 것을 의미합니다. 전체적인 위치를 다시 계산해야하므로 repaint 보다 자원 소모가 큽니다.

Intersection Observer API로 구현하기

scroll 이벤트의 단점을 해결하기 위해 주로 사용하는 것이 Intersection Observer API 입니다.
Intersection Observer API는 브라우저 Viewport와 Target으로 설정한 요소의 교차점을 관찰하여 그 Target이 Viewport에 포함되는지 구별하는 기능을 제공합니다.
new IntersectionObserver(callback, options) 를 통해 생성한 인스턴스로 관찰차를 초기화하고 관찰할 대상을 지정합니다.

상세 정보

1. callback 인수

· 관찰할 대상이 등록되거나 가시성(보이는지 안보이는지, threshold와 만날 때)에 변화가 생기면 콜백을 실행합니다.
· 콜백은 2개의 인수를 가집니다. ( entries, observer )

[ observer ] : 콜백이 실행되는 해당 인스터스를 참조합니다.

[ entries ] : IntersectionObserverEntry(루트요소와 타겟요소 교차의 상황) 인스턴스를 담은 배열입니다. 포함된 프로퍼티들은 모두 읽기 전용 입니다.

boundingClientRect
타겟 요소의 사각형(DOMRectReadOnly) 정보, reflow를 발생시키지 않음.

intersectionRect
타겟 요소의 가시성(DOMRectReadOnly)이 감지된 부분의 정보

intersectionRatio
타겟 요소가 루트 요소와 얼마나 교차하는지는지에 대한 정보

isIntersecting
타겟 요소와 루트요소가 교차하는 지 여부를 Boolean 값으로 반환

rootBounds
루트 요소의 사각형 정보(DOMRectReadOnly)를 반환, rootMargin 옵션 설정에 영향을 받음.

target
타겟 요소 반환

time
문서가 만들어진 표준 신간을 기준으로 타겟 요소와 루트 요소의 교차가 발생한 시간을 반환

2. option 인수

· root, rootMargin, threshold 속성값을 지정할 수 있습니다.

root
타겟의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체를 지정
타겟의 조상 요소로 지정하며, 지정하지 않거나 null(기본값) 인 경우 브라우저의 뷰포트가 기본 사용

rootMargin
여백을 이용해 루트 범위를 확장하거나 축소가 가능
기본값은 "0px 0px 0px 0px" 이며 단위 필수 입력 해야함

intersectionRatio
옵저버가 실행되기 위해 타겟의 가시성이 얼마나 필요한지 백분율로 표시
기본값은 Array 타입의 [0] 이지만, Number 타입의 단일 값으로도 작성 가능

Ex )
=> 0 : 타겟의 가장자리 픽셀이 루트 범위를 교차하는 순간 옵저버 실행
=> 0.3 : 타겟의 가시성이 30% 일 때 옵저버 실행
=> [0, 0.3, 1] : 타겟의 가시성이 0%, 30%, 100% 일때 모두 옵저버 실행

3. Methods

· IntersectionObserver.observe(targetElement) : 타겟 요소 관찰 시작
· IntersectionObserver.unobserve(targetElement) : 타겟 요소 관찰 중지
· IntersectionObserver.disconnect( ) : 인스턴스의 타겟 요소들에 대한 모든 관찰 중지
· IntersectionObserver.takerecords(targetElement) : IntersectionObserverEntry 인스턴스들의 배열을 리턴

(소스 코드는 더보기란 참고해주세요)

import React, {useEffect, useState, useRef} from "react";

const MainContainer1 = () => {

    const [totalData, setTotalData] = useState([]); // 렌더링되는 전체 데이터
    const [isLoading, setIsLoading] = useState(false); // 새로운 데이터를 추가로 불러올 때 로딩처리를 위해
    const [nextInfo, setNextInfo] = useState({
        hasNext: false,
        nextPage: 0,
    }); // 다음 데이터 존재 여부

    useEffect(() => {
        callData(1); // 초기값 불러오기
    }, []);

    const observerRef = useRef(null);

    const observer = (node) => {

        if (isLoading) return;

        observerRef.current && observerRef.current.disconnect();

        observerRef.current = new IntersectionObserver(async ([entry]) => {
            if (entry.isIntersecting && nextInfo.hasNext) {
                await callData(nextInfo.nextPage);
            }
        });

        node && observerRef.current.observe(node);

    };

    const callData = async (pageNum) => { // 데이터 추가로 불러오는 로직

        setIsLoading(true); //로딩 true

        const selectData = await fetch(`/api/getData?page=${pageNum}`, {
            headers: {
                "Content-type": "application/json; charset=UTR-8;"
            }
        }).then((res) => {
            if (res.status === 200) {
                return res.json();
            }
        }); // 데이터 불러오기

        setTotalData((prev) => [...prev, ...selectData.data]); // 불러온 데이터 추가

        setNextInfo((prev) => ({
            ...prev,
            hasNext: selectData.hasNext,
            nextPage: selectData.page + 1,
        })); // 다음 데이터 존재 여부 최신화

        setIsLoading(false);  //로딩 false

    }

    return (

        <div style={{
            position: "absolute",
            width: '50%',
            height: '500px',
            overflow: 'auto',
        }}>

            {
                totalData.map((dr, idx) => {
                    return <div key={idx} style={{
                        width: '200px',
                        height: '160px',
                        margin: "20px",
                        border: "1px solid black"
                    }}> {dr.name} </div>
                })
            }

            {
               nextInfo.hasNext && <div ref={observer}/>
            }

            {
                isLoading && <div> Loading </div>
            }

        </div>

    )

}

export default MainContainer1;

참고한 글

실전 Infinite Scroll with React

시작하며 안녕하세요. 카카오엔터프라이즈 워크코어개발셀에서 프론트엔드 개발을 담당하고 있는 Denis(배형진) 입니다. 약 1년 전, 저는 프레임워크의 선택, React vs Angular 이라는 포스팅을 통해

tech.kakaoenterprise.com

실무에서 느낀 점을 곁들인 Intersection Observer API 정리

실무에서 Intersection Observer API를 사용해보고 느낀 생각정리

velog.io

React - Virtual Scroll 직접 구현해보기 (part. 1)

김관장 — Tue, 23 Aug 2022 18:10:43 +0900

✅ React 가상 스크롤은 렌더링 최적화 방법 중 하나입니다. 라이브러리를 사용하여 구현해본 경험은 있으나, 직접 구현해보고 더 자세히 이해하기 위한 과정을 글로 작성합니다!

* ps) 가상스크롤의 대표적인 라이브러리는 react-virtualized와 react-window 가 있습니다.

Virtual Scroll ?

API를 호출하여 100, 1000개 이상의 데이터를 불러와 화면에 렌더링한다고 가정했을 때 스크롤이 뻑뻑하거나, 심할 경우 브라우저가 다운되는 현상이 발생합니다. 이는 DOM에 대한 작업이 브라우저에 큰 부하를 걸기 때문입니다.
이러한 현상을 개선하기 위해 Virtual Scroll 개념을 도입하면 많은 데이터라 하더라도 무리 없이 정상적으로 스크롤할 수 있습니다.

Virtual Scroll의 원리

- 전체 데이터(DOM)를 렌더링 하는 것이 아닌 현재 사용자가 보고 있는 화면의 스크롤 위치를 계산하여 해당 위치에 맞는 데이터(DOM)만 그려주는 원리입니다.

어떻게 구현할까 ?

가상 스크롤 개념에 대한 이미지를 보면서 생각해보겠습니다.

Total elemets
- 전체 데이터 높이만큼의 비어있는 박스 영역입니다.
- 실제로 전체 데이터를 렌더링하는 것이 아닌, 전체 데이터가 렌더링 되었다고 가정했을 때 그 높이만큼 계산하여 할당해주어야 합니다.
Rendered elements
- 렌더링을 한 데이터 영역입니다.
- 새롭게 렌더링 될 때마다 해당 영역의 위치를 계산하여 갱신시켜 주어야 합니다.
viewport
- 사용자가 실제로 보는 영역입니다.

구현 포인트 !

1. viewport가 최상위 컴포넌트, 그 하위로 Total elements, 마지막으로 Rendered elements 박스가 위치

· 사용자에게 보이는 영역인 viewport가 최상위 컴포넌트에 위치해야 합니다.
=> scroll 이벤트 처리가 필요합니다.

· 전체 데이터만큼의 높이를 가지는 Total elements 영역이 그 하위로 위치해야 합니다.
=> 보통 viewport 범위를 벗어나므로 viewport에서 overflow scroll 처리가 필요합니다.

· 실제로 렌더링되는 영역인 Rendered elements 영역이 마지막으로 위치합니다.
=> 새로운 데이터가 렌더링이 되면 스크롤의 위치 갱신이 필요합니다. 갱신하지 않으면 Total elements의 영역 최상단에 붙어있기 때문에 어느 순간 viewport에 아무것도 보이지 않게 됩니다.

2. viewport에서 스크롤의 위치에 따라 새로운 데이터를 렌더링 필요

· addEventListener("scroll", 함수) 이벤트 사용 필요
· 새로운 데이터를 렌더링 할 로직 필요

이제 코드로 살펴보겠습니다.

(소스 코드는 더보기란 참고해주세요)

1. Styled-Components를 사용하여 레더링 될 영역들의 CSS를 정의해줍니다.

import styled from 'styled-components';

export const Item = styled.div`
    height: 80px;
    margin: 10px;
    border: 1px solid black;
`;

export const Viewport = styled.div`
    position: absolute;
    width: 80%;
    height: 50%;
    overflow: scroll;
`

export const TotalElemets = styled.div`
    // position: relative;
    height:${props => props.height}px;
`

export const RenderedElements = styled.div`
    // position: absolute;
    // width: 100%;
    transform: translateY(
        ${(props) => props.offsetY}px
    );
`

2. 가상 스크롤을 적용할 간단한 컴포넌트 하나를 만들어줍니다.

( 저의 경우 간단하게 이미지 3개가 들어가는 div를 1000개 렌더링 하는 컴포넌트를 만들었습니다. )

import React, {useEffect, useState, useRef} from "react";
import {Viewport, TotalElemets, RenderedElements, Item} from "../Style/css";

const MainContainer1 = () => {

    const [totalData, setTotalData] = useState([]);

    useEffect(() => {
        const Dt = [];
        for (let i = 0; i < 1000; i++) {
            Dt.push(<Item key={`item_${i}`}>
                {i}
                <img width="100px" src={"https://cdn.lamanus.kr/wp-content/uploads/2018/08/28225854/google-2048x1536.png"}/>
                <img width="100px" src={"http://image.dongascience.com/Photo/2017/12/15130427942754.png"}/>
                <img width="100px" src={"https://biz.chosun.com/resizer/mY58GeufwPAZxi09EAgkrIqCIx4=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosunbiz/YGC6GZ2VCZF3LA2PW3CYPTJZYA.png"}/>
            </Item>);
        }
        setTotalData(Dt);
    }, []);

    return (
        <Viewport>
            <TotalElemets>
                <RenderedElements>
                    {
                        totalData
                    }
                </RenderedElements>
            </TotalElemets>
        </Viewport>
    )

}

export default MainContainer1;

예제 화면

3. 가상 스크롤 적용 !

import React, {useEffect, useState, useRef} from "react";
import {Viewport, TotalElemets, RenderedElements, Item} from "../Style/css";

const MainContainer1 = () => {

    const ViewportRef = useRef(null); // 스크롤 위치를 탐색하기 위해 필요

    const [totalData, setTotalData] = useState([]); // 전체 데이터
    const [dataRenderArr, setDataRenderArr] = useState([]); // 실제로 렌더링 할 데이터

    const [totalHeight, setTotalHeight] = useState(0); // 전체 데이터의 높이
    const [scrollTop, setScrollTop] = useState(0); // 현재 스크롤의 top 위치

    const curHeight = ViewportRef.current ? ViewportRef.current.clientHeight : 0; // 현재 Viewport 의 높이 (Viewport의 높이를 %로 주었기 때문에 따로 계산)
    const itemHeight = 100; // 렌더링되는 영역의 높이 (Item 태그의 경우 height 80px, margin 10px 로 총 80+10+10 = 100px 임)
    const nodePadding = Math.floor(curHeight / itemHeight) + 1; // 현재 화면에 보이는 아이템의 수

    const strIdx = Math.max(0, Math.floor(scrollTop / itemHeight) - nodePadding);
    const endIdx = strIdx + 2 * nodePadding + 1;
    /*
    strIdx, endIdx : 렌더링할 데이터 시작 idx(strIdx), 마지막 idx(endIdx)

    strIdx = Math.max(0, Math.floor(scrollTop / itemHeight) - nodePadding)의 의미
    - Math.floor(scrollTop / itemHeight) : 현재 Viewport 최상단에 보이는 데이터의 인덱스
    - nodePadding 은 현재 화면에 보이는 아이템의 수
    => 스크롤을 내렸을 때 Viewport 에 보이는 최상단 데이터가 화면에 보이는 아이템의 수를 넘어갈 때부터 인덱스를 구하여 새로운 데이터를 렌더링 해야함 !!

    endIdx = strIdx + 2 * nodePadding + 1의 의미
    - strIdx + nodePadding : 현재 보이지 않는 스크롤로 내린 데이터
    - strIdx + 2 * nodePadding : Viewport 로 보이는 데이터
    - + 1 을 해준 이유는 Viewport 의 마지막 데이터가 가끔 누락되는 경우가 있어서!
     */

    const offsetY = strIdx * itemHeight; // 갱신할 Y축 위치

    useEffect(() => {
        // 기본 데이터 만들기
        const Dt = [];
        for (let i = 0; i < 1000; i++) {
            Dt.push(<Item key={`item_${i}`}>
                {i}
                <img width="100px"
                     src={"https://cdn.lamanus.kr/wp-content/uploads/2018/08/28225854/google-2048x1536.png"}/>
                <img width="100px" src={"http://image.dongascience.com/Photo/2017/12/15130427942754.png"}/>
                <img width="100px"
                     src={"https://biz.chosun.com/resizer/mY58GeufwPAZxi09EAgkrIqCIx4=/616x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosunbiz/YGC6GZ2VCZF3LA2PW3CYPTJZYA.png"}/>
            </Item>);
        }
        setTotalData(Dt);
        //

        setTotalHeight(Dt.length * itemHeight); // 전체 높이

        ViewportRef.current?.addEventListener("scroll", handleScrollHeight); // scroll 이벤트 연결

    }, []);

    // 전체 데이터가 바뀌거나, strIdx 가 바뀌면 새로운 데이터를 렌더링 해줘야함
    useEffect(() => {
        setDataRenderArr(totalData.slice(strIdx, endIdx));
        console.log(strIdx, endIdx); // 콘솔로 인덱스 값을 체크하기위해
    }, [totalData, strIdx]);

    const handleScrollHeight = () => {
        if (ViewportRef.current) {
            setScrollTop(ViewportRef.current.scrollTop); // 현재 스크롤 위치를 갱신
        }
    };

    return (
        <Viewport ref={ViewportRef}>
            <TotalElemets height={totalHeight}>
                <RenderedElements offsetY={`${offsetY}`}>
                    {
                        dataRenderArr
                    }
                </RenderedElements>
            </TotalElemets>
        </Viewport>
    )

}

export default MainContainer1;

결과

4. 가상 스크롤 적용 전 후 비교

좌 : 적용 전, 우 : 적용 후

Chrome lighthouse로 분석해보면 performance 가 개선된 것을 확인할 수 있습니다.

더 생각해 볼 것들

scroll 이벤트를 계속 호출하며 검사를 할 필요가 있을까 ? (메모리 낭비, 메인스레드 부담)
모바일 환경에서 scroll 이벤트가 동작하지 않는데, 어떻게 수정할까 ?
미세한 화면 떨림 현상이 있는데 어떻게 수정할까 ?

공부하면서 여러 블로그 글을 읽어보고, 나름대로 구현을 해보면서 들었던 의문점들입니다. part. 2 에서는 이러한 의문점에 대해 개선해보고 생각한 내용들에 대해서 작성해보도록 하겠습니다.

정리 !

가상 스크롤은 많은 데이터를 렌더링 할 때 스크롤된 위치를 계산하여 그 위치에 해당하는 DOM만 그려주는 방식입니다.
렌더링 개선에 큰 효과 !

참고한 글

Implementing virtual scroll using react - TechBoxWeb

You might need to deal with a huge amount of data and that data need to be rendered on DOM.So here virtual croll comes for rescue

www.techboxweb.com

||Project1|| #5 Virtual List 직접 구현하기 (feat. useThrottle)

VirtualList를 구현하면서 어려웠던 부분을 추려본다.

velog.io