tonirr

[WEB] Window.postMessage()

tonirr — Fri, 19 Nov 2021 20:00:40 +0900

WebRTC로 화상 기능을 개발하면서 기존 창과 새 창 사이 메세지를 주고 받아야 하는 상황에서

Window.postMessage()를 통해 기존 창의 값을 참조할 수 있었다.

처음 postMessage를 사용하기로 하였을 때 창 간에 메세지를 주고 받는다는 것이 생소해서 서칭과정이 길었다.

이번 포스팅에서 Window.postMessage()의 개념과 예제를 상기시키면서 정리하고 이후 포스팅에서

React Hook에서 Window.postMessage()를 사용하여 개발한 과정 및 발생 이슈들을 정리해보려고 한다.

Window.postMessage()란?

window.postMessage() 메소드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있습니다.

일반적으로, 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호와 호스트을 공유하고 있을 때에("동일 출처 정책"으로도 불려 집니다.) 서로 접근할 수 있습니다. window.postMessage()는 이 제약 조건을 안전하게 우회하는 기능을 제공합니다.

MDN에서는 이렇게 설명하고 있다.

나는 기존 창과 새창 간에 통신할 때에 사용하였는데,이 경우 동일 근원 출처 정책으로 인해 기존 창과 새 창이 각각의 window를 가지고 있어 통신할 수 없는 것이 원칙이나 Window.postMessage를 사용하면 안전하게 기존 창과 새 창이 통신할 수 있다.

문법

아래 과정을 통해 하나의 window는 다른 window를 참조할 수 있다. 하나의 예시이고 참조 방식에 따라 방법은 달라진다.

targetWindow = window.opener 	// 새 창을 만들고 그 새창을 참조할 경우

targetWindow를 만든 후 아래 과정처럼 사용할 수 있다.

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow를 생성하는 방법은 아래와 같다. 필요한 상황을 골라서 사용하면 된다.

Window.open (새 창을 만들고 새 창을 참조할 때),
Window.opener (새 창을 만든 window를 참조할 때),
HTMLIFrameElement.contentWindow (en-US) (부모 window에서 임베디드된 <iframe>을 참조할 때),
Window.parent (en-US) (임베디드된 <iframe>에서 부모 window를 참조할 때),
Window.frames (en-US) + an index value (named or numeric).

이렇게 targetWindow를 생성한 후 다른 window에 보내질 데이터를 message 부분에 실어서 보낸다.

targetOrigin 에서는 targetWindow 의 origin을 지정하며 별도로 지정하지 않음("*")으로 지정하거나 URI를 작성한다.

디스페치 이벤트

아래 스크립트를 실행할 경우 메시지를 수신하는 window측에서 전달된 메시지를 받을 수 있다.

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

예제

새 창을 만들고 새 창을 참조하는 경우(Window.open)를 통해 이해해보자

/*
 * <http://example.com:8080>에 있는 윈도우 A의 스크립트:
 */

// 새 창을 참조하는 객체 popup을 만든다.
var popup = window.open(...popup details...);

// https://secure.example.net 도메인에 아래와 같은 메세지를 보낸다.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// http://example.com 도메인에 아래와 같은 메세지를 보낸다.
popup.postMessage("hello there!", "http://example.com");

// <http://example.com:8080>에서 메세지를 받는 함수
function receiveMessage(event)
{
  // origin 체크를 통해 message를 신뢰할 것인지 확인한다.
  if (event.origin !== "http://example.com")
    return;

  // event.source is popup
  // event.data 가 "hi there yourself!  the secret response is: rheeeeet!"
}
// <http://example.com:8080>에 이벤트 등록 한다.
window.addEventListener("message", receiveMessage, false);

/*
 * In the popup's scripts, running on <http://example.com>:
 */
function receiveMessage(event)
{
  //  origin 체크를 통해 message를 신뢰할 것인지 확인한다.
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source가 window.opener라면 event.data는 "hello there!"이 될 것이다.

  // event.origin은 <http://example.com> 즉 새창을 띄운 origin 창을 말하며 
  // origin 창에 아래 메세지를 보낸다. 
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

// <http://example.com>에 이벤트 등록을 한다.
window.addEventListener("message", receiveMessage, false);

서로 도메인이 다른 Controller Window와 Receiver Window가 message를 주고 받을 수 있다

다음 포스팅에서 React Hook 프로젝트에서 window.postMessage()를 사용하는 과정에서

이벤트 등록이 안되면서 메세지를 불러오지 못하거나 컴포넌트 이동중에 여러번 이벤트 등록되어 window message를 주고받는 과정에서 이슈가 발생하는 등의 시행착오를 하나씩 정리해보려고 한다.

참고

https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

https://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

[javascript] Promise개념과 활용

tonirr — Mon, 8 Nov 2021 19:37:57 +0900

Promise 란

Promise는 javascript안에 내장되어 있는 객체이며 비동기 적인 것을 수행할 때 콜백함수 대신 유용하게 사용할 수 있는 객체이다.

Promise의 state

Promise는 다음 중 하나의 상태를 가진다.

대기(pending): 연산을 수행중이거나 거부되지 않은 초기 상태
이행(fulfilled): 연산이 성공적으로 완료됨
거부(rejected): 연산이 실패함

Producer vs Consumer

Promise는 원하는 기능을 수행해서 해당 데이터를 만들어내는 Producer와 데이터를 소비하는 Consumer로 나뉘어진다.

Producer

const promise = new Promise(() => {
	setTimeout(() => {
    	// resolve('user id is ...')
        // reject(new Error('no network'));
    }, 2000);
});

Promise 객체를 생성하여 Promise에서 실행 되어야 하는 코드를 정의한다.

Promise 객체를 만드는 순간 executor 함수가 바로 실행되는데,

생성과 동시에 Promise 내에 정의한 setTimeout가 실행되고 setTimeout이 정상적으로 작동한다면 resolve함수가 반환되며 에러가 발생할 경우 reject함수가 반환된다.

Consumer

promise
	.then(value => {
		console.log(value);
	}).catch(error => {
    		console.log(error);
   	 }).finally(() => {
    		console.log('finally');
    	});

consumer 프로세스는 then, catch, finally로 나누어 설명할 수 있다.

promise 객체가 성공적으로 실행될 경우 then에서 resolve의 return 값을 반환받고

promise 객체가 에러를 발생시킬 경우 catch에서 reject의 return값을 반환받는다.

마지막으로 promise의 resolve와 reject에 관계없이 finally가 실행되면서 promise의 consumer 프로세스가 완료된다.

Promise Chaning

// 3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000);
});

fetchNumber
// 여기에서 num은 resolve에 파라미터로 전달된 값을 의미
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(num - 1), 1000);
    });
})
.then(num => console.log(num));

promise는 then에서 resolve를 통해 반환받은 값을 전달받아 계속적으로 처리할 수 있다.

첫번째 then에서 resolve에서 반환한 1을 num으로 전달받고 곱하기 2를 해준다.

두번째 then에서 첫번째 then에서 반환한 결과값 2를 num으로 전달받아 곱하기 3을 해준다.

세번째 then에서 두번째 then에서 반환한 결과값 6을 num으로 전달받아 새로운 Promise 생성자의 resolve에 값을 전달한다.

새로운 Promise 생성자의 resolve에서 num에 1을 빼주고 있으므로 최종적으로 반환되는 값은 5이다.

Promise를 사용한 Error Handling

Promise를 한꺼번에 여러개를 사용하다보면 어느 Promise객체에서 Error가 발생했는지 알 수 없는 경우가 있다.

이러한 경우를 대비해 하나의 Promise 객체 then마다 catch 함수를 바로 붙여서 에러가 발생하면 이렇게 처리해줘라는 과정을 덧붙이면 어디에서 에러가 발생했는지 직관적으로 알 수 있다.

const getHen = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('hen'), 1000);
    });
const getEgg = hen => 
    new Promise((resolve, reject) => {
        //setTimeout(() => resolve(`${hen} => egg`), 1000);
        setTimeout(() => reject(new Error(`error! ${hen} => egg`), 1000));
    });
const cook = egg => 
    new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${egg} => fri`), 1000);
    });

getHen()
    .then(getEgg)
    .catch(error => {
        return 'bread';
    })
    .then(cook)
    .then(console.log)
    .catch(console.log)

위 코드는 getHen, getEgg, cook 함수를 통해 각각 hen, egg, fri를 반환받는 Producer과정을 정의한 후

세 개의 함수를 then으로 묶어서 Consumer과정을 거친다.

만약 Consumer과정에서 적어도 하나의 함수에서 에러가 발생한다면 프로그램이 끝까지 실행되지 않고 에러를 발생시키고 종료될 것이다.

하지만 각각의 Promise의 then에 catch로 에러가 발생할 경우 이런 것을 실행해줘라는 명령을 덧붙인다면 단순히 에러를 발생시키고 프로그램이 종료되지 않고 에러가 발생된 함수에 대해서만 명령한대로 처리를 할 것이며 프로그램은 끝까지 실행될 것이다.

Promise.all

아래 코드에서 a와 b모두 Promise로 정의된 비동기일 때 Promise.all 메소드에 인자로 넣어주면 인자로 넣어준 모든 비동기(promise)가 실행완료된 시점에 callback을 실행하도록 할 수 있다.

let a = Promise.resolve(10);
let b = Promise.resolve(20);
Promise.all([a, b]).then(function([resA, resB]) {
	console.log(resA + resB);	// 30
});

사용자가 화면에 진입했을 때 여러개의 api를 통해 데이터를 받아와서 모든 api 통신과 처리가 완료된 후 완성된 화면을 사용자에게 노출하여야 하는 상황에서 Promise.all을 사용하였다.

처리중일 경우 로딩바를 화면에 노출시키고 Promise.all이 완료되었을 때 사용자에게 화면을 노출하는 방식으로 구현하였다.

Promise.all을 찾다가 Promise를 정확하게 다시 공부해야 겠다는 생각이 들어 포스팅을 작성하게 되었는데

async와 await의 개념에 대해서도 더 깊게 공부해야겠다는 생각이 들었다.

[WEB] window, DOM, BOM

tonirr — Tue, 2 Nov 2021 22:24:29 +0900

window

window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다.

javascript의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메소드는 전역 함수이고 window 객체의 프로퍼티는 전역 변수가 된다. 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.

window의 구조

window객체는 2가지 역할을 한다.

첫번째는 javascript의 전역 객체로 동작하는 역할이며 두번째는 브라우저 창(browser window)을 대변하고 이를 제어할 수 있는 메서드를 제공하는 역할이다.

window 객체의 구조

window 객체를 전역 객체로 사용

function sayHi() {
  alert("안녕하세요.");
}

// 전역 함수는 전역 객체(window)의 메서드임
window.sayHi();

브라우저 창을 대변하는 역할

alert(window.innerHeight); // 창 내부(inner window) 높이

문서 객체 모델(DOM)

문서 객체 모델(Document Object Model, DOM)은 웹페이지 내의 모든 콘텐츠를 객체로 나타내준다.

document 객체는 페이지의 기본 진입점 역할을 하며 document 객체를 이용해서 페이지 내에 있는 것들은 무엇이든지 변경할 수 있다.

// 배경을 붉은색으로 변경하기
document.body.style.background = "red";

// 1초 후 원상태로 복구하기
setTimeout(() => document.body.style.background = "", 1000);

브라우저 객체 모델(BOM)

브라우저 객체 모델(Browser Object Model, BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타낸다.

alert(location.href); // 현재 URL을 보여줌
if (confirm("위키피디아 페이지로 가시겠습니까?")) {
  location.href = "https://wikipedia.org"; // 새로운 페이지로 넘어감
}

window 객체에서 제공하는 BOM은 MDN 속성을 보면 된다.

예를 들어 navigator 객체는 브라우저와 운영체제에 대한 정보를 제공하는 것으로 navigator.userAgent 는 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등)정보를 알려준다.

location 객체는 현재 URL을 읽을 수 있게 해주며 새로운 URL로 변경할 수 있게 한다.

참고문서

https://developer.mozilla.org/ko/docs/Web/API/Window

https://sushmithavootukuri.medium.com/difference-between-window-document-and-screen-in-javascript-757a65b25e9a

https://ko.javascript.info/browser-environment

[javascript] Intersection Observer API

tonirr — Sun, 17 Oct 2021 20:28:18 +0900

Intersection Observer란?

Intersection Observer란 브라우저 뷰포트(Viewport)와 선택된 요소(Element)의 교차점을 관찰하는 API이다. 쉽게 말하면 선택된 요소가 사용자 화면에 현재 보이는지 보이지 않는지를 구별하는 기능을 제공한다.

Intersection Observer의 생성과 구조

new IntersectionObserver()를 통해 인스턴스(io)를 생성, 관찰자(Observer)를 초기화, 관찰할 대상(Element)을 지정하여 사용할 수 있다. 생성자는 2개의 인수(callback, options)를 가진다.

const io = new IntersectionObserver(callback, options) // 관찰자 초기화
io.observe(element)	// 관찰할 대상(요소) 등록

callback

관찰할 대상이 등록되거나 가시성에 변화가 발생하면 관찰자는 콜백을 실행하며 콜백은 2개의 인수(entries, observer)를 가지고 있다.

entries, observer

entries는 IntersectionObserverEntry 인스턴스의 배열이며 IntersectionObserverEntry는 읽기 전용(Read only)의 다음 속성들을 포함하고 있다.

boundingClientRect: 관찰 대상의 사각형 정보(DOMRectReadOnly)
intersectionRect: 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
intersectionRatio: 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)
isIntersecting: 관찰 대상의 교차 상태(Boolean)
rootBounds: 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
target: 관찰 대상 요소(Element)
time: 변경이 발생한 시간 정보(DOMHighResTimeStamp)

observer는 콜백이 실행되는 해당 인스턴스를 참조한다.

const io = new IntersectionObserver((entries, observer) => {
  console.log(observer)
}, options)

io.observe(element)

options

root, rootMargin, threshold

root는 타겟의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체(루트 요소)를 지정한다. 타겟의 조상 요소여야 하며 지정하지 않거나 null의 경우 브라우저의 뷰포트가 기본적으로 사용된다.

const io = new IntersectionObserver(callback, {
  root: document.getElementById('my-viewport')
})

rootMargin은 바깥 여백(margin)을 이용해 root범위를 확장 또는 축소할 수 있다.

기본값은 0px 0px 0px 0px이며 단위를 꼭 입력하여야 한다.

const io = new IntersectionObserver(callback, {
  rootMargin: '200px 0px'
})

threshold는 옵저버가 실행되기 위해 타겟의 가시성이 얼마나 필요한지 백분율로 표시하는 것으로 기본값은 Array타입의 [0]이지만 Number 타입의 단일 값으로도 작성할 수 있다.

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

const io = new IntersectionObserver(callback, {
  threshold: 0.3 // or `threshold: [0.3]`
})

Methods

observe(), unobserve()

observe()는 대상 요소의 관찰을 시작하는 메소드이다.

const io = new IntersectionObserver(callback, options)

const div = document.querySelector('div')

io.observe(div) // DIV 요소 관찰

unobserve()는 대상 요소의 관찰을 중지하는 메소드이다.

관찰을 중지할 하나의 대상 요소를 인수로 지정해야 하며 해당 인스턴스가 관찰하고 있지 않은 대상 요소가 인수로 지정된 경우 아무 동작도 하지 않는다.

const io1 = new IntersectionObserver(callback, options)
const io2 = new IntersectionObserver(callback, options)

// ...

io1.observe(div)
io2.observe(li)
io2.observe(h2)

io1.unobserve(h2) // nothing..
io2.unobserve(h2) // H2 요소 관찰 중지

Intersection Observer 적용

나는 Intersection Observer를 무한 스크롤 기능을 구현하는데 사용하였다.

관찰 등록과 관찰 중지

처음 API통신을 해서 가져온 데이터를 원하는 만큼만 지정하여 Intersection Observer를 사용하여 관찰 요소로 등록하였다.

callback에서 이미 보여진 이미지들은 unobserve()를 통해 관찰 중지시켰다.

const options = {threshold: 0};
// 관찰 대상이 등록되거나 가시성에 변화가 생길 경우 callback을 실행
const callback = (entreis, observer) => {
    entreis.forEach((entry) => {
        if(entry.isIntersecting) {  // 관찰 대상이 보일 경우
            observer.unobserve(entry.target);   // 관찰 대상을 관찰 중지함
            entry.target.src = entry.target.dataset.src;    // entry의 data-src를 img 태그 src에 저장                     
        }
    })
};
const io = new IntersectionObserver(callback, options);
// lazy 클래스를 가지고 있는 element를 모두 가져옴
const lazyImages = Array.from(document.getElementsByClassName("lazy"));
console.log("lazyImages: ", lazyImages);        
lazyImages.forEach((image) => {
    io.observe(image); // 각각의 element를 관찰
})

관찰 대상 업데이트

무한스크롤 기능의 경우 스크롤이 화면 하단에 닿은 경우 다음 데이터셋이 기존 데이터셋에 이어져서 사용자에게 보여져야 한다.

이 경우 Intersection Observer 인스턴스에 새로운 데이터셋을 관찰 등록해 주어야 한다.

[javascript] Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')

tonirr — Mon, 11 Oct 2021 14:15:55 +0900

Vanilla JS로 컴포넌트 방식을 사용하여 웹페이지를 만들던 중

appendChild를 통해 부모 컴포넌트에 자식 컴포넌트를 append 하는 과정에서 아래와 같은 에러가 발생했다.

해당 글에서 칭하는 컴포넌트는 javascript class를 말한다.

Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')

자식 컴포넌트 생성시에 인자를 넘겨주어야 하는 상황이었는데

해당 에러때문에 부모 컴포넌트에 자식 컴포넌트가 append 되지 않았다.

원인은 부모 컴포넌트에서 자식 컴포넌트를 생성시 인자를 넘겨줄 때 중괄호를 누락시켰기 때문에 발생했고

아래 코드에 적은 대로 $target이 아닌 ${target}으로 넘겨 주어야 했다.

export default class App {
    constructor($target){        
        const searchSection = new SearchSection($target); 
        // $target(x), ${target}(o)
    }
}

짚고 넘어갈 것은 $target으로 넘겨주면 안되는 것이 아니라

자식컴포넌트에서 받는 방법에 따라 넘겨주는 방법이 달라진다는 것이다.

부모 컴포넌트에서 ${target}으로 넘겨주면 자식 컴포넌트에서도 ${target}으로 받아야 하며

부모 컴포넌트에서 $target으로 넘겨주면 자식 컴포넌트에서도 $target으로 받아주어야 한다.

// 부모 컴포넌트
export default class App {
    constructor($target){
    	// 자식 컴포넌트 생성
        const searchSection = new SearchSection({$target}); // {$target}으로 넘겨줌
    }
}

// 자식 컴포넌트
export default class SearchSection {
	// 자식 컴포넌트 생성자
    constructor({$target}) {  // {$target}으로 받음
        this.section = document.createElement("section");
        $target.appendChild(this.section);
        this.render();
    }
    
    render() {
      const wrapper = document.createElement("div");
      this.section.appendChild(wrapper);
    }
}

결론은 일관성있게 적으면 된다.

[javascript] setTimeout과 setInterval의 차이

tonirr — Fri, 17 Sep 2021 06:27:15 +0900

setTimeout

동작이 한번 일어남
실행중 다른 setTimeout으로 인해 함수가 호출되어도 기존에 실행되는 함수에 영향을 주지 않음

let timer = setTimeout(function(){}, time); // 사용 
clearTimeout(timer); // 종료

setInterval

기본 동작이 반복적으로 일어남
실행중 다른 setInterval으로 인해 함수가 호출되면 기존에 실행되는 함수는 종료됨

let timer = setInterval(function(){}, time); // 사용
clearTimeout(timer); // 종료

[React] useEffect 사용법과 작동방식

tonirr — Fri, 17 Sep 2021 06:00:58 +0900

useEffect(() => {}, []);

useEffect(() => { 
	console.log("컴포넌트 나타남"); 
    return () => { console.log("컴포넌트 사라짐"); }; 
}, []);

컴포넌트 처음 로드 시

useEffect(() ⇒ {}, [value]);

useEffect(() => {
    console.log("value 컴포넌트 나타남");
    return () => {
      console.log("value 컴포넌트 사라짐");
    };
  }, [value]);

컴포넌트 처음 로드 시

컴포넌트 로드 후 title 수정 시

Server-Side Rendering과 Client-Side Rendering에 대한 개념 이해

tonirr — Mon, 30 Aug 2021 22:56:16 +0900

Server-Side Rendering(SSR)이란?

서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식

JSP/Servlet 아키텍처에서 이 방법을 사용하였음

장점

사용자가 처음으로 컨텐츠를 볼 수 있는 시점을 앞당길 수 있음

검색엔진최적화 SEO(search engine optimization) 적용이 용이

단점

모든 요청에 관해서 필요한 부분만 수정하는 것이 아니라 완전히 새페이지를 로딩하고 보여줌

매 요청하다 전체를 로딩해서 CSR보다 비교적 느림

대역폭(bandwidth) 을 많이 사용함 대역폭(bandwidth) 이란?
어떤 네트워크 유형에서 최대 데이터 전송 비율(시간당 전송량)을 말하며, 보통 초당 비트수(bps)로 이야기함
많이 사용되는 대역폭의 뜻은 네트워크를 통해 전송되는 데이터의 양

사용자 경험 좋지 않음

Client-Side Rendering(CSR)이란?

서버가 json파일만 보내주고 html을 그리는 것은 클라이언트 측에서 js가 수행하는 방식

서버에서 빈 html 문서를 받고 js를 다운로드 받고 js를 작동해서 api로부터 데이터를 가져오고(fetch) 콘텐츠를 보는 방식

점점 더 복잡해지는 웹페이지를 구현하기 위해 전통적인 방식인 SSR보다는 CSR로 웹을 구현하는 경우가 많아짐

장점

CSR은 사용자의 행동에 따라 필요한 부분만 다시 읽어들여 SSR보다 조금 더 빠른 렌더링이 가능함

page 전체를 요청하지 않고 페이지에 필요한 부분만 변경하기 때문에 모바일 네트워크에서도 빠른 속도로 렌더링 가능

lazy loading 지원 lazy loading 이란?
페이지 로딩 시 중요하지 않은 리소스의 로딩을 늦추는 기술

단점

Googlebot과 Search console에 검색 노출이 되지 않음 → 브라우저가 없으므로 html만 가져와서 검색에는 노출되지 않음
페이지를 읽고 javascript를 읽은 후 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여지기 때문에 초기 구동 속도가 느림

Uploaded by Notion2Tistory v1.1.0

[React] Create React App 프로젝트 구조

tonirr — Fri, 13 Aug 2021 03:37:29 +0900

create-react-app 프로젝트의 구조

React 개발환경 설치에서 생성한 create-react-app 프로젝트의 기본 구조에 대해 알아보겠습니다.

create-react-app으로 프로젝트를 생성하면
기본적으로 node_modules, public, src, .gitignore, package-lock.json, package.json 파일이 생성됩니다.
위부터 차례대로 살펴보겠습니다.

node_modules

설치된 외부 라이브러리가 포함되어 있으며 라이브러리 구조를 파악할 수 있습니다.

node_modules

create-react-app을 생성하면 node_modules 폴더에 기본 라이브러리가 추가되어 있습니다.
추가적으로 라이브러리가 필요할 경우 npm install 명령어를 통해 설치할 수 있습니다.

npm package 추가 방법

vs code 사용 시 새 터미널을 열고 아래 명령어를 입력합니다.
터미널 열기 → vscode 메뉴 - 터미널 - 새 터미널

npm install --save 'package name'

npm install 명령어 관련 문서 → npm-install | npm Docs

위 명령어를 통해 node_modules에 라이브러리를 설치할 수 있습니다

public

사용자에게 배포할 때 외부적으로 보여지는 대표적인 파일들이 포함되어 있어요.
index.html, logo.png, robots.txt, favicon.ico등 정적 요소들이 포함

src

직접 프로그래밍 하는 소스 코드가 포함되어 있습니다.
index.js, App.js, index.css, App.css등 동적 요소들이 포함
대부분 소스 코드 작성은 src 폴더에서 진행합니다.

.gitignore

git에 추가하고 싶지 않은 파일을 해당 파일에 기재합니다.
일반적으로 node_modules(외부 라이브러리 모음 폴더) .env(설정 파일) 등이 포함됩니다.

.gitignore

package.json

npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰이고 있는 라이브러리 버전 등이 명시되어 있습니다.
npm install 명령어를 통해 라이브러리를 추가하고 버전을 업데이트 합니다.

package.json

dependencies (line:5)
- 프로젝트에 설치된 외부 라이브러리 명세서
  “@testing-library/jest-dom”: “^5.14.1” 에서
  “@testing-library/jest-dom”는 패키지명을 의미하며 “^5.14.1”는 설치된 버전을 의미 합니다.
scripts (line:15)
- 프로젝트에서 사용하고 있는 명령어가 포함되어 있음
  “start” : “react-scripts start”
  npm start로 실행할 경우 react-scripts 라이브러리의 start.js가 실행됩니다.
  start.js는 src/index.js를 엔트리로 하는 소스 파일을 번들링하고 browser에 띄웁니다.

package-lock.json

npm을 사용해서 node_modules 트리나 package.json 파일 수정 시 자동 생성되는 파일
파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있어 외부 라이브러리 버전 충돌 시
정상작동하였던 시점의 버전이 설치되어 이슈를 방지할 수 있음

오류 방지를 위해 package.json과 함께 저장소에 해당 파일을 포함해서 커밋해야 합니다.

README.md

프로젝트에 대해 설명하는 내용이 포함되어 있음

[React] Class vs Function component

tonirr — Mon, 2 Aug 2021 21:26:32 +0900

React는 컴포넌트들로 이루어져 있습니다.
컴포넌트를 만드는 방법은 대표적으로 Class를 사용하는 방법과 Function을 사용하는 방법이 있습니다.
각각의 특징에 대해 알아보도록 하겠습니다.

Class 컴포넌트 - React에서 제공하는 컴포넌트를 extends하여 사용

Class component

state

Class에 포함되는 데이터가 저장되는 객체입니다.
state가 변경되면 render()가 호출되면서 컴포넌트를 다시 그립니다.

render()

render()는 클래스 컴포넌트에서 반드시 정의해야 하는 메서드입니다.
React에서 정의한 컴포넌트, 여러개의 엘리먼트를 묶어 표시할 수 있는 Fragment등이 render()에 포함됩니다.
브라우저와 직접적인 상호작용을 하지 않습니다.

lifecycle methods

lifecycle methods란 컴포넌트가 사용자에게 보여지거나 없어질 때, 업데이트 되었을 때, DOM tree에 올라갔을 때 등의 특정 시점에 따라 코드가 실행되도록 하는 메소드 입니다.

자주 사용되는 lifecycle method

1. 마운트

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 시점
render()
componentDidMount()
- 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다.
- DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.

2. 업데이트

props 또는 state가 변경되는 시점
render()
componentDidUpdate()
- 해당 메소드는 컴포넌트 업데이트가 일어난 직후에 호출됩니다.
- 이 메서드는 최초 렌더링에서는 호출되지 않습니다.

3. 마운트 해제

컴포넌트가 DOM상에서 제거되는 시점
componentWillUnmount()
- 해당 메소드는 컴포넌트가 마운트 해제되어 DOM에서 제거되기 직전에 호출됩니다.
- 메서드 내에서 타이머 제거, 네트워크 요청 취소 요청 등을 수행할 수 있습니다.

Class 컴포넌트는 언제 사용할까?

컴포넌트가 데이터를 소유하고 있고 주기적으로 업데이트 되어야 한다면 Class를 사용하는 것이 좋습니다.

Function 컴포넌트 - 함수로 컴포넌트를 구현

Function component

Fucntion 컴포넌트에는 state와 lifecycle methods가 존재하지 않습니다.

state와 lifecycle methods가 왜 존재하지 않을까?
함수는 한 가지의 기능(업무)을 수행하는 단위이기 때문에 state객체나 method가 존재하지 않습니다.

그러나,
React 16.8 version부터 Hook이 도입되면서 Function 컴포넌트에서도 state와 lifecycle method를
사용할 수 있게 되었습니다! 이로 인해 Class 컴포넌트에서만 사용할 수 있던 state와 lifecycle method
뿐만 아니라 여러 기능들을 사용할 수 있게 되었습니다.
현재에는 Function 컴포넌트 방식에서는 대부분 Hook을 함께 사용하고 있습니다.

Hook은 왜 도입 되었을까?
기존 Class 컴포넌트에서 가능한 기능들을 가능할 수 있도록 해줍니다.
Class는 Function 컴포넌트보다 어렵습니다.
class의 경우 this가 필요하여 데이터 바인딩 이슈가 발생할 수 있습니다.
Functional programming이 트렌드화 되면서 React에서도 적용을 시도하였습니다.

Class 컴포넌트 대신 Hook만 배워도 될까?
Hook이 많은 장점을 가지고 있지만 이미 시장에 나와있는 상품들 중에는 Class로 작성된 것들이 많기 때문에
Class형도 숙지하는 것이 좋습니다.

Function 컴포넌트는 언제 사용하나요?

컴포넌트에 state가 없고 항상 정적으로 데이터가 표기된다면 간단하게 Function방식을 사용하는 것이 좋습니다.